1.ConstraintLayout 简介
一个新的ViewGroup，位于android.support.constraint包下。1.解决现有布局嵌套问题 了解使用 ConstraintLayout 的性能优势。2.可使用布局编辑器拖动控件完成布局。
2.开始使用
在SDK->SDK Tools->Support Repository->ConstraintLayout Install下
implementation 'com.android.support.constraint:constraint-layout:1.1.2
3.属性介绍
现可用约束
- Relative positioning
- Margins
- Centering positioning
- Circular positioning
- Visibility behavior
- Dimension constraints
- Chains
- Virtual Helpers objects
- Optimizer
1.Relative positioning
属性位置.png
属性意义和RelativeLayout属性类似。属性值可选id或者parent
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
例子：app:layout_constraintLeft_toLeftOf的意义是：该控件左侧依靠在谁左侧
<?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"
tools:context=".MainActivity">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button1"
//控件左侧依靠在父控件左侧
app:layout_constraintLeft_toLeftOf="parent"
//控件右侧依靠在父控件右侧
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button2"
app:layout_constraintLeft_toRightOf="@id/btn1"
/>
</android.support.constraint.ConstraintLayout>
btn1居中，btn2在btn1右侧
效果.png
2.Margins
Margins.png
可用属性
属性
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
特有属性：当 View.GONE时可以使用这部分属性设置一个gone margin
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
<?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"
tools:context=".MainActivity">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button1"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="0dp"
android:visibility="gone"
/>
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button2"
app:layout_constraintLeft_toRightOf="@id/btn1"
app:layout_goneMarginLeft="20dp"
android:layout_marginLeft="50dp"
/>
</android.support.constraint.ConstraintLayout>
当btn2依赖的btn1为GONE时，使用app:layout_goneMarginLeft属性。不为GONE时使用android:layout_marginLeft属性
效果.png
3.Centering positioning and bias
layout_constraintVertical_bias
layout_constraintHorizontal_bias
Center.png
.Centering positioning and bias.png
<?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"
tools:context=".MainActivity">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.1"
/>
</android.support.constraint.ConstraintLayout>
左侧依赖于父布局左侧，右侧依赖于父布局右侧，水平偏移10%
效果.png
4.Circular positioning
image.png
layout_constraintCircle: 依赖View的ID
layout_constraintCircleRadius: 偏移角度
layout_constraintCircleAngle:半径
<?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"
tools:context=".MainActivity">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button2"
app:layout_constraintCircle="@id/btn1"
app:layout_constraintCircleRadius="100dp"
app:layout_constraintCircleAngle="45"
/>
</android.support.constraint.ConstraintLayout>
image.png
5.Visibility behavior
详情见2Margins
image.png
6.Dimensions constraints
当View为WRAP_CONTENT时可使用
android:minWidth
android:minHeight
android:maxWidth
android:maxHeight
Widgets dimension constraints
android:layout_width和android:layout_height可以设置3种值：
- 指定具体大小：120dp
- WRAP_CONTENT
- 0dp：代表“MATCH_CONSTRAINT”
image.png
图a：WRAP_CONTENT
图b：0dp
图c：0dp+margin
ConstraintLayout不再推荐子View使用MATCH_PARENT
WRAP_CONTENT : enforcing constraints
控件使用WRAP_CONTENT 时，maxWidth和minHeight 不起作用。可以使用
app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”
<?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"
tools:context=".MainActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
app:layout_constrainedHeight="false"
app:layout_constrainedWidth="false"
app:layout_constraintHeight_max="20dp"
app:layout_constraintWidth_max="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
app:layout_constrainedHeight="true"
app:layout_constrainedWidth="true"
app:layout_constraintHeight_max="20dp"
app:layout_constraintWidth_max="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>
image.png
MATCH_CONSTRAINT dimensions
当控件设置属性为MATCH_CONSTRAINT时，可以使用
layout_constraintWidth_min
layout_constraintHeight_min
layout_constraintWidth_max
layout_constraintHeight_max
layout_constraintWidth_percent ：0-1之间，parent的几%
layout_constraintHeight_percent ：0-1之间，parent的几%
<?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"
tools:context=".MainActivity">
<Button
android:layout_width="0dp"
android:layout_height="0dp"
android:text="BTN"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.5"
app:layout_constraintHeight_percent="0.5"
/>
</android.support.constraint.ConstraintLayout>
image.png
Ratio
<?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"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
android:text="BTN1"
/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="1:1"
android:text="BTN2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
android:text="BTN3"/>
</android.support.constraint.ConstraintLayout>
image.png
网友评论