devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android 学习总结--六大常用布局

作者：知新_RL | 2024-04-13 10:55:45

赞

踩

Android 学习总结--六大常用布局

目录

一、相对布局（RelativeLayout）

二、线性布局(LinearLayout)

三、网格布局(GridLayout)

四、表格布局(TableLayout)

五、帧布局(FrameLayout)

六、约束布局(ConstraintLayout)

        所有的UI元素都是通过View与ViewGroup构建的。而ViewGroup可作为容器盛装界面中的控件，可包含普通的View控件，也可包含ViewGroup,即ViewGroup可嵌套ViewGroup.

View 视图：

视图类View层次结构图

        

 

         从上面的层次结构图，可以看出这些布局都直接或者间接继承自ViewGroup，因此它们也支持在ViewGroup中定义的属性，这些属性可以看作是布局的通用属性。

 

除此之外，就是各类布局的特殊属性。

一、相对布局（RelativeLayout）

         相对布局可以设置某一个视图相对于其他视图的位置，即是以其他控件或父容器为参照物设置位置的。

特点：通过相对定位排列

常用属性：

 

案例：

 

 代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  5.  
  6.     <Button
  7.         android:id="@+id/button1"
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content"
  10.         android:layout_alignParentStart="true"
  11.         android:layout_alignParentTop="true"
  12.         android:layout_marginStart="147dp"
  13.         android:layout_marginTop="176dp"
  14.         android:text="Button" />
  15.     <Button
  16.         android:id="@+id/button2"
  17.         android:layout_width="wrap_content"
  18.         android:layout_height="wrap_content"
  19.         android:layout_alignParentTop="true"
  20.         android:layout_marginStart="30dp"
  21.         android:layout_marginTop="279dp"
  22.         android:layout_toEndOf="@+id/button4"
  23.         android:text="Button" />
  24.     <Button
  25.         android:id="@+id/button3"
  26.         android:layout_width="wrap_content"
  27.         android:layout_height="wrap_content"
  28.         android:layout_alignParentStart="true"
  29.         android:layout_alignParentBottom="true"
  30.         android:layout_marginStart="145dp"
  31.         android:layout_marginBottom="152dp"
  32.         android:text="Button" />
  33.  
  34.     <Button
  35.         android:id="@+id/button4"
  36.         android:layout_width="wrap_content"
  37.         android:layout_height="wrap_content"
  38.         android:layout_alignParentStart="true"
  39.         android:layout_alignParentTop="true"
  40.         android:layout_marginStart="28dp"
  41.         android:layout_marginTop="288dp"
  42.         android:text="Button" />
  43.  
  44.     <Button
  45.         android:id="@+id/button5"
  46.         android:layout_width="wrap_content"
  47.         android:layout_height="wrap_content"
  48.         android:layout_alignParentTop="true"
  49.         android:layout_alignParentEnd="true"
  50.         android:layout_marginTop="286dp"
  51.         android:layout_marginEnd="48dp"
  52.         android:text="Button" />
  53.  
  54.  
  55. </RelativeLayout>

二、线性布局(LinearLayout)

        线性布局是最常用的布局方式，可分为水平线性布局和垂直线性布局。

特点：以水平或垂直方向排列

常用属性：

 

案例：

代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:orientation="horizontal"
  5.     android:layout_width="wrap_content"
  6.     android:layout_height="match_parent"
  7.     android:gravity="center"
  8.     android:layout_gravity="center_horizontal"
  9.     android:layout_marginTop="130dp"
  10.     android:divider="@drawable/divider_line"
  11.     android:showDividers="end|middle|beginning"
  12.    
  13.     >
  14.  
  15.     <LinearLayout
  16.         android:layout_width="100dp"
  17.         android:layout_height="100dp"
  18.         android:background="#BE1E98E9"
  19.  
  20.  
  21.         />
  22.     <LinearLayout
  23.         android:layout_width="100dp"
  24.         android:layout_height="100dp"
  25.         android:background="#0f0"
  26.         />
  27.     <LinearLayout
  28.         android:layout_width="100dp"
  29.         android:layout_height="100dp"
  30.         android:background="#00f"
  31.         />
  32.  
  33.     <LinearLayout
  34.         android:layout_width="100dp"
  35.         android:layout_height="100dp"
  36.         android:background="#f00"
  37.         tools:ignore="SpeakableTextPresentCheck" />
  38. </LinearLayout>

 

三、网格布局(GridLayout)

        网格布局是Android4.0新增的布局，它实现了控件的交错显示，能够避免因布局嵌套对设备性能的影响，更利于自由布局的开发。 网格布局用一组无限细的直线将绘图区域分成行、列和单元，并指定控件的显示区域和控件在该区域的显示方式。

特点：实现了控件的交错显示

常用属性：

 

案例：

代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="wrap_content"
  4.     android:layout_height="wrap_content"
  5.     android:layout_gravity="center"
  6.     android:columnCount="4"
  7.     android:orientation="horizontal"
  8.     android:background="#FF03DAC5"
  9.     >
  10.     <Button android:text="/"
  11.         android:layout_column="3"
  12.         android:backgroundTint="#BEE3CD7D"/>
  13.     <Button android:text="1"
  14.         android:backgroundTint="#BEE3CD7D"/>
  15.     <Button android:text="2"
  16.         android:backgroundTint="#BEE38C7D"/>
  17.     <Button android:text="3"
  18.         android:backgroundTint="#BEE3CD7D"/>
  19.     <Button android:text="*"
  20.         android:backgroundTint="#BE6AE6C9"/>
  21.     <Button android:text="4"
  22.         android:backgroundTint="#BEE38C7D"/>
  23.     <Button android:text="5"
  24.         android:backgroundTint="#BEE3CD7D"/>
  25.     <Button android:text="6"
  26.         android:backgroundTint="#BE6AE6C9"/>
  27.     <Button android:text="-"
  28.         android:backgroundTint="#BEE3CD7D"/>
  29.     <Button android:text="7"
  30.         android:backgroundTint="#BE6AE6C9"/>
  31.     <Button android:text="8"
  32.         android:backgroundTint="#BEE3CD7D"/>
  33.     <Button android:text="9"
  34.         android:backgroundTint="#BEE38C7D"/>
  35.     <Button
  36.         android:layout_gravity="fill"
  37.         android:layout_rowSpan="3"
  38.         android:backgroundTint="#BE6AE6C9"
  39.         android:text="+"
  40.         />
  41.     <Button android:text="0"
  42.         android:layout_columnSpan="2"
  43.         android:layout_gravity="fill"
  44.         android:backgroundTint="#BEE38C7D"/>
  45.     <Button android:text="00"
  46.         android:backgroundTint="#BEE3CD7D"/>
  47.     <Button android:text="="
  48.         android:layout_columnSpan="3"
  49.         android:layout_gravity="fill"
  50.         android:backgroundTint="#BED999E8"/>
  51. </GridLayout>

 

四、表格布局(TableLayout)

        表格布局将子元素的位置分配到行或列中，与网格布局不同的是，它不需要明确多少行、多少列。一个TableLayout由许多TableRow组成，每个TableRow都会定义一个Row。

特点：表格形式排列

常用属性：

表格布局属性

 

表格控件属性

 

案例：

代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:stretchColumns="1"
  6.     android:collapseColumns="2"
  7.     >
  8.  
  9.     <TableRow
  10.         android:layout_width="match_parent"
  11.         android:layout_height="match_parent">
  12.         <Button/>
  13.         <Button/>
  14.  
  15.     </TableRow>
  16.     <TableRow
  17.         android:layout_width="match_parent"
  18.         android:layout_height="match_parent">
  19.         <Button/>
  20.         <Button/>
  21.         <Button/>
  22.         <Button/>
  23.         <Button/>
  24.     </TableRow>
  25.     <TableRow
  26.         android:layout_width="match_parent"
  27.         android:layout_height="match_parent">
  28.         <Button/>
  29.         <Button/>
  30.         <Button/>
  31.         <Button/>
  32.     </TableRow>
  33. </TableLayout>

 

五、帧布局(FrameLayout)

        帧布局用于在屏幕上创建一块空白区域，添加到该区域中的每个子控件占一帧，这些帧会一个一个叠加在一起，后加入的控件会叠加在上一个控件上层。因此也可以将FrameLayout称为堆栈布局，或框架布局。

特点：开辟空白区域，帧里的控件（层）叠加

常用属性：

 

案例：

代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:foreground="@mipmap/pic1"
  6.     android:foregroundGravity="left"
  7.  
  8.     >
  9.    <Button
  10.         android:layout_width="200dp"
  11.         android:layout_height="200dp"
  12.         android:background="#f00"
  13.         />
  14.     <Button
  15.         android:layout_width="150dp"
  16.         android:layout_height="150dp"
  17.         android:background="#0f0"
  18.         />
  19.  
  20.     <Button
  21.         android:layout_width="100dp"
  22.         android:layout_height="100dp"
  23.         android:background="#00f" />
  24. </FrameLayout>

 

六、约束布局(ConstraintLayout)

        约束布局是Android Studio2.2新添加的布局。 它适合使用可视化的方式编写界面布局，优点是减少嵌套，优化布局，可以直接拖拽的方式布局；缺点也显而易见，修改的时候容易错乱，代码可读性变差。

特点：可视化编写布局

常用属性：

 

 

案例：

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/416045
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号