ConstraintLayout

2017-06-26 本文已影响189人我想成为创业者

一：什么是ConstraintLayout
ConstraintLayout即约束布局, 在2016年由Google大力推出, ConstraintLayout现已在Android studio中成为HelloWorld项目的默认布局

二：为什么使用ConstraintLayout（优势）
减少布局的层级, 优化渲染性能

三：怎样使用ConstraintLayout

设置基本位置layout_constraint[本源]_[目标]="[目标ID]"

设置居中(父视图中心即居中)

        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"

设置满屏

        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"

设置match_parent不起任何作用，要设置为0dp(记住match_parent不是被废弃了,而是从ConstraintLayout嵌套的视图中移除掉了）

设置向左或向右移动

        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0.6"//设置水平比例
        app:layout_constraintVertical_bias="0.5" //设置竖直比例

设置视图宽高比例

        android:layout_width="200dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"

       <ImageView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:src="@drawable/recognise_top"
                app:layout_constraintDimensionRatio="1:1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

Guideline使用(考虑到适配最好用百分比)

      <android.support.constraint.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

常用方法
app:layout_constraintDimensionRatio="4:3"// 设置宽高比例
app:layout_constraintHorizontal_bias="0.6"//设置水平比例
app:layout_constraintVertical_bias="0.5"//设置竖直比例

Chain使用（spread、packed、spread_inside三种属性，默认spread）

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
    <Button
        android:id="@+id/button1"
        android:text="Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintVertical_bias="0.227"
        app:layout_constraintRight_toLeftOf="@+id/button2"
        app:layout_constraintHorizontal_chainStyle="spread"
        />
    <Button
        android:text="Button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        app:layout_constraintTop_toTopOf="@+id/button1"
        app:layout_constraintBottom_toBottomOf="@+id/button1"
        app:layout_constraintRight_toLeftOf="@+id/button3"
        app:layout_constraintLeft_toRightOf="@+id/button1"
    />
    <Button
        android:text="Button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button1"
        app:layout_constraintBottom_toBottomOf="@+id/button1"
        app:layout_constraintLeft_toRightOf="@+id/button2"
     />
</android.support.constraint.ConstraintLayout>

chain五种视图
spread元素被展开
spread_inside链头和尾部的视图都自动地依附到了父容器的左右两边
layout_constraintHorizontal_weight设置比例

android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"

packed所有的视图会默认变为水平居中
packed+bias设置偏移量

3.设置android:visibility="gone"隐藏视图后，布局遭到破坏

当第一个按钮隐藏（没设置app:layout_goneMarginLeft="16dp"），第二个按钮执行android:layout_marginLeft="100dp"
设置`app:layout_goneMarginLeft="16dp"`前
当第一个按钮隐藏（设置app:layout_goneMarginLeft="16dp"），第二个按钮执行app:layout_goneMarginLeft="16dp"
设置`app:layout_goneMarginLeft="16dp"`后

4.ConstraintLayout动画使用

    public class MainActivity extends AppCompatActivity {
    private ConstraintLayout constraintLayout;
    private ConstraintSet applyConstraintSet = new ConstraintSet();
    private ConstraintSet resetConstraintSet = new ConstraintSet();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_two);
        constraintLayout = (ConstraintLayout) findViewById(R.id.main);
        resetConstraintSet.clone(constraintLayout);
        applyConstraintSet.clone(constraintLayout);
    }
    /**
     * 执行margin动画
     */
    public void onApplyClick(View view) {
        TransitionManager.beginDelayedTransition(constraintLayout);
        applyConstraintSet.setMargin(R.id.button1, ConstraintSet.START, 0);
        applyConstraintSet.applyTo(constraintLayout);
    }
    /**
     * 回复到执行动画前动画
     */
    public void onResetClick(View view) {
        TransitionManager.beginDelayedTransition(constraintLayout);
        resetConstraintSet.applyTo(constraintLayout);
    }
}

常用方法

applyConstraintSet.setMargin(R.id.button1,ConstraintSet.START,margin值);//设置margin
applyConstraintSet.centerHorizontally(R.id.button1, R.id.main);//设置在父控件横向居中
applyConstraintSet.centerVertically(R.id.button3, R.id.main);//设置在父控件纵向居中
applyConstraintSet.constrainWidth(R.id.button1,600); //设置宽，高度设置方法constrainHeight
applyConstraintSet.setVisibility(R.id.button2,ConstraintSet.GONE);
applyConstraintSet.connect(R.id.button1,ConstraintSet.LEFT,R.id.main,ConstraintSet.LEFT,0);//设置控件间联系
applyConstraintSet.createHorizontalChain(R.id.button1, ConstraintSet.LEFT, R.id.button3,  ConstraintSet.RIGHT,
new int[]{R.id.button1,R.id.button2, R.id.button3},null, ConstraintWidget.CHAIN_PACKED);

实现元素共享动画效果

public class ConstraintSetExampleActivity extends AppCompatActivity {
    private boolean mShowBigImage = false;
    private ConstraintLayout mRootLayout;
    private ConstraintSet mConstraintSetNormal = new ConstraintSet();
    private ConstraintSet mConstraintSetBig = new ConstraintSet();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.constraintset_example_main);//（constraintset_example_main点击前的效果图）
        mRootLayout = (ConstraintLayout) findViewById(R.id.activity_constraintset_example);
        mConstraintSetNormal.clone(mRootLayout);
        mConstraintSetBig.load(this, R.layout.constraintset_example_big); //load或者clone(constraintset_example_big点击后的效果图)
    }
    private void reset(View view) {
        TransitionManager.beginDelayedTransition(mRootLayout);
        mConstraintSetNormal.applyTo(mRootLayout);
    }
    private void apply(View view) {
        TransitionManager.beginDelayedTransition(mRootLayout);
        mConstraintSetBig.applyTo(mRootLayout);
    }
}

编辑器

参考目录：
gold-miner系列

ConstraintLayout

猜你喜欢

热点阅读