首页 > 程序开发 > 移动开发 > Android >

Android布局——线性布局、相对布局

2017-03-03

Android布局——线性布局、相对布局。

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

ViewGroup

什么是ViewGroup?

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

Android官方描述为:

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

视图层次:

AndroidUI层次

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>

运行效果:
这里写图片描述

相关文章
最新文章
热点推荐