优势:有效地解决布局嵌套过多问题以提高性能,使用约束的方式来指定各个控件之间的相对位置关系,类似于RelativeLayout,但比其更加强大。
build.gradle中引入ConstraintLayout相关包:
compile 'com.android.support.constraint:constraint-layout:1.0.2'
以下图登陆界面为例
相关的ConstraintLayout代码:
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
tools:context="com.test.app.LoginActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/bg_login" />
<android.support.constraint.Guideline
android:id="@+id/guideline_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="70dp" />
<android.support.constraint.Guideline
android:id="@+id/guideline_end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="70dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/user_login"
android:textColor="@color/textMain"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.25" />
<EditText
android:id="@+id/et_username"
android:layout_width="0dp"
android:layout_height="40dp"
android:background="@drawable/bg_stroke_white_100"
android:gravity="center"
android:hint="@string/input_username"
android:textColor="@color/textMain"
android:textColorHint="@color/textHint"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/guideline_start"
app:layout_constraintRight_toLeftOf="@id/guideline_end"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.4" />
<EditText
android:id="@+id/et_password"
android:layout_width="0dp"
android:layout_height="40dp"
android:background="@drawable/bg_stroke_white_100"
android:gravity="center"
android:hint="@string/input_password"
android:inputType="textPassword"
android:textColor="@color/textMain"
android:textColorHint="@color/textHint"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/guideline_start"
app:layout_constraintRight_toLeftOf="@id/guideline_end"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5" />
<CheckBox
android:id="@+id/cb_login"
android:layout_width="100dp"
android:layout_height="20dp"
android:layout_marginTop="8dp"
android:checked="false"
android:text="@string/login_rememberPwd"
android:textColor="@android:color/background_dark"
android:textSize="15sp"
app:layout_constraintLeft_toRightOf="@id/guideline_start"
app:layout_constraintTop_toBottomOf="@id/et_password" />
<Button
android:id="@+id/btn_login"
android:layout_width="0dp"
android:layout_height="40dp"
android:background="@drawable/bg_solid_blue_100"
android:text="@string/login"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/guideline_start"
app:layout_constraintRight_toLeftOf="@id/guideline_end"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.65" />
</android.support.constraint.ConstraintLayout>
TextView中的属性:app:layout_constraintLeft_toLeftOf="parent"表示该TextView的左侧与父布局的左侧对齐,其他的以此类推,
- app:layout_constraintLeft_toRightOf
- app:layout_constraintRight_toLeftOf
- app:layout_constraintRight_toRightOf
- app:layout_constraintTop_toBottomOf
- app:layout_constraintTop_toTopOf
- app:layout_constraintBottom_toBottomOf
- app:layout_constraintBottom_toTopOf
- app:layout_constraintBaseline_toBaselineOf
TextView同时设置了四个属性
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
将其位置约束在了父布局的正中间位置。
app:layout_constraintVertical_bias=“0.25”,表示顶部25%的距离。类似的还有
app:layout_constraitHorizontal_bias
辅助线Guideline
android:orientation属性取值“vertiacal”或“Horizontal”来决定是横向的还是纵向的。
app:layout_constraintGuide_begin和app:layout_constraintGuide_end分别表示与起始端和结束端的距离。