ConstraintLayout中的chainstyle & guideline >

最新推荐文章于 2023-05-24 16:43:20 发布
最新推荐文章于 2023-05-24 16:43:20 发布
阅读量52 收藏
点赞数
文章标签： gitee
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tuhuiling/article/details/133109809
版权

ConstraintLayout中的chainstyle & guideline

有时候容易忘记，摘抄记录一下。

参考博客：https://blog.csdn.net/cui130/article/details/89849807

1、chainstyle(链式)

**属性 **有水平和垂直之分：

  • layout_constraintHorizontal_chainStyle 水平方向
  • layout_constraintVertical_chainStyle 垂直方向

属性值 有三种：

  • spread (默认) 如下：

    • 默认模式如下：

    • 使用weight方式如下：(layout_width=0dp)

      添加属性layout_constraintHorizontal_weight ,同理也有垂直方向的，可以自己尝试

  • spread_inside

  • packed

    • 捆绑在一起居中显示

    • 偏移显示

      添加属性layout_constraintHorizontal_bias

2、guideline(辅助线)

属性 辅助线也有垂直和水平之分，使用属性 orientation 来确定方向

  • horizontal 辅助线为水平方向
  • vertical 辅助线为垂直方向

确定辅助线的位置有三种属性：

  • layout_constraintGuide_begin 水平方向为距离左边的距离；垂直方向为距离上边的距离

    app:layout_constraintGuide_begin="100dp"

  • layout_constraintGuide_end 水平方向为距离右边的距离；垂直方向为距离下边的距离

    app:layout_constraintGuide_percent="0.6"

  • layout_constraintGuide_percent 水平方向为从左向右占比；垂直方向为距离从上到下占比

    app:layout_constraintGuide_end="50dp"

上面举例如下：(垂直方向，水平方向同理)

3、代码如下：
<TextView    
          android:id="@+id/weightStart"    
          android:layout_width="0dp"    
          android:layout_height="30dp"    
          android:text="weightStart"    
          android:textColor="#ffffff"    
          android:background="#83BB96"    
          android:gravity="center"    
          android:layout_marginTop="10dp"    
          app:layout_constraintHorizontal_chainStyle="spread"   
          app:layout_constraintHorizontal_weight="1"    
          app:layout_constraintStart_toStartOf="parent"    
          app:layout_constraintEnd_toStartOf="@id/weightCenter"    
          app:layout_constraintTop_toTopOf="parent"/>

<TextView    
          android:id="@+id/weightCenter"    
          android:layout_width="0dp"    
          android:layout_height="30dp"    
          android:text="weightCenter"    
          android:textColor="#ffffff"    
          android:background="#567B63"    
          android:gravity="center"    
          app:layout_constraintHorizontal_weight="2"   
          app:layout_constraintTop_toTopOf="@+id/weightStart"    
          app:layout_constraintStart_toEndOf="@+id/weightStart"    
          app:layout_constraintEnd_toStartOf="@+id/weightEnd"/>

<TextView    
          android:id="@+id/weightEnd"    
          android:layout_width="0dp"    
          android:layout_height="30dp"    
          android:text="weightEnd"    
          android:textColor="#ffffff"    
          android:background="#669999"    
          android:gravity="center"   
          app:layout_constraintHorizontal_weight="3"   
		  app:layout_constraintTop_toTopOf="@+id/weightStart"    
		  app:layout_constraintStart_toEndOf="@id/weightCenter"    
          app:layout_constraintEnd_toEndOf="parent"/>

<TextView    
          android:id="@+id/insideStart"    
          android:layout_width="wrap_content"    
          android:layout_height="30dp"    
          android:text="insideStart"    
          android:textColor="#ffffff"    
          android:background="#83BB96"    
          android:gravity="center"    
          android:layout_marginTop="10dp"    
          app:layout_constraintHorizontal_chainStyle="spread_inside"   
          app:layout_constraintStart_toStartOf="parent"   
          app:layout_constraintEnd_toStartOf="@id/insideCenter"   
          app:layout_constraintTop_toBottomOf="@+id/weightStart"/>

<TextView    
          android:id="@+id/insideCenter"    
          android:layout_width="wrap_content"    
          android:layout_height="30dp"    
          android:text="insideCenter"   
          android:textColor="#ffffff"    
          android:background="#567B63"   
          android:gravity="center"   
          app:layout_constraintTop_toTopOf="@+id/insideStart"   
          app:layout_constraintStart_toEndOf="@+id/insideStart"   
          app:layout_constraintEnd_toStartOf="@+id/insideEnd"/>

<TextView    
          android:id="@+id/insideEnd"   
          android:layout_width="wrap_content"    
          android:layout_height="30dp"   
          android:text="insideEnd"   
          android:textColor="#ffffff"   
          android:background="#669999" 
          android:gravity="center"   
          app:layout_constraintTop_toTopOf="@+id/insideStart"   
          app:layout_constraintStart_toEndOf="@id/insideCenter"   
          app:layout_constraintEnd_toEndOf="parent"/>

<TextView   
          android:id="@+id/PackedStart"    
          android:layout_width="wrap_content"   
          android:layout_height="30dp"   
          android:text="PackedStart"  
          android:textColor="#ffffff"   
          android:background="#83BB96"  
          android:gravity="center"  
          android:layout_marginTop="10dp"   
          app:layout_constraintHorizontal_chainStyle="packed"   
          app:layout_constraintStart_toStartOf="parent"   
          app:layout_constraintEnd_toStartOf="@id/PackedCenter"   
          app:layout_constraintTop_toBottomOf="@+id/insideStart"/>

<TextView   
          android:id="@+id/PackedCenter"    
          android:layout_width="wrap_content"    
          android:layout_height="30dp"   
          android:text="PackedCenter" 
          android:textColor="#ffffff"   
          android:background="#567B63"   
          android:gravity="center"   
          app:layout_constraintTop_toTopOf="@+id/PackedStart"   
          app:layout_constraintStart_toEndOf="@+id/PackedStart"   
          app:layout_constraintEnd_toStartOf="@+id/PackedEnd"/>

<TextView   
          android:id="@+id/PackedEnd"    
          android:layout_width="wrap_content"  
          android:layout_height="30dp"   
          android:text="PackedEnd"    
          android:textColor="#ffffff"  
          android:background="#669999"  
          android:gravity="center"    
          app:layout_constraintTop_toTopOf="@+id/PackedStart"   
          app:layout_constraintEnd_toEndOf="parent"    
          app:layout_constraintStart_toEndOf="@+id/PackedCenter"/>

<TextView    
          android:id="@+id/PackBiasStart"   
          android:layout_width="wrap_content"  
          android:layout_height="30dp"   
          android:layout_marginTop="8dp"  
          android:background="#83BB96" 
          android:gravity="center" 
          android:text="PackBiasStart"   
          android:textColor="#ffffff"    
          app:layout_constraintHorizontal_chainStyle="packed"   
          app:layout_constraintHorizontal_bias="0.2"    
          app:layout_constraintStart_toStartOf="parent"   
          app:layout_constraintEnd_toStartOf="@id/PackBiasCenter"   
          app:layout_constraintTop_toBottomOf="@+id/PackedStart" />

<TextView   
          android:id="@+id/PackBiasCenter"    
          android:layout_width="wrap_content"  
          android:layout_height="30dp"   
          android:text="PackBiasCenter"  
          android:textColor="#ffffff"   
          android:background="#567B63"  
          android:gravity="center"   
          app:layout_constraintTop_toTopOf="@+id/PackBiasStart"    
          app:layout_constraintStart_toEndOf="@+id/PackBiasStart"    
          app:layout_constraintEnd_toStartOf="@+id/PackBiasEnd"/>

<TextView    
          android:id="@+id/PackBiasEnd"    
          android:layout_width="wrap_content"   
          android:layout_height="30dp"   
          android:text="PackBiasEnd"   
          android:textColor="#ffffff"  
          android:background="#669999" 
          android:gravity="center"   
          app:layout_constraintTop_toTopOf="@+id/PackBiasStart"   
          app:layout_constraintStart_toEndOf="@id/PackBiasCenter"   
          app:layout_constraintEnd_toEndOf="parent"/>

<TextView   
          android:id="@+id/SpredStart"   
          android:layout_width="wrap_content"  
          android:layout_height="30dp"   
          android:text="SpredStart"  
          android:textColor="#ffffff" 
          android:background="#83BB96"   
          android:gravity="center" 
          android:layout_marginTop="10dp"    
          app:layout_constraintHorizontal_chainStyle="spread"   
          app:layout_constraintStart_toStartOf="parent"   
          app:layout_constraintEnd_toStartOf="@id/SpredCenter"    
          app:layout_constraintTop_toBottomOf="@+id/PackBiasStart"/>

<TextView   
          android:id="@+id/SpredCenter"    
          android:layout_width="wrap_content"  
          android:layout_height="30dp"   
          android:text="SpredCenter"  
          android:textColor="#ffffff"   
          android:background="#567B63"  
          android:gravity="center"    
          app:layout_constraintTop_toTopOf="@+id/SpredStart"    
          app:layout_constraintStart_toEndOf="@+id/SpredStart"    
          app:layout_constraintEnd_toStartOf="@+id/SpredEnd"/>

<TextView 
          android:id="@+id/SpredEnd"   
          android:layout_width="wrap_content"   
          android:layout_height="30dp"  
          android:text="SpredEnd"  
          android:textColor="#ffffff"   
          android:background="#669999" 
          android:gravity="center"   
          app:layout_constraintTop_toTopOf="@+id/SpredStart"   
          app:layout_constraintStart_toEndOf="@id/SpredCenter"   
          app:layout_constraintEnd_toEndOf="parent"/>

<androidx.constraintlayout.widget.Guideline
           android:id="@+id/guideline1"
	   android:layout_width="wrap_content"
	   android:layout_height="wrap_content"
           android:orientation="vertical"
	   app:layout_constraintGuide_begin="100dp"/>

<TextView   
          android:id="@+id/guide1"   
          android:layout_width="wrap_content"    
          android:layout_height="30dp"   
          android:text="SpredEnd"   
          android:textColor="#ffffff" 
          android:background="#669999"  
          android:gravity="center"    
          app:layout_constraintEnd_toStartOf="@+id/guideline1"   
          app:layout_constraintBottom_toBottomOf="parent"/>

<androidx.constraintlayout.widget.Guideline 
		android:id="@+id/guideline2"                                       		   
                android:layout_width="wrap_content"    
                android:layout_height="wrap_content"   
 		android:orientation="vertical"  
		app:layout_constraintGuide_end="50dp"/>

<TextView    
          android:id="@+id/guide2"    
          android:layout_width="wrap_content"    
          android:layout_height="30dp"    
          android:text="SpredEnd"  
          android:textColor="#ffffff" 
          android:background="#669999"   
          android:gravity="center"    
          app:layout_constraintEnd_toStartOf="@+id/guideline2"    
          app:layout_constraintBottom_toBottomOf="parent"/>

<androidx.constraintlayout.widget.Guideline
		android:id="@+id/guideline3"    
		android:layout_width="wrap_content"     
		android:layout_height="wrap_content"    
		android:orientation="vertical"   
		app:layout_constraintGuide_percent="0.6"/>

<TextView    
          android:id="@+id/guide3"    
          android:layout_width="wrap_content"   
          android:layout_height="30dp"    
          android:text="SpredEnd"    
          android:textColor="#ffffff"   
          android:background="#669999" 
          android:gravity="center"     
          app:layout_constraintEnd_toStartOf="@+id/guideline3"    
          app:layout_constraintBottom_toBottomOf="parent"/>
Wisdom Zhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android约束布局中 链,Android-ConstraintLayout(约束布局)-Chains链(链条布局,Nice)
weixin_39756895的博客
05-27 2370
到Chains这个部分了。之前的新项目做得登录，注册，重置密码等暂时还没用到这种。不过后面可能随着新的设计可能会涉及到。所以赶紧过来看看先。新项目基本就打算全部用约束布局实现了。实际用了也会越来越熟悉的。Chain链是一种特殊的约束让多个 chain 链连接的 Views 能够平分剩余空间位置像LinearLayout的权重，不过还扩展了很多功能。所以做权重什么的还是需要这种布局。*** 有点疑问...
ConstraintLayout 笔记
leidashuaige的专栏
04-02 3983
Chains Chains（链）是一种特定的约束，一个链包含了多个视图，它允许链中的视图共享空间，并控制可用空间在它们之间如何分配。该效果与 LinearLayout 的 Weiget 类似，但是链的作用远远超过它。 Cycle Chain Mode（链式模式）来告诉 Chains：“你应该怎样去填充剩余的空间”。 layout_constraintHorizontal_chainStyle layout_constraintVertical_chainStyle 分别对应着「水平链」和「垂直链」。 有三
【Android】约束布局 通过 layout_constraintHorizontal_chainStyle 链式约束保证多个组件中最前和最后的组件和父布局的间距保证一致
weixin_44002043的博客
05-24 1076
UI想要实现 多个组件在横竖屏情况下最左边和最右边的组件和父布局的距离保持一致，内部的间距自适应的方式。
ConstraintLayout不常用的属性
mChenys的博客
01-10 1725
Chains 链使我们能够对一组在水平或竖直方向互相关联的控件的属性进行统一管理。 成为链条的条件： 一组控件之间通过一个双向的约束关系链接起来，并且链的属性由一条链的头结点控制,如下图所示: 布局如下: &amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt; &amp;lt;android.support.constraint.Constrain
ConstraintLayout 细节
qq_39438055的博客
01-30 444
ConstraintLayout 细节
ConstrainLayout 使用简介
smiletofuture的专栏
07-18 516
参考：https://www.cnblogs.com/wisdomzhang/p/12309267.html 1、chainstyle（链式） **属性 **有水平和垂直之分： layout_constraintHorizontal_chainStyle水平方向 layout_constraintVertical_chainStyle垂直方向 属性值有三种： spread (默认) 如下： 默认模式如下： 使用weight方式如下：（layout_wid...
AndroidWithKotlin
04-23
ConstraintLayout->功能最强大，我想这是使用过的，它允许将组件“钩”到边缘或组件之间，以更快速的方式调整它们的空间和大小，并添加自己的准则。 consraintBottom_toBottomOf->作为示例，但从开始到顶部或因ID而...
ConstraintLayout 常见用法
weixin_44646748的博客
01-28 408
ConstraintLayout常见用法
ConstraintLayout约束布局
a1003434346的博客
09-28 3538
ConstraintLayout的基本属性： layout_constraintLeft_toLeftOf ----当前控件左边与目标控件左边对齐 layout_constraintLeft_toRightOf ----以此类推 layout_constraintRight_toLeftOf layout_constraint...
ConstraintLayout的调研
佩恩的博客
01-20 723
ConstraintLayout的使用 一：为什么要用他 ConstraintLayout（约束布局）在2016年的Google I/O大会上就推出来了，经历这几年的迭代，已经很成熟了，它能很轻易的去实现复杂的布局。使用ConstraintLayout后基本可以抛弃LinearLayout和RelativeLayout的使用。完全不需要任何嵌套就可以实现复杂的UI，使用起来特别清爽，减少界面层...
ConstraintLayout（约束布局）使用整理
jsxin0816的博客
10-26 2113
ConstraintLayout里面的属性太多不容易记住，最近逛B站发现一个阿里P7的大神讲解的课，自己整理记录一下。 一、ConstraintLayout优点： 1、解决了布局的层级嵌套问题 2、布局适配度较高：主要体现在bias（偏移量）属性 二、常用属性（ConstrintLayout相当于是加强版的RelativeLayout） 约束布局最少需要约束控件的两个方向的位置，即水平方向和垂直方向各一条边 1、与RelativeLayout差异：RelativeLayout包裹的控件的相对位置
ConstraintLayout约束布局属性
shenglong0210的博客
05-17 953
ConstraintLayout属性 相对定位 layout_constraintLeft_toLeftOf layout_constraintLeft_toRightOf layout_constraintRight_toLeftOf layout_constraintRight_toRightOf layout_constraintTop_toTopOf layout_constraintTo...
约束布局-ConstraintLayout
Android Studio
12-10 256
官方文档： https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout app:layout_constraintLeft_toRightOf="@+id/buttonA" 表示的是 b左对齐控件a控件右侧 app:layout_constraintLeft_toRightOf="parent" 表示的是 b左对齐父控件右侧 layout_constrai...
Android ConstraintLayout
zenmela2011的专栏
08-25 3199
1.ConstraintLayout ConstraintLayout指约束布局，目的是为了解决复杂的页面层级嵌套过多的问题。使用该布局，需要引入依赖implementation ‘androidx.constraintlayout:constraintlayout:2.1.2’ 2.属性用法 ①位置约束layout_constraintXXX_toYYYOf ConstraintLayout的位置约束属性如下，属性值可以是parent或者@+id/兄弟组件的id： layout_const.
ConstraintLayout 属性详解 和Chain的使用
weixin_33963594的博客
05-24 1019
想看我更多文章:【张旭童的博客】blog.csdn.net/zxt0601想来gayhub和我gaygayup:【mcxtzhang的Github主页】github.com/mcxtzhang 概述 小伙伴们好久不见，我又回来啦。说实话这篇文章写的算是比较晚了，距离ConstraintLayout出现至今已经有一年了。且自AS2.3起创建新的Activity,默认的layout根布局就是Con...
android layout editor,Android-ConstraintLayout详解（上）
weixin_42512103的博客
05-27 920
现在还不用ConstraintLayout是有点守旧了，它是studio 2.2版本主要增加的功能之一，最大的好一句话概括就是：支持可视化编辑xml文件，解决多层布局嵌套的问题，这也就优化了我们的程序，详情请查看：由于ConstarintLayout布局可以可视化和代码编写，我们就分别看看这两种方式。基本用法基本用法之可视化编写布局文件在高版本的studio中默认采用constraintLayou...
ConstraintLayout
Huang兄
10-29 666
2018-08-09 文章目录版本支持新特性Relative positioningMarginsCentering positioning and biasCircular positioning (Added in 1.1)Visibility behaviorDimension constraintsMinimum dimensions on ConstraintLayoutWidgets dimension constraintsWRAP_CONTENT:enforcing constraints
layout布局_Android ConstraintLayout 降低布局层次，布局优化首选
weixin_39983051的博客
11-27 731
目录1. 介绍2. ConstraintLayout的优点3. ConstraintLayout使用方法3.1 Relative positioning(相对定位)3.2 Margins(边距)3.3 Centering positioning(居中偏移)3.4 Circular positioning(圆心偏移)3.5 Visibility behavior(隐藏行为)3.6 Dimension...
使用约束布局ConstraintLayout完美解决多控件被挤出屏幕的问题
weixin_43979538的博客
04-10 5949
在Android开发中，经常需要与布局打交道，最近在开发中遇到一个问题，水平方向有多个控件，从左到右依次为ImageView(图标)、TextView(歌曲名)、ImageView(VIP标签)、TextView(作者)、ImageView(播放状态)。并且歌名和歌手字段单行显示，大概的实现效果如下： 如果用LinearLayout或者RelativeLayout来布局，那么效果可能是这样： 出现VIP标签和动画图标被挤出屏幕外面的问题。如果还是坚持要LinearLayout或者RelativeLay
layout_constraintHorizontal_chainStyle
最新发布
08-19
它可以应用于 ConstraintLayout 中的子视图。 水平链是指一组相邻的视图在水平方向上连接在一起，并通过约束条件来确定它们之间的相对位置。layout_constraintHorizontal_chainStyle 属性用于控制这些视图之间的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值