ConstraintLayout 想说爱你不容易 (二)

阿策小和尚

发布于 2020-06-28 16:22:55

8350

发布于 2020-06-28 16:22:55

和尚在很久以前了解过 ConstraintLayout 的基本用法，但实际应用的却比较少；近来和尚在尝试一些历史项目的优化，对于 View-UI 绘制方面，准备通过 ConstraintLayout 来减少绘制层级；

Bias 偏向

ConstraintLayout 可以通过 _bias 属性设置偏向于水平或竖直某一端；

使用 _bias 属性时需要关联水平或竖直方向的两端关联；若未设置关联关系，单纯的 _bias 偏向无效果；
_bias 偏向与权重无关系，所谓偏向，是水平或竖直某一端距边缘剩余空间的占比；
_bias 默认为 0.5 居中展示，整体范围是 [0.0, 1.0]；

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Center B (水平+竖直)"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Circular positioning 圆形定位

ConstraintLayout 可以通过半径和角度来设置两个控件的关联约束；

app:layout_constraintCircle 用来设置关联的控件，以此控件作为圆形中心；
app:layout_constraintCircleAngle 用来设置两个控件的相对角度，其范围是 [0, 360]，以顺时针方向，竖直向上的为 0，与数学中的坐标系一致；
app:layout_constraintCircleRadius 作为圆形的半径设置两个控件的距离；

Button
    android:id="@+id/circle_btn"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:background="@drawable/btn_circle_red"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:background="@drawable/btn_circle_green"
    app:layout_constraintCircle="@+id/circle_btn"
    app:layout_constraintCircleAngle="90"
    app:layout_constraintCircleRadius="160dp" />

Group 组的显隐性

ConstraintLayout 减少了控件的 View 层级，但对于多个控件的显隐形可以通过 Group 来处理；Group 通过设置 referenced_ids / setReferencedIds 将设置的控件数组统一管理，直接设置 Group 的显隐性即可；

<androidx.constraintlayout.widget.Group
    android:id="@+id/constract_group"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:constraint_referenced_ids="circle_item_btn1,circle_item_btn2,circle_item_btn3" />

mGroup.setVisibility(isVisible ? View.VISIBLE : View.GONE);

Chains 链式结构

和尚在使用 ConstraintLayout 时，对于多个控件的整体居中尝试了链式结构；在学习过程中发现 Chains 有更多实用的效果；

和尚需要设置几个控件共同居中，且这几个控件的间距位置不变；

编辑设置多个预展示的控件；

选中需要设置的多个控件，右键 Chains 设置 Create Vertical Chains；如图展示，虽然整体居中，但控件间的相对间隔也改变了；因为默认的 _chainStyle 为 spread 样式；

设置最顶部链头属性 app:layout_constraintVertical_chainStyle="packed"；

链式结构的整体效果主要是通过 Chains Head 链头来决定！

ChainStyle - spread

spread 为平均分散排列，及各个控件间的距离是均分的(不包括控件自身设置的 margin / padding 属性)；

ChainStyle - spread_inside

spread_inside 也是平均分散排列，其中两端默认是紧临水平或竖直两端的(不包括控件自身设置的 margin / padding 属性)；

ChainStyle - packed

packed 是把链式结构中关联的控件组作为一个整体进行排列，可以设置 Bias 整体偏向等；

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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/textView"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="今日推荐" android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:layout_marginTop="30dp" android:src="@mipmap/icon_hzw"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_marginTop="20dp" android:text="布鲁克"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="20sp" android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/textView5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_marginTop="20dp" android:background="@drawable/btn_circle_gray"
        android:padding="10dp" android:text="点击详情"
        android:textColor="@android:color/darker_gray" android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />
</androidx.constraintlayout.widget.ConstraintLayout>

Weighted Chains 权重链

类似于 LinearLayout 中的 widget 权重，ConstraintLayout 也可以通过 _weight 设置权重效果；其中使用权重时需优先设置好 Chains 链式结构；

<View
    android:id="@+id/view"
    android:layout_width="0dp"
    android:layout_height="120dp"
    android:background="@color/colorPrimary"
    app:layout_constraintEnd_toStartOf="@+id/view2"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toStartOf="parent" />

<View
    android:id="@+id/view2"
    android:layout_width="0dp"
    android:layout_height="120dp"
    android:background="@color/colorAccent"
    app:layout_constraintEnd_toStartOf="@+id/view3"
    app:layout_constraintHorizontal_weight="2"
    app:layout_constraintStart_toEndOf="@+id/view" />

<View
    android:id="@+id/view3"
    android:layout_width="0dp"
    android:layout_height="120dp"
    android:background="@color/colorPrimary"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toEndOf="@+id/view2" />

Gone Margins 隐藏外边距

在应用中，margins 为外边距，在使用 ConstraintLayout 关联布局时，添了 _goneMargin 属性；即控件 B 是以控件 A 作为关联基础，当控件 A 动态隐藏时，可以通过 _goneMargin 设置控件 B 的新的外边距；其中 _goneMargin 属性需要设置在非隐藏控件 B 中；

<TextView
    android:id="@+id/view7"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginLeft="15dp"
    android:background="@color/colorPrimary"
    android:text="A"
    android:visibility="gone"
    app:layout_constraintEnd_toStartOf="@+id/view8"
    app:layout_constraintStart_toStartOf="@+id/imageView"
    app:layout_constraintTop_toBottomOf="@+id/item_tv3" />

<TextView
    android:id="@+id/view8"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginLeft="15dp"
    android:background="@color/colorAccent"
    android:text="B"
    app:layout_constraintEnd_toStartOf="@+id/view9"
    app:layout_constraintStart_toEndOf="@+id/view7"
    app:layout_constraintTop_toBottomOf="@+id/item_tv3"
    app:layout_goneMarginLeft="30dp"
    app:layout_goneMarginStart="30dp" />

和尚这次整理的还很浅显，未曾设计源码，主要是之前应用较少的场景，对于层级的优化还是很重要的；如有错误，请多多指导！

来源：阿策小和尚

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-06-21，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自阿策小和尚微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度