【Android】安卓布局知识点

作者: irenb | 来源:发表于2019-08-22 16:04 被阅读0次

前言：安卓六大布局

线性布局（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>

【Android】安卓布局知识点

前言：安卓六大布局

一、线性布局(LinearLayout)

1. 常用属性

2. weight（权重）

3. 灵活使用 linearlayout 布局的权重

4. divider（分割线）

二、textView 用法

1. 用法一：多行文本可以用一个 textView 调整行间距来实现

2. 用法二：一个 textView 实现APP我的页面单元格效果（左边图标+标题+右边图标）

三、相对布局（RelativeLayout）

1. 常用属性

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读