文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-05-17 20:58

关注

一、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、相对定位

常用属性:

示例代码,计算器布局:

<?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、角度定位

常用属性:

<?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

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

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

<?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做约束。

    <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常用布局内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯