ConstrainLayout初探

最新推荐文章于 2024-09-04 21:19:39 发布
最新推荐文章于 2024-09-04 21:19:39 发布
阅读量989 收藏
点赞数
分类专栏： android-实用技巧
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daltsoftware/article/details/80362227
版权

概述

ConstraintLayout, 即约束布局, 在2016年由Google I/O推出. 从支持力度而言, 将成为主流布局样式, 完全代替其他布局, 减少布局的层级, 优化渲染性能. 在新版Android Studio中, ConstraintLayout已替代RelativeLayout, 成为HelloWorld项目的默认布局. ConstraintLayout作为非绑定(Unbundled)的支持库, 命名空间是app:, 即来源于本地的包命名空间. 最新版本是1.0.1(2017.4.21), 在项目的build.gradle中声明.

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
}

静态布局

layout_constraintDimensionRatio 设置宽高比

layout_constraintLeft_toLeftOf //左边对齐到指定控件左边
layout_constraintLeft_toRightOf //左边对齐到指定控件右边
layout_constraintRight_toLeftOf 
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf

# 即文章的baseline对齐
layout_constraintBaseline_toBaselineOf

# 与left,right类似
layout_constraintStart_toEndOf 
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

# margin不需要解释
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

//比如要作一个悬浮指定纵横向百分比位置时候可以用
layout_constraintHorizontal_bias 横向拉扯  
layout_constraintVertical_bias  纵向拉扯

layout_constraintHorizontal_chainStyle
layout_constraintVertical_chainStyle


layout_constraintVertical_weight  类似于线性布局的weight

Guideline 基准线，用于view对齐，但不会显示在屏幕

ConstraintLayout中0代表：MATCH_CONSTRAINT,这个布局通过约束去控制UI的显示，而不是通过设定view的大小

举例

image

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    //----------------------------------------
    完成①视图

    <TextView
        android:id="@+id/banner"
        android:layout_width="0dp"//0带表MatchConstrain，约束
        android:layout_height="0dp"
        android:background="#765"
        android:gravity="center"
        android:text="Banner"
        app:layout_constraintDimensionRatio="H,16:6" //设置以高为基准设置高和宽的比例
        app:layout_constraintLeft_toLeftOf="parent" //和父布局左对齐
        app:layout_constraintRight_toRightOf="parent" /> //和父布局右对齐

    //-----------------------------
        完成②视图
    <Button
        android:id="@+id/icon_head"
        android:background="@color/colorAccent"
        app:layout_constraintDimensionRatio="H,2:1"
        app:layout_constraintTop_toBottomOf="@id/banner"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="200dp"
        android:layout_height="0dp"/>
    <TextView
        android:id="@+id/name"
        app:layout_constraintTop_toTopOf="@id/icon_head"//上对齐上
        android:textSize="13sp"
        android:text="123232"
        app:layout_constraintLeft_toRightOf="@id/icon_head"//左对齐右
        android:layout_width="0dp"
        android:layout_height="20dp"/>

    <TextView
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toLeftOf="@id/name"
        app:layout_constraintTop_toBottomOf="@id/name"//上对齐下
        android:text="1212121212121123123123"
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>

    //----------------------------------------------
    完成视图③，设置weight相同则则平分父布局宽度

    <Button
        android:id="@+id/btn1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/black"
        app:layout_constraintHorizontal_weight="2"//设置占比2
        app:layout_constraintRight_toLeftOf="@id/btn2"//对齐
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>
    <Button
        app:layout_constraintLeft_toRightOf="@+id/btn1"//对齐
        android:id="@+id/btn2"
        app:layout_constraintRight_toLeftOf="@id/btn3"//对齐
        app:layout_constraintHorizontal_weight="3"//设置占比3
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/holo_green_dark"
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>
    <Button
        app:layout_constraintHorizontal_weight="1"//设置占比1
        app:layout_constraintLeft_toRightOf="@+id/btn2"
        android:id="@+id/btn3"
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintRight_toRightOf="parent"//对齐
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>

//------------------------------------------------
    bias用法，设置中心点位置百分比
     完成视图④
    <Button
        android:id="@+id/float_btn"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintVertical_bias="0.9"//竖直方向中心点距离顶部90%高度
        app:layout_constraintHorizontal_bias="0.5"//水平方向中心点距离50%宽度
        app:layout_constraintLeft_toLeftOf="parent"//对齐方式设置为四个方位都对齐
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="60dp"//指定大小
        android:layout_height="60dp"/>
//----------------------------------------------
    完成视图⑤
    基准线对齐
    <android.support.constraint.Guideline
        android:id="@+id/guide_v"
        app:layout_constraintGuide_percent="0.7"//距离左边缘70%
        android:orientation="vertical"//设置竖直方向
        android:layout_width="1dp"
        android:layout_height="match_parent"/>
    <android.support.constraint.Guideline
        android:id="@+id/guide_h"
        app:layout_constraintGuide_percent="0.8"//距离顶部80%
        android:orientation="horizontal"//横线线 
        android:layout_width="wrap_content"
        android:layout_height="match_parent"/>
    <Button
        android:text="悬浮按钮"
        app:layout_constraintLeft_toRightOf="@id/guide_v"//通过基准线来设置view位置
        app:layout_constraintTop_toBottomOf="@id/guide_h"
        android:layout_width="60dp"
        android:layout_height="60dp"/>
//------------------------------------------
</android.support.constraint.ConstraintLayout>
layout_constraintHorizontal_chainStyle 设置链式效果

image

  • spread width=0
    此种情况下即是例子中的③视图，可以通过weight来设定比例,默认即是spread

  • spread width != 0

    <Button
        app:layout_constraintHorizontal_chainStyle="spread"
        android:id="@+id/btn1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/black"
        app:layout_constraintRight_toLeftOf="@id/btn2"
        android:layout_width="30dp"
        android:layout_height="wrap_content"/>
    <Button
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toRightOf="@+id/btn1"
        android:id="@+id/btn2"
        app:layout_constraintRight_toLeftOf="@id/btn3"
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/holo_green_dark"
        android:layout_width="40dp"
        android:layout_height="wrap_content"/>
    <Button
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toRightOf="@+id/btn2"
        android:id="@+id/btn3"
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="60dp"
        android:layout_height="wrap_content"/>

image

  • spread_inside + 宽度非0
    <Button
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        android:id="@+id/btn1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/black"
        app:layout_constraintRight_toLeftOf="@id/btn2"
        android:layout_width="30dp"
        android:layout_height="wrap_content"/>
    <Button
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toRightOf="@+id/btn1"
        android:id="@+id/btn2"
        app:layout_constraintRight_toLeftOf="@id/btn3"
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/holo_green_dark"
        android:layout_width="40dp"
        android:layout_height="wrap_content"/>
    <Button
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toRightOf="@+id/btn2"
        android:id="@+id/btn3"
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="60dp"
        android:layout_height="wrap_content"/>

image

  • packed + width非0
    <Button
        app:layout_constraintHorizontal_chainStyle="packed"
        android:id="@+id/btn1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/black"
        app:layout_constraintRight_toLeftOf="@id/btn2"
        android:layout_width="30dp"
        android:layout_height="wrap_content"/>
    <Button
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toRightOf="@+id/btn1"
        android:id="@+id/btn2"
        app:layout_constraintRight_toLeftOf="@id/btn3"
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/holo_green_dark"
        android:layout_width="40dp"
        android:layout_height="wrap_content"/>
    <Button
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toRightOf="@+id/btn2"
        android:id="@+id/btn3"
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="60dp"
        android:layout_height="wrap_content"/>

image

  • packed + bias
    <Button
        app:layout_constraintHorizontal_bias="0.3"//左偏30%宽度
        app:layout_constraintHorizontal_chainStyle="packed"
        android:id="@+id/btn1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/black"
        app:layout_constraintRight_toLeftOf="@id/btn2"
        android:layout_width="30dp"
        android:layout_height="wrap_content"/>
    <Button
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toRightOf="@+id/btn1"
        android:id="@+id/btn2"
        app:layout_constraintRight_toLeftOf="@id/btn3"
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/holo_green_dark"
        android:layout_width="40dp"
        android:layout_height="wrap_content"/>
    <Button
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toRightOf="@+id/btn2"
        android:id="@+id/btn3"
        app:layout_constraintTop_toBottomOf="@+id/icon_head"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="60dp"
        android:layout_height="wrap_content"/>

image

动态布局

动态添加一个button

        ConstraintLayout mRootLy = findViewById(R.id.root_ly);
        ConstraintSet constraintSet = new ConstraintSet();
        mDynBtn = new Button(TestAACActivity.this);
        mDynBtn.setId(R.id.dyn_btn);
        //添加view
        mRootLy.addView(mDynBtn);
        //克隆set
        constraintSet.clone(mRootLy);
        constraintSet.constrainWidth(mDynBtn.getId(), ConstraintLayout.LayoutParams.WRAP_CONTENT);
        constraintSet.constrainHeight(mDynBtn.getId(), ConstraintLayout.LayoutParams.WRAP_CONTENT);
        //放在父布局的底部
        constraintSet.connect(mDynBtn.getId(), ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM);
        //放在mCurrStatusTv的右边，并且margin=30px
        constraintSet.connect(mDynBtn.getId(), ConstraintSet.LEFT, mCurrStatusTv.getId(), ConstraintSet.RIGHT, 30);
        //和mAddRemoveBtn上对齐
        constraintSet.connect(mDynBtn.getId(), ConstraintSet.TOP, mAddRemoveBtn.getId(), ConstraintSet.TOP);
        //应用约束
        constraintSet.applyTo(mRootLy);

移除view

mRootLy.removeView(mRootLy.findViewById(R.id.dyn_btn));
白云苍狗日悠悠
关注
专栏目录
constrain-layout
09-11
constrain-layout1.1.0版本，适合公司下载不了自己手动下载导入
约束布局ConstraintLayout看这一篇就够了
weixin_34167819的博客
09-27 3125
目录 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.介绍 约...
Android ConstraintLayout 约束布局 1
最新发布
2401_86392012的博客
09-04 1255
2.0的自定义Helper和motionLayout还未明白，先不记录，后期学完再补进来。
ConstrainLayout布局
悟心的专栏
10-12 1647
本篇文章的主题是ConstraintLayout。其实ConstraintLayout是Android Studio 2.2中主要的新增功能之一，也是Google在去年的I/O大会上重点宣传的一个功能。我们都知道，在传统的Android开发当中，界面基本都是靠编写XML代码完成的，虽然Android Studio也支持可视化的方式来编写界面，但是操作起来并不方便，我也一直都不推荐使用可视化的方式来编写Android应用程序的界面。 而ConstraintLayout就是为了解决这一现状而出现的。它和传统编
ConstrainLayout 基础教程，android插件化开发指南pdf
m0_64319112的博客
11-17 277
纵向：Top、Bottom、Baseline（文本底部的基准线） 根据布局中的其他元素或视图, 确定View在屏幕中的位置, 受到三类约束, 即其他视图, 父容器(parent), 基准线(Guideline). layout_constraint[本源位置]_[目标位置]="[目标ID]" 例如: app:layout_constraintBottom_toBottomOf="@+id/constraintLayout" 约束当前View的底部至目标View的底部, 目标View是constraint.
ConstrainLayout
qq_43775976的博客
03-14 280
ConstrainLayout概述特点使用onMeasureonLayout 概述 ConstraintLayout可让您使用扁平视图层次结构（无嵌套视图组）创建复杂的大型布局。它与RelativeLayout相似，其中所有的视图均根据同级视图与父布局之间的关系进行布局，但其灵活性要高于 RelativeLayout，并且更易于与 Android Studio 的布局编辑器配合使用。 ConstraintLayout的所有功能均可直接通过布局编辑器的可视化工具来使用，因为布局 API 和布局编辑器是专为彼此
天干地支在择时中的应用初探20211017.pdf
10-20
天干地支在择时中的应用初探 天干地支是中国古代的计时系统，用于记录和预测时间周期。天干地支系统由十个天干（甲乙丙丁戊己庚辛壬癸）和十二个地支（子丑寅卯辰巳午未申酉戌亥）组成。天干地支的阴阳属性奇数为阳...
基于计算机软件开发的JAVA编程应用初探.pdf
06-27
在计算机软件开发中，Java编程语言的应用是极为广泛与深远的。Java语言自问世以来就以其独特的特性和优势吸引了大量开发者的注意，这些特性包括但不限于其平台独立性、内存管理优化、面向对象的编程设计以及其强大的...
constraintLayout
chenqianleo的博客
10-13 1331
ConstraintLayout（约束布局）从开始学习android，刚接触的Android studio只有四种默认布局，新建一个项目的初始默认布局是RelativeLayout。但是一个月后就有了默认的ConstraintLayout但是一直没有去使用过，抽个一晚上的时间学习一下，总结一下。我可以不精通，但是我要知道它是什么东西~~~三个问题1.ConstraintLayout优点 2.Con
constraint-layout-solver-1.0.0-alpha1
07-06
Failed to resolve: com.android.support.constraint:constraint-layout:1.0.0-alpha1
ConstraintLayout（约束布局）使用详解
一个IT人的技术成长历程。
10-01 7496
ConstraintLayout 是一个使用“相对定位”灵活地确定微件的位置和大小的一个布局，在 2016 年 Google I/O 中面世，它的出现是为了解决开发中过于复杂的页面层级嵌套过多的问题——层级过深会增加绘制界面需要的时间，影响用户体验，以灵活的方式定位和调整小部件。从 Android Studio 2.3起，创建layout文件就已经是默认ConstraintLayout了，但是尽管Google如此大力推这项技术，但在当时很少有人使用，近些年逐渐被大家拿起来，啊真香！（此处无图胜有图）。
【约束布局】ConstraintLayout 约束布局 ( 简介 | 引入依赖 | 基本操作 | 垂直定位约束 | 角度定位约束 | 基线约束 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
06-28 5496
一. ConstraintLayout 简介 1. 引入 约束 布局 ( 1 ) 约束性布局 作用 和 简介 2. 约束 简介 ( 1 ) 约束个数要求 ( 2 ) 约束设置 与 显示位置 3. ConstraintLayout 引入 ( 1 ) ConstraintLayout 依赖添加 ( 2 ) ConstraintLayout 转换 与 添加 二. ConstraintLayout 约束 的 基本操作 1. 约束基本操作 ( 1 ) Design ( 设计 ) 和 Bluepr
ConstrainLayout约束布局
qq_65337539的博客
11-07 1793
ConstrainLayout约束布局
使用ConstrainLayout进行复杂布局的绘制
Peterpan1223的博客
09-09 487
关于基本使用在此就不讲了，放几个小案例直接看看怎么使用。 需求 三张图宽高比为1:1 左边图片占总宽度的2份，右边占1份 圆头像一半覆盖左边大图 <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/container" android:layout_width="mat...
【Android】【Layout】ConstrainLayout
天天向上 Up Up Up (*^▽^*)
03-23 407
学布局的最好方式，就是自己放几个控件，把属性一一尝试一遍。 只看文章，不愿尝试，是种很懒惰的习惯，学习要有耐心，不要怕费时间。 TopToTopOf，BaselineToBaselineOf Margin（设置了参照对象才有效） Guideline（参照线，Orientation，GuidePercent，GuideBegin，GuideEnd） Bias（同时指定了Top和Bottom...
学习笔记-Constraint_layout(约束布局)
saviour的博客
08-23 389
谷歌推出constraint_layout  虽然还没流行开来，但是早已听闻这个布局的牛B之处，流行只是早晚的事，再加上下个项目里面，项目经理提到用这个布局，我就顺便分享一下这个学习过程； 参考文章： ConstraintLayout (这到底是什么) ConstraintLayout ( 这到底是什么 ) (小贴士及小技巧) 第二部分 Constraint Layout 动画 |动态
nginx架构初探：多进程模型与进程管理
nginx平台初探 Nginx 是一个高性能的 Web 服务器， Proxy 服务器，缓存服务器和负载均衡器。其高性能与其架构是分不开的。那么 Nginx 究竟是怎么样的呢？下面我们来初识一下 Nginx 框架。 **Nginx 架构** Nginx ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值