文章目录
1. 线性布局LinearLayout
线性布局内部的各视图有两种排列方式:
⭕️orientation属性值为horizontal
时,内部视图在水平方向从左往右排列。
⭕️orientation属性值为vertical
时,内部视图在垂直方向从上往下排列。如果不指定orientation属性,则LinearLayout默认水平方向排列。
1.1 线性布局的权重
线性布局的权重概念,指的是线性布局的下级视图各自拥有多大比例的宽高。
权重属性名叫layout_weight,但该属性不在LinearLayout节点设置,而在线性布局的直接下级视图设置,表示该下级视图占据的宽高比例。
1️⃣layout_width填0dp时,layout_weight表示水平方向的宽度比例。
2️⃣layout height填0dp时,layout weight表示垂直方向的高度比例。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="横排第一个视图"
android:textColor="#000000"
/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="横排第二个视图"
android:textColor="#000000"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:text="第二个视图"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:text="第三个视图"/>
</LinearLayout>
</LinearLayout>
2. 相对布局RelativeLayout
相对布局的下级视图位置由其他视图决定。用于确定下级视图位置的参照物分两种:
❌与该视图自身平级的视图;
该视图的上级视图(也就是它归属的RelativeLayout)
❌如果不设定下级视图的参照物,那么下级视图默认显示在RelativeLayout内部的左上角。
2.1相对位置的取值
<?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="150dp"
>
1
<TextView
android:id="@+id/tv_centerInParent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#ffffff"
android:text="水平垂直的中间_centerInParent"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_centerInParent_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_toRightOf="@id/tv_centerInParent"
android:background="#ffffff"
android:text="---centerInParent右边"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_centerHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#ffffff"
android:text="水平中间_centerHorizontal"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_alignParentLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#ffffff"
android:text="上左边对齐_alignParentTop"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_alignParentRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#ffffff"
android:text="上右边对齐_alignParentRight"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_centerVertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#ffffff"
android:text="垂直中间_centerVertical"
android:textColor="#000000"
android:textSize="11sp" />
<TextView
android:id="@+id/alignParentBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#ffffff"
android:text="上级底部_alignParentBottom"
android:textColor="#000000"
android:textSize="11sp" />
</RelativeLayout>
3.网格布局GridLayout
网格布局支持多行多列的表格排列。
网格布局默认从左往右、从上到下排列,它新增了两个属性:columnCount属性,它指定了网格的列数,即每行能放多少个视图;rowCount属性,它指定了网格的行数,即每列能放多少个视图;
3.1权重
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2" >
<TextView
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_height="60dp"
android:background="#ffcccc"
android:gravity="center"
android:text="收纳公司"
android:textColor="#ffffff"
android:textSize="20dp"
/>
<TextView
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_height="60dp"
android:background="#667788"
android:gravity="center"
android:text="收纳公司"
android:textColor="#ffffff"
android:textSize="20dp"
/>
<TextView
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_height="60dp"
android:background="#660066"
android:gravity="center"
android:text="收纳公司"
android:textColor="#ffffff"
android:textSize="20dp"
/>
<TextView
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_height="60dp"
android:background="#00ff00"
android:gravity="center"
android:text="收纳公司"
android:textColor="#ffffff"
android:textSize="20dp"
/>
<TextView
android:layout_width="0dp"
android:layout_columnWeight="1"
android:layout_height="60dp"
android:background="#00ff00"
android:gravity="center"
android:text="收纳公司"
android:textColor="#ffffff"
android:textSize="20dp"
/>
</GridLayout>
4.滚动视图ScrollView
滚动视图有两种:
1️⃣ScrollView,它是垂直方向的滚动视图;垂直方向滚动时,layout_width属性值设置为match_parent,layout_height属性值设置为wrap_content。
2️⃣HorizontalScrollNiew,它是水平方向的滚动视图;水平方向滚动时,layout_width属性值设置为wrap_content,layout_height属性值设置为match_parent。
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="200dp"
android:background="#aaaacc"
android:contentDescription="@string/app_name">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<View
android:layout_width="300dp"
android:layout_height="match_parent"
android:background="#aaccfa" />
<View
android:layout_width="300dp"
android:layout_height="match_parent"
android:background="#fffa" />
</LinearLayout>
</HorizontalScrollView>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="444dp"
android:background="#00ff00"
/>
<View
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#ffffaa"
/>
</LinearLayout>
</ScrollView>
总结
介绍了常用布局内容,更多布局内容,请多查看官文Android开发文档,更多内容持续更新。