zoukankan      html  css  js  c++  java
  • Android笔记——Android五大布局

    一、五大布局

          Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列,就组成了用户所看见的界面。Android的五大布局分别是LinearLayout(线性布局)、FrameLayout(单帧布局)、RelativeLayout(相对布局)、AbsoluteLayout(绝对布局)和TableLayout(表格布局)。

    二、布局详解   

    1、LinearLayout:   

       LinearLayout按照垂直或者水平的顺序依次排列子元素,每一个子元素都位于前一个元素之后。如果是垂直排列,那么将是一个N行单列的结构,每一行只会有一个元素,而不论这个元素的宽度为多少;如果是水平排列,那么将是一个单行N列的结构。如果搭建两行两列的结构,通常的方式是先垂直排列两个元素,每一个元素里再包含一个LinearLayout进行水平排列。

       LinearLayout的常用属性:

    android:layout_gravity 本元素相对于父元素的重力方向
    android:gravity 本元素所有子元素的重力方向
    android:orientation 线性布局以列或行来显示内部子元素
    android:layout_weight 子元素对未占用空间水平或垂直分配权重值

          当 android:orientation="vertical" 时, 只有水平方向的设置才起作用,垂直方向的设置不起作用。即:left,right,                             center_horizontal 是生效的。!!!!     

           当 android:orientation="horizontal" 时, 只有垂直方向的设置才起作用,水平方向的设置不起作用。即:top,bottom,center_vertical 是生效的。!!!!

    android:layout_gravity 和 android:gravity 的区别

    android:gravity对元素本身起作用-本身元素显示在什么位置

    android:layout_gravity相对与它的父元素-元素显示在父元素的什么位置。

          LinearLayout中的子元素属性android:layout_weight生效,它用于描述该子元素在剩余空间中占有的大小比例。加入一行只有一个文本框,那么它的默认值就为0,如果一行中有两个等长的文本框,那么他们的android:layout_weight值可以是同为1。如果一行中有两个不等长的文本框,那么他们的android:layout_weight值分别为1和2,那么第一个文本框将占据剩余空间的三分之二,第二个文本框将占据剩余空间中的三分之一。android:layout_weight遵循数值越小,重要度越高的原则。显示效果如下

     1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     2     android:layout_width="match_parent"
     3     android:layout_height="match_parent"
     4     android:orientation="vertical" >
     5 
     6     <TextView
     7         android:id="@+id/textView1"
     8         android:layout_width="match_parent"
     9         android:layout_height="wrap_content"
    10         android:layout_weight="0.50"
    11         android:background="#006400"
    12         android:text="@string/boy" />
    13 
    14     <TextView
    15         android:id="@+id/textView2"
    16         android:layout_width="match_parent"
    17         android:layout_height="wrap_content"
    18         android:layout_weight="0.2"
    19         android:background="#0000CD" />
    20     <LinearLayout
    21         android:layout_width="match_parent"
    22         android:layout_height="wrap_content"
    23         android:layout_weight="0.3"
    24         android:orientation="horizontal" >
    25 
    26         <TextView
    27             android:id="@+id/textView3"
    28             android:layout_width="wrap_content"
    29             android:layout_height="match_parent"
    30             android:layout_weight="0.3"
    31             android:background="#FFE4C4"
    32             android:text="@string/boy" />
    33 
    34         <TextView
    35             android:id="@+id/textView4"
    36             android:layout_width="wrap_content"
    37             android:layout_height="match_parent"
    38             android:layout_weight="0.4"
    39             android:background="#FF00FF"
    40             android:text="@string/boy" />
    41 
    42         <TextView
    43             android:id="@+id/textView5"
    44             android:layout_width="wrap_content"
    45             android:layout_height="match_parent"
    46              android:layout_weight="0.3"
    47              android:background="#CD5C5C"
    48             android:text="@string/boy" />
    49 
    50     </LinearLayout>
    51 
    52 </LinearLayout>
    View Code

                                                      

    2、RelativeLayout:

           RelativeLayout按照各子元素之间的位置关系完成布局。在此布局中的子元素里与位置相关的属性将生效。例如android:layout_below, android:layout_above等。子元素就通过这些属性和各自的ID配合指定位置关系。注意在指定位置关系时,引用的ID必须在引用之前,先被定义,否则将出现异常。

             RelativeLayout里常用的位置属性如下:

        第一类:属性值为true或false

           android:layout_alignParentLeft —— 该组件是否对齐父组件的左端
           android:layout_alignParentRight —— 该组件是否齐其父组件的右端
           android:layout_alignParentTop —— 该组件是否对齐父组件的顶部
           android:layout_alignParentBottom —— 该组件是否对齐父组件的底部
        android:layout_centerInParent —— 该组件是否相对于父组件居中
        android:layout_centerHorizontal —— 该组件是否横向居中
        android:layout_centerVertical —— 该组件是否垂直居中

         第二类:属性值必须为id的引用名“@id/id-name”

          android:layout_below 在某元素的下方
            android:layout_above 在某元素的的上方
            android:layout_toLeftOf 在某元素的左边
            android:layout_toRightOf 在某元素的右边

                第三类:属性值为具体的像素值,如30dip,40px

      android:layout_marginBottom 离某元素底边缘的距离
      android:layout_marginLeft 离某元素左边缘的距离
      android:layout_marginRight 离某元素右边缘的距离
      android:layout_marginTop 离某元素上边缘的距离

         

     1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     2     android:layout_width="match_parent"
     3     android:layout_height="match_parent"
     4     android:orientation="vertical" >
     5 
     6     <TextView
     7         android:id="@+id/textView1"
     8         android:layout_width="match_parent"
     9         android:layout_height="wrap_content"
    10         android:layout_weight="0.50"
    11         android:background="#006400"
    12         android:text="@string/boy" />
    13 
    14     <TextView
    15         android:id="@+id/textView2"
    16         android:layout_width="match_parent"
    17         android:layout_height="wrap_content"
    18         android:layout_weight="0.2"
    19         android:background="#0000CD" />
    20     <LinearLayout
    21         android:layout_width="match_parent"
    22         android:layout_height="wrap_content"
    23         android:layout_weight="0.3"
    24         android:orientation="horizontal" >
    25 
    26         <TextView
    27             android:id="@+id/textView3"
    28             android:layout_width="wrap_content"
    29             android:layout_height="match_parent"
    30             android:layout_weight="0.3"
    31             android:background="#FFE4C4"
    32             android:text="@string/boy" />
    33 
    34         <TextView
    35             android:id="@+id/textView4"
    36             android:layout_width="wrap_content"
    37             android:layout_height="match_parent"
    38             android:layout_weight="0.4"
    39             android:background="#FF00FF"
    40             android:text="@string/boy" />
    41 
    42         <TextView
    43             android:id="@+id/textView5"
    44             android:layout_width="wrap_content"
    45             android:layout_height="match_parent"
    46              android:layout_weight="0.3"
    47              android:background="#CD5C5C"
    48             android:text="@string/boy" />
    49 
    50     </LinearLayout>
    51 
    52 </LinearLayout>

              这次的代码稍微复杂一点,不过仍然是有规律可循的。android:layout_above 属性可以让一个控件位于另一个控件的上方,需要为这个属性指定相对控件 id 的引用,这里我们填入了@id/button3 ,表示让该控件位于 Button 3 的上方。其他的属性也都是相似的,android:layout_below 表示让一个控件位于另一个控件的下方,android:layout_toLeftOf 表示让一个控件位于另一个控件的左侧,android:layout_toRightOf 表示让一个控件位于另一个控件的右侧。注意,当一个控件去引用另一个控件的 id 时,该控件一定要定义在引用控件的后面,不然会出现找不到 id 的情况。

                 

                                  效果图

    3、FrameLayout:

      FrameLayout是五大布局中最简单的一个布局,在这个布局中,整个界面被当成一块空白备用区域,所有的子元素都不能被指定放置的位置,它们统统放于这块区域的左上角,并且后面的子元素直接覆盖在前面的子元素之上,将前面的子元素部分和全部遮挡。这种布局没有任何的定位方式,所有的控件都会摆放在布局的左上角。显示效果如下,按钮和图片都是位于布局的左上角。由于图片是在按钮之后添加的,因此图片压在了按钮的上面。

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"> <Button android:id="@+id/button" android:layout_width="wrap_content"
    android:layout_height="wrap_content" android:text="Button"/> <ImageView android:id="@+id/image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" /> </FrameLayout>

                   

                              效果图

     4、TableLayout

    有多少个TableRow对象就有多少行,

    列数等于最多子控件的TableRow的列数

    直接在TableLayout加控件,控件会占据一行

    TableLayout属性(也叫全局属性):*代表所有列

    android:shrinkColumns -------设置可收缩的列,(内容过多,则收缩,扩展到第二行,控件没布满TableLayout时不起作用)

    android:stretchColumns ------设置可伸展的列,(有空白则填充)

    列可以同时具备stretchColumns及shrinkColumns属性

    android:collapseColumns ------设置要隐藏的列(索引列从0开始)

    内部控件属性:

    android:layout_column -------该单元格在第几列显示

    android:layout_span    -------该单元格占据列数,默认为1

     

    案列:

    MainActivity:

     1 public class MainActivity extends Activity {
     2     private final int WC = ViewGroup.LayoutParams.WRAP_CONTENT;    
     3     private final int MP = ViewGroup.LayoutParams.MATCH_PARENT;  
     4     private EditText row;
     5     private EditText column;
     6     private Button bt1;
     7     private TableLayout tableLayout;
     8 
     9     @Override
    10     protected void onCreate(Bundle savedInstanceState) {
    11         super.onCreate(savedInstanceState);
    12         setContentView(R.layout.activity_main);
    13         //获取控件Button
    14         bt1=(Button) findViewById(R.id.button1);
    15         //获取文本输入框控件
    16         row=(EditText) findViewById(R.id.editText1);
    17         column=(EditText) findViewById(R.id.editText2);
    18         
    19         //给button按钮绑定单击事件
    20         bt1.setOnClickListener(new OnClickListener() {
    21             
    22             @Override
    23             public void onClick(View v) {
    24                 
    25                 if(row.getText().length()>0&&column.getText().length()>0){
    26                     //把输入的行和列转为整形
    27                     int row_int=Integer.parseInt(row.getText().toString());
    28                     int col_int=Integer.parseInt(column.getText().toString());
    29                     
    30                     
    31                      //获取控件tableLayout     
    32                     tableLayout = (TableLayout)findViewById(R.id.table1); 
    33                     //清除表格所有行
    34                     tableLayout.removeAllViews();
    35                     //全部列自动填充空白处     
    36                     tableLayout.setStretchAllColumns(true);    
    37                     //生成X行,Y列的表格     
    38                     for(int i=1;i<=row_int;i++)    
    39                     {    
    40                         TableRow tableRow=new TableRow(MainActivity.this);    
    41                         for(int j=1;j<=col_int;j++)    
    42                         {    
    43                             //tv用于显示     
    44                             TextView tv=new TextView(MainActivity.this);
    45                             //Button bt=new Button(MainActivity.this);
    46                             tv.setText("("+i+","+j+")");   
    47                            
    48                             tableRow.addView(tv);    
    49                         }    
    50                         //新建的TableRow添加到TableLayout
    51                  
    52                         tableLayout.addView(tableRow, new TableLayout.LayoutParams(MP, WC,1)); 
    53                         
    54                     }    
    55                 }else{
    56                     Toast.makeText(MainActivity.this,"请输入行和列",1).show();
    57                 }
    58             }
    59         });
    60         
    61         
    62     }  
    63 
    64 }
    View Code
     1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     2     android:layout_width="match_parent"
     3     android:layout_height="match_parent"
     4     android:orientation="vertical" >
     5 
     6     <LinearLayout
     7         android:layout_width="match_parent"
     8         android:layout_height="wrap_content"
     9         android:orientation="horizontal" >
    10 
    11         <TextView
    12             android:id="@+id/textView1"
    13             android:layout_width="wrap_content"
    14             android:layout_height="wrap_content"
    15             android:text="行" />
    16 
    17         <EditText
    18             android:id="@+id/txtrow"
    19             android:layout_width="100dp"
    20             android:layout_height="wrap_content"
    21             android:ems="10"
    22             android:inputType="textPersonName" >
    23 
    24             <requestFocus />
    25         </EditText>
    26     </LinearLayout>
    27   
    28     <LinearLayout
    29         android:layout_width="match_parent"
    30         android:layout_height="wrap_content"
    31         android:orientation="horizontal" >
    32     
    33              <TextView
    34                 android:id="@+id/textView2"
    35                 android:layout_width="wrap_content"
    36                 android:layout_height="wrap_content"
    37                 android:text="列" />
    38 
    39              <EditText
    40                  android:id="@+id/txtlist"
    41                  android:layout_width="100dp"
    42                  android:layout_height="wrap_content"
    43                  android:ems="10"
    44                  android:inputType="textPersonName" />
    45      
    46       </LinearLayout>
    47   
    48 
    49     <Button
    50         android:id="@+id/btncreate"
    51         android:layout_width="wrap_content"
    52         android:layout_height="wrap_content"
    53         android:text="生成" />
    54 
    55     <TableLayout
    56         android:id="@+id/tablelayout1"
    57         android:layout_width="match_parent"
    58         android:layout_height="wrap_content" >
    59 
    60        
    61     </TableLayout>
    62 
    63 </LinearLayout>
    View Code

    效果图:

              

    5、瀑布布局

  • 相关阅读:
    centos安装docker
    centos 安装nginx遇到的问题
    IntelliJ IDEA 2018.3 永久激活 破解[Windows]
    mysql 8.0.12重置密码
    mysql8.*忘记密码
    CentOS安装Hadoop
    执行 systemctl start firewalld 命令后出现Failed to start firewalld.service: Unit is masked
    Centos操作命令
    解决CentOS7关闭/开启防火墙出现Unit iptables.service failed to load: No such file or directory.
    Java并发Lock接口
  • 原文地址:https://www.cnblogs.com/wugu-ren/p/6089176.html
Copyright © 2011-2022 走看看