大家好，ConstraintLayout翻译成中文也称为约束布局，在整个使用体验过程中真的是贯穿约束二字，这一节先来介绍一些基础使用，后面你就会慢慢感受到约束布局的魅力。
首先看一下实现的效果吧，
首先介绍布局文件代码实现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"/>
主页代码实现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);
}
});
}
}
当前代码实现后的效果是这样的没有过渡动画效果:
想要实现动画的过渡效果需要引入一个库：
compile'com.android.support:transition:25.3.1'
然后在代码中的 constraintSet1.applyTo之前添加这一句
TransitionManager.beginDelayedTransition(firstLayout);
就可以实现动画过渡效果了
在整个ConstraintLayout的使用过程中，遇到了很多的问题，问题不在与xml界面的调整，而在于代码中ConstraintSet的使用，对于控件的设置上有很多属性，在很大方面满足了我们做需要的实现效果
Demo下载地址https://github.com/jinhui1314/ConstraintLayout
网友评论