Android - UI开发指南

文章目录

- 调试工具
- - 查看view的边界和margin、padding
  - 查看布局属性层次和控件的属性
- 布局开发
- - 布局命名空间 app、android、tools
  - ConstraintLayout

调试工具

查看view的边界和margin、padding

开发者选项 > 显示布局边界
开启这个选项后界面上每一个空间周围会多出来红色和蓝色的显示，具体每一个颜色的含义如下：

红色边线：一个view的上边，下边，左边，右边边界线

蓝色边线：表明一个view的四个角

粉红色：表示margin，比如layout_marginLeft 、layout_marginBottom的距离

padding没有颜色（白色），蓝色角(表示view的边界)和内容之间会有一个白色空余部分，可以看的出来

查看布局属性层次和控件的属性

在这里插入图片描述
Android Studio右下角有个Layout inspector，点开后选择自己的手机上的进程就可以看到（目前自己尝试华为和荣耀手机上这个工具不生效，自己找了个VIVO手机可以正常使用）

布局开发

androidtools_19">布局命名空间 app、android、tools

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”

布局开发中首个xml总是定义这三个命名空间，具体是什么意思呢？

tools

可以在开发调试阶段使用，tools会覆盖android的所有属性，可以用来预览在ide中的效果，同时可以用来忽略ide的一些警告，运行的时候tools会被忽略
比如我们在开发阶段要预览text的效果，tools:text=“XXX文本” 这样整个文本就不会被带到线上去了
比如 tools:context=“.ConstantActivity” 可以告诉开发者，在预览阶段使用什么样子的主题
app：
这个会导入当前项目下的自定义的属性，项目中你新引入的包里面的资源属性(dependency引入或者自己新定义的属性)可以通过app去访问到。
android
xmlns:android android系统控件的原生属性，

ConstraintLayout

之前看到一个技术比较牛逼的同事的代码，用了这个布局，当时简单看了下，我靠，这么多参数，这个东西咋用呢，今天有空了学习下。

位置属性使用

<!-- 基本方向约束 -->
<!-- 我的什么位置在谁的什么位置 -->
app:layout_constraintTop_toTopOf=""      我的顶部和谁的顶部对齐
app:layout_constraintBottom_toBottomOf=""   我的底部和谁的底部对齐
app:layout_constraintLeft_toLeftOf=""     我的左边和谁的左边对齐
app:layout_constraintRight_toRightOf=""    我的右边和谁的右边对齐
app:layout_constraintStart_toStartOf=""    我的开始位置和谁的开始位置对齐
app:layout_constraintEnd_toEndOf=""      我的结束位置和谁的结束位置对齐

app:layout_constraintTop_toBottomOf=""    我的顶部位置在谁的底部位置
app:layout_constraintStart_toEndOf=""     我的开始位置在谁的结束为止

使用上面的layout_constraintxxx_toXXXof，可以控制让自己的某个位置位于某个控件或者parent的某个方位

在约束两个控件的基线对齐时可以使用下面的属性：layout_constraintBaseline_toBaselineOf

角度约束

我们可以使用下面的属性控制控件位于某个控件的指定角度的方向：

app:layout_constraintCircle=""         目标控件id
app:layout_constraintCircleAngle=""    对于目标的角度(0-360)
app:layout_constraintCircleRadius=""   到目标中心的距离

百分比控制布局

app:layout_constraintHorizontal_bias=""   水平偏移 取值范围是0-1的小数
app:layout_constraintVertical_bias=""     垂直偏移 取值范围是0-1的小数

注意：在使用百分比偏移时，需要指定对应位置的约束条件

goneMargin

当当前控件依赖的目标控件状态变为GONE的时候，goneMargin会生效，其余情况gonemargin不会生效

0dp的使用

GonstraintLayout中除了常用的描述控件大小的方式，我们还可以使用0dp，0dp需要配合相应的默认属性设置才能生效，layout_constraintWidth_default和layout_constraintHeight_default，取值可为spread、percent、wrap

spread

spread会占用所有符合条件的空间，且因为spread时默认的layout_constraintWidth_default，所以可以不写，在使用spread属性的时候，对应方向的start，end，或者top，bottom方向都要进行设置，不然扩展属性不会生效。
percent

按照父布局的百分比设置，取值的范围时0-1，表示view的大小和父类存在一定的关系

wrap

当宽度超过控件大小的时候，不会超过控件的显示区域，会被约束

宽高比例

浮点值，表示宽度和高度之间的比率；宽度:高度，表示宽度和高度之间形式的比率，且两个维度，width/height 中至少有一个维度的值是0dp，（没搞懂这个是干啥用的，直接写不行吗）

Chains

链用于控制控件在水平或者垂直方向上的显示，可以用于控件在水平/垂直方向排列时使用

chains一共有三个属性：spread（默认）：均分剩余空间；spread_inside：两侧的控件贴近两边，剩余的控件均分剩余空间；packed：所有控件贴紧居中

同时可以使用layout_constraintHorizontal_weight和layout_constraintVertical_weight用于设置权重，控制控件显示的权重
GuideLine和Barrier

GuideLine和Barrier都会在代码中设置一个看不到的标识，guideline顾名思义，会设置一个标示line，barrier的话会根据配置，在代码中设置一个屏障，控制控件显示的边界。

barrier https://www.jianshu.com/p/ed5183e44128
Group用来将多个控件设置到一个组中，控制显示/隐藏等公共属性
flow流式布局可以控制当元素个数过多形成多行的链时的显示规则，有none，chain，align等规则，同时，我们也可以控制每行显示的view的数量和每行上的view的对齐方式
ImageFilterButton和ImageFilterView可以用来实现圆角的view，使用roundPercent和round这两个属性，altSrc提供的资源将会和src提供的资源通过crossfade属性形成交叉淡化效果，同时还有很多色温亮度，饱和度，对比度的属性