Android布局之线性布局

第一节介绍了新建Android项目时默认生成的布局文件,默认的布局文件采用的相对布局RelativeLayout,在这个布局中也默认添加了一个TextView控件。本节讲的这个LinearLayout线性布局和RelativeLayout相对布局类似,同属于布局容器,也可以包裹普通UI控件(TextView、Button等)。

线性布局是按照水平或垂直的方式将布局元素(控件或布局)按照顺序依次排列,后面的元素将位于前面元素的下方或右方。至于是下方或右方,和布局设置的方向有关,可以通过设置属性orientation的值为horizontal(水平)或vertical(垂直)来实现。

3.3.1 LinearLayout基础用法

下面通过一个实例来看一下orientation属性值为vertical时的效果:




    

    

添加了一个LinearLayout布局容器并设置其orientation属性值为vertical,按照上面的解释,所有的子控件都应该垂直排列,通过Android Studio的预览功能来看一下效果,如图3.15所示。


Android布局之线性布局_第1张图片


图3.15 Android 布局LinearLayout之vertical

可以看出,两个TextView控件垂直排列,通过TextView的属性text的属性值可以看出,前一个TextView在后一个TextView的上方。

下面修改这个布局文件的orientation属性值为horizontal,如下:




    

    

通过代码可以看出,将orientation属性值设置成了horizontal水平布局,由于是水平布局,所以再设置TextView的宽为match_parent(占据整个宽)就不再合适了,因为这样会造成控件重叠,因此同时修改两个TextView的layout_width为wrap_content(包裹内容),再次查看预览如图3.16所示。


Android布局之线性布局_第2张图片


图3.16 Android 布局LinearLayout之horizontal

可以看出两个TextView水平显示,下面的TextView在上面TextView的右边。注意orientation属性为Linearlayout的必设属性。

3.3.2 LinearLayout嵌套

除了单个LinearLayout的使用,也支持LinearLayout的嵌套,下面通过一个实例看一下如何通过LinearLayout的嵌套来实现模拟微信的底部Tab:




    

        

        
    

    

        

        
    

    

        

        
    

    

        

        
    

通过代码可以看出一个LinearLayout内部包装了四个子LinearLayout,外部的LinearLayout采用水平布局(设置了orientation属性为horizontal),四个子LinearLayout采用了垂直布局(每一个子LinearLayout的属性orientation都为vertical)。每一个LinearLayout内都添加了一个ImageView(图片控件)和一个TextView(文本控件)。

除了上面讲过的属性以外,还有一些属性没有介绍,通过表3.2所示来说明它们的用法:

表3.2 LinearLayout属性


Android布局之线性布局_第3张图片


为父LinearLayout设置了background属性,其值为 #ffffffff(纯白色);为子LinearLayout设置了gravity属性并设置其值为center,子LinearLayout将居中显示。设置weight属性可以平分整个屏幕的宽,这个属性的用法在后面的章节会详细介绍;为ImageView添加了src属性来设置图片背景,这个值的形式为“@drawable/图片名”;为TextView添加了textColor属性来设置字体颜色,其值为 #b6b3b3(浅灰色)。

可以通过Android Studio的预览功能查看一下效果如图3.17所示。


Android布局之线性布局_第4张图片


图3.17 Android 布局LinearLayout实例

可以看出,父LinearLayout的背景为纯白色,每个子LinearLayout也都是居中显示并四等分了整个屏幕的宽,每个LinearLayout上方的ImageView控件都添加了不同的图片,下方的TextView都设置了不同的文本和相同的文本颜色(浅灰色)。


如果你喜欢作者的文章,还可以购买他的书(京东自营):


Android布局之线性布局_第5张图片

你可能感兴趣的:(Android,Android开发入门百战经典)