ConstraintLayuot学习

最新推荐文章于 2024-07-22 18:07:05 发布
最新推荐文章于 2024-07-22 18:07:05 发布
阅读量473 收藏
点赞数 1
分类专栏： UI android 文章标签： ConstraintLayuot GuideLine PlaceHolder Barrier Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012947056/article/details/81390665
版权

ConstraintLayuot学习

一. 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 结果

1.png

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 结果

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

2.3 Chains链的三种形式

  1. spread
  2. spread_inside
  3. packed
2.3.1 spread形式

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

截图

代码

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不会有间隙

截图

spread_in

代码
<?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形式

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

截图

packed

代码
<?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 效果

guide_line

四. 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 效果

Dimensions

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。

英文环境下

barriers_alignment_en
其它语言环境下
barriers_alignment_de

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 效果

barrier_result

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 模板的效果

placeholder

6.2.2 使用效果

placeholder_result

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)
        })
    }
}

效果：
placeholder_dynamic

七. 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 效果:

circular

九. 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 效果

percent

十. Gradle配置

dependencies {
  // other libs...
  implementation 'com.android.support.constraint:constraint-layout:1.1.0'
  // other libs...
}
seekting2013
关注
专栏目录
【gradle8升级系列】 constrains 替换force
wang2leee的博客
08-03 721
在Gradle 8中，引入了一种名为"constraints"的新功能，用于管理和解决依赖项之间的冲突。通过使用"constraints"，您可以更精确地指定依赖项的版本范围，并确保它们与其他依赖项兼容。
Gradle实现Maven中的dependencyManagement
Harryfin的专栏
07-04 4310
在Maven中，我们可以通过dependencyManagement把Jar包版本进行统一管理，以后各项目引用组件时，就不用标注组件的版本号了。这为解决多项目版本冲突问题带来了很大的便利。那么在Gradle中，是否也可以实现Maven的这个特性呢？答案是肯定的。看了网上的一些资料，发现有些方法比较绕，感觉思路不是很对。其实在官网上就有介绍这个问题，在这里也和大家再做一个分享。1）创建一个项目，里面只需一个build.gradle文件即可。待会我们把要管理的依赖及其版本都封装到这个gradle脚本中，最后把它
【Gradle-6】一文搞懂Gradle的依赖管理和版本决议
yechaoa
04-30 3903
当有多个相同依赖时，不管是哪里引入的，gradle总会优先选择最高版本；当多个相同依赖没有版本约束条件时，优先选择主模块(app)中的版本，且默认有strictly约束版本；force优先级高于strictly，如果二者同时显式声明，则会报错，推荐使用strictly；同时使用force强制依赖版本时，版本决议的结果跟依赖顺序有关，最早force的版本优先；本文主要介绍了Gradle的依赖管理和版本决议。依赖管理里面需要关注的是依赖方式，不同的依赖方式决定了是否会依赖传递；
gradle 上传jar包_Gradle学习记录014 关于依赖的声明
weixin_39576133的博客
12-06 162
详细学习Gradle构建的依赖声明。该学习记录基于Gradle官方网站资料。本篇参考链接如下：https://docs.gradle.org/current/userguide/declaring_dependencies.html声明一个模块作为依赖通常声明一个模块作为依赖，需要指定这个模块的版本。Gradle提供了一套机制，允许指定动态的版本。指定固定版本dependencies { // 固...
使用Gradle生成BOM管理依赖版本
拾级而上
02-07 3779
写在前边 自Gradle 5开始添加了Maven中 BOM 的支持，然而Gradle 6 以前，想使用BOM 需要使用 Maven 定义 pom.xml 并作为 pom 发布，才行。 参考了 《Gradle 实战》一书，查遍此书并没有通过Gradle生成BOM的方式；查阅 StackOverFlow 发现了一些复杂的实现方式。 好在 Gradle 6 开始，官方提供了一个插件 java-platform 支持生成 BOM，并可以发布，本文就带大家作一个demo 以学习此插件的使用。 什么是 BOM？ BOM
掌握Gradle依赖约束：构建高效项目的秘诀
最新发布
2401_85341950的博客
07-22 473
Gradle，作为一个灵活且功能强大的构建工具，提供了多种机制来管理项目依赖，其中依赖约束是确保项目依赖一致性的重要特性。本文将详细介绍如何在Gradle中使用依赖约束来管理项目依赖，包括依赖约束的概念、使用方法和实际应用示例。依赖约束（Dependency Constraints）是Gradle提供的一种机制，允许你为项目中的依赖项指定一个固定版本，确保所有依赖项使用的是统一的版本，避免版本冲突。依赖约束是确保项目依赖一致性的有效工具，它可以帮助我们避免版本冲突和简化依赖管理。
一文搞懂Gradle的依赖管理和版本决议
chuyouyinghe的专栏
04-21 3364
当有多个相同依赖时，不管是哪里引入的，gradle总会优先选择最高版本；当多个相同依赖没有版本约束条件时，优先选择主模块(app)中的版本，且默认有strictly约束版本；force优先级高于strictly，如果二者同时显式声明，则会报错，推荐使用strictly；同时使用force强制依赖版本时，版本决议的结果跟依赖顺序有关，最早force的版本优先；本文主要介绍了Gradle的依赖管理和版本决议。依赖管理里面需要关注的是依赖方式，不同的依赖方式决定了是否会依赖传递；
Gradle 构建工具 #5 又冲突了！如何理解依赖冲突与版本决议？
pengxurui的博客
07-17 250
Gradle 作为官方主推的构建系统，目前已经深度应用于 Android 的多个技术体系中，例如组件化开发、产物构建、单元测试等。可见，要成为 Android 高级工程师 Gradle 是必须掌握的知识点。
Gradle 高级功能篇-ApiHug准备-工具篇-005
AK15221736052的博客
04-10 862
ApiHug 整个工具链基于 Gradle, 使用 ApiHug 准备工作最先需要学习的就是 gradle.工欲善其事,必先利其器
第一章 企业级 gradle 依赖管理层次结构设计
muyimeng的专栏
11-13 684
第一章 企业级 gradle 依赖管理层次结构设计 Gradle概述 Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建工具。它使用一种基于Groovy的特定领域语言来声明项目设置，而不是传统的XML。Gradle就是工程的管理，帮我们做了依赖、打包、部署、发布、各种渠道的差异管理等工作。 Gradle优势 一款最新的，功能最强大的构建工具，用它逼格更高 使用程序代替传统的XML配置，项目构建更灵活 丰富的第三方插件，让你随心所欲使用 Maven、Ant能做的，G
Gradle-04：BOM管理依赖版本
孤山之王
08-21 945
Grale构建BOM
constraintayout新功能montionLayout写动画小试牛刀
我的专栏
12-31 327
首先看效果图 代码如下 布局 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http:
Android进阶-Gradle
Donkey的博客
11-20 1459
百度App技术 - Gradle 与 Android 构建入门 Gradle 爬坑指南 – 概念初解 Android Gradle （一）Gradle的Android插件入门 Android Gradle （二）签名配置和依赖管理 Gradle是一个框架，作为框架，它负责定义流程和规则。而具体的编译工作则是通过插件的方式来完成的。比如编译Java有Java插件，编译Groovy有Groovy插件，编译Android APP有Android APP插件，编译Android Library有Android
【译】Gradle 的依赖关系处理不当，可能导致你编译异常
weixin_33961829的博客
04-03 256
文章 | Ashesh Bharadwaj 翻译 | 承香墨影 授权 承香墨影 翻译、编辑并发布 在 Android Studio 中，Gradle 构建过程对于开发者来说，很大程度上是抽象的。作为一个新的 Android 开发者，我们第一次遇到 Gradle 通常是在 build.gradle 文件中添加一个远程依赖项。 让我们看看如何阅读 Gradle 依赖关系树，并解决与依赖关系有关的...
build.gradle 依赖约束布局constraint-layout失败的解决方案
weixin_43832876的博客
03-13 834
报错代码：Error:Could not find com.android.support.constraint:constraint-layout:1.1.2 链接：https://blog.csdn.net/qq_36175907/article/details/80053302 https://www.cnblogs.com/xinge1993/p/6517067.html ...
约束布局ConstraintLayout看这一篇就够了
weixin_34167819的博客
09-27 3176
目录 1.介绍 2.为什么要用ConstraintLayout 3.如何使用ConstraintLayout 3.1 添加依赖 3.2 相对定位 3.3 角度定位 3.4 边距 3.5 居中和偏移 3.6 尺寸约束 3.7 链 4.辅助工具 4.1 Optimizer 4.2 Barrier 4.3 Group 4.4 Placeholder 4.5.Guideline 5.总结 1.介绍 约...
Gradle的高级技巧
热门推荐
NoBlueSky的专栏
01-01 2万+
原文：Gradle, the Applidium way 让我们继续谈论android生态中的GradleGradle是Android studio用到的一个自动构建系统，基于Groovy语法，用来管理和构建Android项目，它可以精细的处理构建过程的各个步骤和简化持续集成（CI）,接下来让我们看看Gradle中一些有用的技巧。1.The dependency, mother of all dep
Gradle Template 模板使用
HelloMagina的博客
02-08 3471
androidstudio的模板功能使用。
Android全新组件库constraints（约束）
tom_wang_he_kang的博客
09-04 3630
目录 ConstraintLayout Barrier Group Guideline Placeholder ConstraintLayout 1.父布局约束&lt;子控件位于布局中的什么位置默认绘制在左上角&gt; layout_constraintLeft_toLeftOf约束子View左对齐 layout_constraintRight_toRightOf约束子View右...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值