以前我們要實(shí)現(xiàn)流動(dòng)性布局,，比較繁瑣，Google開(kāi)源了一個(gè)項(xiàng)目叫FlexboxLayout,，相信大家都不陌生,。下面我們來(lái)學(xué)習(xí)一下FlexboxLayout基礎(chǔ)知識(shí)，并通過(guò)一個(gè)案例來(lái)加深理解,。如果你對(duì)FlexboxLayout很熟悉,，請(qǐng)忽略本文。

1. 什么是 Flexbox

簡(jiǎn)單來(lái)說(shuō) Flexbox 是屬于web前端領(lǐng)域CSS的一種布局方案,，是2009年W3C提出了一種新的布局方案,，可以響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局，并且 React Native 也是使用的 Flex 布局,。

我們可以簡(jiǎn)單的理解為 Flexbox 是CSS領(lǐng)域類(lèi)似 Linearlayout 的一種布局,，但比 Linearlayout 要強(qiáng)大的多,。

2. 什么是 FlexboxLayout,？

我們?cè)?Android 開(kāi)發(fā)中使用 Linearlayout + RelativeLayout 基本可以實(shí)現(xiàn)大部分復(fù)雜的布局,，但是Google就想了，有沒(méi)有類(lèi)似 Flexbox 的一個(gè)布局呢,？這使用起來(lái)一個(gè)布局就可以搞定各種復(fù)雜的情況了，于是 FlexboxLayout 就應(yīng)運(yùn)而生了,。

所以 FlexboxLayout 是針對(duì) Android 平臺(tái)的，實(shí)現(xiàn)類(lèi)似 Flexbox 布局方案的一個(gè)開(kāi)源項(xiàng)目,，開(kāi)源地址：https://github.com/google/flexbox-layout

3. 使用方式

使用方式很簡(jiǎn)單，只需要添加以下依賴(lài)：

compile 'com.google.android:flexbox:0.2.2'

在xml布局中我們可以這樣使用

<com.google.android.flexbox.flexboxlayout< p="">

android:id="@+id/flexbox_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:flexWrap="wrap">

<textview< p="">

android:id="@+id/tv1"

android:layout_width="120dp"

android:layout_height="80dp"

app:layout_flexBasisPercent="50%" />

<textview< p="">

android:id="@+id/tv2"

android:layout_width="80dp"

android:layout_height="80dp"

app:layout_alignSelf="center"/>

<textview< p="">

android:id="@+id/tv3"

android:layout_width="160dp"

android:layout_height="80dp"

app:layout_alignSelf="flex_end"/>

代碼中可以這樣使用

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);

我們來(lái)看簡(jiǎn)書(shū)平臺(tái)熱門(mén)專(zhuān)題的布局

下面我們來(lái)實(shí)現(xiàn)它,，先來(lái)看最終實(shí)現(xiàn)的效果：

1. 新建activity_flow.xml布局

<relativelayout xmlns:android="http://schemas./apk/res/android"

xmlns:app="http://schemas./apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

<com.google.android.flexbox.flexboxlayout< p="">

android:id="@+id/flexbox_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:flexWrap="wrap" />

布局很簡(jiǎn)單,，只有一個(gè)FlexboxLayout 因?yàn)槲覀冃枰獎(jiǎng)討B(tài)創(chuàng)建它的item,，所以就在這里固定寫(xiě)TextView了

2. 新建ActivityFlow Activity，填充數(shù)據(jù)源

String[] tags = {"婚姻育兒", "散文", "設(shè)計(jì)", "上班這點(diǎn)事兒", "影視天堂", "大學(xué)生活", "美人說(shuō)", "運(yùn)動(dòng)和健身", "工具癖", "生活家", "程序員", "想法", "短篇小說(shuō)", "美食", "教育", "心理", "奇思妙想", "美食", "攝影"};

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

for (int i = 0; i < tags.length; i++) {

Book model = new Book();

model.setId(i);

model.setName(tags[i]);

flexboxLayout.addView(createNewFlexItemTextView(model));

}

其中Book為一個(gè)實(shí)體,這個(gè)不是關(guān)鍵,，關(guān)鍵的是createNewFlexItemTextView方法

我們要?jiǎng)討B(tài)加載FlexboxLayout其FlexItem 并且讓FlexboxLayout中的item支持點(diǎn)擊事件,，因?yàn)槲覀冃枰烙脩?hù)點(diǎn)擊了哪個(gè)專(zhuān)題跳轉(zhuǎn)。

我們來(lái)看一下createNewFlexItemTextView方法

/**

* 動(dòng)態(tài)創(chuàng)建TextView

* @param book

* @return

*/

private TextView createNewFlexItemTextView(final Book book) {

TextView textView = new TextView(this);

textView.setGravity(Gravity.CENTER);

textView.setText(book.getName());

textView.setTextSize(12);

textView.setTextColor(getResources().getColor(R.color.colorAccent));

textView.setBackgroundResource(R.drawable.tag_states);

textView.setTag(book.getId());

textView.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Log.e(TAG, book.getName());

}

});

int padding = Util.dpToPixel(this, 4);

int paddingLeftAndRight = Util.dpToPixel(this, 8);

ViewCompat.setPaddingRelative(textView, paddingLeftAndRight, padding, paddingLeftAndRight, padding);

FlexboxLayout.LayoutParams layoutParams = new FlexboxLayout.LayoutParams(

ViewGroup.LayoutParams.WRAP_CONTENT,

ViewGroup.LayoutParams.WRAP_CONTENT);

int margin = Util.dpToPixel(this, 6);

int marginTop = Util.dpToPixel(this, 16);

layoutParams.setMargins(margin, marginTop, margin, 0);

textView.setLayoutParams(layoutParams);

return textView;

}

其他有關(guān)Book實(shí)體和Util類(lèi)，也貼出來(lái)一下

Book實(shí)體

public class Book {

private int id;

private String name;

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public Book() {

}

}

Util工具類(lèi)

public class Util {

public static int pixelToDp(Context context, int pixel) {

DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();

return pixel < 0 ? pixel : Math.round(pixel / displayMetrics.density);

}

public static int dpToPixel(Context context, int dp) {

DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();

return dp < 0 ? dp : Math.round(dp * displayMetrics.density);

}

}

這樣關(guān)于流動(dòng)布局［FlexboxLayout］,，我們就實(shí)現(xiàn)完成了,，是不是很簡(jiǎn)單。

［END］