ConstraintLayout(约束布局)是Google提供开发者用来代替LinearLayout以及RelativeLayout从而减少布局的层级,下面我们来详细了解一下具体的使用方法。
一、用ConstraintLayout来代替RelativeLayout和LinearLayout
首先我们来看一下ConstraintLayout的最基本的几个属性:
layout_width
layout_height
layout_heightlayout_constraintLeft_toLeftOf (View A 与 View B 左对齐)
layout_constraintLeft_toRightOf (View A 的左边置于 View B 的右边)
layout_constraintRight_toLeftOf (View A 的右边置于 View B 的左边)
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
接下来我们看一下具体使用:
View宽高的设置:
layout_width和layout_height的设置有三种:0dp(通过约束条件设置宽高),wrap_content(宽高由View的内容决定),设置固定值(例如100dp)。
View约束条件的设置:
比如说想要实现这样一个布局,A距离父布局顶端50dp,距离父布局左侧50dp;B处于A的右侧并且B距离A的头部20dp;C在父布局中居中显示;D在父布局水平居中并与父布局bottom对齐;E在父布局垂直居中并与父布局left对齐
<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">
<TextView
android:id="@+id/text"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="50dp"
android:layout_marginTop="50dp"
android:background="@color/color_black"
android:gravity="center"
android:text="A"
android:textColor="@color/white"
android:textSize="24sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="20dp"
android:background="@color/color_orange"
android:gravity="center"
android:padding="10dp"
android:text="B"
android:textColor="@color/white"
android:textSize="24sp"
app:layout_constraintLeft_toRightOf="@+id/text"
app:layout_constraintTop_toTopOf="@id/text" />
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/text_color_reds"
android:gravity="center"
android:padding="10dp"
android:text="C"
android:textColor="@color/white"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/text_color_reds"
android:gravity="center"
android:padding="10dp"
android:text="D"
android:textColor="@color/white"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="@+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/text_color_reds"
android:gravity="center"
android:padding="10dp"
android:text="E"
android:textColor="@color/white"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
通过上面的代码我们可以知道View相对其他View的对齐以及位置和View相对父容器的居中怎么实现。
接下来我们再看一下LinearLayout中的权重weight怎么在ConstraintLayout中进行使用:
现在我们想实现这样的一个布局:A,B,C,D,E五个View平分父容器的宽
<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">
<TextView
android:id="@+id/text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@color/color_black"
android:gravity="center"
android:text="A"
android:textColor="@color/white"
android:textSize="24sp"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/text1"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/text1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@color/color_orange"
android:gravity="center"
android:text="B"
android:textColor="@color/white"
android:textSize="24sp"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toRightOf="@+id/text"
app:layout_constraintRight_toLeftOf="@+id/text2"
app:layout_constraintTop_toTopOf="@id/text" />
<TextView
android:id="@+id/text2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@color/text_color_reds"
android:gravity="center"
android:text="C"
android:textColor="@color/white"
android:textSize="24sp"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toRightOf="@+id/text1"
app:layout_constraintRight_toLeftOf="@id/text3"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/text3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@color/text_color_green"
android:gravity="center"
android:text="D"
android:textColor="@color/white"
android:textSize="24sp"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toRightOf="@id/text2"
app:layout_constraintRight_toLeftOf="@id/text4"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/text4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@color/color_0779ff"
android:gravity="center"
android:text="E"
android:textColor="@color/white"
android:textSize="24sp"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toRightOf="@id/text3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
二、设置View百分比约束
Android开发不可避免的会有一些屏幕适配的问题,百分比约束是解决问题的方式之一
我们现在定义一个这样的View:宽和高都是屏幕的1/2
<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">
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/color_black"
app:layout_constraintHeight_percent="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintWidth_percent="0.5" />
</android.support.constraint.ConstraintLayout>
三、设置View自身的宽高比
设置View的宽高比为16:9
<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">
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/color_black"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
四、Guideline(指示线)
一句话概括Guideline可以作为View的参照物进行定位,它的特性如下:
1:有垂直和水平两个方向
2:可见性为View.GONE
同样举个栗子说明:有两个View,A和B,它俩水平距离是50dp,相对于父容器居中
<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">
<TextView
android:id="@+id/text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="25dp"
android:background="@color/color_black"
android:gravity="center"
android:text="A"
android:textColor="@color/white"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="@id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="@+id/text1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:background="@color/color_orange"
android:gravity="center"
android:text="B"
android:textColor="@color/white"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
android:orientation="vertical"是Guideline的方向,app:layout_constraintGuide_percent="0.5"代表它的位置处于父容器的0.5。
五、ConstraintLayout的实战应用
综合上面的一些简单栗子我们来实现一个比较复杂的布局:
这种布局不管是LinearLayout还是RelativeLayout都不能做到不嵌套布局而画出来,但是ConstraintLayout却可以很轻松的实现,下面直接贴代码
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="@+id/img_avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/line"
android:layout_width="0dp"
android:layout_height="1px"
app:layout_constraintBottom_toBottomOf="@id/img_avatar"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/img_avatar" />
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:layout_marginLeft="15dp"
android:text="老王"
android:textColor="#333333"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="@id/line"
app:layout_constraintLeft_toRightOf="@id/img_avatar" />
<TextView
android:id="@+id/tv_article_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:text="发布文章数:189"
android:textSize="11sp"
app:layout_constraintLeft_toLeftOf="@+id/tv_title"
app:layout_constraintTop_toTopOf="@+id/line" />
<TextView
android:id="@+id/tv_fans_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="粉丝数:189"
android:textSize="11sp"
app:layout_constraintBottom_toBottomOf="@+id/tv_article_num"
app:layout_constraintLeft_toRightOf="@+id/tv_article_num"
app:layout_constraintTop_toTopOf="@+id/tv_article_num" />
<TextView
android:id="@+id/tv_follow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:background="@drawable/btn_apply"
android:paddingBottom="3dp"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:paddingTop="3dp"
android:text="关注"
android:textColor="#ffffff"
android:textSize="11sp"
app:layout_constraintBottom_toBottomOf="@id/img_avatar"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/img_avatar" />
<TextView
android:id="@+id/tv_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="我住隔壁我姓王,跟老王混,吃不了亏,上不了当,走过路过千万别错过"
android:textColor="#999999"
android:textSize="13sp"
app:layout_constraintLeft_toLeftOf="@id/img_avatar"
app:layout_constraintRight_toRightOf="@+id/tv_follow"
app:layout_constraintTop_toBottomOf="@id/img_avatar" />
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="@+id/tv_chat"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:background="@drawable/bg_shape_blue"
android:gravity="center"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:text="找他聊天"
android:textColor="#ffffff"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/guideline"
app:layout_constraintTop_toBottomOf="@+id/tv_content" />
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:background="@drawable/bg_shape_blue"
android:gravity="center"
android:paddingBottom="8dp"
android:id="@+id/tv_add"
android:paddingTop="8dp"
android:text="加他好友"
android:textColor="#ffffff"
app:layout_constraintLeft_toRightOf="@+id/guideline"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_content" />
</android.support.constraint.ConstraintLayout>
六、使用ConstraintLayout进行布局切换并加入过渡动画
我们经常会碰见一个布局包含多种状态,每一种状态对应的View不一样,状态切换后通过View.setVisibility来控制显示和隐藏,若只是View的显示与隐藏需要变化也就罢了但是就连位置也发生变化怎么办呢?此时ConstraintLayout就完美的解决了这问题。
咱们结合上面那个布局来说,有一个功能如下:点击按钮后整体布局往下移动140dp,并且另一个按钮隐藏。
先看看效果图
首先第一步:创建布局2
<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">
<ImageView
android:id="@+id/img_avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="150dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/line"
android:layout_width="0dp"
android:layout_height="1px"
app:layout_constraintBottom_toBottomOf="@id/img_avatar"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/img_avatar" />
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:layout_marginLeft="15dp"
android:text="老王"
android:textColor="#333333"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="@id/line"
app:layout_constraintLeft_toRightOf="@id/img_avatar" />
<TextView
android:id="@+id/tv_article_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:text="发布文章数:189"
android:textSize="11sp"
app:layout_constraintLeft_toLeftOf="@+id/tv_title"
app:layout_constraintTop_toTopOf="@+id/line" />
<TextView
android:id="@+id/tv_fans_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="粉丝数:189"
android:textSize="11sp"
app:layout_constraintBottom_toBottomOf="@+id/tv_article_num"
app:layout_constraintLeft_toRightOf="@+id/tv_article_num"
app:layout_constraintTop_toTopOf="@+id/tv_article_num" />
<TextView
android:id="@+id/tv_follow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:background="@drawable/btn_apply"
android:paddingBottom="3dp"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:paddingTop="3dp"
android:text="关注"
android:textColor="#ffffff"
android:textSize="11sp"
app:layout_constraintBottom_toBottomOf="@id/img_avatar"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/img_avatar" />
<TextView
android:id="@+id/tv_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="我住隔壁我姓王,跟老王混,吃不了亏,上不了当,走过路过千万别错过"
android:textColor="#999999"
android:textSize="13sp"
app:layout_constraintLeft_toLeftOf="@id/img_avatar"
app:layout_constraintRight_toRightOf="@+id/tv_follow"
app:layout_constraintTop_toBottomOf="@id/img_avatar" />
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="@+id/tv_chat"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:background="@drawable/bg_shape_blue"
android:gravity="center"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:text="找他聊天"
android:textColor="#ffffff"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_content" />
<TextView
android:id="@+id/tv_add"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:background="@drawable/bg_shape_blue"
android:gravity="center"
android:paddingBottom="8dp"
android:paddingTop="8dp"
android:text="加他好友"
android:textColor="#ffffff"
android:visibility="gone"
app:layout_constraintLeft_toRightOf="@+id/guideline"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_content" />
</android.support.constraint.ConstraintLayout>
可以看到布局2与布局1的区别就是“加他好友”按钮隐藏,头像距离屏幕top由10dp变为150dp。
第二步:
声明如下四个变量
private ConstraintLayout root;//需要切换的父布局
private ConstraintSet noFriendLayout;//布局1
private ConstraintSet isFriendLayout;//布局2
private boolean isFriend;//判断切换什么布局的标识
第三步:
给布局1和布局2初始化
noFriendLayout = new ConstraintSet();
noFriendLayout.clone(root);//由于父布局第一次显示的是布局1,所以布局1直接clone父布局就行
isFriendLayout = new ConstraintSet();
isFriendLayout.clone(this, R.layout.layout_isfriend);//初始化布局2
第四步:
切换
if (isFriend) {
TransitionManager.beginDelayedTransition(root);
noFriendLayout.applyTo(root);
isFriend = false;
} else {
TransitionManager.beginDelayedTransition(root);
isFriendLayout.applyTo(root);
isFriend = true;
}
最后贴上所有代码,还有切换的话必须保证布局内每个View都有id:
public class MainActivity extends AppCompatActivity {
private ConstraintLayout root;
private ConstraintSet noFriendLayout;
private ConstraintSet isFriendLayout;
private boolean isFriend;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
root = (ConstraintLayout) findViewById(R.id.root);
findViewById(R.id.tv_chat).setOnClickListener(new View.OnClickListener() {
@TargetApi(Build.VERSION_CODES.KITKAT)
@Override
public void onClick(View view) {
if (isFriend) {
TransitionManager.beginDelayedTransition(root);
noFriendLayout.applyTo(root);//将布局1设置到父布局
isFriend = false;
} else {
TransitionManager.beginDelayedTransition(root);
isFriendLayout.applyTo(root);//将布局2设置到父布局
isFriend = true;
}
}
});
noFriendLayout = new ConstraintSet();
noFriendLayout.clone(root);
isFriendLayout = new ConstraintSet();
isFriendLayout.clone(this, R.layout.layout_isfriend);
}
}
结论
LinearLayout和RelativeLayout能实现的功能ConstraintLayout都能实现,而且能够减少布局的层级并改善布局性能