欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

安卓之布局总结

程序员文章站 2023-03-27 21:22:52
Adroid布局 有人形象地比喻,Android开发中的布局就相当于一栋建筑的外观架构。布局用得好,这栋建筑的外观才美观高大上。 Android布局管理器 Android布局管理器本身是一个界面控件,所有的布局管理器都是ViewGroup类的子类,都是可以当做容器类来使用的。因此一个布局管理器中可以 ......

 adroid布局

有人形象地比喻,android开发中的布局就相当于一栋建筑的外观架构。布局用得好,这栋建筑的外观才美观高大上。

 

android布局管理器

android布局管理器本身是一个界面控件,所有的布局管理器都是viewgroup类的子类,都是可以当做容器类来使用的。因此一个布局管理器中可以嵌套其他的布局管理器。

 

这是谷歌上找的一张布局管理器层级图

安卓之布局总结

 

每一个viewgroup都可以嵌套其他的viewgroup和view(视图)。一个viewgroup的大小是相对的,它即可以是其他viewgroup的父容器,也可以是其他viewgroup的子容器。在android中,viewgroup指代的是布局管理器,也就是下面要讲的布局样式,view指代的是布局管理器中的一个个控件。在android中,控件可以在xml文件中定义,也可以程序员根据自己的需要去定义一个类。本文重点先不讨论视图中的控件,还是回归到布局。

 

android六大基本布局管理器分别是:

线性布局(linearlayout)、表格布局(tablelayout)、网格布局(gridlayout)、相对布局(relativelayout)、绝对布局(absolutelayout)、层布局(framelayout)

其中,表格布局是线性布局的子类。网格布局是android 4.0后新增的布局。

 

(1)线性布局

线性布局会将容器内的所有控件一个挨着一个地排列。

属性:

1. 排列方向

android:orienation = “ horizontal/vertical”

水平排列和垂直排列,android中默认为垂直排列vertical

注意:默认情况下水平和垂直方向的排列只占一行,如果用android:layout_width来设定控件的宽度,如果控件宽度太大,超出屏幕的显示范围,屏幕是不会显示超出的范围的。

 

2. 对齐方式

用于控制元素(例如文字)在该控件里的显示位置。

属性值:

可选的值有:top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical

也可以同时使用两个属性值,中间用 | 竖线隔开

例如:

android:gravity = “buttom|center_horizontal”

如果定义在控件中的底部,垂直居中

 

举一个简单例子,我用linearlayout线性布局来实现常用的计算器

安卓之布局总结

前面四行都很容易理解,用一个linearout来包裹4个button控件,并且设定排列方向为水平方向。这里只列出其中一行的布局代码,其他三行的代码与第一行几乎相同。

<linearlayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" > 
         <button
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="mc" android:layout_weight="1">   
            //layout_weight设定水平布局中控件的占比
         </button>
         <button
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="m+" 
            android:layout_weight="1">
         </button>
         <button
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="m-" 
            android:layout_weight="1">
         </button>
         <button
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="mr" 
            android:layout_weight="1">
         </button>
</linearlayout>

 

最关键的是下面两行,即用绿色框框住的那一部分控件如何布局。这里我使用布局控制器内部嵌套布局控制器的方法。首先将绿色框内部的控件分成三个层级(我分别用不同颜色标注出来了)。第一个层级是绿色框,包含两个两列,即两个红色框。第二个层级是红色框,每个红色框看成一个整体的列,第一个列是左边的红色框,其内部包含两个行;第二个列是右边的红色框,即“=”号,包含一个垂直布局的列,占位两行。再对左边的红色框进行第三层级的拆分。可以拆分成两行,每一行占3个位。

于是就有下面的代码:

<!--绿色框-->
<linearlayout android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
       
        <!--红色框--> 
        <linearlayout android:orientation="vertical"
                android:layout_weight="3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
            
             <!--蓝色框--> 
             <linearlayout android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="1"></button>
                <button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="2"></button>
                <button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="3"></button>
             </linearlayout>
            
             <!--蓝色框 -->
             <linearlayout android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <button
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="2"
                    android:text="0">
                        </button>
                <button
                    android:layout_width="0px"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text=".">
                       </button>
            </linearlayout>          
        </linearlayout>
        
        <!--红色框,=号-->
        <linearlayout android:orientation="vertical"
                android:layout_weight="1"
                android:layout_width="wrap_content"
                android:layout_height="match_parent">
                <button
                     android:layout_width="match_parent"
                     android:layout_height="match_parent"
                    android:text="=">
               </button>
        </linearlayout>
</linearlayout>    

 

 

(2)相对布局

相对布局是最灵活的一种布局方式,可以相对父容器和相对与其他控件进行布局。

主要参数有:

1. 是否对齐父容器的语法格式为true/false:

例如:android:layout_alignparentleft = “true”

2. 为于给定id控件不同方位的语法格式:

例如:android:layout_above="@id/btn1"

@id/btn1 控件的id必须是事前已经定义好的

 

android:layout_alignparentleft                     该控件是否对齐父容器的左端

android:layout_alignparentright                  该控件是否齐其父容器的右端

android:layout_alignparenttop                    该控件是否对齐父容器的顶部

android:layout_alignparentbottom              该控件是否对齐父容器的底部

android:layout_centerinparent                    该控件是否相对于父容器居中

android:layout_toleftof                              该控件位于给定id控件的左方

android:layout_torightof                           该控件位于给定id控件的右方

android:layout_above                                该控件位于给定id控件的上方

android:layout_below                                该控件位于给定id控件的下方

android:layout_centerhorizontal               该控件是否横向居中

android:layout_centervertical                   该控件是否垂直居中

 

实例代码:

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/darkslategray" >
    
    <button android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerinparent="true"
        android:layout_centerhorizontal="true"
        android:text="下"> 
    </button>
    <button android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toleftof="@id/btn1"
        android:layout_above="@id/btn1"
        android:text="左">  
    </button>
    <button android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_torightof="@id/btn1"
        android:layout_above="@id/btn1"
        android:text="右">    
    </button>
    <button android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_torightof="@id/btn2"
        android:layout_above="@id/btn2"
        android:background="@color/white"
        android:text="上">      
    </button>

</relativelayout>

 

效果图

安卓之布局总结

 

 

(3)表格布局

表格布局是最规整的一种布局方式。想象一下excel表格规整的行和列,android布局管理器中的tablelayout与excel中的单元格有不少相似之处。如果学过html,用过tbale,tr,td标签,应该也会对下面的用法有更好的理解。

表格布局由一个tablelayout包裹起来,内部是一行行的控件,每一行用一个tablerow来包裹,每一行的元素个数(即列数)都是可以不同的。默认情况下,一行中的所有控件是等宽的。

 

控件属性,在tablelayout中定义,对所有行起作用:

1. android:collapsecolumns=””         #指定被隐藏的列的序号

2. android:shrinkcolumns=””            #指定被收缩的列的列序号

3. android:stretchcolumns=””           #指定被拉伸的列的列序号

4. android:layout_column="3":        #表示跳过第三个控件,直接显示下一个控件,注意:这个属性从1开始计数

5. android:layout_span="3"             #表示合并3个单元格,也就说这个组件占3个单元格

 

注意:上面属性的使用场合,是在tablelayout还是在tablerow中使用;如果是在tablerow中使用,需要在tablerow的子控件中添加属性。前四个属性都是添加在tablelayout中的,最是添加在tablerow的子控件中。

 

实例:

就以我们平常用的日历为案例(由于屏幕太小,放不下最后一列星期六的日期)

 安卓之布局总结

实例代码:

由于以下代码有很多相似之处,我只截取了比较重要的一部分

1. 总体框架

<tablelayout  xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/tablelayout2"  
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content" >  
    <tablerow>  
        <button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="周日" 
            android:background="#00000000"/>     #去除button控件的样式
        <button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="周一" 
            android:background="#00000000"/>  

        <button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="周二" 
            android:background="#00000000"/>  

        <button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="周三"
            android:background="#00000000" />  

        <button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="周四" 
            android:background="#00000000"/>  

        <button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="周五"
            android:background="#00000000" />  
        <button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="周六"
            android:background="#00000000" />  
    </tablerow>
    <tablerow>
     ... ...
    </tablerow>
... ...
... ...
</tablelayout>

 

2. 最后一行“不显示日期”的合并单元格样式

<button  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:text="30" />   
            
<button  
      android:layout_width="wrap_content"  
      android:layout_height="wrap_content" 
      android:layout_span="2"
      android:background="#ffffff" 
      android:text="不显示日期" />   

 

 

(4)绝对布局

绝对布局指定每个控件在手机上的具体坐标,每个控件的位置和大小是固定的。由于不同手机屏幕大小可能不同,所以绝对布局只适用于固定的手机屏幕。平常用得比较少,这里就不做详细介绍了。

 

(5)层布局

层布局也叫帧布局。每个控件占据一层,后面添加的层会覆盖前面的层。如果后面的层的大小大于或者等于前面的层,那么前面的层就会被完全覆盖。后面层中的控件就看不到了。实际应用中如果想要得到一个空间浮现在另一个控件的上方,可以在控件内部嵌套层布局。

下面是层布局的原理图:

安卓之布局总结

 

实例代码:
<framelayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/framelayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    tools:context=".mainactivity"      
    android:foregroundgravity="right|bottom">    

    <textview    
        android:layout_width="200dp"    
        android:layout_height="200dp"    
        android:background="#ff6143" />     //橙色 
    <textview    
        android:layout_width="150dp"    
        android:layout_height="150dp"    
        android:background="#7bfe00" />     //绿色
     <textview    
        android:layout_width="100dp"    
        android:layout_height="100dp"    
        android:background="#ffff00" />     //黄色

</framelayout>   

 

效果图,每一个textview都会被前一个textview覆盖:

安卓之布局总结

 

实际应用:

在手机程序设计中,绝对布局基本上不用,用得相对较多的是线性布局相对布局。