Android布局——线性布局、相对布局、内外边距

ViewGroup

什么是ViewGroup？

通俗的来说，ViewGroup就是一个放置View（以及ViewGroup）的容器。一般不直接使用，最常用的是其派生类Layout(布局)。

Android官方描述为：

在android APP中所有的UI界面都是由View和ViewGroup的对象组成的。View是一个用于在屏幕上绘制能够与用户交互事物的对象。ViewGroup则是一个用于存放其他View（以及ViewGroup）对象的布局容器。Android提供了一组 视图 和 ViewGroup 子类提供您常见的输入控件(如按钮和文本 字段)和各种布局模型(如线性或相对布局)。

视图层次：

LinearLayout(线性布局)

LinearLayout是android中最常用的一种布局，多在界面布局相对简单，没有太过于复杂的嵌套时使用。顾名思义，就是所有的组件都按照预先制定的排列方式，排列在一条线上，谁也不会覆盖掉谁。但是，当组件的显示内容超出边界时，会出现内容的丢失。

常用属性

android:orientation——布局中组件排列方式，horizontal（水平）、vertical（垂直）
android:gravity——控制组件子元素的对齐方式
android:layout_gravity——控制该组件在父容器中的对其方式
android:layout_width——布局的宽度，wrap_content（自适应）、match_parent（充满父容器）或者fill_parent。
android:layout_height——布局的高度，同上。
android:background——布局的背景颜色

在下面的代码中，在一个主布局中定义了三个子布局，分别用于演示LinearLayout 的水平排列、垂直排列、组件对齐方式。
 

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/darker_gray">
 
    <linearlayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="160dp" android:background="@android:color/holo_green_light">
        <textview android:text="垂直放置" android:textsize="36sp" android:layout_width="wrap_content" android:layout_height="wrap_content">
        <textview android:text="垂直放置" android:textsize="36sp" android:layout_width="wrap_content" android:layout_height="wrap_content">        
    </textview></textview></linearlayout>
 
    <linearlayout android:layout_width="match_parent" android:layout_height="160dp" android:background="@android:color/holo_orange_light">
        <textview android:text="水平放置" android:textsize="36sp" android:layout_width="wrap_content" android:layout_height="wrap_content">
        <textview android:text="水平放置" android:textsize="36sp" android:layout_width="wrap_content" android:layout_height="wrap_content">
 
    </textview></textview></linearlayout>
 
    <linearlayout android:layout_width="match_parent" android:layout_height="160dp" android:gravity="center" android:background="@android:color/holo_blue_dark">
        <textview android:text="对齐方式" android:textsize="36sp" android:layout_width="wrap_content" android:layout_height="wrap_content">
        <textview android:text="对齐方式" android:textsize="36sp" android:layout_width="wrap_content" android:layout_height="wrap_content">
 
    </textview></textview></linearlayout>
 
</linearlayout>

运行效果图：

weight（权重）——用于等比例划分可用区域

在android视图中，weight（权重）属性只能用于LinearLayout 布局中，换句话说就是该属性只能在LinearLayout 布局中生效

在定义weight属性时，Google的推荐用法是将对应的layout_wight(或者layout_height)的值设置为0dp（或者wrap_content）。否则，显示效果需要按照另外的方法重新计算。
 

<!--?xml version="1.0" encoding="utf-8"?-->
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/darker_gray">
 
    <linearlayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1">
 
        <textview android:text="等比例分割" android:textsize="36sp" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" android:background="@android:color/holo_blue_dark">
        <textview android:text="等比例分割" android:textsize="36sp" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" android:background="@android:color/white">
        <textview android:text="等比例分割" android:textsize="36sp" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" android:background="@android:color/darker_gray">
 
    </textview></textview></textview></linearlayout>
    <linearlayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1">
        <textview android:text="2:1分割" android:textsize="36sp" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2" android:background="@android:color/holo_green_light">
        <textview android:text="2:1分割" android:textsize="36sp" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@android:color/holo_orange_light">
 
    </textview></textview></linearlayout>
 
 
</linearlayout>

 

运行效果图

RelativeLayout(相对布局)

采用LinearLayout情况下，当界面比较复杂的时候，就需要嵌套多层的 LinearLayout,这样就会降低UI Render的效率(渲染速度),另外太多层LinearLayout嵌套会占用更多的系统资源,还有可能引发栈溢出。这时就需要使用RelativeLayout。
如果我们使用如果我们使用RelativeLayout的话,可能仅仅需要一层就可以完成了的话，配合父容器和组件的相对位置参照，以及margin、padding就可以很容易的实现很复杂的布局设计。

相对布局 RelativeLayout 允许子元素指定它们相对于其父元素或兄弟元素的位置，这是实际布局中最常用的布局方式之一。它灵活性大很多，当然属性也多，操作难度也大，属性之间产生冲突的的可能性也大，使用相对布局时要多做些测试。

相对布局，就像是把手机屏幕当成一个坐标图，所有的组件、容器的位置都是通过彼此的相对位置来表示。又分为父容器定位和兄弟组件定位。

父容器定位

兄弟组件定位

常用属性

android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父元素完全居中
android:layout_alignParentBottom 贴紧父元素的下边缘
android:layout_alignParentLeft 贴紧父元素的左边缘
android:layout_alignParentRight 贴紧父元素的右边缘
android:layout_alignParentTop 贴紧父元素的上边缘
android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物

下面的属性值设定必须为id的引用名“@id/id-name”
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左边
android:layout_toRightOf 在某元素的右边

android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐

下面是对相对布局的基础用法演示：
 

<!--?xml version="1.0" encoding="utf-8"?-->
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/darker_gray">
 
    <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:textsize="24sp" android:layout_centerhorizontal="true" android:text="水平居中" android:background="@android:color/holo_blue_bright">
    <textview android:id="@+id/center_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" android:textsize="24sp" android:text="正中" android:background="@android:color/holo_blue_bright">
    <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centervertical="true" android:layout_alignparentright="true" android:textsize="24sp" android:text="右侧垂直居中" android:background="@android:color/holo_blue_bright">
    <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toleftof="@id/center_tv" android:layout_above="@id/center_tv" android:textsize="24sp" android:text="正中左上" android:background="@android:color/holo_blue_bright">
</textview></textview></textview></textview></relativelayout>

运行效果图：

内、外边距（填充、偏移）

margin（偏移）为外边距，表示组件离父容器的距离
padding（填充）为内边距，表示该组件的内容距离该组件的距离

图示如下：

在下面的代码中，为了更清晰的对比margin和padding，分别用两种方式来实现相同的效果

演示代码：
 

<pre class="brush:java;">
<linearlayout android:background="@android:color/black" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical" android:padding="15dp" xmlns:android="http://schemas.android.com/apk/res/android">

    <linearlayout android:background="@android:color/holo_green_light" android:layout_height="0dp" android:layout_weight="1" android:layout_width="match_parent" android:orientation="vertical">

        <linearlayout android:background="@android:color/holo_red_light" android:layout_height="match_parent" android:layout_margin="30dp" android:layout_width="match_parent" android:orientation="vertical">

            <linearlayout android:background="@android:color/white" android:layout_height="match_parent" android:layout_margin="30dp" android:layout_width="match_parent" android:orientation="vertical">

            </linearlayout>
        </linearlayout>
    </linearlayout>

    <linearlayout android:background="@android:color/holo_orange_light" android:layout_height="0dp" android:layout_weight="1" android:layout_width="match_parent" android:padding="30dp">
        <linearlayout android:background="@android:color/holo_red_light" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical" android:padding="30dp">
            <linearlayout android:background="@android:color/white" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical">
            </linearlayout>
        </linearlayout>

    </linearlayout>
</linearlayout></pre>

运行效果：