天天看点
返回

ConstraintLayuot学习ConstraintLayuot学习

ConstraintLayuot学习

  • ConstraintLayuot学习
    • 一. Constraints(条件约束)
      • 1.1 布局代码
      • 1.2 结果
    • 二. Chains链
      • 2.1 布局代码
      • 2.2 结果
      • 2.3 Chains链的三种形式
        • 2.3.1 spread形式
          • 截图
          • 代码
          • 注意
        • 2.3.2 spread_in形式
          • 截图
          • 代码
        • 2.3.3 packed形式
          • 截图
          • 代码
          • 注意
    • 三. GuideLine
      • 3.1 代码
      • 3.2 效果
    • 四. Dimensions
      • 4.1 xml代码
      • 4.2 效果
      • 4.3 注意
    • 五. Barriers(栅栏)
      • 5.1 Barriers来由
      • 5.2 Barrier的xml代码
      • 5.3 效果
      • 5.4 注意
    • 六. Placeholders（1.1.x）
      • 6.1 代码
      • 6.2 效果
        • 6.2.1 模板的效果
        • 6.2.2 使用效果
        • 6.2.3 注意
      • 6.3 动态映射
    • 七. Groups(1.1.x）
      • 7.1 代码
    • 八. Circular positioning(1.1.x）
      • 8.1 代码
      • 8.2 效果:
    • 九. Percent dimensions(1.1.x）
      • 9.1 代码
      • 9.2 效果
    • 十. Gradle配置

一. Constraints(条件约束)

1.1 布局代码 

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

  <TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="TextView" />

  <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView"
    tools:text="TextView" />
</android.support.constraint.ConstraintLayout>

1.2 结果

ConstraintLayuot学习ConstraintLayuot学习
layout_constraintLeft_toLeftOf=“xx”可以是父容器也可以是一个id，表示自己的左边和xx的左边对齐,这个有点像相对布局

二. Chains链

2.1 布局代码 

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

    <Button
        android:id="@+id/buttonA"
        android:layout_width="126dp"
        android:layout_height="128dp"
        android:text="buttonA"
        app:layout_constraintBottom_toTopOf="@+id/buttonB"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="buttonA"/>

    <Button
        android:id="@+id/buttonB"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonB"

        app:layout_constraintBottom_toTopOf="@+id/buttonC"
        app:layout_constraintTop_toBottomOf="@+id/buttonA"
        tools:text="buttonB"/>

    <Button
        android:id="@+id/buttonC"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonC"

        app:layout_constraintBottom_toTopOf="@+id/buttonD"
        app:layout_constraintTop_toBottomOf="@+id/buttonB"
        tools:text="buttonC"
        />

    <Button
        android:id="@+id/buttonD"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonD"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonC"
        tools:text="buttonD"
        />
</android.support.constraint.ConstraintLayout>

只是把每个view的上下对齐对象指定了，它会在每个view中间加上相同大小的间隙

2.2 结果

ConstraintLayuot学习ConstraintLayuot学习

注：如果某一个view加上了margin_top的话，间隙会把margin_top减掉，再除以4

2.3 Chains链的三种形式

  1. spread
  2. spread_inside
  3. packed

2.3.1 spread形式

该形式是默认形式，每个子View都有上下边距，边距相等，效果和前面的一样：

截图
ConstraintLayuot学习ConstraintLayuot学习
代码

xml代码

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

    <Button
        android:id="@+id/buttonA"
        android:layout_width="126dp"
        android:layout_height="128dp"
        android:text="buttonA"
        app:layout_constraintBottom_toTopOf="@+id/buttonB"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread"
        tools:text="buttonA"/>

    <Button
        android:id="@+id/buttonB"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonB"

        app:layout_constraintBottom_toTopOf="@+id/buttonC"
        app:layout_constraintTop_toBottomOf="@+id/buttonA"
        tools:text="buttonB"/>

    <Button
        android:id="@+id/buttonC"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonC"
        app:layout_constraintBottom_toTopOf="@+id/buttonD"
        app:layout_constraintTop_toBottomOf="@+id/buttonB"
        tools:text="buttonC"
        />

    <Button
        android:id="@+id/buttonD"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonD"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonC"
        tools:text="buttonD"
        />
</android.support.constraint.ConstraintLayout>
注意
  1. 第16行，因为是纵向，一定要用layout_constraintVertical_chainStyle

  2. 只需要第一个View写明layout_constraintVertical_chainStyle，其它的View不管用

    来看Mark Allison大神说的一句话

Also on textView there is app:layout_constraintHorizontal_chainStyle="spread" which specifies the spread mode; you can manually(手动地) set this to spread_inside or packed to specify(指定) different chain modes. This must always be done on the View at the head of the chain - in other words the first item in the chain.
一定要是第一个子View写layout_constraintVertical_chainStyle才有效

2.3.2 spread_in形式

该形式是和spread的区别是边沿的两个View不会有间隙

截图
ConstraintLayuot学习ConstraintLayuot学习
代码 
<?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">

    <Button
        android:id="@+id/buttonA"
        android:layout_width="126dp"
        android:layout_height="128dp"
        android:text="buttonA"
        app:layout_constraintBottom_toTopOf="@+id/buttonB"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread_inside"
        tools:text="buttonA"/>

    <Button
        android:id="@+id/buttonB"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonB"
        app:layout_constraintBottom_toTopOf="@+id/buttonC"
        app:layout_constraintTop_toBottomOf="@+id/buttonA"
        tools:text="buttonB"/>

    <Button
        android:id="@+id/buttonC"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonC"
        app:layout_constraintBottom_toTopOf="@+id/buttonD"
        app:layout_constraintTop_toBottomOf="@+id/buttonB"
        tools:text="buttonC"
        />

    <Button
        android:id="@+id/buttonD"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonD"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonC"
        tools:text="buttonD"
        />
</android.support.constraint.ConstraintLayout>

同样，只需要在第一个元素里添加此属性

2.3.3 packed形式

该形式是所有元素紧凑的放一起，上下留边沿

截图
ConstraintLayuot学习ConstraintLayuot学习
代码 
<?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">

    <Button
        android:id="@+id/buttonA"
        android:layout_width="126dp"
        android:layout_height="128dp"
        android:text="buttonA"
        app:layout_constraintBottom_toTopOf="@+id/buttonB"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.23"
        app:layout_constraintVertical_chainStyle="packed"
        tools:text="buttonA"/>

    <Button
        android:id="@+id/buttonB"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonB"
        app:layout_constraintBottom_toTopOf="@+id/buttonC"
        app:layout_constraintTop_toBottomOf="@+id/buttonA"
        tools:text="buttonB"/>

    <Button
        android:id="@+id/buttonC"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonC"
        app:layout_constraintBottom_toTopOf="@+id/buttonD"
        app:layout_constraintTop_toBottomOf="@+id/buttonB"
        tools:text="buttonC"
        />

    <Button
        android:id="@+id/buttonD"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="buttonD"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonC"
        tools:text="buttonD"
        />
</android.support.constraint.ConstraintLayout>
注意
  1. 也只要在第一个元素里申明
  2. 还可以用layout_constraintVertical_bias来表示上下的间隙比例，0.5表示上下相等

三. GuideLine

guideline 只是用来辅助布局的，并不会在运行时显示出来，它是一条横向或纵向的直线

3.1 代码 

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

    <android.support.constraint.Guideline
        android:id="@+id/guide_line_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="56dp"
        />

    <android.support.constraint.Guideline
        android:id="@+id/guide_line_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="64dp"/>

    <Button
        android:id="@+id/buttonA"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="buttonA"

        app:layout_constraintLeft_toRightOf="@+id/guide_line_2"
        app:layout_constraintTop_toBottomOf="@+id/guide_line_1"
        tools:text="buttonA"/>

    <Button
        android:id="@+id/buttonB"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="buttonB"
        app:layout_constraintLeft_toRightOf="@+id/guide_line_2"
        app:layout_constraintTop_toBottomOf="@+id/buttonA"
        tools:text="buttonB"/>


</android.support.constraint.ConstraintLayout>

  1. android:orientation="horizontal"

     表示它的方向

  2. app:layout_constraintGuide_begin="56dp"

     表示它离起点多远；如果是横向表示它离顶端的距离，如果是纵向，表示离左边的距离
  3. 还可以用

    layout_constraintGuide_percent

     来表示位置，0.5表示在中间

3.2 效果

ConstraintLayuot学习ConstraintLayuot学习

四. Dimensions

比如想显示一张图片，它的宽度固定，高度也不确定，你唯一确定的是它的宽高比。一般可能通过复写ImageView，然后根据图片的宽度和宽高比来算出高度，或是通过PercentLayout来实现，ConstraintLayout也支持

4.1 xml代码 

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


    <android.support.constraint.Guideline
        android:id="@+id/guide_line_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="113dp"/>

    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@color/colorAccent"
        app:layout_constraintDimensionRatio="h,4:3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/guide_line_2"
        app:layout_constraintTop_toTopOf="parent"
        />

</android.support.constraint.ConstraintLayout>

4.2 效果

ConstraintLayuot学习ConstraintLayuot学习

4.3 注意

  1. layout_constraintDimensionRatio="h,4:3"

     表示横向，4:3
  2. 一定要把

    layout_width

     写成0
  3. 这里把左边和guideline对齐，目的就是让ImageView的亮度是动态的，不同手机它的宽度不一样。

五. Barriers(栅栏)

5.1 Barriers来由

一个官方的例子：三个TextView，左边两个，分别为TextView1,TextView2,右边一个为TextView3;怎么做到TextView3在TextView1和TextView2的右边，TextView会随着文字的长度变化而变化，在英文的情况下，textView1比TextView2长，但是有些语言TextView2比TextView1长，如果没有Barriers，我们可能会用LinearLayout去嵌套TextView1和TextView2，那就会多一层，因此有了Barriers。

英文环境下

ConstraintLayuot学习ConstraintLayuot学习

其它语言环境下

ConstraintLayuot学习ConstraintLayuot学习

5.2 Barrier的xml代码 

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="warehouse"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="hospital hospital"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="textView2,textView1" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="lorem_ipsum"
        app:layout_constraintStart_toEndOf="@+id/barrier7"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

5.3 效果

ConstraintLayuot学习ConstraintLayuot学习

5.4 注意

  1. constraint_referenced_ids="textView2,textView1"

     表示要包的view

  2. app:layout_constraintStart_toEndOf="@+id/barrier7"

     表示在barrier7的左边(从左到右的语言)

六. Placeholders（1.1.x）

placeholder在1.1.x里才有，就是一个模板xml文件，每个元素都用placeHolder代替，当需要用这个模板的时候才指定元素

6.1 代码

模板：

constraint_placeholder.xml

<?xml version="1.0" encoding="utf-8"?>
<merge 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:layout_editor_absoluteX="0dp"
       tools:layout_editor_absoluteY="81dp"
       tools:parentTag="android.support.constraint.ConstraintLayout">

    <android.support.constraint.Placeholder
        android:id="@+id/template_main_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        app:content="@+id/top_image"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <android.support.constraint.Placeholder
        android:id="@+id/template_save"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/save"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/template_delete"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        />

    <android.support.constraint.Placeholder
        android:id="@+id/template_delete"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/delete"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/template_cancel"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/template_save"
        />

    <android.support.constraint.Placeholder
        android:id="@+id/template_cancel"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/cancel"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/template_edit"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/template_delete"
        />

    <android.support.constraint.Placeholder
        android:id="@+id/template_edit"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/edit"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/template_cancel"
        />

</merge>

使用模板

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:id="@+id/root"
    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:showIn="@layout/activity_main">

    <include layout="@layout/constraint_placeholder"/>

    <ImageView
        android:id="@+id/top_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher_notify"
        />

    <ImageButton
        android:id="@+id/save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:srcCompat="@drawable/ic_launcher_notify"/>

    <ImageButton
        android:id="@+id/edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_launcher_notify"/>

    <ImageButton
        android:id="@+id/cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"

        app:srcCompat="@drawable/ic_launcher_notify"/>

    <ImageButton
        android:id="@+id/delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"

        app:srcCompat="@drawable/ic_launcher_notify"/>


</android.support.constraint.ConstraintLayout>

6.2 效果

6.2.1 模板的效果

ConstraintLayuot学习ConstraintLayuot学习

6.2.2 使用效果

ConstraintLayuot学习ConstraintLayuot学习

6.2.3 注意

  1. tools:parentTag="android.support.constraint.ConstraintLayout"

     这个是用来看视图的

  2. <include layout="@layout/constraint_placeholder"/>

     真实布局里要include进来

  3. app:content="@+id/top_image"

     表示与哪个view对应

6.3 动态映射

也可以通过java代码动态映射，并通过TransitionManager实现动画

constraint_placeholder.xml

<?xml version="1.0" encoding="utf-8"?>
<merge 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:layout_editor_absoluteX="0dp"
       tools:layout_editor_absoluteY="81dp"
       tools:parentTag="android.support.constraint.ConstraintLayout">

    <android.support.constraint.Placeholder
        android:id="@+id/template_main_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        app:content="@+id/top_image"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <android.support.constraint.Placeholder
        android:id="@+id/theImage"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintTop_toBottomOf="@+id/template_main_image"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <android.support.constraint.Placeholder
        android:id="@+id/template_save"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/save"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/template_delete"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        />

    <android.support.constraint.Placeholder
        android:id="@+id/template_delete"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/delete"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/template_cancel"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/template_save"
        />

    <android.support.constraint.Placeholder
        android:id="@+id/template_cancel"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/cancel"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/template_edit"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/template_delete"
        />

    <android.support.constraint.Placeholder
        android:id="@+id/template_edit"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/edit"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/template_cancel"
        />

</merge>

constraint_holder_use.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:id="@+id/root"
    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:showIn="@layout/activity_main">

    <include layout="@layout/constraint_placeholder"/>

    <ImageView
        android:id="@+id/top_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher_notify"
        android:scaleType="fitXY"
        />

    <ImageButton
        android:id="@+id/save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher_notify"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <ImageButton
        android:id="@+id/edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher_notify"

        />

    <ImageButton
        android:id="@+id/cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:background="@drawable/ic_launcher_notify"/>

    <ImageButton
        android:id="@+id/delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher_notify"
        />

    <ImageView
        android:id="@+id/theImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher_notify"
        android:visibility="visible"/>

    <ImageView
        android:id="@+id/theImageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:background="@mipmap/ic_launcher_round"
        android:visibility="visible"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>


</android.support.constraint.ConstraintLayout>

kotlin代码：

package com.seekting.demo2019

import android.app.Activity
import android.os.Bundle
import android.support.constraint.Placeholder
import android.transition.TransitionManager
import android.view.ViewGroup
import android.widget.ImageView

class ConstraintLayoutActivity : Activity() {

    lateinit var theImage: Placeholder
    lateinit var saveImage: ImageView
    lateinit var editImage: ImageView
    lateinit var rootView: ViewGroup
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.constraint_holder_use)
        theImage = findViewById(R.id.theImage)
        saveImage = findViewById(R.id.save)
        editImage = findViewById(R.id.edit)
        rootView = findViewById(R.id.root)

        saveImage.setOnClickListener({
            TransitionManager.beginDelayedTransition(rootView)

            theImage.setContentId(R.id.theImageView)
        })
        editImage.setOnClickListener({
            TransitionManager.beginDelayedTransition(rootView)
            theImage.setContentId(R.id.theImageView1)
        })
    }
}

效果：

ConstraintLayuot学习ConstraintLayuot学习

七. Groups(1.1.x）

通过group能把几个平级的view圈在一起

7.1 代码 

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toTopOf="@+id/textView1"
        app:layout_constraintDimensionRatio="h,4:3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="warehouse"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/img"
        />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hospital hospital"
        app:layout_constraintBottom_toTopOf="@+id/textView3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1"/>

    <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="textView2,textView1"/>

    <Button
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="点击隐藏Group"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"/>

</android.support.constraint.ConstraintLayout>

java代码

fun group() {
       setContentView(R.layout.constraint_group)
       group = findViewById(R.id.group)
       textView3 = findViewById(R.id.textView3)
       textView3.setOnClickListener({
           val visibility = group.visibility
           if (visibility == View.GONE) {
               group.visibility = View.VISIBLE
           } else {
               group.visibility = View.GONE
           }
       })
   }

八. Circular positioning(1.1.x）

8.1 代码 

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

    <ImageView
        android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@mipmap/ic_launcher"
        />

    <ImageView
        android:id="@+id/image2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher_round"
        app:layout_constraintCircle="@+id/image1"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="100dp"
        tools:src="@mipmap/ic_launcher_round"


        />

</android.support.constraint.ConstraintLayout>

8.2 效果:

ConstraintLayuot学习ConstraintLayuot学习

九. Percent dimensions(1.1.x）

9.1 代码 

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


    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.5"
        tools:text="textView1"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent="0.2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.2"
        tools:text="textView1"/>
</android.support.constraint.ConstraintLayout>

9.2 效果

ConstraintLayuot学习ConstraintLayuot学习

十. Gradle配置 

dependencies {
  // other libs...
  implementation 'com.android.support.constraint:constraint-layout:1.1.0'
  // other libs...
}
ui android ConstraintLayuot GuideLine placeholder Barrier
上一篇: Hadoop2.5.1 Eclipse linux java开发环境配置
下一篇: zz - Reprint - How do I create an immutable Class?

继续阅读