下载最新的Android Studio之后,IDE新建Activity的时候,默认的根布局就是ConstraintLayout,一开始觉得很复杂看不懂,但是仔细学习之后发现是很好上手的。我从基础常见的线性布局、表格布局中脱离,体验学习了ConstraintLayout,本文用于记录使用过程中ConstraintLayout的各种知识。
平台支持
- Android 2.3
- 在build.gradle中添加依赖
com.android.support.constraint:constraint-layout:[版本号]
基础使用
ConstraintLayout中文称为约束布局,以一个简单的textView标签为例。创建完工程之后,新建一个activity,会自动生成对应的xml layout文件,切换到Design Tab,可以可视化看到整个布局操作界面。
首先拖动一个TextView到视图中央,然后什么也不做:
我们可以看到它自动生成的代码是这样的:
运行之后:
实际运行之后发现这个textView还是位于屏幕左上角,说好的居中呢!?这里就需要引入ConstrainLayout的约束,我们看到这个xml源码中,布局预览时能够看到显示居中的textView,是因为控件属性设置中引用了两个tools命名空间下的属性,但是这两个属性只在预览中有效,实际运行时是不生效的。因此,我们返回Design视图,当鼠标移至textView会看到控件上下左右有四个圆点,拖动添加约束:
自动生成的代码文件:
这样就可以看到想要的运行结果啦:
进阶使用
在后一张xml源码文件中,可以看到多出了形如
app:layout_constraintTop_toTopOf=”parent”
这样的约束。在ConstrainLayout中,这种类型的属性可以通过设置left、right、top、bottom、start、end、baseline 来完成我们熟悉的RelativeLayout(相对布局)的很多功能,设置控件与控件之间的相对位置。
例如:设置两个button的相对位置为上下,如下图:
运行结果:
简单体会
- 布局比较高效:Android有很多布局方式,也有很多是通过拖拽来实现的,但是ConstrainLayout能够真正意义上实现所见即所得,极大提高了开发效率;
- 轻松简便实现复杂的布局:一定意义上解决了复杂布局情况下多重布局嵌套的难题;
最后,ConstrainLayout其实还有很多隐藏技能我还没有发掘,会继续在项目中努力学习和实践