【UI篇4】关于布局的思考

不积跬步，无以至千里，不积小流，无以成江海

前言
自从业以来，关于Layout，Google更新添加了多次，一直未进行整体的思考和总结。时间一长，便越发地感觉混乱和不清晰，遂决定抽时间思考整理一下，一是为了让自己的思路更加清晰；二是作为忘记时可以顺手捡起的笔记。

布局

Google官方指南的定义为：布局定义了应用中的界面结构，布局中的所有元素均使用View和ViewGroup对象的层次结构进行构建。

一、布局的分类

视图的设计原则是：嵌套的布局越少，布局的绘制速度越快（扁平的视图层次结构优于深层的视图层次结构），应尽量使用可以保持布局层次结构扁平的布局。

为了熟练使用布局，我们必须对布局的分类以及用法如数家珍，以下即列出常用的布局。

1. LinearLayout（线性布局）

用于使所有子视图在单个方向保持对齐，目前Google官方推荐改用ConstraintLayout

2. RelativeLayout （相对布局）

以相对位置显示子视图的视图组，目前Google官方推荐改用ConstraintLayout

偏移margin和填充padding
Margin：设置组件和父容器的边距，又叫偏移
Padding：设置组件内部元素间的边距，又叫填充

3. FrameLayout（帧布局）

默认从左上角渲染，新的元素覆盖之前的元素

• 前景图像：永远处于帧布局最上面，不会被覆盖
  有两个特有的属性：
  android:foreground: 设置该帧布局容器的前景图像
  android:foregroundGravity:设置该前景图像显示的位置

4. GridLayout（网格布局）

以网格形式显示子View

1.可以设置布局中组件的排列方式
2.可以自定义网格行数、列数
3.可以定义组件位于几行几列
4.容器中的组件可以跨多行也可以跨多列

• 设置行数、列数：（1）android:rowCount 网络布局行数；（2）columnCount：网络布局列数
• 设置组件所在行列：（1）android:layout_row 设置组件位于行；（2）android:layout_column 设置组件位于列
• 设置组件横跨几行几列：（1）android:layout_rowSpan 纵向横跨x行；（2）android: columnSpan 横向横跨x列；（3）内容在行列中横跨时必须设置android:layout_gravity="fill"

5. TableLayout（表格布局）

界面元素以表格显示，以行和列显示子级view元素
加一个tableRow就会增加一行，而TableRow中子控件数量决定列数，TableLayout的列数由所有tableRow中最多组件个数决定。

• orientation属性：固定为horizontal，layout_width不可设置
• 常用属性：（1）shrinkColumns，设置可收缩的列；（2）stretchColumns，设置可被拉伸的列；（3）collapseColumns，设置需要隐藏的列；列的索引从0开始
• 子控件常用属性：（1）layout_column:第几列；（2）layout_span：合并这么多单元格，也就是这个组件占据列数

6. ConstraintLayout （约束布局）

Android Studio默认布局，主要是为了解决布局嵌套过多的问题

• 相对定位：类似属性layout_constraintLeft_toLeftOf
• 角度定位：用角度+距离确定定位
• 边距：定义控件的margin时，指明constraint的相对位置
• view隐藏时，view设置自适应调整边距：layout_goneMarginStart
• 居中：居中，取值为parent时表示与父容器对齐，类似layout_constraintEnd_toEndOf
• 偏移：layout_constraintHorizontal_bias 水平偏移比例，从最左到最右：取值范围为0-1
• 尺寸限制：可以为constraintLayout自身定义最小和最大大小，类似于minWidth, maxWidth
• 尺寸百分比：布局尺寸随比例变化，取值范围0-1，对应宽/高须设置为0dp，类似于constraintHeight_percent 控件在父布局中的高占比, layout_constraintDimensionRation指宽高比
• 链：（1）实现约束功能，链对当前方向上进行了约束，但对另一个方向无效，两个方向约束独立；（2）分组共享空间，链提供了分组功能，其包含了多个组件，这些组件共享水平方向上的空间。（3）类似LinearLayout的weight权重属性，但功能比前者还强大 ；（4）然后用layout_constraintHorizontal_chainStyle属性改变整个链条的样式，属性的不同取值得到不同的布局方式

7. CoordinateorLayout （协调者布局）

需要研究补充上

8. WebView （网页视图）

9. CardView（卡片式布局）

用于在卡片内显示信息。这些卡片会以默认高程绘制到屏幕上，可以使用card_view:cardElevation属性为卡片提供自定义高程。高程值越大，绘制的阴影越明显，高程值越小，阴影越淡。

• 如需设置卡片的背景色，请使用card_view:cardBackgroundColor 属性，有时会遇到不生效的情况，这里未去深究。。。
• android:elevation=" " 设置该属性使控件有一个阴影，感觉该控件像是“浮”起来一样，达到3D效果
• android:translationZ="" 设置该组件阴影在Z轴（垂直屏幕方向）上的位移
• app:cardMaxElevation=" " 设置z轴的最大高度
• 可以通过foreground属性使用系统定义好的RippleDrawable: selectableItemBackground点击的涟漪效果
  Z属性可以通过elevation和translationZ进行修改
  Z＝ elevation＋translationZ

需要注意的是：CardView的圆角会有毛边，如果不满足要求的情况下，需要自定义。

二、 控件的介绍

Android 原生核心控件一览

1. TextView 文本框

TextView的drawableTop CompoundDrawable

2. EditText 输入框

3. Button 按钮

按钮包含文本或图标，可表明当用户触摸它时会引发哪种操作。

4. RadioButton 单选按钮

单选按钮可让用户从一系列选项中选择一个选项。对于可选项相互排斥的情况，如果您认为用户需要并排看到所有可用选项，则应使用单选按钮。如果没必要并排显示所有选项，则应改用Spinner

关键类

• RadioGroup

5. CheckBox 复选框

复选框可让用户从一系列选项中选择一个或多个选项。通常，您应以垂直列表形式显示每个复选框选项。

6. ToggleButton 开关按钮

通过切换按钮，用户可在两种状态之间更改设置。

7. Switch 开关

8. ProgressBar 进度条

9. ScrollView 滚动条

10. Spinner 微调框

微调框提供了一种方法，可让用户从值集内快速选择一个值。默认状态下，微调框显示其当前所选的值。轻触微调框可显示下拉菜单，其中列有所有其他可用值，用户可从中选择一个新值。

关键类

• SpinnerAdapter
• AdapterView.OnItemSelectedListener

// Get a Spinner and bind it to an ArrayAdapter that
// references a String array.
val spinner1: Spinner = findViewById(R.id.spinner1)
val adapter1 = ArrayAdapter.createFromResource(
        this, R.array.colors, android.R.layout.simple_spinner_item)
adapter1.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
spinner1.adapter = adapter1

11. AdapterView

AdapterView 是一个 ViewGroup，用于显示加载到适配器中的项。最常见的适配器类型来自基于数组的数据源。
AdapterView 子类：
[ListView](https://developer.android.com/reference/android/widget/ListView),
[GridView](https://developer.android.com/reference/android/widget/GridView),
[Spinner](https://developer.android.com/reference/android/widget/Spinner)
[Gallery](https://developer.android.com/reference/android/widget/Gallery)

Adapter 子类：

• ArrayAdapter：数据源为数组时使用
• SimpleCursorAdapter：数据来自Cursor时使用
• SimpleAdapter: 图文混搭，常用
• 自定义Adapter（继承BaseAdapter）：最灵活

三、布局的使用

布局的使用技巧：如果布局的内容是动态内容或未预先确定的内容，则可以使用 AdapterView 的布局，在运行时用视图填充布局。通过将AdapterView实例与Adapter绑定来填充AdapterView。

AdapterView 子类：
Adapter 子类：

• ArrayAdapter：数据源为数组时使用
• SimpleCursorAdapter：数据来自Cursor时使用
• SimpleAdapter: 图文混搭，常用
• 自定义Adapter（继承BaseAdapter）：最灵活

四、 界面的开发

拿到视觉稿开始，我们要做的就是按照以下的步骤进行分析拆解：

1. 界面分析
   层结构分析（层间叠加关系）--> 页面布局分解（纵向分解-->横向分解）-->子布局分解
2. 布局设计
   需求澄清-->最佳布局方案（抽象公用布局 id浪费、merge标签减少层次、懒加载）-->性能核查（线性布局权重会导致多一次onMeasure、onLayout, GPURender核查渲染性能）
3. 分辨率适配
4. 处理兼容模式
5. 特效设计

五、常见属性解读

此处想到了再补充