Android菜鸟实训的第二天--视图容器组件Android中的布局的讲解。

￡神魔★判官ぃ 2022-08-18 08:20 171阅读 0赞

第二天才真正开始讲解Android编程的开始，今天讲解的是关于Android的UI界面的编程，大家都知道Android的UI界面，在Android开发中占很大的比重。但是感觉Android UI的编程有点杂乱，个人感觉分类是最好的方法，把他们记住。废话不多说。

今天主要讲解的是：**视图容器组件ViewGroup及其子类也就是Android中的布局的讲解**

**1、LinearLayout（线性布局）**

LinearLayout是Android中最简单的一种布局方式了，下面是线性布局中常用的属性个人认为是线性布局中的重点吧。

默认排列方式（orientation)：是水平排列的horizontal，垂直排列的Vertical  
gravity:表示该组件其中的内容的对齐方式（也即是组件中的内容的对齐方式）  
 layout\_gravity:表示该组件相对父容器的对齐方式（也即是该组件的对齐方式）  
layout\_weight是一个非常重要的属性，个人可以这样说，layout\_weight属性为线性布局存在起到了重要的作用，结合Layout\_weight控制在布局文件中的相对大小。别小看小小的权重，它的分配屏幕尺寸的原理，可不简单哦，个人以前写过权重分配原理的简单解析，可以去看看，有助于你更好了解权重这个属性。

权重的适用的情况：个人认为在有一些组件需要去平均配屏幕的宽度或者高度的时候，以及确定组件与组件按一定的比例去分配屏幕的尺寸的时候需要使用到权重。

注意:说到线性布局还有一定要注意，细心的人会发现线性布局中有些对齐方式是没有作用的，比如定义的orientation为水平，那么你会发现你的对齐方式left和right会不起作用，如果是垂直的方向你会发现top和bottom会不起作用。

**2、盒子模型(这是很重要布局模型的概念，它不仅在网页布局中起到很大作用，在Android中一样有很大的作用)**

盒子模型：它的作用更加有助于你去理解和使用margin和padding和border：

组件边框的宽度或距离：border

组件中的内容离组件的内边框的距离:padding(会影响组件的大小)  
组件的外边框与组件的外边框的距离的距离：margin(不会影响组件的大小只会影响组件的位置)

**3、FrameLayout（单帧布局）**

FrameLayout，覆盖前一个子控件的上层，重叠的概念，单帧布局有种层级的概念，上面的组件会把下面的组件的覆盖掉，如果我们遇到类似

卡牌切换的效果，可以使用单帧布局，或者在注册或者登陆的时候中的EditText插入图片

注意：单帧布局中没有gravity属性，主要放在容器的左上角

android:foreground:设置该帧布局容器的前景图像  
android:foregroundGravity:设置前景图像显示的位置

测试案例:

测试效果：

![Center][]

利用FrameLayout实现EditText左边图片的插入效果:

测试代码:

![Center 1][]  
**4、RelativeLayout（相对布局）**  
相对布局应该是Android中最常用的布局了，因为运行起来非常灵活，它基本上可以解决Android中80%以上的布局问题，相对布局顾名思义首先得找到一个相对点

这个相对点可以是组件可以是布局。相对于组件(容器或者其他的组件)进行相对布局。必须设置一定的参数  
align...：表示对齐方式

位置方向属性(这个是首先第一步要设定的大概确定所在的位置和方向)：上边(above)下边(below)左边(toleftof)右边(toRightof)

接着就是通过align...等属性确定对齐方式，注意：如果相对布局不添加任何的参数，就是个单帧布局

注意：  
使用相对布局思路：首先确定要添加组件相对参照物的位置方向：上边(above)下边(below)左边(toleftof)右边(toRightof)属性值：id  
然后，再去判定它相对于参照物的对齐方式上对齐(layout\_align\_Top),下对齐(layout\_align\_Bottom)左对齐(layout\_align\_Left)右对齐(layout\_align\_right)  
最后，判定是否相对与父容器对齐方式(layout\_align\_Parent),属性值：true/false

这里就以梅花布局简单分析下，相对布局的思路：

测试代码：

测试结果及分析:

![Center 2][]

我们都知道相对布局，必须要有一个相对点，并且开始，每个图片是重叠显示在屏幕的左上角，故此我们可以确定组件的位置，让它位于父容器的正中间的位置，然后我针对中间的父容器的四个方向画了四根基准线，假如现在再来一个组件要放在中间组件的正上面：此时的思路可以这样：首先确定新来的组件相对于中间组件的方向，明显是上方，此时就设定一个layout\_above属性，并且设置所在的id就是中间组件的id，设完该属性后，你在布局文件会发现，该组件就会从左上角，向下移动，移动到该组件的底部与基准线对齐与top那根基准线，但是它还是在中间组件的左边，这时候就要设置align对齐方式，只要设置右对齐即可，使得新来的组件的右边与中间组件right基准线对齐即可。然后其他的相同思路即可。  
**5、TableLayout（布局）**

它继承于线性布局，有行有列:  
TableRow 代表行  
其中每个组件自成一列  
组件可以不写高度和宽度  
stretchColumns指定拉伸的列号，\*表示全部，序号从0开始，表示第一列  
collapseColumns="0"隐藏的列号，在使用表格布局一般都存在分割线，分割线可以使用一个View来实现设置背景颜色，指定很小的宽度或者高度来实现

测试代码:

测试结果:

![Center 3][]

**5、TabHost（选项卡布局）**

虽然TabHost已经被淘汰了，但是它真正实现的思想和原理还是值得我研究的，不管是现在VIewPager+Fragment切换选项卡的效果，学会了TabHost选项卡原理有助于后期学习其他效果。

1、TabHost:代表顶部的标签和下部卡片复合组件  
2、TabWidget：代表便签  
3、TabSpec：代表卡片（单帧布局）

实现选项卡的步骤;

1、写布局文件--->TabWidget  
\--->FrameLayout  
 (利用 TabHostLayout作为根元素，然后里面整个包裹一个垂直的线性布局，在该线性布局放一个TabWidget和FrameLayout)  
2、编写TabActivity,重写onCreate  
3、获取TabHost，创建TabSpec卡片  
4、将卡片放在TabHost中

实现选项卡的原理:

它的布局主要外层根元素是个TabHost里面包裹一个线性布局，顶部是TabWIdget（也即是标签区域），下面就是一个帧布局，主要用于放多张卡片重叠存放，因为单帧布局具有重叠的特性，当我切换顶部的标签时，下面的对应卡片就会更换类似于翻牌一样，把原来翻过去，显示当前的卡片。

布局文件:注意：在写布局文件时候，TabHost和TabWidget和FrameLayout中设置的id不能自定义，而是Android系统自己指定了的，

TabHost--->"@android:id/tabhost" TabWidget--->"@android:id/tabs" FrameLayout-->"@android:id/tabcontent"

<?xml version="1.0" encoding="utf-8"?>
    <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </TabWidget>
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
            </FrameLayout>
        </LinearLayout>
    
    </TabHost>

//1)获取TabHost组件  
 tabhost=getTabHost();  
//2)创建卡片  
TabSpec s1=tabhost.newTabSpec("一");//"一"为了区别不同的卡片，而设定的标识符，为了让TabHost辨别不同的卡片  
//3）创建卡片的内容和标签的名字  
s1.setContent(new Intent(this, TableActivity.class));//设置下面显示的内容  
s1.setIndicator("表格布局");//设置标签名  
tabhost.addTab(s1);//将这个卡片放入到Tab中即可

实现的Activity:

//设置TabHost顶部的标签--->setIndicator;设置TabHost的卡片---><span style="font-family: Arial, Helvetica, sans-serif;">setContent</span>

public class TabHostActivity extends TabActivity {
    	private TabHost tabhost;
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		// TODO Auto-generated method stub
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_tabhost);
    		//1)获取TabHost组件
    		tabhost=getTabHost();
    		//2)创建卡片
    		TabSpec s1=tabhost.newTabSpec("一");//为了区别不同的卡片，而设定的标识符，为了让TabHost辨别不同的卡片
    		//3）创建卡片的内容和标签的名字
    		s1.setContent(new Intent(this, TableActivity.class));
    		s1.setIndicator("表格布局");
    		tabhost.addTab(s1);
    		TabSpec s2=tabhost.newTabSpec("二");
    		//3）创建卡片的内容和标签的名字
    		s2.setContent(new Intent(this, FrameActivity.class));
    		s2.setIndicator("单帧布局");
    		tabhost.addTab(s2);
    		TabSpec s3=tabhost.newTabSpec("三");
    		s3.setContent(new Intent(this, TestRelativeActivity.class));
    		s3.setIndicator("相对布局");
    		tabhost.addTab(s3);
    		TabSpec s4=tabhost.newTabSpec("四");
    		s4.setContent(new Intent(this, RelativeActivity.class));
    		s4.setIndicator("相对布局测试");
    		tabhost.addTab(s4);
    	}

这就是第二天实训关于Android布局中个人学习到以及个人学习后的总结。

[Center]: /images/20220731/b1cc2ad158ff49878bb4fefb248f4eba.png
[Center 1]: /images/20220731/7771f0566c8644afb6d0366dec3171f4.png
[Center 2]: /images/20220731/710020fdb69f417982ac08d9f0a901f6.png
[Center 3]: /images/20220731/fb97350f038643b0beec3bb72d4f8ca9.png