ConstrainLayout初探

概述

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的大小

举例

<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 设置链式效果

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"/>

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"/>

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"/>

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"/>

动态布局

动态添加一个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));