比RelativeLayout更强大的ConstraintLay

相对定位的属性
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

这个比较简单 这么理解：layout_constraintLeft_toLeftOf 第一个left表示自己，第二个left表示相对参考的空间

        //控件居中
        app:layout_constraintBaseline_toBaselineOf="@+id/mTv1"
        app:layout_constraintLeft_toRightOf="@+id/mTv1"
        app:layout_constraintTop_toTopOf="parent" 

image.png

      // 角度约束 
       app:layout_constraintCircle="@id/mTv3"
      //相对mTv3控件的中心点，来定的角度
        app:layout_constraintCircleAngle="180"
        app:layout_constraintCircleRadius="200dp"
        app:layout_constraintLeft_toLeftOf="@+id/mTv3"
        app:layout_constraintTop_toTopOf="@+id/mTv3"

image.png image.png

layout_constraintDimensionRatio设置比例 ,相对于高度为2:1 即 100dp:50dp

        android:layout_width="0dp"
        app:layout_constraintDimensionRatio="2:1"
        android:layout_height="50dp"

image.png

正方形

        android:layout_width="0dp"
        app:layout_constraintDimensionRatio="1:1"
        android:layout_height="160dp"

image.png

也可以这样写
app:layout_constraintDimensionRatio="H,5:1" 高:宽=5：1
app:layout_constraintDimensionRatio="W,5:1" 宽:高=5：1

链结构
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintHorizontal_chainStyle="packed"

 <!--链结构-->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mTv5">
        <TextView
            android:id="@+id/mTv6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#7AB0E6"
            android:gravity="center"
            android:text="textview5"
            android:textColor="#ffffff"
            android:textSize="20sp"
            android:visibility="visible"
            app:layout_constraintRight_toLeftOf="@+id/mTv7"
            app:layout_constraintHorizontal_chainStyle="spread_inside"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/mTv7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#7AB0E6"
            android:gravity="center"
            android:text="textview5"
            android:textColor="#ffffff"
            android:textSize="20sp"
            android:visibility="visible"
            app:layout_constraintLeft_toRightOf="@+id/mTv6"
            app:layout_constraintRight_toLeftOf="@id/mTv8"
            app:layout_constraintTop_toTopOf="parent" />


        <TextView
            android:id="@+id/mTv8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#7AB0E6"
            android:gravity="center"
            android:text="textview5"
            android:textColor="#ffffff"
            android:textSize="20sp"
            android:visibility="visible"
            app:layout_constraintLeft_toRightOf="@+id/mTv7"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />



    </androidx.constraintlayout.widget.ConstraintLayout>
  

app:layout_constraintHorizontal_chainStyle="spread_inside"//两端对齐

image.png

Barrier 约束

  <TextView
        android:id="@+id/mTv9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="#da2"
        android:gravity="center"
        android:text="textview9"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:visibility="visible"
        app:layout_constraintLeft_toLeftOf="parentparent"
        app:layout_constraintTop_toBottomOf="@+id/chainCl" />

    <TextView
        android:id="@+id/mTv10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:background="#da2"
        android:gravity="center"
        android:text="textview10"
        android:textColor="#ffffff"
        android:textSize="20sp"
        app:layout_constraintTop_toBottomOf="@+id/mTv9"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="91dp" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/mBarrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:barrierDirection="right"
        app:constraint_referenced_ids="mTv10,mTv9" />

    <TextView
        android:id="@+id/mTv11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:background="#da2"
        android:gravity="center"
        android:text="textview11"
        android:textColor="#ffffff"
        android:textSize="20sp"
        app:layout_constraintLeft_toLeftOf="@id/mBarrier"
        app:layout_constraintRight_toRightOf="parent"
        android:visibility="visible"
        app:layout_constraintLeft_toRightOf="@+id/mBarrier"
        app:layout_constraintTop_toBottomOf="@+id/mTv9" />

study from
https://blog.csdn.net/ambitionLlll/article/details/106634570