前言

FlexboxLayout是google推出的一個實(shí)現(xiàn)流式布局的比較好的控件残邀。
本篇文章參考：
Android可伸縮布局－FlexboxLayout(支持RecyclerView集成)
Android輕松搞定流動布局（FlexboxLayout）
google/flexbox-layout(項(xiàng)目地址)
在此表示感謝丹墨。對于FlexboxLayout的一些基本特性和使用參考文獻(xiàn)已經(jīng)寫的很清楚了遣臼，本篇主要講 FlexboxLayout+RecyclerView 如何實(shí)現(xiàn)流式布局。

效果圖

其實(shí)講述前先來波效果圖才是正確的打開方式。

2.gif

第一步，準(zhǔn)備幾個點(diǎn)擊textView時背景切換的xml

flex_tv_normal.xml 代碼

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="6dp"></corners>
    <stroke android:color="#f5cc1d"
            android:width="2dp"></stroke>
</shape>

flex_tv_pressed.xml 代碼

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="6dp"></corners>
    <stroke android:color="#ff5b0a"
            android:width="2dp"></stroke>
</shape>

flex_tv_bg.xml 代碼

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/flex_tv_pressed" android:state_selected="true"/>
    <item android:drawable="@drawable/flex_tv_normal" android:state_selected="false"/>
</selector>

第二步岭埠，在app.gradle中添加 FlexboxLayout 的依賴

  //FlexboxLayout
  compile 'com.google.android:flexbox:0.3.0'
  //RecyclerView
  compile 'com.android.support:recyclerview-v7:25.2.0'
  //butterKnife
  compile 'com.jakewharton:butterknife:8.5.1'
  //這條千萬不能忘記!!
  annotationProcessor 'com.jakewharton:butterknife-compiler:8.5.1'

第三步，用到RecyclerView，肯定得有對應(yīng)的Adapter了惜论，下面貼出 FlexboxAdapter 代碼

/**
 * Instruction:流式布局對應(yīng)的適配器
 * <p>
 * Author:pei
 * Date: 2017/6/30
 * Description:
 */
public class FlexboxAdapter<T>extends RecyclerView.Adapter {

    protected Context mContext;
    protected View mLayoutView;
    protected List<T> mData;
    private ViewHolder mViewHolder;
    protected OnRecyclerItemClickListener mOnRecyclerItemClickListener;

    private int mIndex=-1;//為了防止初始化時第一項(xiàng)被選中许赃，所以mIndex設(shè)一個負(fù)值

    public void setOnRecyclerItemClickListener(OnRecyclerItemClickListener onRecyclerItemClickListener) {
        this.mOnRecyclerItemClickListener = onRecyclerItemClickListener;
    }

    public FlexboxAdapter(Context context, List<T> data) {
        this.mContext = context;
        this.mData = data;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //注：不可使用view=LayoutInflater.from(mContext).inflate(R.layout.item_layout，null);不然會報錯
        mLayoutView = LayoutInflater.from(mContext).inflate(R.layout.item_fle_layout, parent, false);
        return new ViewHolder(mLayoutView);
    }

    @Override
    public int getItemViewType(int position) {
        return super.getItemViewType(position);
    }

    @Override
    public int getItemCount() {
        return mData == null ? 0 : mData.size();
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        mViewHolder = ((ViewHolder) holder);

        initData(position);
        setListener(position);
    }

    private void initData(int position) {
        String content =mData.get(position).toString();
        mViewHolder.tvContent.setText(content);
        if(mIndex==position){
            mViewHolder.tvContent.setSelected(true);
        }else{
            mViewHolder.tvContent.setSelected(false);
        }

//        //flexGrow子元素的放大比例馆类， 決定如何分配剩余空間（如果存在剩余空間的話）混聊，默認(rèn)值為0,不會分配剩余空間，
//        //如果有一個item的 layout_flexGrow 是一個正值乾巧，那么會將全部剩余空間分配給這個Item,
//        //如果有多個Item這個屬性都為正值句喜，那么剩余空間的分配按照layout_flexGrow定義的比例
//        //(有點(diǎn)像LinearLayout的layout_weight屬性）。
//        ViewGroup.LayoutParams lp = mViewHolder.tvContent.getLayoutParams();
//        if (lp instanceof FlexboxLayoutManager.LayoutParams) {//設(shè)置 flexGrow
//            FlexboxLayoutManager.LayoutParams flexboxLp =(FlexboxLayoutManager.LayoutParams) mViewHolder.tvContent.getLayoutParams();
//            flexboxLp.setFlexGrow(1.0f);
//        }

    }

    private void setListener(final int position) {
        mViewHolder.tvContent.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mOnRecyclerItemClickListener != null) {
                    mOnRecyclerItemClickListener.onRecyclerClick(position);
                }
            }
        });
    }

    public void setIndex(int index){
        this.mIndex=index;
    }

    class ViewHolder extends RecyclerView.ViewHolder {

        TextView tvContent;

        public ViewHolder(View view) {
            super(view);
            tvContent=(TextView)view.findViewById(R.id.tv_content);
        }
    }

    public interface OnRecyclerItemClickListener {
        void onRecyclerClick(int position);
    }

}

對應(yīng)的 item_fle_layout.xml 文件如下(郁悶不知道這個xml應(yīng)該怎么寫沟于，卡了好久)咳胃，這個確實(shí)卡了我一會啊，總算是出來了旷太，哭一會~

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tv_content"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="3dp"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:background="@drawable/flex_tv_bg"
    android:textColor="@color/black"
    android:textSize="14sp"
    android:gravity="center"/>

第四步展懈，先上activity_mian.xml文件吧，為了展示流式布局的滑

動效果供璧，我將RecyclerView的高度設(shè)置了一個固定的值存崖，大家開發(fā)時，可以根據(jù)實(shí)際情況修改

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <Button
        android:id="@+id/finger"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@drawable/more_react"
        android:text="測試"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:scrollbars="vertical"
            android:scrollbarStyle="outsideOverlay"/>

    </RelativeLayout>
</LinearLayout>

最后一步睡毒，上MainActivity代碼

public class MainActivity extends BaseActivity implements View.OnClickListener,FlexboxAdapter.OnRecyclerItemClickListener {

    @BindView(R.id.finger)
    Button mBtnFinger;

    @BindView(R.id.recycler_view)
    RecyclerView mRecyclerView;

    private FlexboxAdapter mFlexboxAdapter;
    private List<String>mDatas;

    @Override
    protected int getContentViewId() {
        return R.layout.activity_main;
    }

    @Override
    protected void initData(){
        mDatas=new ArrayList<>();
        mDatas.add("程序員");
        mDatas.add("影視天堂");
        mDatas.add("美食");
        mDatas.add("漫畫.手繪");
        mDatas.add("廣告圈");
        mDatas.add("旅行来惧。在路上");
        mDatas.add("娛樂八卦");
        mDatas.add("青春");
        mDatas.add("談寫作");
        mDatas.add("短篇小說");
        mDatas.add("散文");
        mDatas.add("污段子");
        mDatas.add("小說");

        mDatas.add("程序員2");
        mDatas.add("影視天堂2");
        mDatas.add("美食2");
        mDatas.add("漫畫.手繪2");
        mDatas.add("廣告圈2");
        mDatas.add("旅行。在路上2");
        mDatas.add("娛樂八卦2");
        mDatas.add("青春2");

        FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(mContext);
        layoutManager.setFlexDirection(FlexDirection.ROW);//設(shè)置主軸排列方式
        layoutManager.setFlexWrap(FlexWrap.WRAP);//設(shè)置是否換行
        layoutManager.setAlignItems(AlignItems.STRETCH);

        mRecyclerView.setHasFixedSize(true);
        mRecyclerView.setLayoutManager(layoutManager);
        mFlexboxAdapter = new FlexboxAdapter<String>(mContext, mDatas);
        mRecyclerView.setAdapter(mFlexboxAdapter);
    }


    @Override
    protected void setListener() {
        mBtnFinger.setOnClickListener(this);
        mFlexboxAdapter.setOnRecyclerItemClickListener(this);
    }

    @Nullable
    @Override
    protected BasePresenter getPresenter() {
        return null;
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }

    @Override
    public void onClick(View v) {
        switch(v.getId()){
           case R.id.finger:
                break;
           default:
                break;
          }
    }

    @Override
    public void onRecyclerClick(int position) {
        String s=mDatas.get(position).toString();
        LogUtil.e("===s="+s+"   position="+position);
        ToastUtil.shortShow("===s="+s+"   position="+position);
        
        mFlexboxAdapter.setIndex(position);
        mFlexboxAdapter.notifyDataSetChanged();
    }
}

ok,今天關(guān)于FlexboxLayout實(shí)現(xiàn)流式布局的內(nèi)容就講到這里演顾，謝謝誒供搀。