更新踩坑记录:
1. constraintlayout 优先父布局的width/ height, 因此如果约束设置(top/left/right/bottom) 等不起效时,可以尝试把父布局修改成wrap_connect 或者match parent
================
以下是原文:
ConstraintLayout: 约束性布局, 类似于相对性布局(RelativeLayout), 但是代码更简洁。
参考了大神的介绍,学习了基本属性,自己动手写了下代码,增加记忆,Mark 一下
效果图:
XML 布局文件:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="@layout/activity_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/item_text_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@mipmap/ic_launcher"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/item_text_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="@+id/item_text_image"
app:layout_constraintTop_toTopOf="@+id/item_text_image"
android:text="I am title"/>
<TextView
android:id="@+id/item_text_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintTop_toBottomOf="@+id/item_text_title"
app:layout_constraintStart_toStartOf="@+id/item_text_title"
android:text="I am content"/>
<Button
android:id="@+id/first_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First button"
app:layout_constraintTop_toBottomOf="@+id/item_text_image"
app:layout_constraintStart_toStartOf="@+id/item_text_image"/>
<Button
android:id="@+id/second_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Second button"
android:visibility="visible"
app:layout_constraintStart_toEndOf="@+id/first_button"
app:layout_constraintTop_toBottomOf="@+id/first_button"/>
<Button
android:id="@+id/third_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Third Button"
app:layout_constraintStart_toEndOf="@+id/second_button"
app:layout_constraintTop_toBottomOf="@+id/second_button"/>
<Button
android:id="@+id/fourth_botton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fourth_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.4"
app:layout_constraintHorizontal_bias="0.6"/>
<Button
android:id="@+id/fifth_button"
android:layout_width="0dp"
android:layout_height="35dp"
android:text="fifth button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/fourth_botton"
app:layout_constraintDimensionRatio="4"/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/text_guidle_line"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.6"/>
<Button
android:id="@+id/six_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="six button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/text_guidle_line" />
<androidx.constraintlayout.widget.Group
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="seven_button,eight_button"/>
<Button
android:id="@+id/seven_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="seventh"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/six_button"/>
<Button
android:id="@+id/eight_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="eighth"
app:layout_constraintStart_toEndOf="@+id/seven_button"
app:layout_constraintBottom_toBottomOf="@id/seven_button"/>
</androidx.constraintlayout.widget.ConstraintLayout>