Android约束布局ConstraintLayout示例

深碍√TFBOYSˉ_ 2022-05-08 12:06 229阅读 0赞

`ConstraintLayout` **约束布局**由 2016 年 Google I/O 推出。扁平式的布局方式，无任何嵌套，减少布局的层级，优化渲染性能。从支持力度而言，将成为主流布局样式，完全代替其他布局。

布局示例：

<?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=".activity.MainActivity">
    
        
      <android.support.constraint.ConstraintLayout
          android:id="@+id/top_cl"
          android:layout_width="match_parent"
          android:layout_height="wrap_content">
          <TextView
              app:layout_constraintTop_toTopOf="parent"
              android:layout_marginTop="10dp"
              android:id="@+id/left_tv"
              android:textSize="10sp"
              android:padding="10dp"
              android:text="一重山，两重山。山远天高烟水寒，相思枫叶丹"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" />
    
          <TextView
              app:layout_constraintTop_toTopOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintLeft_toRightOf="@+id/left_tv"
              app:layout_constrainedWidth="true"
              android:layout_marginTop="10dp"
              android:id="@+id/right_tv"
              android:textSize="10sp"
              android:padding="10dp"
              android:text="菊花开，菊花残。塞雁高飞人未还，一帘风月闲"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" />
    
      </android.support.constraint.ConstraintLayout>
    
    
        
        <android.support.constraint.ConstraintLayout
            android:id="@+id/circle_cl"
            android:background="@android:color/background_light"
            android:layout_marginTop="10dp"
            app:layout_constraintTop_toBottomOf="@+id/top_cl"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_width="match_parent"
            android:layout_height="120dp">
    
            <TextView
                android:text="OK"
                android:textSize="20sp"
                android:padding="10dp"
                android:background="@drawable/circle_border"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:textColor="@color/colorAccent"
                android:id="@+id/center_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:text="频道+"
                android:textSize="10sp"
                android:padding="5dp"
                app:layout_constraintCircle="@id/center_tv"
                app:layout_constraintCircleRadius="50dp"
                app:layout_constraintCircleAngle="60"
                android:background="@drawable/rect_round_border"
                android:textColor="@color/colorAccent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:text="频道-"
                android:textSize="10sp"
                android:padding="5dp"
                app:layout_constraintCircle="@id/center_tv"
                app:layout_constraintCircleRadius="50dp"
                app:layout_constraintCircleAngle="120"
                android:background="@drawable/rect_round_border"
                android:textColor="@color/colorAccent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
    
            <TextView
                android:text="音量-"
                android:textSize="10sp"
                android:padding="5dp"
                app:layout_constraintCircle="@id/center_tv"
                app:layout_constraintCircleRadius="50dp"
                app:layout_constraintCircleAngle="240"
                android:background="@drawable/rect_round_border"
                android:textColor="@color/colorAccent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
    
            <TextView
                android:text="音量+"
                android:textSize="10sp"
                android:padding="5dp"
                app:layout_constraintCircle="@id/center_tv"
                app:layout_constraintCircleRadius="50dp"
                app:layout_constraintCircleAngle="300"
                android:background="@drawable/rect_round_border"
                android:textColor="@color/colorAccent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </android.support.constraint.ConstraintLayout>
    
        
        <android.support.constraint.ConstraintLayout
            android:id="@+id/percent_cl"
            android:background="@color/colorPrimaryDark"
            android:layout_marginTop="10dp"
            app:layout_constraintTop_toBottomOf="@+id/circle_cl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/percent_top_tv"
                android:gravity="center"
                android:padding="5dp"
                android:text="textview为父控件一半的宽度,宽高比例为10：3"
                android:background="@color/colorAccent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintWidth_percent="0.5"
                app:layout_constraintDimensionRatio="H,10:3"
                android:layout_width="0dp"
                android:layout_height="0dp" />
        </android.support.constraint.ConstraintLayout>
    
        
        <android.support.constraint.Group
            android:id="@+id/group_cl"
            app:layout_constraintTop_toBottomOf="@+id/percent_cl"
            android:visibility="visible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
        </android.support.constraint.Group>
    
        <android.support.constraint.ConstraintLayout
            android:layout_marginTop="10dp"
            android:id="@+id/gone_margin_cl"
            app:layout_constraintTop_toBottomOf="@+id/group_cl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <TextView
                android:text="Gone"
                android:id="@+id/gone_tv"
                android:gravity="center"
                android:background="@color/colorAccent"
                android:padding="10dp"
                android:layout_width="60dp"
                android:layout_height="wrap_content" />
    
            <TextView
                android:text="Visible"
                android:gravity="center"
                android:background="@color/colorPrimary"
                app:layout_constraintLeft_toRightOf="@+id/gone_tv"
                android:padding="10dp"
                android:layout_width="80dp"
                android:layout_height="wrap_content" />
        </android.support.constraint.ConstraintLayout>
    
        
        <android.support.constraint.ConstraintLayout
            android:layout_marginTop="10dp"
            android:id="@+id/gone1_margin_cl"
            app:layout_constraintTop_toBottomOf="@+id/gone_margin_cl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <TextView
                android:text="Gone"
                android:id="@+id/gone1_tv"
                android:gravity="center"
                android:visibility="gone"
                android:background="@color/colorAccent"
                android:padding="10dp"
                android:layout_width="60dp"
                android:layout_height="wrap_content" />
    
            <TextView
                android:text="Visible"
                android:gravity="center"
                android:background="@color/colorPrimary"
                app:layout_constraintLeft_toRightOf="@+id/gone1_tv"
                app:layout_goneMarginLeft="20dp"
                android:padding="10dp"
                android:layout_width="80dp"
                android:layout_height="wrap_content" />
        </android.support.constraint.ConstraintLayout>
    
        
        <android.support.constraint.ConstraintLayout
            android:layout_marginTop="10dp"
            app:layout_constraintTop_toBottomOf="@+id/gone1_margin_cl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:text="姓名："
                android:padding="5dp"
                android:id="@+id/name_tv"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
    
            <TextView
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/name_tv"
                android:text="联系地址："
                android:padding="5dp"
                android:id="@+id/address_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
    
            <TextView
                android:hint="请输入姓名"
                android:padding="5dp"
                app:layout_constraintStart_toEndOf="@+id/barr"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
    
            <TextView
                android:hint="请输入联系地址"
                android:padding="5dp"
                app:layout_constraintStart_toEndOf="@+id/barr"
                app:layout_constraintTop_toBottomOf="@+id/name_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
    
            <android.support.constraint.Barrier
                android:id="@+id/barr"
                app:barrierDirection="right"
                app:constraint_referenced_ids="name_tv,address_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
    
        </android.support.constraint.ConstraintLayout>
    
    </android.support.constraint.ConstraintLayout>

布局效果：

![70][]

[70]: /images/20220508/42f4608046a84069aa726a98a477fe34.png