Google开源框架盒子模型之Android---(认知篇)

Github地址如下：

Github地址:https://github.com/google/flexbox-layout

 

什么是FlexboxLayout？

　　FlexBoxLayout是Android版的具有CSS部分功能的盒子模型。

Android Studio添加依赖？

   如果你使用的是Android Studip那么请在你的module下的build.gradle文件中添加如下依赖
　 稳定版本：

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

怎么去使用？
　　FlexboxLayout集成ViewGroup，看起来有点像Linearlayout和RelativeLayout，自带很多属性，你可以在XML文件中去使用他。
　　像这样：

<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="match_parent"
    app:flexWrap="wrap"
    app:alignItems="stretch"
    app:alignContent="stretch" >

    <TextView
        android:id="@+id/textview1"
        android:layout_width="120dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="50%"
        />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_alignSelf="center"
        />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="160dp"
        android:layout_height="80dp"
        app:layout_alignSelf="flex_end"
        />
</com.google.android.flexbox.FlexboxLayout>

　　或者是通过代码的方式去使用它

FlexboxLayout flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
flexboxLayout.setFlexDirection(FlexboxLayout.FLEX_DIRECTION_COLUMN);

View view = flexboxLayout.getChildAt(0);
FlexboxLayout.LayoutParams lp = (FlexboxLayout.LayoutParams) view.getLayoutParams();
lp.order = -1;
lp.flexGrow = 2;
view.setLayoutParams(lp);

FlexboxLayout自带属性的使用？

　　flexDirection属性：

　　　　该属性决定了主轴方向，类似于LinearLayout的orientation，用于表示其子类分布排列方向。

　　　　与之对应的属性值有：

　　　　row(default)：这个是个默认值，该属性对其所有子控件横向排列，如图：

　　　　

　　　　row_reverse:在row是从左往右，row_reverse是从右往左，如图：

　　　　

 

　　　　column：方向上为竖直排列，正好和row想反.

　　　　column_reverse：方向上为竖直排列，正好和row_reverse想反.

　　　　这里引入一张官方的gif图片，以便于大家的理解.

　　　　

　　flexWrap属性：

　　　　该属性用于确认当主轴放置的子控件大小超过自身时的处理。(单行或者是多行的处理方式)

　　　　nowrap:不换行

　　　　wrap：换行

　　　　wrap_reverse: 假设按照主轴方向为row，那么该属性表现为左往右，并且从下往上的排列方式。

　　　　这里同样引入官方的gif图片：

　　　　

　　justifyContent属性：

　　　　用于控制主轴(取决于flex box的方向)中子控件的分部方式。

　　　　flex_start(default):默认的值,左对齐.

　　　　flex_end：右对齐.

　　　　center:居中对齐.

　　　　space_between:两端对齐盒子跟根布局，等分子控件剩余的空间间隔(这里增加的仅仅是控件间的margin值，并不会直接影响到子控件本身的大小)..

　　　　 space_around:等分子控件剩余的空间间隔(这里增加的仅仅是控件间的margin值，并不会直接影响到子控件本身的大小).

　　　　官方gif图片：

　　　　

　　alignItems属性：

　　　　控制与主轴的相交的轴上的对齐方式.(仅仅控制每一行行内的排列方式)

　　　　stretch：填充整行.

　　　　flex_start：交叉轴的其实位置.(假如当前flex box的方向是row，这时候flex_start表示在flex_box的左上方位置)

　　　　flex_end:交叉轴的终点位置.(假如当前flex box的方向是row，这时候flex_end表示在flex_box的左下方位置)

　　　　center:交叉轴的中心位置.(假如当前flex box的方向是row，这时候center表示在flex_box的中间位置且左对齐)

　　　　baseline：项目的第一行文字的基线对齐.

　　　　官方gif图片:

　　　　

 

 

　　　　

　　alignContent属性：

　　　　该属性正好对应JustifyContent属性，功能大致相等，但是方向正好相反，表示为与主轴相交轴的方向上的每行子控件的排列方式，并且多了一个属性

　　stretch.

　　　　改属性对应的值：

　　　　stretch(default):填充整行.

　　　　flex_start:交叉轴的起点对齐.

　　　　flex_end:交叉轴的终点对齐.

　　　　center:交叉轴的中心对齐.

　　　　space_between:与交叉轴两端对齐，轴线之间的间隔平均分布

　　　　space_around:每根轴线两侧的间隔都相等,所以，轴线之间的间隔比轴线与边框的间隔大一倍.

　　　　

 

　　layout_alignSelf属性：

　　　　该属性是为了当flex box设置了alignItem之后，其中某个控件想自己定义自己的对齐方式，可以通过这个属性去覆盖flex box赋予自己的对齐效果.

　　　　auto(default):使用alignitem赋予自己的对齐效果.

　　　　stretch：填充整行.

　　　　flex_start：交叉轴的其实位置.(假如当前flex box的方向是row，这时候flex_start表示在flex_box的左上方位置)

　　　　flex_end:交叉轴的终点位置.(假如当前flex box的方向是row，这时候flex_end表示在flex_box的左下方位置)

　　　　center:交叉轴的中心位置.(假如当前flex box的方向是row，这时候center表示在flex_box的中间位置且左对齐)

　　　　baseline：项目的第一行文字的基线对齐.

 

　　子元素属性layout_order:

　　　　顾名思义就是排列顺序,数值越小越靠前，这里仅仅是控制在flex box中的子控件的排列顺序和位置.
 子控件属性layout_flexGrow：

　　　　这里是大概可以理解为线性布局的权重,只有当空间存在多余会自动放大自身。默认值是0不进行放大处理.该属性不允许属性值为小于零.

　　子控件属性flex_flexshrink：

　　　　这里跟layout_flexGrow属性正好相反,是为了当空间不足时候，缩小比例。默认值为0，不缩小。该属性不允许属性值为小于零.

　　

 　　------------------------------未完待续------------------------