FlexboxLayout真的好用?<1>

FlexboxLayout出来已经很久啦，大家对他的用法应该了解的也差不多啦！如果有不了解的可以看看《Google 开源的 Android 排版库：FlexboxLayout》和《Flex 布局教程：语法篇》这两篇文章然后结合源代码和例子来分析，今天我这里要说的是一些使用过程中遇到的问题和个人想法！

开始使用前我们需要在build.gradle添加依赖包

dependencies {
    compile 'com.google.android:flexbox:0.2.2'
}

需要注意的是我们的V7包的版本需要是23.3.0以上，否则会导致编译出错 eg:

compile 'com.android.support:appcompat-v7：23.3.0'

好了，现在可以在布局文件中使用了！

正所谓适合自己的才是好的，FlexboxLayout的出现并不是去取代LinearLayout或RelativeLayout，而是为了在一些复杂的布局中简化他的嵌套层次，比如我们来看个例子，

RelativeLayout编写

<RelativeLayout android:layout_width="match_parent"
            android:layout_height="match_parent">
    <ImageView
        android:id="@+id/iv_ad_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ad1"/>
    <View
        android:id="@+id/line_1"
        android:layout_width="1px"
        android:layout_height="match_parent"
        android:layout_alignBottom="@id/iv_ad_1"
        android:layout_toRightOf="@id/iv_ad_1"
        android:background="@android:color/darker_gray"/>
    <ImageView
        android:id="@+id/iv_ad_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/line_1"
        android:src="@mipmap/ad2"/>
    <View
        android:id="@+id/line_2"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_below="@id/iv_ad_2"
        android:layout_toRightOf="@id/line_1"
        android:background="@android:color/darker_gray"/>
    <ImageView
        android:id="@+id/iv_ad_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/line_2"
        android:layout_toRightOf="@id/line_1"
        android:src="@mipmap/ad3"/>
    <View
        android:id="@+id/line_3"
        android:layout_width="1px"
        android:layout_height="match_parent"
        android:layout_alignBottom="@id/iv_ad_1"
        android:layout_below="@id/line_2"
        android:layout_toRightOf="@id/iv_ad_3"
        android:background="@android:color/darker_gray"/>
    <ImageView
        android:id="@+id/iv_ad_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/line_2"
        android:layout_toRightOf="@id/line_3"
        android:src="@mipmap/ad4"/>
</RelativeLayout>

LinearLayout编写

<LinearLayout android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="horizontal">
    <LinearLayout android:layout_width="wrap_content"
              android:layout_height="wrap_content">
        <ImageView android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:src="@mipmap/ad1"/>
        <View android:layout_width="1px"
              android:layout_height="match_parent"
              android:background="@android:color/darker_gray"/>
    </LinearLayout>
    <LinearLayout android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:orientation="vertical">
        <ImageView android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:src="@mipmap/ad2"/>
        <View android:layout_width="match_parent"
              android:layout_height="1px"
              android:background="@android:color/darker_gray"/>
        <LinearLayout android:layout_width="wrap_content"
                      android:layout_height="wrap_content">
            <ImageView android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:src="@mipmap/ad3"/>
            <View android:layout_width="1px"
                  android:layout_height="match_parent"
                  android:background="@android:color/darker_gray"/>
            <ImageView android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:src="@mipmap/ad4"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

FlexboxLayout

<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="190dp"
    android:orientation="vertical"
    app:flexWrap="nowrap">
    <com.google.android.flexbox.FlexboxLayout android:layout_width="wrap_content"
                  android:layout_height="match_parent"
                  app:layout_flexShrink="0">
        <ImageView android:layout_width="wrap_content"
                   android:layout_height="match_parent"
                   android:src="@mipmap/ad1"
        />
        <View android:layout_width="1px"
              android:layout_height="match_parent"
              android:background="@android:color/darker_gray"/>
    </com.google.android.flexbox.FlexboxLayout>
    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:alignItems="flex_start"
        app:flexWrap="wrap">
        <ImageView android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:src="@mipmap/ad2"
                   app:layout_flexBasisPercent="100%"/>
        <View android:layout_width="match_parent"
              android:layout_height="1px"
              android:background="@android:color/darker_gray"/>
        <ImageView android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:src="@mipmap/ad3"
                   app:layout_flexBasisPercent="50%"/>
        <View android:layout_width="1px"
              android:layout_height="wrap_content"
              android:background="@android:color/darker_gray"/>
        <ImageView android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:src="@mipmap/ad4"
                   app:layout_flexBasisPercent="49%"/>
    </com.google.android.flexbox.FlexboxLayout>
</com.google.android.flexbox.FlexboxLayout>

总结

LinearLayout：在这个布局时，很直观，布局起来得心应手，不过他的嵌套太深，最底层的ImageView已经被嵌套了3层，这对于android布局是有限制的缺点来说是很被动的

RelativeLayout:只有一层嵌套，比较直观，但是由于是相对，所以里面id定义就必不可少了，而且你的相对论要了解一点。而最近Google推荐的DataBinding貌似对已Id的定义已经不在关注啦！

FlexboxLayout:这个嵌套到不多，尼玛里面的分割线导致他的高度要写死。而且分割线存在也让这个布局更加难以理解和编写