Android常用布局使用技巧示例讲解

更新时间：2023年04月26日 10:46:24 作者：顽石九变

本文详细介绍了Android常用布局，包括LinearLayout、RelativeLayout、FrameLayout、ConstraintLayout等，分析了它们的适用场景、优缺点和使用技巧，帮助开发者更好地选择和使用合适的布局，提升UI设计和开发效率

一、FrameLayout 帧布局

这种布局类似叠加的图片，没有任何的定位方式，当我们往里面添加组件的时候，会默认把他们放到容器的左上角。

上面的组件显示在底层，下面的组件显示在上层。

如下代码，视图1显示在最底层，视图3显示在最上层

<?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">
    <TextView
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:gravity="bottom|end"
        android:text="视图1"
        android:background="@color/purple_200"
        android:textColor="@color/white"
        android:textSize="60sp"
        />
    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:gravity="bottom|end"
        android:text="视图2"
        android:background="@color/teal_200"
        android:textColor="@color/white"
        android:textSize="60sp"
        />
    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:gravity="bottom|end"
        android:text="视图3"
        android:background="@color/teal_700"
        android:textColor="@color/white"
        android:textSize="60sp"
        />
</FrameLayout>

二、ConstraintLayout 约束布局

从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。

ConstraintLayout和RelativeLayout有点像，比RelativeLayout更灵活，性能更出色。可以按照比例约束控件位置和尺寸，能够更好地适配屏幕大小不同的机型。

1、相对定位

常用属性：

layout_constraintLeft_toLeftOf：左边和目标组件的左边对齐
layout_constraintLeft_toRightOf：左边和目标组件的右边对齐
layout_constraintRight_toLeftOf：右边和目标组件的左边对齐
layout_constraintRight_toRightOf：右边和目标组件的右边对齐
layout_constraintTop_toTopOf：上边和目标组件的上边对齐
layout_constraintTop_toBottomOf：上边和目标组件的下边对齐
layout_constraintBottom_toTopOf：下边和目标组件的上边对齐
layout_constraintBottom_toBottomOf：下边和目标组件的下边对齐
layout_constraintBaseline_toBaselineOf：文本基线对齐，如两个TextView的高度不一致，但是又希望他们文本对齐
layout_constraintStart_toStartOf：同layout_constraintLeft_toLeftOf
layout_constraintStart_toEndOf：同layout_constraintLeft_toRightOf
layout_constraintEnd_toStartOf：同layout_constraintRight_toLeftOf
layout_constraintEnd_toEndOf：同layout_constraintRight_toRightOf
layout_constraintHorizontal_bias：左右约束时的水平偏移量，可设置0-1的数值，默认0.5居中
layout_constraintVertical_bias：上下约束时的垂直偏移量，可设置0-1的数值，默认0.5居中
layout_constraintHorizontal_weight：水平权重值，可以是任意数值，在0dp时生效
layout_constraintVertical_weight：垂直权重，可以是任意数值，在0dp时生效
layout_constraintDimensionRatio：宽高比，当宽或高至少有一个尺寸被设置为0dp时可设置比例，如（1:2）

示例代码，计算器布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/c_view1"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_gravity="fill"
        android:gravity="end"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_marginTop="5dp"
        android:background="#FFCCCC"
        android:text="0"
        android:textSize="50sp" />
    <Button
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        app:layout_constraintTop_toBottomOf="@id/c_view1"
        app:layout_constraintStart_toStartOf="@id/c_view1"
        app:layout_constraintEnd_toStartOf="@id/btn_qk"
        android:layout_marginEnd="5dp"
        android:textSize="40sp"
        android:id="@+id/btn_ht"
        android:text="回退" />
    <Button
        android:id="@+id/btn_qk"
        android:layout_height="0dp"
        android:layout_width="0dp"
        app:layout_constraintEnd_toEndOf="@id/c_view1"
        app:layout_constraintStart_toEndOf="@id/btn_ht"
        app:layout_constraintTop_toBottomOf="@id/c_view1"
        app:layout_constraintBottom_toBottomOf="@id/btn_ht"
        android:textSize="40sp"
        android:text="清空" />
    <Button android:text="+"
        android:id="@+id/btn_jia"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_ht"
        app:layout_constraintStart_toStartOf="@id/btn_ht"
        app:layout_constraintEnd_toStartOf="@id/btn_01"
        />
    <Button android:text="1"
        android:id="@+id/btn_01"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_ht"
        app:layout_constraintStart_toEndOf="@id/btn_jia"
        app:layout_constraintEnd_toStartOf="@id/btn_02"
        />
    <Button android:text="2"
        android:id="@+id/btn_02"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_ht"
        app:layout_constraintStart_toEndOf="@id/btn_01"
        app:layout_constraintEnd_toStartOf="@id/btn_03"
        />
    <Button android:text="3"
        android:id="@+id/btn_03"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_ht"
        app:layout_constraintStart_toEndOf="@id/btn_02"
        app:layout_constraintEnd_toEndOf="@id/btn_qk"
        />
    <Button android:text="-"
        android:id="@+id/btn_jian"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_jia"
        app:layout_constraintStart_toStartOf="@id/btn_ht"
        app:layout_constraintEnd_toStartOf="@id/btn_04"
        />
    <Button android:text="4"
        android:id="@+id/btn_04"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_jia"
        app:layout_constraintEnd_toStartOf="@id/btn_05"
        app:layout_constraintStart_toEndOf="@id/btn_jian"
        />
    <Button android:text="5"
        android:id="@+id/btn_05"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_jia"
        app:layout_constraintEnd_toStartOf="@id/btn_06"
        app:layout_constraintStart_toEndOf="@id/btn_04"
        />
    <Button android:text="6"
        android:id="@+id/btn_06"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_jia"
        app:layout_constraintStart_toEndOf="@id/btn_05"
        app:layout_constraintEnd_toEndOf="@id/btn_qk"
        />
    <Button android:text="*"
        android:id="@+id/btn_xin"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_jian"
        app:layout_constraintStart_toStartOf="@id/btn_ht"
        app:layout_constraintEnd_toStartOf="@id/btn_07"
        />
    <Button android:text="7"
        android:id="@+id/btn_07"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_jian"
        app:layout_constraintEnd_toStartOf="@id/btn_08"
        app:layout_constraintStart_toEndOf="@id/btn_xin"
        />
    <Button android:text="8"
        android:id="@+id/btn_08"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_jian"
        app:layout_constraintEnd_toStartOf="@id/btn_09"
        app:layout_constraintStart_toEndOf="@id/btn_07"
        />
    <Button android:text="9"
        android:id="@+id/btn_09"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_jian"
        app:layout_constraintStart_toEndOf="@id/btn_08"
        app:layout_constraintEnd_toEndOf="@id/btn_qk"
        />
    <Button android:text="/"
        android:id="@+id/btn_chu"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_xin"
        app:layout_constraintStart_toStartOf="@id/btn_ht"
        app:layout_constraintEnd_toStartOf="@id/btn_dian"
        />
    <Button android:text="."
        android:id="@+id/btn_dian"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_xin"
        app:layout_constraintEnd_toStartOf="@id/btn_00"
        app:layout_constraintStart_toEndOf="@id/btn_chu"
        />
    <Button android:text="0"
        android:id="@+id/btn_00"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_xin"
        app:layout_constraintEnd_toStartOf="@id/btn_deng"
        app:layout_constraintStart_toEndOf="@id/btn_dian"
        />
    <Button android:text="="
        android:id="@+id/btn_deng"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toBottomOf="@id/btn_xin"
        app:layout_constraintStart_toEndOf="@id/btn_00"
        app:layout_constraintEnd_toEndOf="@id/btn_qk"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

2、角度定位

常用属性：

layout_constraintCircle：角度定位参照目标组件
layout_constraintCircleAngle：偏移角度，参照组件垂直方向往右边转动角度
layout_constraintCircleRadius：距离

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">
    <!-- 按钮1 屏幕居中 -->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="94dp"
        android:text="按钮1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />
    <!-- 按钮2 相对按钮1旋转120度，且距离按钮1中心点120dp -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:text="按钮2"
        app:layout_constraintCircle="@id/button"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="120dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

3、权重和0dp

如果layout_width设置为0dp，那么控件就会水平铺开撑满所有空间
如果layout_height设置为0dp，那么控件就会垂直铺开撑满所有空间
layout_constraintHorizontal_weight：设置权重值，可以是任意数值

4、控件排成一排平均分布(默认)

一条链的第一个控件是这条链的链头，我们可以在链头中设置layout_constraintHorizontal_chainStyle来改变整条链的样式。chains提供了3种样式，分别是：

CHAIN_SPREAD：展开元素平均分布 (默认)
CHAIN_SPREAD_INSIDE：展开元素，但链的两端贴近parent
CHAIN_PACKED：链的元素将被打包在一起

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/button2" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button"
        app:layout_constraintRight_toLeftOf="@id/button3"  />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/button2"
        app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

5、Group分组

Group可以把多个控件归为一组，方便隐藏或显示一组控件

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="btn_deng,btn_00,btn_dian"/>

6、Barrier屏障

Barrier只是用来辅助布局，不会显示在页面上，其他组件可以和Barrier做约束。

constraint_referenced_ids：参考的组件id列表，多个用逗号(,)隔开
barrierDirection：屏障位于参考组件的位置，可选值（left、right、top、bottom、start、end）

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="btn_01,btn_02"
        />

到此这篇关于Android常用布局使用技巧示例讲解的文章就介绍到这了,更多相关Android常用布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Android数据存储方式操作模式解析
这篇文章主要为大家介绍了Android数据存储方式操作模式解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
Android消息通知栏的实现方法介绍
本篇文章是对Android消息通知栏的实现方法进行了详细的分析介绍，需要的朋友参考下
2013-06-06
Android实现仿网易新闻的顶部导航指示器
这篇文章主要介绍了Android实现仿网易新闻的顶部导航指示器的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08
android隐式意图激活自定义界面和系统应用界面的实例
下面小编就为大家带来一篇android隐式意图激活自定义界面和系统应用界面的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
Android生成随机数的方法实例
这篇文章主要为大家详细介绍了Android生成随机数的方法实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
Android读取XML文件中的数据
这篇文章主要为大家详细介绍了Android读取XML文件中的数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
Android SdkVersion的区别及获取版本信息方法
下面小编就为大家带来一篇Android SdkVersion的区别及获取版本信息方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
Android利用FlexboxLayout轻松实现流动布局
flexbox是属于CSS的一种布局方案，可以简单、完整、响应式的实现各种页面布局。谷歌将其引入以提高复杂布局的能力。下面这篇文章主要给大家介绍了在Android中利用FlexboxLayout轻松实现流动布局的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-04-04
Android自定义view实现圆环效果实例代码
本文通过实例代码给大家介绍了Android自定义view实现圆环效果，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-07-07
详解Android中Runtime解决屏幕旋转问题(推荐)
这篇文章主要介绍了Runtime解决屏幕旋转问题的方法，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09