Android约束布局ConstraintLayout示例

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">

    <!--
        强制布局,强制限定控件的宽高
        app:layout_constraintTop_toTopOf
        app:layout_constraintTop_toBottomOf
        app:layout_constraintLeft_toLeftOf
        app:layout_constraintRight_toRightOf
        app:layout_constraintLeft_toRightOf
        app:layout_constraintRight_toLeftOf
        app:layout_constraintTop_toBottomOf
        app:layout_constraintBottom_toTopOf
        app:layout_constrainedWidth
      -->
  <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>


    <!--圆形定位
         layout_constraintCircle       定位圆心的锚控件(即视图中的OK)
         layout_constraintCircleRadius 定位圆的半径,圆形控件的中心点为半径的起始位置
         layout_constraintCircleAngle  定位圆心控件与环绕控件中心的夹角,角度从12点钟方向顺时针计算
     -->
    <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>

    <!--百分比布局
    layout_constraintWidth_percent   设置控件相对于父控件的宽度比例
    layout_constraintHeight_percent  设置控件相对于父控件的高度比例
    layout_constraintDimensionRatio  设置控件自身的宽高比例
    -->
    <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>

    <!--Group控制多个控件的显示隐藏,  app:constraint_referenced_ids-->
    <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>

    <!--当约束目标的可见性为View.GONE时,还可以通过以下属性设置不同的边距值-->
    <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>

    <!--Barrier在约束布局中,可以使用属性constraint_referenced_ids属性来引用多个带约束
    的组件, 从而将它们看作一个整体-->
    <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>

布局效果:

猜你喜欢

转载自blog.csdn.net/fengchengwu2012/article/details/83016081