本文使用 Android 提供的幾種已有 Layout绰寞，實(shí)現(xiàn)了左右均分的布局效果归苍，并且在實(shí)現(xiàn)的過程中拥峦，對 Android 內(nèi)建布局 LinearLayout只恨、RelativeLayout 等常用布局的使用進(jìn)行了溫習(xí)译仗，將一些以前忽略的細(xì)節(jié)進(jìn)行了回顧抬虽；對近些年新推出的百分比布局、ConstraintLayout 的基本使用進(jìn)行了歸納總結(jié)纵菌；熟悉了一下 FlexboxLayout 的基本使用阐污。
- 最熟悉的便是利用 LinearLayout 的 weight 屬性進(jìn)行布局，實(shí)現(xiàn)如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/darker_gray" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@android:color/background_dark" />
</LinearLayout>
概括來講咱圆，線性布局就是笛辟，能夠使其子試圖在垂直或水平方向依次堆疊起來的布局，weight 屬性的作用是表明該子視圖所占的比例序苏。如上绢掰，左側(cè)和右側(cè)的視圖均將
weight 的值設(shè)置為了1灿里，二者所占權(quán)重相同瓶颠，因此將均分父容器的所有空間匾浪。
- 其實(shí)使用 RelativeLayout 也可是實(shí)現(xiàn)同樣的效果
使用一個尺寸為0的 view 作為 divider，然后讓兩個組件分別居于其左側(cè)和右側(cè)即可匈睁。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp">
<View
android:id="@+id/divider"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="@id/divider"
android:layout_toStartOf="@id/divider"
android:background="@android:color/darker_gray" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_toEndOf="@id/divider"
android:layout_toRightOf="@id/divider"
android:background="@android:color/background_dark" />
</RelativeLayout>
- 同樣的监透，使用 RelativeLayout 實(shí)現(xiàn)，但是細(xì)節(jié)有些差異软舌。
該實(shí)現(xiàn)與例二幾乎一樣才漆，都是使用 RelativeLayout 以及零尺寸的 divider 來實(shí)現(xiàn)的，該例主要是為了明確一個之前未曾留意過的細(xì)節(jié)佛点，即 RelativeLayout 的 layout_alignXxx 屬性與 layout_toXxxOf 屬性的差異。
- android:layout_alignRight="@id/divider"
- 其作用是“對齊”黎比，因此聲明該屬性的 view超营，其右邊界與 divider 的右邊界對齊
- android:layout_toRightOf="@id/divider"
- 其作用是“規(guī)定相對位置”，因此聲明該屬性的 view阅虫，其位置在 divider 右側(cè)演闭，并且左邊界與 divider 的右邊界對齊
- 其他方向同理
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp">
<View
android:id="@+id/divider"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="@id/divider"
android:layout_alignEnd="@id/divider"
android:background="@android:color/darker_gray" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignLeft="@id/divider"
android:layout_alignStart="@id/divider"
android:background="@android:color/background_dark" />
</RelativeLayout>
- 使用支持庫中提供的百分比布局可以輕松實(shí)現(xiàn)該布局效果
Android 的支持庫中提供了百分比布局的支持，需要引入如下支持庫：
implementation 'com.android.support:percent:26.1.0'
百分比布局提供了 PercentFrameLayout 和 PercentRelativeLayout 這兩個布局容器颓帝，使我們能夠方便地對其內(nèi)容以百分比的形式聲明其尺寸米碰、邊距，以進(jìn)行靈活的布局购城。
- 支持以百分比聲明尺寸的屬性：
- heightPercent
- widthPercent
- marginBottomPercent
- marginEndPercent
- marginLeftPercent
- marginPercent
- marginRightPercent
- marginStartPercent
- marginTopPercent
如下吕座，使用 PercentRelativeLayout 實(shí)現(xiàn)了左右均分的布局效果。
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout 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="100dp">
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@android:color/darker_gray"
app:layout_heightPercent="100%"
app:layout_widthPercent="50%" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:background="@android:color/background_dark"
app:layout_heightPercent="100%"
app:layout_widthPercent="50%" />
</android.support.percent.PercentRelativeLayout>
- 更為靈活的 ConstraintLayout 可以輕松實(shí)現(xiàn)各種靈活布局
ConstraintLayout 與 RelativeLayout 非常相似瘪板，都是描述容器中各個成員的相對位置及相互約束進(jìn)行靈活布局的方式吴趴。ConstraintLayout 靈活、強(qiáng)大侮攀，而且其布局也能夠減少視圖層級锣枝、提升繪制效率厢拭，但是對其語法和使用方式還不甚熟悉，所以并未在項(xiàng)目實(shí)踐中大量使用撇叁。值得一提的是供鸠，Android Studio 中為 ConstraintLayout 提供了功能強(qiáng)大的布局編輯器，即便不熟悉其語法陨闹，也能夠輕松使用其實(shí)現(xiàn)相應(yīng)布局楞捂。
如下，使用 ConstraintLayout 實(shí)現(xiàn)了左右均分的布局正林，實(shí)現(xiàn)的過程也并未手寫代碼，只是使用布局編輯器拖拽了相應(yīng)的控件觅廓，并且使用其“推斷”功能生成布局，最后進(jìn)行了微調(diào)而已帖蔓。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical">
<TextView
android:id="@+id/tv_left"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/tv_right"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv_right"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@android:color/background_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/tv_left"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
- 使用 FlexboxLayout 進(jìn)行布局
Flexbox 布局（彈性盒布局）本是使用 css、用于網(wǎng)頁布局的一種布局規(guī)范瞳脓，但是移動端的開發(fā)者也有了掌握的必要塑娇。一方面劫侧，這種布局方式確實(shí)方便靈活，另一方面烧栋，如今使用 RN写妥、weex 等跨平臺的開發(fā)框架時(shí)，少不了使用 flexbox 布局审姓。
瀏覽一遍該網(wǎng)站珍特，即可對 css 的幾種基本布局方式有個大致的了解魔吐；過一遍阮一峰前輩的flex布局教程，便能夠使用 flexbox 進(jìn)行常用的布局酬姆，這個教程語法轴踱、實(shí)例豐富症脂，可以當(dāng)做學(xué)習(xí)材料，也可以當(dāng)做開發(fā)過程中的參考壶唤。
Google 官方提供了 flexbox-layout棕所，這一個庫來為 Android 提供了 彈性盒布局的功能，其基本的語法與 css 的語法保持一致琳省。RN 與 weex 能夠支持 flexbox 布局，實(shí)質(zhì)上也是在 Android 和 iOS 兩端的 SDK 中分別實(shí)現(xiàn)了一套原生的击费、符合 flexbox 語法規(guī)范的自定義布局而已桦他。
如下，我們使用 flexbox 布局快压，在 Android 上實(shí)現(xiàn)了一個簡單的左右均分布局。
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout 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="100dp"
app:flexDirection="row"
app:flexWrap="nowrap">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="@android:color/darker_gray"
app:layout_flexGrow="1" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="@android:color/background_dark"
app:layout_flexGrow="1" />
</com.google.android.flexbox.FlexboxLayout>
