Android UI学习——1.Android常用的基础布局容器

64 阅读3分钟

Android常用的基础布局容器

Android 的UI可以分为两类,一类叫做ViewGroup容器,一类叫做View视图

  1. View视图:(TextView,Button,ImageView)都是常用的视图
  2. ViewGroup容器:内部可以承载、放置、添加View视图

基础布局容器:

  • LinearLayout线性布局:横着或竖着按顺序排列

  • RelativeLayout相对布局:起始坐标时屏幕左上角,以同级或上级为参考系定位位置

  • FrameLayout帧布局:像千层饼一样,一层压着一层

  • ConstraintLayout约束布局:google于2016年新发布的一种布局方式,它不在android的基础api包里,需要额外引入

  • AbsoluteLayout绝对布局(以屏幕左上角为参考系,定位自己的位置,从android 2.2版本后废弃)

  • GridLayout网格布局(可以指定行数列数,子控件自动根据行列数进行分配位置,于android 4.0后新增进api中)

  • TableLayout表格布局(类似于网格布局,以一个TableRow标签定义为一行或一列)

image.png

线性布局 LinearLayout

线性布局就是从左到右从上到下顺序排列的一种布局。

LinearLayout的基础属性

2229471-ed12d30306ae8b3a.webp

实例:

<?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="#fff"  
android:gravity="center"  
>  
<!--Button: backgroundTint改变背景色 -->  
<Button  
android:layout_width="match_parent"  
android:layout_height="wrap_content"  
android:backgroundTint="#f00"  
/>  
<Button  
android:layout_width="match_parent"  
android:layout_height="wrap_content"  
/>  
<Button  
android:layout_width="match_parent"  
android:layout_height="wrap_content"  
/>  
</LinearLayout>

image.png

相对布局 RelativeLayout

相对布局在摆放子视图位置时,按照指定的参数系来摆放子视图的位置,默认以屏幕左上角(0,0)位置作为参考系摆放位置

  • 相对于父元素 7个常用属性

image.png

  • 相对于兄弟元素摆放自己的位置 4个常用元素

image.png

  • 相对于兄弟元素的对齐方式

image.png

实例:

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
android:layout_width="match_parent"  
android:layout_height="match_parent">  
<!-- android:insetTop="0dp"  
android:insetBottom="0dp"  
将button默认的边距设置为0,按钮的背景就会将button填满
-->  
<Button  
android:id="@+id/btn1"  
android:layout_width="wrap_content"  
android:layout_height="wrap_content"  
android:insetTop="0dp"  
android:insetBottom="0dp"  
android:text="普通按钮1" />  
  
<Button  
android:id="@+id/btn2"  
android:layout_width="wrap_content"  
android:layout_height="wrap_content"  
android:layout_below="@+id/btn1"  
android:layout_marginLeft="-2dp"  
android:layout_marginTop="0dp"  
android:layout_toRightOf="@+id/btn1"  
android:text="普通按钮2" />  
  
<Button  
android:id="@+id/btn3"  
android:layout_width="wrap_content"  
android:layout_height="wrap_content"  
android:layout_below="@+id/btn2"  
android:layout_toRightOf="@+id/btn2"  
android:text="普通按钮3" />  
  
<Button  
android:id="@+id/btn4"  
android:layout_width="wrap_content"  
android:layout_height="wrap_content"  
android:layout_below="@+id/btn3"  
android:layout_toRightOf="@+id/btn3"  
android:text="普通按钮4" />  
</RelativeLayout>

image.png

帧布局 FrameLayout

组件的默认位置都是左上角,组件之间可以重叠。像千层饼一样,一层压着一层 可以设置上下左右的对齐、水平垂直居中、设置方式与线性布局相似(自我感觉:和绝对定位其实有点相似,z-index)

  • 常用属性:

image.png

实例:

<?xml version="1.0" encoding="utf-8"?>  
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
android:layout_width="match_parent"  
android:layout_height="match_parent">  
<!-- android:background="@color/purple_200"设置文本的背景色  
android:gravity="center_horizontal" // 文本中的文字对齐方式  
android:paddingTop="100dp" // 文本的上边内间距  
android:text="layout_gravity:center" // 现实的文本内容  
android:textSize="30dp" /> // 文本字号大小-->  
<TextView  
android:layout_width="match_parent"  
android:layout_height="match_parent"  
android:layout_gravity="center"  
android:background="@color/purple_200"  
android:gravity="center_horizontal"  
android:paddingTop="100dp"  
android:text="layout_gravity:center"  
android:textSize="30dp" />  
  
<TextView  
android:layout_width="300dp"  
android:layout_height="360dp"  
android:layout_gravity="center"  
android:background="@color/purple_500" />  
  
<TextView  
android:layout_width="240dp"  
android:layout_height="240dp"  
android:layout_gravity="center"  
android:background="@color/purple_700" />  
  
<TextView  
android:layout_width="140dp"  
android:layout_height="140dp"  
android:layout_gravity="center"  
android:background="@color/teal_700" />  
  
<TextView  
android:layout_width="60dp"  
android:layout_height="60dp"  
android:layout_gravity="center"  
android:background="#ffffff"  
android:gravity="center" />  
</FrameLayout>

image.png

总结

2229471-00dc44ee0d846061.webp