大家好似嗤，ConstraintLayout翻譯成中文也稱為約束布局旷偿，在整個使用體驗(yàn)過程中真的是貫穿約束二字砚作，這一節(jié)先來介紹一些基礎(chǔ)使用懂扼，后面你就會慢慢感受到約束布局的魅力禁荸。
首先看一下實(shí)現(xiàn)的效果吧，
首先介紹布局文件代碼實(shí)現(xiàn)activiy_main：
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"
android:id="@+id/contentPanel"
tools:context="com.example.edianzu.nweproject.MainActivity"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
android:id="@+id/start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Change"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintHorizontal_bias="0.028"
app:layout_constraintVertical_bias="0.0"/>
android:id="@+id/reset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reset"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.0"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="0.944"/>
android:id="@+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="8dp"
app:layout_constraintHorizontal_bias="0.214"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="@mipmap/ic_launcher"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"/>
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintLeft_toRightOf="@+id/imageView"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.375"/>
布局代碼activity2:
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"
android:id="@+id/contentPanel"
tools:context="com.example.edianzu.nweproject.MainActivity"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
android:id="@+id/start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Change"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintHorizontal_bias="0.028"
app:layout_constraintVertical_bias="0.0"/>
android:id="@+id/reset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reset"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.0"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="0.944"/>
android:id="@+id/imageView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="8dp"
app:layout_constraintHorizontal_bias="0.438"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="@mipmap/ic_launcher"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"/>
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.231"
app:layout_constraintTop_toBottomOf="@+id/imageView"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"/>
主頁代碼實(shí)現(xiàn)MainActivity：
packagecom.example.edianzu.nweproject;
importandroid.os.Build;
importandroid.os.Bundle;
importandroid.support.annotation.RequiresApi;
importandroid.support.constraint.ConstraintLayout;
importandroid.support.constraint.ConstraintSet;
importandroid.support.transition.TransitionManager;
importandroid.support.v7.app.AppCompatActivity;
importandroid.view.View;
importandroid.widget.Button;
public classMainActivityextendsAppCompatActivity {
privateConstraintSetconstraintSet1,constraintSet2;
privateConstraintLayoutfirstLayout;
privateButtonstart;
privateButtonreset;
booleanisFirst=true;
@Override
protected voidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
constraintSet1=newConstraintSet();
constraintSet2=newConstraintSet();
firstLayout= (ConstraintLayout) findViewById(R.id.contentPanel);
start= (Button) findViewById(R.id.start);
reset= (Button) findViewById(R.id.reset);
constraintSet1.clone(firstLayout);
constraintSet2.clone(this,R.layout.activity2);
start.setOnClickListener(newView.OnClickListener() {
@RequiresApi(api=Build.VERSION_CODES.KITKAT)
@Override
public voidonClick(View view) {
constraintSet2.applyTo(firstLayout);
}
});
reset.setOnClickListener(newView.OnClickListener() {
@RequiresApi(api=Build.VERSION_CODES.KITKAT)
@Override
public voidonClick(View view) {
constraintSet1.applyTo(firstLayout);
}
});
}
}
當(dāng)前代碼實(shí)現(xiàn)后的效果是這樣的沒有過渡動畫效果:
想要實(shí)現(xiàn)動畫的過渡效果需要引入一個庫：
compile'com.android.support:transition:25.3.1'
然后在代碼中的? ? constraintSet1.applyTo之前添加這一句
TransitionManager.beginDelayedTransition(firstLayout);
就可以實(shí)現(xiàn)動畫過渡效果了
在整個ConstraintLayout的使用過程中微王，遇到了很多的問題屡限，問題不在與xml界面的調(diào)整，而在于代碼中ConstraintSet的使用炕倘，對于控件的設(shè)置上有很多屬性钧大，在很大方面滿足了我們做需要的實(shí)現(xiàn)效果
Demo下載地址https://github.com/jinhui1314/ConstraintLayout
