【Android】安卓布局知识点
2019-08-22 本文已影响0人
irenb
前言:安卓六大布局
- 线性布局(LinearLayout):按照垂直或者水平方向布局的组件
- 相对布局(RelativeLayout):相对其它组件的布局方式
- 绝对布局(AbsoluteLayout):按照绝对坐标来布局组件
- 帧布局(FrameLayout):组件从屏幕左上方布局组件
- 表格布局(TableLayout):按照行列方式布局组件
- 约束布局 (ConstraintLayout):按照约束布局组件
一、线性布局(LinearLayout)
线性布局会将容器中的组件一个一个排列起来, LinearLayout可以控制组件 横向 或者 纵向 排列。通过android:orientation属性控制:horizontal(水平),vertical(垂直), 默认为垂直排列;
1. 常用属性
- gravity : 控制组件内部子元素的对齐方式。 top, bottom, left, right, center,center_vertical(垂直方向居中), center_horizontal(水平方向居中)等;可以同时指定多种对齐方式 : 如 left|center_vertical 左侧垂直居中;
- layout_gravity:控制该组件在父容器里的对齐方式。
- layout_width:布局的宽度(wrap_content:组件实际大小;match_parent / fill_parent:填满父容器)
- layout_height:布局的高度(wrap_content:组件实际大小;match_parent / fill_parent:填满父容器)
- id:为该组件设置一个id,在java文件中可以通过 findViewById(id) 找到该组件。
2. weight(权重)
- 用来等比例的划分区域。指定该元素在LinearLayout(父容器)中所占的权重, 例如都是1的情况下, 那个方向(LinearLayout的orientation方向)长度都是一样的;
<!- 依靠权重可以自由分配宽度;常见用法:水平方向三等分,宽度相等。->
android:layout_weight="1"
3. 灵活使用 linearlayout 布局的权重
【举例1】:将一个 Button 在一行中居中,并且 Button 的宽度占屏幕宽度的一半
- 解决方案:先看具体的 xml,如下
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:gravity="center_horizontal" android:weightSum="1" > <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.5" android:text="测试按钮" /> </LinearLayout>
- 说明:其中 LinearLayout 的
android:gravity="center_horizontal"
作用是让 Button 水平居中;LinearLayout 的android:weightSum="1"
,Button 设置android:layout_weight="0.5"
,则表示 button占据父布局即 LinearLayout 一半的宽度,而 LinearLayout 为 match_parent ,因此 Button 会占据屏幕一半的宽度。
【举例2】:最外层是 LinearLayout,里面水平从左到右放 TextView A,TextView B 和一个 Button C ,要求 A 居左,C 居右,B 紧靠 A,且单行显示,如果文字过多则打点。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textViewA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:singleLine="true"
android:text="文本A" />
<TextView
android:id="@+id/textViewB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="16sp"
android:singleLine="true"
android:text="文本B" />
<Button
android:id="@+id/buttonC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:text="按钮C" />
</LinearLayout>
- 说明:很容易理解,A 在左边,C 在右边,然后 B 利用权重占据剩余的水平空间,由于设置了 singleLine, 因此文字如果超过一行就会打点。
4. divider(分割线)
- divider:为 LinearLayout 设置分割线的图片
- showDividers:设置分割线所在的位置。beginning(开始)、middle(每两个组件间)、end(结束)。
- dividerPadding:设置分割线的 Padding。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:divider="@drawable/divider"
android:showDividers="middle|beginning|end"
android:dividerPadding="10dp">
</LinearLayout>
- 其中 divider.xml 是分隔线样式:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:width="1dp"
android:height="1dp"/>
<solid android:color="#e1e1e1"/>
</shape>
二、textView 用法
// 表示该TextView最多可显示两行
android:maxLines="2"
// 表示显示不下时在末尾打点(其他属性:start、middle、none、marquee跑马灯效果)
android:ellipsize="end"
// 强制占据两行的高度
android:lines="2"
// 设置文本下划线
textView.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG );
// 设置文本中划线
textView.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);
// 设置行间距(默认为0)
android:lineSpacingExtra="8dp"
// 设置行间距倍数,默认为1.0f
android:lineSpacingMultiplier="1.3"
1. 用法一:多行文本可以用一个 textView 调整行间距来实现
<TextView
android:textSize="14dp"
android:lineSpacingMultiplier="1.3"
android:gravity="center_vertical"
android:text="揽件方式:上门取件\n快递公司:顺丰快递\n预约时间:9月6日 立即取件\n快递费用:等待称重确定价格"
android:layout_width="match_parent"
android:layout_height="match_parent" />
2. 用法二:一个 textView 实现APP我的页面单元格效果(左边图标+标题+右边图标)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:divider="@drawable/divider"
android:showDividers="middle|beginning|end">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/white"
android:gravity="center_vertical"
android:drawableLeft="@drawable/icon_1"
android:drawableRight="@drawable/icon_next"
android:drawablePadding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textSize="16sp"
android:text="我的收藏"/>
</LinearLayout>
三、相对布局(RelativeLayout)
1. 常用属性
=========== 相对于父控件:===========
// 在父容器的底部
android:layout_alignParentBottom="true"
// 在父容器的右侧
android:layout_alignParentRight="true"
// 在父容器的左侧
android:layout_alignParentLeft="true"
// 在父容器的顶部
android:layout_alignParentTop="true"
// 水平居中对齐
android:layout_centerHorizontal="true"
// 垂直居中对齐
android:layout_centerVertical="true"
// 水平垂直居中对齐
android:layout_centerInParent="true"
/// 设置外边距(即控件的边缘距离父控件的边距)
android:layout_marginTop="10dp" // 上边距
android:layout_marginBottom="10dp" // 下边距
android:layout_marginLeft="10dp" // 左边距
android:layout_marginRight="10dp" // 右边距
/// 设置内边距(即控件里面内容的边缘相对控件的边框)
android:layout_marginTop="10dp" // 上边距
android:layout_marginBottom="10dp" // 下边距
android:layout_marginLeft="10dp" // 左边距
android:layout_marginRight="10dp" // 右边距
=========== 相对于给定ID控件 ===========
// 表示在指定控件的上面
android:layout_above="@id/控件ID"
// 表示在指定控件的下面
android:layout_below="@id/控件ID"
// 表示在指定控件的左侧
android:layout_toLeftOf="@id/控件ID"
// 表示在指定控件的右侧
android:layout_toRightOf="@id/控件ID"
// 表示 该控件的顶部边缘 与 指定控件的顶部边缘 对齐
android:layout_alignTop="@id/控件ID"
// 表示 该控件的底部边缘 与 指定控件的底部边缘 对齐
android:layout_alignBottom="@id/控件ID"
// 表示 该控件的左边缘 与 指定控件的左边缘 对齐
android:layout_alignLeft="@id/控件ID"
// 表示 该控件的右边缘 与 指定控件的右边缘 对齐
android:layout_alignRight="@id/控件ID"
// 表示与指定控件基线对齐(水平对齐)
android:layout_alignBaseline="@id/组件ID"
- 相对布局规范:能确定位置的,被依赖的控件写在前面。
举例:按钮3底部对齐,按钮2在按钮3的上面,文本框水平充满剩余的区域,按钮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="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btn1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="固定宽度按钮"/>
<Button
android:id="@+id/btn3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="按钮3"/>
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/btn3"
android:layout_alignParentRight="true"
android:text="按钮2"/>
<EditText
android:id="@+id/et"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@id/btn2"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="@id/btn2"
/>
<ListView
android:id="@+id/lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/btn2"
android:layout_below="@id/btn1"
/>
</RelativeLayout>