澳门新葡萄京娱乐场 2

澳门新葡萄京娱乐场ConstraintLayout 布局

早先没有 ConstraintLayout,大家用
LinearLayout,后来发现嵌套太麻烦,所以有了ConstraintLayout。

Module中默认的布局就是ConstraintLayout。如下所示:

android ConstraintLayout 实现一个简单登录界面布局

android
studio新建工程已经使用ConstraintLayout来作为默认布局了。作为一个android小菜鸟,这两天学习了一下新的布局。

ConstraintLayout是基于约束的布局,有点类似ios的autolayout。下面我们用一个很简单的登录界面来学习一下android的ConstraintLayout。

澳门新葡萄京娱乐场 1

这是一个简单的登录界面。既然ConstraintLayout是基于约束的布局,那么我们在布局之前就要考虑一下布局界面需要哪些约束。以上图的登录界面为例,基本的约束有用户名标签和密码标签右对齐,用户名输入框和密码输入对齐,用户名标签和用户名输入框基线对齐,密码标签和密码输入框基线对齐,登录和注册按钮水平居中对其。

下面我们介绍一下如何在xml中配置这些约束。首先我们设置一条参考线(GuideLine)用来作为布局的顶部参考,对应右侧蓝图中的虚线

<pre>

<android.support.constraint.Guideline

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

app:layout_constraintGuide_percent=”0.15″

android:id=”@+id/hLine1″

android:orientation=”horizontal”

/>

</pre>

我们创建了一条水平参考线,距离顶部距离为0.15倍(也可以使用dp)。

接下来我们配置一下用户名标签的约束。左边和父视图对齐,右边和输入框对齐,上边和我们添加的水平参考线对其,然后我们调整了一下各个方向的margin。

<pre>

<TextView

android:id=”@+id/userNameText”

android:layout_width=”100dp”

android:layout_height=”0dp”

android:layout_marginStart=”20dp”

android:layout_marginTop=”30dp”

android:text=”@string/userName”

android:gravity=”end”

app:layout_constraintLeft_toLeftOf=”parent”

app:layout_constraintRight_toLeftOf=”@+id/userNameEdit”

app:layout_constraintTop_toTopOf=”@+id/hLine1″

/>

</pre>

用户输入框的约束和用户名标签的类似,只是添加了一种新的基线对齐约束。

<pre>

<EditText

android:id=”@+id/userNameEdit”

android:layout_width=”0dp”

android:layout_height=”wrap_content”

android:layout_marginStart=”20dp”

android:layout_marginEnd=”20dp”

app:layout_constraintRight_toRightOf=”parent”

app:layout_constraintLeft_toRightOf=”@+id/userNameText”

app:layout_constraintTop_toTopOf=”@+id/hLine1″

app:layout_constraintBaseline_toBaselineOf=”@+id/userNameText”

android:hint=”@string/usernameHint”

android:layout_marginTop=”15dp”/>

</pre>

密码标签和密码输入框的约束和上面的约束类似。

下面我们来布局一下登录和注册按钮。我们要求的效果是登录按钮和注册按钮都是水平居中的。有两种方案,一种是使用guideline,我们添加一条垂直的的参考线,percent设置为0.5,然后注册按钮的right和登录按钮的left对齐参考线。另一种方案是使用ConstraintLayout的链式风格。使用参考线的方式来对齐我们已经用过了,下面我们尝试使用chainStyle来布局。

<pre>

<Button

android:id=”@+id/regButton”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”@string/register”

android:layout_marginTop=”40dp”

android:layout_marginEnd=”30dp”

app:layout_constraintHorizontal_chainStyle=”packed”

app:layout_constraintTop_toBottomOf=”@id/userPasswordEdit”

app:layout_constraintRight_toLeftOf=”@+id/loadButton”

app:layout_constraintLeft_toLeftOf=”parent”

app:layout_constraintHorizontal_bias=”0.5″

/>

<Button

android:id=”@+id/loadButton”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”@string/load”

app:layout_constraintTop_toTopOf=”@id/regButton”

app:layout_constraintRight_toRightOf=”parent”

app:layout_constraintLeft_toRightOf=”@id/regButton”

/>

</pre>

澳门新葡萄京娱乐场 2

上图为官方文档中几种链式风格的介绍。对于我们的登录界面我们需要用到Packed
Chain风格,确保注册和登录按钮的左右margin相等。

<pre>

<Button

android:id=”@+id/regButton”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”@string/register”

android:layout_marginTop=”40dp”

android:layout_marginEnd=”30dp”

app:layout_constraintHorizontal_chainStyle=”packed”

app:layout_constraintTop_toBottomOf=”@id/userPasswordEdit”

app:layout_constraintRight_toLeftOf=”@+id/loadButton”

app:layout_constraintLeft_toLeftOf=”parent”

/>

<Button

android:id=”@+id/loadButton”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”@string/load”

app:layout_constraintTop_toTopOf=”@id/regButton”

app:layout_constraintRight_toRightOf=”parent”

app:layout_constraintLeft_toRightOf=”@id/regButton”

/>

</pre>

关于链式风格的详细介绍,可以查阅官方文档developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html。与之前创建的约束不一样的地方在于我们在注册按钮中设置链风格为packed。packed(我暂且称为包式风格),这种布局会把它和链上的组件包裹在一起,对外就像一个整体。我们把注册按钮和登录按钮打包,然后这个包的左右边界就分别变为了父视图的左右边界,因为我们的宽度属性设为wrap_content,所以这个包整体水平居中了,我们调整一下按钮间的margin即可。

至此,我们完成了一个简单的登录界面的布局。个人认为有点费解的就是链式风格,本文中只展示了packed风格,剩余的几种风格,可以查阅android
cn官方文档即可。

头一次写笔记,可能写的很杂乱,个人水平有限,有不足之处还望各位大牛多多指点。

layout_constraintLeft_toLeftOf、layout_constraintLeft_toRightOf

xmlns:andro

layout_constraintLeft_toLeftOf
是指当前元素的左边,以指定元素的左边为参考。

xmlns:app=””

layout_constraintLeft_toRightOf
是指当前元素的左边,以指定元素的右边为参考。

xmlns:tools=””

上下居中怎么写呢?

android:layout_width=”match_parent”

app:layout_constraintTop_toTopOf=”parent”
app:layout_constraintBottom_toBottomOf=”parent”

android:layout_height=”match_parent”

 

tools:context=”com.constraintlayout.app.Main2Activity”>

在使用ConstraintLayout的布局方案,需要在build.gradle引入支持库:

dependencies{

compile’com.android.support.constraint:constraint-layout:1.0.1′}

具体使用:

常用方法总结

layout_constraintTop_toTopOf//
将所需视图的顶部与另一个视图的顶部对齐。

layout_constraintTop_toBottomOf//
将所需视图的顶部与另一个视图的底部对齐。

layout_constraintBottom_toTopOf//
将所需视图的底部与另一个视图的顶部对齐。

layout_constraintBottom_toBottomOf//
将所需视图的底部与另一个视图的底部对齐。

layout_constraintLeft_toTopOf//
将所需视图的左侧与另一个视图的顶部对齐。

layout_constraintLeft_toBottomOf//
将所需视图的左侧与另一个视图的底部对齐。

layout_constraintLeft_toLeftOf//
将所需视图的左边与另一个视图的左边对齐。

layout_constraintLeft_toRightOf//
将所需视图的左边与另一个视图的右边对齐。

layout_constraintRight_toTopOf//
将所需视图的右对齐到另一个视图的顶部。

layout_constraintRight_toBottomOf// 将所需视图的右对齐到另一个的底部。

layout_constraintRight_toLeftOf//
将所需视图的右边与另一个视图的左边对齐。

layout_constraintRight_toRightOf//
将所需视图的右边与另一个视图的右边对齐。

表示wrap content

表示固定值,也就是给控件指定了一个固定的长度或者宽度值。

表示any size,它有点类似于match parent,但和match
parent并不一样,是属于ConstraintLayout中特有的一种大小控制方式,any
size就是用于在ConstraintLayout中顶替match parent.

发表评论

电子邮件地址不会被公开。 必填项已用*标注