约束布局(ConstraintLayout)1.1.2 版本的新特性

ConstraintLayout 是目前 Android Studio 中项目的默认布局,目前已经到了 1.1.2 版本,这里就来介绍下它在新版本中的特性,如果你目前还没有使用过 ConstraintLayout ,可以看下我写的另一篇文章:Android ConstraintLayout 使用详解

一、Circular Positioning

圆形定位用于将两个 View 以角度和距离这两个维度来进行定位,以两个 View 的中心点作为定位点

  1. app:layout_constraintCircle -目标 View 的 ID
  2. app:layout_constraintCircleAngle -对齐的角度
  3. app:layout_constraintCircleRadius  -与目标 View 之间的距离(顺时针方向,0~360度)
<?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">

    <Button
        android:id="@+id/btn_target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Target Button"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Source Button"
        android:textAllCaps="false"
        app:layout_constraintCircle="@id/btn_target"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="120dp" />

</android.support.constraint.ConstraintLayout>

二、Enforcing constraints

在 1.1 版本之前,如果将控件的尺寸设置为 wrap_content,那么对控件设置的 maxWidthminHeight 这些约束是不起作用的,而强制约束就用于使控件在设置 wrap_content 的情况下约束依然生效

  1. app:layout_constrainedHeight="true | false"
  2. app:layout_constrainedWidth="true | false"
<?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">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher_background"
        app:layout_constrainedHeight="false"
        app:layout_constrainedWidth="false"
        app:layout_constraintHeight_max="50dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_max="50dp" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher_background"
        app:layout_constrainedHeight="true"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_max="50dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_max="50dp" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher_background"
        app:layout_constrainedHeight="true"
        app:layout_constrainedWidth="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_max="50dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_max="50dp" />

</android.support.constraint.ConstraintLayout>

三、Dimensions

当控件的尺寸设置为 0dp 时,可以用以下两个属性来指定当前控件的宽度或高度占父控件的百分比,属性值在 0 到 1 之间

  1. layout_constrainWidth_percent
  2. layout_constrainHeight_percent
<?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">

    <Button
        android:id="@+id/btn_target"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Target Button"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.8" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Source Button"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_target"
        app:layout_constraintWidth_percent="0.5" />

</android.support.constraint.ConstraintLayout>

四、Barrier

很多时候我们都会遇到控件的大小随着其包含的数据的多少而改变的情况,而此时如果有多个控件之间是相互约束的话,就比较难来设定各个控件间的约束关系了 而 Barrier(屏障)就是用于这种情况,Barrier 和 GuideLine 一样是一个虚拟的 View,对界面是不可见的,只是用于辅助布局,而 Barrier 和 GuideLine 的区别在于它可以由多个 View 来决定其属性

Barrier 可以使用的属性有:

  1. barrierDirection:用于设置 Barrier 的位置,属性值有:bottom、top、start、end、left、right
  2. constraint_referenced_ids:用于设置 Barrier 所引用的控件的 ID,可同时设置多个
  3. barrierAllowsGoneWidgets:默认为 true,当 Barrier 所引用的控件为 Gone 时,则 Barrier 的创建行为是在已 Gone 的控件已解析的位置上进行创建。如果设置为 false,则不会将 Gone 的控件考虑在内
<?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">

    <Button
        android:id="@+id/btn_target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是一段并不长的文本"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_source"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我也不知道说什么好"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_target" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:barrierAllowsGoneWidgets="false"
        app:barrierDirection="end"
        app:constraint_referenced_ids="btn_target,btn_source" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="那就随便写写吧"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@id/barrier"
        app:layout_constraintTop_toBottomOf="@id/btn_target" />

</android.support.constraint.ConstraintLayout>

此时还看不出来 Barrier 的作用,但当按钮内的文本内容增多时,就可以看出来了

五、Group

Group 用于控制多个控件的可见性,如果要隐藏多个控件则不必再单独设置每个控件的可见性了,其使用到的属性有

  1. constraint_referenced_ids :用于设置所引用的控件的 ID
<?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">

    <Button
        android:id="@+id/btn_target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Target Button"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_source"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Source Button"
        android:textAllCaps="false"
        app:layout_constraintCircle="@id/btn_target"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="120dp" />

    <android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="btn_target, btn_source" />

</android.support.constraint.ConstraintLayout>

六、Placeholder

Placeholder (占位符)用于和一个视图关联起来,通过 setContentId() 方法将占位符转换为指定的视图,即视图将在占位符所在位置上显示,如果此时布局中已包含该视图,则视图将从原有位置消失

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

    <Button
        android:id="@+id/btn_setContentId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="setContentId"
        android:text="setContentId"
        android:textAllCaps="false" />

    <ImageView
        android:id="@+id/iv_target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher_background"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_setContentId" />

    <android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
        Placeholder placeholder = findViewById(R.id.placeholder);
        placeholder.setContentId(R.id.iv_target);

此外也可以直接在布局文件中将占位符和视图 ID 绑定在一起

    <android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@id/iv_target"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React Native组件之Button

不管在Android还是ios开发中,系统都有Button组件,而在早期的React Native中,系统是不提供Button组件的,一般会使用一个叫做reac...

242100
来自专栏葡萄城控件技术团队

ActiveReports 区域报表中的事件介绍

1、仅触发一次的事件 以下是在报表的处理过程中仅触发一次的所有事件这些事件在报表的处理周期中仅在最开始和结束前触发一次。 ReportStart 该事件在Dat...

24470
来自专栏小巫技术博客

A017-布局之FrameLayout

帧布局,是所有布局容器中最简单的一种,控件定义在FrameLayout中默认放置在左上角,定义在后面的控件会层叠在前面定义的控件之上,所以才会被称为帧布局。

12830
来自专栏非典型技术宅

iOS之分段控制器UISegmentedControl1. 分段控制器(UISegmentedControl)2. 事件监听3. 手势事件大全

12820
来自专栏我和未来有约会

VisualState“视图状态”使用心得

在编辑silverlight中button控件模板的时候,能看到左侧的“Status”状态栏里多了很多状态,这些就是控件的“视图状态”。 其中这里的视图状态...

34570
来自专栏React Native开发圈

React Native 圆形进度条组件

npm i--save react-native-circular-progress

19710
来自专栏Google Dart

AngularDart Material Design 是/否 按钮 顶

可以使用MaterialSaveCancelButtonsDirective等指令来提供基本文本自定义,该指令用保存/取消替换是/否。

19150
来自专栏Android Note

ConstraintLayout 之 Guideline、Barrier、Chains和Groups

18150
来自专栏我和未来有约会

动态创建Storyboard

做动画或者做控件的时候不一定都要在xaml里做Storyboard,有时候在代码里动态创建会更加灵活些。 这里以我做的一个改变颜色的Storyboard为例来做...

38040
来自专栏JetpropelledSnake

Linux学习笔记之Xshell配色方案定制

点击 Browse 按钮,弹出如下面板,选择 ANSI Colors on Black,然后点击右侧save as 按钮,命名为 zkl。

1.2K10

扫码关注云+社区

领取腾讯云代金券