Android ConstraintLayout 布局

最新推荐文章于 2022-03-24 12:43:47 发布
最新推荐文章于 2022-03-24 12:43:47 发布
阅读量257 收藏
点赞数 1
分类专栏： Android 文章标签： Android ConstraintLayout
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33842627/article/details/83757472
版权

AndroidStudio 3.0 默认ConstraintLayout布局，可以减少布局层级并提高布局性能；能够灵活的定位和调整子View的大小，子View依靠约束关系来确定位置。

一、基本属性
属性作用
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文本内容基准线对齐
layout_constraintStart_toEndOf起始边向尾部对齐
layout_constraintStart_toStartOf起始边向起始边对齐
layout_constraintEnd_toStartOf尾部向起始边对齐
layout_constraintEnd_toEndOf尾部向尾部对齐

这些属性为控件添加了某个方向的约束力，根据某个方向约束力的“有无”和“强弱”，空间会位于不同的位置

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/tv1"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv1"
            android:gravity="center"
            android:textSize="20pt"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
    <TextView
            android:id="@+id/tv2"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv2"
            android:gravity="center"
            android:textSize="20pt"
            app:layout_constraintBottom_toBottomOf="parent"
			app:layout_constraintLeft_toRightOf="@+id/tv1"
            app:layout_constraintTop_toBottomOf="@+id/tv1"/>
    <TextView
            android:id="@+id/tv3"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv3"
         android:gravity="center"
            android:textSize="20pt"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/tv2"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tv2"/>

</android.support.constraint.ConstraintLayout>

在这里插入图片描述

tv1设置了上、左的约束
tv2设置了左、上、下的约束，有上下居中的效果
tv3设置了上、下、左、右的约束，有居中的效果

二、偏移量
属性作用
layout_constraintHorizontal_bias水平方向偏移量
layout_constraintVertical_bias垂直方向偏移量
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/tv1"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv1"
            android:gravity="center"
            android:textSize="20pt"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>


</android.support.constraint.ConstraintLayout>

tv1设置了居中

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/tv1"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv1"
            android:gravity="center"
            android:textSize="20pt"
            app:layout_constraintVertical_bias="1"
            app:layout_constraintHorizontal_bias="0.8"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>


</android.support.constraint.ConstraintLayout>

设置它的垂直偏移量为1，水平偏移量为0.8

在这里插入图片描述

三、Visibility 属性

如果View的属性Visibility设置为gone，那么原本依赖它来参照定位的属性就会失效，ConstraintLayout布局会有所不同

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/tv1"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv1"
            android:gravity="center"
            android:textSize="20pt"
            app:layout_constraintHorizontal_bias="0.2"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
    <TextView
            android:id="@+id/tv2"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv2"
            android:gravity="center"
            android:textSize="20pt"
            app:layout_goneMarginTop="100dp"
            app:layout_constraintLeft_toRightOf="@+id/tv1"
            app:layout_constraintTop_toBottomOf="@+id/tv1"/>


</android.support.constraint.ConstraintLayout>

在这里插入图片描述

当tv1的Visibility 属性设置为gone时，tv1缩小为一个不可见的点，位于原先位置的左上角，属性app:layout_goneMarginTop="100dp"就会生效，tv2移到新的位置

在这里插入图片描述

四、宽高比

其他布局中要实现View的宽高比会比较麻烦，ConstraintLayout中可以直接实现：

  • 将View的宽高设置为0dp
  • 设置 app:layout_constraintDimensionRatio属性
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <ImageView
            android:id="@+id/iv1"
            android:background="@color/colorPrimary"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="16:9"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

在这里插入图片描述
还支持这样的写法
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintDimensionRatio="W,9:16"

五、控件权重

ConstraintLayout 可以像LinearLayout 一样为之控件设置layout_weight属性，从而控制子控件之间的占比

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/tv1"
            android:background="@color/colorPrimary"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="text1"
            app:layout_constraintHorizontal_weight="2"
            app:layout_constraintRight_toLeftOf="@id/tv2"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
    <TextView
            android:id="@+id/tv2"
            android:background="@color/colorAccent"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="text2"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@id/tv1"
            app:layout_constraintRight_toLeftOf="@id/tv3"
            app:layout_constraintTop_toTopOf="parent"/>
    <TextView
            android:id="@+id/tv3"
            android:background="@color/colorPrimaryDark"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="text3"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@id/tv2"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>


</android.support.constraint.ConstraintLayout>

在这里插入图片描述
横向相当于一个链(Chains)，在链的最左边的元素成为链头，还可以给它设置一些属性(layout_constraintHorizontal_chainStyle)，来展示更多的效果

  • 当wight不等于0
    app:layout_constraintHorizontal_chainStyle="spread"(默认)
    在这里插入图片描述
    app:layout_constraintHorizontal_chainStyle="packed"
    在这里插入图片描述
    app:layout_constraintHorizontal_chainStyle="spread_inside"在这里插入图片描述
六、锚向指示线

其实指示线(Guideline)是来帮助定位的，不会出现在实际界面中，它有几个特性：

  • 宽度和高度都是0
  • 可见性为View.GONE
  • 通过orientation设置方向
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <android.support.constraint.Guideline
            android:id="@+id/gl1"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    <android.support.constraint.Guideline
            android:id="@+id/gl2"
            app:layout_constraintGuide_begin="100dp"
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    <TextView
            android:id="@+id/tv1"
            android:background="@color/colorPrimary"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="tv1"
            android:gravity="center"
            android:textSize="20pt"
            app:layout_constraintLeft_toLeftOf="@id/gl1"
            app:layout_constraintTop_toTopOf="@id/gl2"/>

</android.support.constraint.ConstraintLayout>

设置横向指示线距离顶部 100dp
竖向指示线设置其距离百分比为 0.5

在这里插入图片描述

k_every
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android layout_weight 百分比,Android ConstraintLayout百分比布局使用详解
weixin_39529302的博客
05-26 1361
Android ConstraintLayout百分比布局使用详解发布时间：2018-08-21 15:51,浏览次数：802, 标签：AndroidConstraintLayoutAndroid ConstraintLayout是谷歌推出替代PrecentLayout的组件。支持相对布局、线性布局、帧布局，笔者看来更像是FrameLayout、LinearLayout、RelativeLayou...
ConstraintLayout
悟心的专栏
06-10 800
ConstrainLayout 是 AndroidStudio2.2 的新特性，能够很方便的用于可视化开发，有点类似于 ios 的 storyboard，解决了 xml 过于复杂的问题。 约束 相对定位（Relative positioning） 也就是我们之前常用的relativelayout，属性也与其一致，使用方法如：layout_constraintLeft_toLeftOf，位置用一张图片解释。 边距（Margins） 同之前的margin使用方法。 goneMargin.
constraintlayout布局新特性_ConstraintLayout「最全总结」
weixin_39907289的博客
12-21 1730
现在大家几乎都使用过ConstraintLayout，但与经常使用的布局相比，可能会面临不熟悉CL的API或者是逐渐增加的新特性，还有可能因为对CL具体行为的理解模糊而导致误用，这篇文章的目的更多的是，全面总结ConstraintLayout的用法和实际行为特性，并不断更新基于ConstraintLayout 1.1，当前2.0版本处于测试阶段参考文章：ConstraintLayout入门指南为什...
Android基本控件之ConstraintLayout
qq_36451275的博客
07-18 578
一、ConstraintLayout 1、 ConstraintLayout作为一款可以灵活调整view位置和大小的ViewGroup，ConstrantLayOut在复杂布局中能够有效的，降低布局的层级，提高性能，使用更加的灵活。 在app中的依赖 2、相对定位： 相对定位，其实这跟RelativeLayout差不多，一个View相对于另一个View的位置 通过简单的使用Co...
ConstraintLayout 实现LinearLayout weight效果
wqbs369的专栏
07-03 5382
一：水平方向 水平方向需要设置步骤如下 设置view的layoutwidth=0dp,id分别为view1,view2 分别view1 view2的 app:layout_constraintHorizontal_weight="1" 分别设置view1与view2的左右依赖 view1 需要设置 layout_constraintLeft_toRightOf="@+id/view2" view2需要设置依赖 layout_constraintRight_toLef...
android 布局之ConstraintLayout的使用
08-27
虽然Android Studio的可视化编辑个人不推荐使用，但是ConstraintLayout布局的使用还是有必要了解的。 二、使用ConstraintLayout的步骤 1. 在app的build.gradle里面引入：compile '...
详解Android ConstraintLayout 约束布局的用法
08-28
Android ConstraintLayout 约束布局的用法详解 ConstraintLayout 是 Google 于 2016 年发布的新布局方案，旨在解决传统 Android 开发中界面编写的不便捷问题。 ConstraintLayout 的出现，解决了布局嵌套过多的问题...
ConstraintLayout的layout布局文件
11-13
在Android开发中，`ConstraintLayout`是Google推出的一种强大的布局工具，它允许开发者创建复杂的、响应式的用户界面，而无需嵌套多个布局。本练习文件集合包含了一系列的`layout`布局文件，旨在帮助你深入理解和...
Android布局实现圆角边框效果
01-05
首先，在res下面新建一个文件夹drawable，在drawable下面新建三个xml文件：shape_corner_down.xml、shape_corner_up.xml和shape_corner.xml，分别是下面两个角是圆角边框，上面两个角是圆角...solid android:color=#0
android,demo,Android ConstraintLayout 使用详解
05-28
`ConstraintLayout`是Android Studio 2.2版本引入的新布局，它允许开发者以更直观的方式定义视图之间的关系，使得布局设计更加灵活，特别适合创建响应式布局。与传统的线性或相对布局相比，`ConstraintLayout`可以...
klayout-0.23.3-win64-install.exe
03-22
IC Layout View and Edit
android studio项目-ConstraintLayout布局案例
11-26
android studio项目-ConstraintLayout布局案例。 新版本的android studio开发工具新增的一个非常厉害的布局ConstraintLayout，可以高效率地进行应用界面的布局开发。
Android ConstraintLayout的使用
12-22
创建一个`ConstraintLayout`非常简单，只需在XML布局文件中添加`<androidx.constraintlayout.widget.ConstraintLayout>`作为根元素。然后，可以将其他视图（如TextView、ImageView等）作为子视图添加，并使用约束来...
android demo，ConstraintLayout （约束布局）
05-28
**约束布局(ConstraintLayout)是Android开发中一种强大的布局工具，尤其在构建复杂用户界面时，它的灵活性和高效性使其成为首选。这个“android demo”是专门为开发者展示如何使用ConstraintLayout设计界面而创建的...
Android-ConstraintLayout约束布局的概念与使用
08-12
ConstraintLayout(约束布局), 是2016年Google I/O最新推出的Android布局, 目前还在完善阶段. 从推出的力度而言, 应该会成为主流布局样式. 在最新版本的Android Studio中, ConstraintLayout已经成为默认布局.
ConstraintLayout 布局中使用 weight
cau_eric的专栏
06-06 8559
比如要使两个控件各占一半，就要使用 weight，这个时候关键点在于要两个控件互相关联： <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
Klayout入门（1）基本图形绘制
qq_43639199的博客
03-24 2万+
根据B站KLayout的教学视频写的
KLayout教程（一）画不同的形状
热门推荐
集成光电子
11-24 2万+
1、首先创建一个newlayout 2、创建一个layer，在edit-layer-newlayer即可创建，名字自己命名即可 3、画方形图形，就是Box，选择你右边的图层，直接可以画。可以在edit-editor options-编辑画的最小的网格，如下图我选othergrid选择1um，这个可以根据你需要光刻的最小的尺寸定义。然后你还可以用select双击你画的图形定义他的位置。 3、清除一些你看不见的小点（可能不知道啥时候在哪个地方画了一下，在现在这个zoom下看不见），此时就可以用...
android约束布局报错,[博客迁移][Android] 依赖ConstraintLayout报错，Could not find *****，Failed to resolve:****...
weixin_30647423的博客
05-26 488
这篇文章为您讲述依赖ConstraintLayout报错，Could not find *****，Failed to resolve:*****的相关介绍，具体代码请看下文ConstraintLayout 约束布局，Android Studio2.2中新增功能之一，2.3版本的Android Studio支持在约束布局中使用 Chains(链接) 和 Ratio(比例) 。使用Constrain...
Android ConstraintLayout布局中实现上下滑动
最新发布
05-25
<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <!-- 在此添加布局内容 --> </androidx.constraintlayout.widget....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值