Android 左右均分布局的实现

本文使用 Android 提供的几种已有 Layout，实现了左右均分的布局效果，并且在实现的过程中，对 Android 內建布局 LinearLayout、RelativeLayout 等常用布局的使用进行了温习，将一些以前忽略的细节进行了回顾；对近些年新推出的百分比布局、ConstraintLayout 的基本使用进行了归纳总结；熟悉了一下 FlexboxLayout 的基本使用。

1. 最熟悉的便是利用 LinearLayout 的 weight 属性进行布局，实现如下

概括来讲，线性布局就是，能够使其子试图在垂直或水平方向依次堆叠起来的布局，weight 属性的作用是表明该子视图所占的比例。如上，左侧和右侧的视图均将
weight 的值设置为了1，二者所占权重相同，因此将均分父容器的所有空间。

2. 其实使用 RelativeLayout 也可是实现同样的效果

使用一个尺寸为0的 view 作为 divider，然后让两个组件分别居于其左侧和右侧即可。

3. 同样的，使用 RelativeLayout 实现，但是细节有些差异。

该实现与例二几乎一样，都是使用 RelativeLayout 以及零尺寸的 divider 来实现的，该例主要是为了明确一个之前未曾留意过的细节，即 RelativeLayout 的 layout_alignXxx 属性与 layout_toXxxOf 属性的差异。

• android:layout_alignRight="@id/divider"
  • 其作用是“对齐”，因此声明该属性的 view，其右边界与 divider 的右边界对齐
• android:layout_toRightOf="@id/divider"
  • 其作用是“规定相对位置”，因此声明该属性的 view，其位置在 divider 右侧，并且左边界与 divider 的右边界对齐
• 其他方向同理

4. 使用支持库中提供的百分比布局可以轻松实现该布局效果

Android 的支持库中提供了百分比布局的支持，需要引入如下支持库：

    implementation 'com.android.support:percent:26.1.0'

百分比布局提供了 PercentFrameLayout 和 PercentRelativeLayout 这两个布局容器，使我们能够方便地对其内容以百分比的形式声明其尺寸、边距，以进行灵活的布局。

• 支持以百分比声明尺寸的属性：
  • heightPercent
  • widthPercent
  • marginBottomPercent
  • marginEndPercent
  • marginLeftPercent
  • marginPercent
  • marginRightPercent
  • marginStartPercent
  • marginTopPercent

如下，使用 PercentRelativeLayout 实现了左右均分的布局效果。

5. 更为灵活的 ConstraintLayout 可以轻松实现各种灵活布局

ConstraintLayout 与 RelativeLayout 非常相似，都是描述容器中各个成员的相对位置及相互约束进行灵活布局的方式。ConstraintLayout 灵活、强大，而且其布局也能够减少视图层级、提升绘制效率，但是对其语法和使用方式还不甚熟悉，所以并未在项目实践中大量使用。值得一提的是，Android Studio 中为 ConstraintLayout 提供了功能强大的布局编辑器，即便不熟悉其语法，也能够轻松使用其实现相应布局。

如下，使用 ConstraintLayout 实现了左右均分的布局，实现的过程也并未手写代码，只是使用布局编辑器拖拽了相应的控件，并且使用其“推断”功能生成布局，最后进行了微调而已。

6. 使用 FlexboxLayout 进行布局

Flexbox 布局（弹性盒布局）本是使用 css、用于网页布局的一种布局规范，但是移动端的开发者也有了掌握的必要。一方面，这种布局方式确实方便灵活，另一方面，如今使用 RN、weex 等跨平台的开发框架时，少不了使用 flexbox 布局。

浏览一遍该网站，即可对 css 的几种基本布局方式有个大致的了解；过一遍阮一峰前辈的flex布局教程，便能够使用 flexbox 进行常用的布局，这个教程语法、实例丰富，可以当做学习材料，也可以当做开发过程中的参考。

Google 官方提供了 flexbox-layout，这一个库来为 Android 提供了 弹性盒布局的功能，其基本的语法与 css 的语法保持一致。RN 与 weex 能够支持 flexbox 布局，实质上也是在 Android 和 iOS 两端的 SDK 中分别实现了一套原生的、符合 flexbox 语法规范的自定义布局而已。

如下，我们使用 flexbox 布局，在 Android 上实现了一个简单的左右均分布局。

文中代码