Android

发布日期: 2019-12-23

ConstraintLayout

代码：https://github.com/AdamRight/Android2021Code/blob/master/app/src/main/java/com/android/code/constraintlayout/ConstraintLayoutActivity.kt

相对位置

下面是ConstraintLayout确定位置的属性：

layout_constraintLeft_toLeftOf

layout_constraintLeft_toRightOf

layout_constraintRight_toLeftOf

layout_constraintRight_toRightOf

layout_constraintTop_toTopOf

layout_constraintTop_toBottomOf

layout_constraintBottom_toTopOf

layout_constraintBottom_toBottomOf

＃ 与left\right相似
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

尺寸约束0dp

ConstraintLayout 中不支持 MATCH_PARENT 这个值，如果需要实现跟MATCH_PARENT同样的效果，可以使用0dp来代替，其表示MATCH_CONSTRAINT,即适应约束。其跟MATCH_PARENT还是有区别的。

android:layout_width="0dp"

权重weight

通过设置以下两个属性：

app:layout_constraintHorizontal_weight //水平权重
app:layout_constraintVertical_weight //竖直权重

比如

<View
    android:background="@color/black"
    android:id="@+id/view1"
    android:layout_width="0dp"
    android:layout_height="50dp"
    app:layout_constraintEnd_toStartOf="@+id/view2"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<View
    android:background="@color/purple_200"
    android:id="@+id/view2"
    android:layout_width="0dp"
    android:layout_height="50dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_weight="2"
    app:layout_constraintStart_toEndOf="@+id/view1"
    app:layout_constraintTop_toTopOf="parent" />

文字基准线对齐Baseline

# 底部对齐
layout_constraintBaseline_toBaselineOf

主要用于和文字底部对齐样式，app:layout_constraintBaseline_toBaselineOf主要和 app:layout_constraintBottom_toBottomOf做区分。

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="80dp"
    android:background="@color/design_default_color_primary_variant"
    android:text="99"
    android:textSize="128sp"
    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:text="%"
    android:textSize="26sp"
    app:layout_constraintBaseline_toBaselineOf="@+id/textView1"
    app:layout_constraintStart_toEndOf="@+id/textView1" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="%"
    android:textSize="26sp"
    app:layout_constraintBottom_toBottomOf="@+id/textView1"
    app:layout_constraintStart_toEndOf="@+id/textView1" />

圆形定位-角度布局Circl

三个属性确定位置：以谁为圆心，半径，角度：

app:layout_constraintCircleAngle
app:layout_constraintCircleRadius
app:layout_constraintCircle

约束限制constrained

app:layout_constrainedWidth="true"
app:layout_constrainedHeight="true"

一般控制TextView的宽度不超过限定的距离。

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="12dp"
    android:background="@color/design_default_color_error"
    android:text="长文本长文本长文本长文本长文本文本长文本长文本"
    android:textColor="@android:color/white"
    app:layout_constrainedWidth="true"
    app:layout_constraintEnd_toEndOf="@+id/sun"
    app:layout_constraintStart_toStartOf="@+id/sun"
    app:layout_constraintTop_toBottomOf="@+id/sun" />

位置偏向bias

如果想让view的位置偏向某一侧,其值同样也是0到1之间：

layout_constraintHorizontal_bias  //水平偏向
layout_constraintVertical_bias  //竖直偏向

bias可以和constrained一起使用：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="12dp"
    android:background="@color/design_default_color_error"
    android:text="长文本长文本长文本长文本长文本文本长文本长文本"
    android:textColor="@android:color/white"
    app:layout_constrainedWidth="true"
    app:layout_constraintEnd_toEndOf="@+id/sun"
    app:layout_constraintHorizontal_bias="0.508"
    app:layout_constraintStart_toStartOf="@+id/sun"
    app:layout_constraintTop_toBottomOf="@+id/sun" />

goneMargin

当某个控件A存在时，下面的控件B距离A需要一个margin_top=20dp。当A消失时(gone掉了)，此时margin_top=0dp。layout_goneMarginTop就有用了。

<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:text="长文本长文本"
    android:textColor="@android:color/white"
    android:textSize="28sp"
    android:visibility="gone"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


<ImageView
    app:layout_goneMarginStart="46dp"
    android:id="@+id/avatar"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:src="@mipmap/ic_launcher_round"
    app:layout_constraintStart_toEndOf="@id/textview"
    app:layout_constraintTop_toTopOf="@id/textview" />

约束链chain

设置链样式的属性是：

app:layout_constraintVertical_chainStyle="spread|spread_inside|packed"
app:layout_constraintHorizontal_chainStyle="spread|spread_inside|packed"

默认是spread（扩散），packed意思是打包在一起，spread_inside（内部扩散）。使用时候，给第一个控件view添加chainStyle即可。

宽高比DimensionRatio

默认的都是宽：搞，然后根据另外一条边和比例算出。需要将宽或者高中的的至少一个设置为0dp（即MATCH_CONSTRAINT），即要适应约束条件。然后通过layout_constraintDimensionRatio属性设置一个比率即可。这个比率可以是一个浮点数，表示宽度和高度之间的比率；也可以是“宽度：高度”形式的比率。

<Button
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:text="-------------------宽高比2：1-------------------"
    app:layout_constraintDimensionRatio="2:1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"/>

如果宽和高都设置为0dp（MATCH_CONSTRAINT），那么layout_constraintDimensionRatio的值需要先加一个W,或H,来表示约束宽度或高度。如下：

<Button
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintDimensionRatio="H,16:9"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

这里例子是说，首先宽度将满足自适应的约束，然后将按照16：9的比例设置高度。

百分比宽高percent

要使用百分比，宽或高同样要设置为0dp（MATCH_CONSTRAINT）。

然后设置以下属性即可：

app:layout_constraintWidth_default="percent" //设置宽为百分比
app:layout_constraintWidth_percent="0.3" //0到1之间的值
或
app:layout_constraintHeight_default="percent" //设置高为百分比
app:layout_constraintHeight_percent="0.3" //0到1之间的值

例子

<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="宽50%"
    app:layout_constraintWidth_default="percent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintWidth_percent="0.5"/>

layout_constraintWidth_default 设置为 percent 即采用百分比的方式布局，然后设置 layout_constraintWidth_percent 的属性值，来改变水平方向的百分比。

控件统一Group

通过constraint_referenced_ids使用引用的方式来避免布局嵌套。可以为一组控件统一设置 setVisibility，只有设置可见度的功能，不能设置点击事件。

<androidx.constraintlayout.widget.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="view,view1,view7,view8" />

控件统一Layer

和Group类似，通过引用的方式来避免布局嵌套，可以为一组控件统一设置旋转/缩放/位移。

<androidx.constraintlayout.helper.widget.Layer
        android:id="@+id/layer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="view,view1,view7,view8"
        tools:ignore="MissingConstraints" />

控件统一Flow

Flow统一控制控件的排列方向orientation和方式flow_wrapMode。flow_wrapMode的属性有chain、aligned、none(默认)。

<androidx.constraintlayout.helper.widget.Flow
    android:id="@+id/flow"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:background="@color/colorAccent"
    android:orientation="horizontal"
    app:flow_wrapMode="chain"
    app:flow_verticalGap="16dp"
    app:flow_horizontalGap="16dp"
    app:constraint_referenced_ids="view1,view2,view3,view4,view5,view6"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

辅助线Guideline

Guideline主要的属性有：

//水平或垂直引导线
android:orientation="horizontal|vertical" 

//如果是水平引导线，则距离布局顶部30dp，如果是垂直引导线，则距离布局左边30dp
app:layout_constraintGuide_begin="30dp" 

//如果是水平引导线，则距离布局底部30dp，如果是垂直引导线，则距离布局右边30dp
app:layout_constraintGuide_end="30dp"

//如果是水平引导线，则距离布局顶部为整个布局高度的50%，如果是垂直引导线，则距离布局左边文这个布局宽度的50%
app:layout_constraintGuide_percent="0.5"

辅助线Barrier

通过设置一组控件的某个方向的屏障，来避免布局嵌套。比如view1和view2谁的宽度长，就以谁的宽度为基准，设置垂直的辅助线。

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="view1,view2" />

自定义ConstraintHelper

通过继承ConstraintHelper类，自定义统一操作的控件组。

代码：https://github.com/AdamRight/Android2021Code/blob/master/app/src/main/java/com/android/code/constraintlayout/CircularRevealHelper.kt

占位符Placeholder

Placeholder通过setContentId来将指定控件放到占位符的位置。

代码：activity_circular_reveal.xml

ConstraintSet

使用ConstraintSet对象来动态修改布局。防止布局中有不存在的 id 控件报错，需要设置 isForceId = false。

布局扁平化更加容易做过渡动画，在布局修改之前加上 TransitionManager 来自动完成过渡动画。

2、MotionLayout

2.1、介绍

MotionLayout是ConstraintLayout的子类。

https://adamright.github.io/2019/12/23/31.ConstraintLayout%E5%B8%83%E5%B1%80/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 !

ConstraintLayout

Android自定义控件入门与实战-读书笔记

2020-01-04 Android

自定义控件

Gradle构建详解

2019-07-13 Android

gradle

ConstraintLayout布局详解

ConstraintLayout

相对位置

尺寸约束0dp

权重weight

文字基准线对齐Baseline

圆形定位-角度布局Circl

约束限制constrained

位置偏向bias

goneMargin

约束链chain

宽高比DimensionRatio

百分比宽高percent

控件统一Group

控件统一Layer

控件统一Flow

辅助线Guideline

辅助线Barrier

自定义ConstraintHelper

占位符Placeholder

ConstraintSet

2、MotionLayout

2.1、介绍

你的赏识是我前进的动力