使用ConstraintLayout实现复杂布局(一)

已于 2022-06-01 10:50:43 修改
阅读量757 收藏 1
点赞数
分类专栏： Android 文章标签： android android studio android-studio
于 2020-09-28 17:56:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Tony/article/details/108854578
版权

效果如下:
在这里插入图片描述
在这里插入图片描述

这个布局整体来说难度不大，主要的难点是中间三个活动墙的布局需要兼容不同分辨率不失真。

涉及的依赖库：

implementation : "com.google.android.material:material:1.2.1"
implementation : "androidx.constraintlayout:constraintlayout:2.0.1"
implementation : "com.scwang.smartrefresh:SmartRefreshLayout:1.1.0-alpha-14"

布局如下：

<?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"
    android:background="@color/color_F8F8F8">
    <RelativeLayout
        android:id="@+id/dq_tab_home_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:paddingHorizontal="@dimen/dp_18"
        android:paddingVertical="@dimen/dp_10"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="@dimen/sp18"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:layout_centerVertical="true"
            android:text="斗圈"/>
        <LinearLayout
            android:id="@+id/sign_gift_ll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center"
            android:background="@mipmap/bg_aa1900"
            android:layout_alignParentEnd="true"
            android:paddingVertical="@dimen/dp_8"
            android:paddingHorizontal="@dimen/dp_8">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/gift_icon_white"
                android:layout_marginHorizontal="@dimen/dp_5"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="签到有礼"
                android:textColor="@color/white"
                android:layout_marginEnd="@dimen/dp_5"/>
        </LinearLayout>
    </RelativeLayout>
    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/dq_home_task_refreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:srlAccentColor="#00000000"
        app:srlEnablePreviewInEditMode="true"
        app:srlPrimaryColor="#00000000"
        app:srlEnableRefresh="false">
        <com.scwang.smartrefresh.layout.header.ClassicsHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/color_F8F8F8">

                <ImageView
                    android:id="@+id/join_dq_banner"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/join_dq_banner"
                    android:adjustViewBounds="true"
                    app:layout_constraintTop_toTopOf="parent"/>

                <LinearLayout
                    android:id="@+id/dq_home_tab"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/white"
                    android:paddingVertical="@dimen/dd_dp24"
                    app:layout_constraintTop_toBottomOf="@+id/join_dq_banner">
                    <LinearLayout
                        android:id="@+id/dq_home_make_money"
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:gravity="center_horizontal">
                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@mipmap/home_make_money_icon"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="@color/color_333333"
                            android:textSize="@dimen/sp16"
                            android:layout_marginTop="@dimen/dp_8"
                            android:text="赚钱"/>
                    </LinearLayout>
                    <LinearLayout
                        android:id="@+id/dq_home_make_task"
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:gravity="center_horizontal">
                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@mipmap/home_make_task_icon"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="@color/color_333333"
                            android:textSize="@dimen/sp16"
                            android:layout_marginTop="@dimen/dp_8"
                            android:text="发任务"/>
                    </LinearLayout>
                    <LinearLayout
                        android:id="@+id/dq_home_dq_currency"
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:gravity="center_horizontal">
                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@mipmap/home_dq_currency_icon"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="@color/color_333333"
                            android:textSize="@dimen/sp16"
                            android:layout_marginTop="@dimen/dp_8"
                            android:text="斗币"/>
                    </LinearLayout>
                    <LinearLayout
                        android:id="@+id/dq_home_dq_shop"
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:gravity="center_horizontal">
                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@mipmap/home_dq_shop_icon"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textColor="@color/color_333333"
                            android:textSize="@dimen/sp16"
                            android:layout_marginTop="@dimen/dp_8"
                            android:text="斗币商城"/>
                    </LinearLayout>
                </LinearLayout>

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/dq_home_active_wall"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/dp_10"
                    android:background="@color/white"
                    android:paddingHorizontal="@dimen/dp_8"
                    android:paddingTop="@dimen/dp_16"
                    android:paddingBottom="@dimen/dp_8"
                    app:layout_constraintTop_toBottomOf="@+id/dq_home_tab">

                    <LinearLayout
                        android:id="@+id/active_wall_title"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:paddingBottom="@dimen/dp_16"
                        app:layout_constraintTop_toTopOf="parent">
                        <View
                            android:layout_width="@dimen/dp_5"
                            android:layout_height="match_parent"
                            android:background="@drawable/label_vertical_f39825"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="热门活动推荐"
                            android:textSize="@dimen/sp16"
                            android:textColor="@color/color_333333"
                            android:layout_marginStart="@dimen/dp_10"/>
                    </LinearLayout>

                    <ImageView
                        android:id="@+id/invite_friend_money"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:src="@mipmap/invite_friend_money_bg"
                        android:adjustViewBounds="true"
                        app:layout_constraintTop_toBottomOf="@+id/active_wall_title"
                        app:layout_constraintWidth_percent="0.35"
                        app:layout_constraintDimensionRatio="h,76:100"
                        app:layout_constraintStart_toStartOf="parent"/>
                    <ImageView
                        android:id="@+id/red_package_rain"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:src="@mipmap/red_package_rain_bg"
                        android:adjustViewBounds="true"
                        app:layout_constraintWidth_percent="0.63"
                        app:layout_constraintDimensionRatio="w,35:100"
                        app:layout_constraintTop_toBottomOf="@+id/active_wall_title"
                        app:layout_constraintEnd_toEndOf="parent"/>
                    <ImageView
                        android:id="@+id/turntable"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:src="@mipmap/turntable_bg"
                        android:layout_marginTop="@dimen/dp_10"
                        android:adjustViewBounds="true"
                        app:layout_constraintWidth_percent="0.63"
                        app:layout_constraintDimensionRatio="w,35:100"
                        app:layout_constraintBottom_toBottomOf="@+id/invite_friend_money"
                        app:layout_constraintEnd_toEndOf="parent"/>
                    <ImageView
                        android:id="@+id/newcomer_gift"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/newcomer_gift_bg"
                        android:layout_marginTop="@dimen/dp_10"
                        android:adjustViewBounds="true"
                        android:visibility="visible"
                        app:layout_constraintTop_toBottomOf="@+id/invite_friend_money"/>
                </androidx.constraintlayout.widget.ConstraintLayout>
                <LinearLayout
                    android:id="@+id/task_ll"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:background="@color/white"
                    android:paddingTop="@dimen/dp_8"
                    android:paddingHorizontal="@dimen/dp_8"
                    android:layout_marginTop="@dimen/dp_10"
                    app:layout_constraintTop_toBottomOf="@+id/dq_home_active_wall">
                    <LinearLayout
                        android:id="@+id/receiver_task_label"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:paddingBottom="@dimen/dp_16"
                        app:layout_constraintTop_toTopOf="parent">
                        <View
                            android:layout_width="@dimen/dp_5"
                            android:layout_height="match_parent"
                            android:background="@drawable/label_vertical_f39825"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="做任务赚钱啦~"
                            android:textSize="@dimen/sp16"
                            android:textColor="@color/color_333333"
                            android:layout_marginStart="@dimen/dp_10"/>
                    </LinearLayout>

                    <com.wd.daquan.view.BaseRecycleView
                        android:id="@+id/dq_home_task_brv"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content" />

                </LinearLayout>
            </androidx.constraintlayout.widget.ConstraintLayout>
        </androidx.core.widget.NestedScrollView>
        <com.scwang.smartrefresh.layout.footer.ClassicsFooter
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </com.scwang.smartrefresh.layout.SmartRefreshLayout>
</LinearLayout>

参考链接：

1、相对父控件百分比布局：https://blog.csdn.net/day_moon/article/details/99848546

2、百分比约束：https://www.jianshu.com/p/321aa66a787f

3、adjustViewBounds属性 : https://www.jianshu.com/p/49f8d5e5965b?utm_campaign=haruki
4、ConstraintLayout动画(ConstraintSet): https://developer.android.google.cn/reference/android/support/constraint/ConstraintSet
5、Android ConstraintLayout 2.0：ConstraintLayoutStates(界面各种状态)：https://blog.csdn.net/weixin_41620505/article/details/84964992
6、ConstraintLayout2.0进阶之路-欢迎新同学(VirtualLayouts的使用)：https://blog.51cto.com/u_9894631/2796073
7、ConstraintLayout 2.0新特性解析（一）–Flow流式布局：https://www.jianshu.com/p/568e3c22e9db
8、Android ConstraintLayout详细教程：https://blog.csdn.net/ymeddmn/article/details/122263613

Mr_Tony
关注
专栏目录
使用ConstrainLayout进行复杂布局的绘制
Peterpan1223的博客
09-09 477
关于基本使用在此就不讲了，放几个小案例直接看看怎么使用。 需求 三张图宽高比为1:1 左边图片占总宽度的2份，右边占1份 圆头像一半覆盖左边大图 <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/container" android:layout_width="mat...
使用ConstraintLayout构建一个灵活的布局
maplejaw的博客
09-22 7737
简介ConstraintLayout允许你在不使用任何嵌套的情况下创建大型而又复杂的布局。它与RelativeLayout非常相似，所有的view都依赖于兄弟控件和父控件的相对关系。但是，ConstraintLayout比RelativeLayout更加灵活且在Android Studio的布局编辑器中更易于使用。 由于ConstraintLayout所能做的一切都可以从布局编辑器的可视化工具中直
约束布局ConstraintLayout看这一篇就够了
weixin_34167819的博客
09-27 3085
目录 1.介绍 2.为什么要用ConstraintLayout 3.如何使用ConstraintLayout 3.1 添加依赖 3.2 相对定位 3.3 角度定位 3.4 边距 3.5 居中和偏移 3.6 尺寸约束 3.7 链 4.辅助工具 4.1 Optimizer 4.2 Barrier 4.3 Group 4.4 Placeholder 4.5.Guideline 5.总结 1.介绍 约...
使用ConstraintLayout实现复杂布局(二)
Mr_Tony的专栏
09-29 266
布局效果如下： 该布局主要复杂的地方是“活动规则”、“每邀请1名新用户您可以获得18.8元”、“好友注册后，ta可得7天会员体验”、“立即邀请”、“我的邀请战绩”、“战绩列表”(当前暂无记录)等内容是灵活可变的，需要保障在不同手机上不失真。由于其形状的不固定，所以实现起来有一定的难度。 涉及的依赖 implementation : "com.google.android.material:material:1.2.1" implementation : "androidx.constraintlayout
ConstraintLayout 几种复杂布局的实现
非猿
07-18 278
特殊的布局，layout_constrainedWidth
使用ConstraintLayout创建复杂的表单布局
jonave的专栏
05-21 1494
原文地址：Flex – Complex Form layouts with ContraintLayout Form容器默认使用FormLayout布局排列子表单项。FormLayout继承自VerticalLayout，它对FormItem容器进行纵向排列。如果你想实现纵向的排列表单，这当然好，但是很多时候往往不是这样。看看下面的例子。 通常情况下，我看到开发者在实现
ConstraintLayout布局的使用总结
wumingzhou123的博客
01-08 2490
本文根据本人学习和使用记录的内容。 ConstraintLayout，比较牛逼的一种布局，结合了其他几种布局的优点，也可以看做RelativeLayout的升级版。 使用ConstraintLayout需要引入： implementation 'com.android.support.constraint:constraint-layout:1.1.3' 首先很重要也是很基础的几个属性 app:...
Android界面设计：使用ConstraintLayout实现复杂布局
- 为什么选择ConstraintLayout进行复杂布局设计？ - 与其他布局方式的对比和优势 # 3. ConstraintLayout基础 ConstraintLayout的基本概念和使用方法 ConstraintLayout是一种灵活强大的布局方式，它通过约束关系...
ConstraintLayout的layout布局文件
11-13
在Android开发中，`ConstraintLayout`是Google推出的一种强大的布局工具，它允许开发者创建复杂的、响应式的用户界面，而无需嵌套多个布局。本练习文件集合包含了一系列的`layout`布局文件，旨在帮助你深入理解和...
使用ConstraintLayout构建复杂的布局
而ConstraintLayout是Android平台上一种强大的布局方式，它能够帮助开发者轻松实现复杂的界面布局。ConstraintLayout基于约束（Constraints）来定义控件之间的相对定位关系，相比传统的布局方式，它具有诸多优势。 ...
Android RecyclerView 实现复杂 界面 多个不同的 Item布局
04-28
欢迎来下载RecyclerView实现复杂界面，本demo是由本人去多方百度参考后写成， 易于会ListView的小伙伴们理解，如demo有问题可以加QQ:731712249(加Q请说明来意)，也可以加入Android交流群讨论：586620031
Android-只用recyclerview实现复杂首页布局布局随增减数据动态显示
08-13
只用recyclerview实现复杂首页布局，布局随增减数据动态显示 下拉刷新上拉加载更多
Android-一个用于快速开发复杂List布局的框架
08-12
一个用于快速开发复杂List布局的框架
android 布局之ConstraintLayout的使用
08-27
* 可以快速实现复杂的布局 * 可以实现在不同屏幕尺寸和方向下的自适应布局 * 可以实现在xml文件中定义控件的布局 五、ConstraintLayout的应用场景 ConstraintLayout可以应用于各种android应用程序的布局设计和实现...
使用ConstraintLayout实现响应式布局设计
# 章节一：理解ConstraintLayout ...相对于传统的布局方式（如LinearLayout、RelativeLayout等），ConstraintLayout可以更加灵活、高效地实现复杂的布局结构，并且能够更好地适配不同尺寸和方向的设备。 ## 1.3 Cons
ConstrainLayout解决复杂的嵌套布局
热门推荐
Andy_Lin的博客
03-03 1万+
今天我要讲的是，项目中复杂的嵌套布局你讲采取何种方式呢？如果按常规方式去做，估计你做完一个界面，估计够呛。我将推荐你们使用谷歌推出的ConstrainLayout,虽然还没有出正式版本，但用于复杂嵌套布局，能解决你很多问题。
Android复杂界面布局解决方案
jixiongxu的博客
01-12 1万+
前言    最近接近年关，公司项目没什么事情做。闲暇之余的时间笼统的做了一个app的框架（虽然我不知道这样算不算是框架）。      我们知道，很多App的界面是非常复杂的，如果按照常规的方法去写layout.xml文件的话，app在控件少的时候没有问题，但是如果控件一旦变多，或者控件之间的嵌套非常复杂的时候，后期维护成本是非常巨大的，第一是代码非常复杂，很难看懂。第二是app加载耗时会增加（有可
ConstraintLayout 布局应用
IT小蔡的博客
07-07 523
ConstrainLayout官方文档 https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html 目录 ConstraintLayout常用标签 1、相对位置约束 2、Circular positioning (Added in 1.1) 圆形定位 3、D...
不一样的RecyclerView优雅实现复杂列表布局（二）
向着太阳迎着光
03-14 5419
前言学习了（一）中那个RecyclerView的一些基础知识，如果没有具体看懂可以再返回看不一样的RecyclerView优雅实现复杂列表布局（一），那么接下来我们就在（一）的基础之上，完善稍微复杂一点数据处理。不一样的RecyclerView优雅实现复杂列表布局（二）中使用的是GridLayoutManager模式，实现混合使用的效果： 1.首先加载的数据要有所改变，多种形式的数据加载，在Mai
ConstraintLayout布局
最新发布
06-08
ConstraintLayout是Android中的一种布局，它可以让开发者通过添加约束条件来确定控件之间的位置和大小关系。相比其他布局，ConstraintLayout可以更灵活地适应不同屏幕尺寸和方向，同时也可以减少布局嵌套，提高布局性能。 在ConstraintLayout中，每个控件都要设置至少两个约束条件来确定其位置和大小。约束条件可以是与父容器的边距、与其他控件的位置关系、与父容器或其他控件的宽高比等。通过这些约束条件的组合，可以实现复杂的布局效果。 与其他布局相比，ConstraintLayout的学习曲线可能会稍微陡峭一些，但一旦掌握了其使用方法，就可以轻松实现各种复杂的布局效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值