使用FlexboxLayoutManager來實作流式布局

在專案中經常會用到流式布局，以前一直是使用鴻洋開源的哪個版本，然后在其上進行修改，之前看到了google開源了一個FlexboxLayoutManager的控制元件，也可以實作流式布局，但是一直也沒有細看，今天偶然又見到一篇相關的文章，這里簡單做一個記錄，以備以后使用，
[官方地址](https://github.com/google/flexbox-layout)
這里注意，它默認給出的版本是androidX使用的，你看一下它下面的說明，非X使用的版本在里面有說明，
好不多說，直接上代碼，這里的流式布局，采用的是RecyclerView + FlexboxLayoutManager來實作的，
我這里寫到了fragment里，主要是當時為了試一下新寫的懶惰加載功能，
fragment_one.xml

<?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="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_Flexbox"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>

</LinearLayout>

FragmentOne.java

public class FragmentOne extends BaseFragment {

    private RecyclerView rv_Flexbox;
    private List<String> list_data;
    private FlexBoxAdapter fAdapter;
    //private FlexboxLayoutManager flexboxLayoutManager;

    private Context mContext;


    public FragmentOne(Context mContext) {

        this.mContext = mContext;
    }

    @Override
    protected void initView(View rootView) {
        rv_Flexbox = (RecyclerView)rootView.findViewById(R.id.rv_Flexbox);
        FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(mContext);
        //flexDirection 屬性決定主軸的方向（即專案的排列方向），類似 LinearLayout 的 vertical 和 horizontal，
        flexboxLayoutManager.setFlexDirection(FlexDirection.ROW);//主軸為水平方向，起點在左端，
        //flexWrap 默認情況下 Flex 跟 LinearLayout 一樣，都是不帶換行排列的，但是flexWrap屬性可以支持換行排列，
        flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);//按正常方向換行
        //justifyContent 屬性定義了專案在主軸上的對齊方式，
        flexboxLayoutManager.setJustifyContent(JustifyContent.FLEX_START);//交叉軸的起點對齊，
        rv_Flexbox.setLayoutManager(flexboxLayoutManager);

        list_data = new ArrayList<>();
        fAdapter = new FlexBoxAdapter(getActivity(),list_data);
        rv_Flexbox.setAdapter(fAdapter);

        fAdapter.setOnItemClickLitener(new FlexBoxAdapter.OnItemClickLitener() {
            @Override
            public void OnItemClick(View view, int positon) {
                Log.e("FragmentOne", "行數: 52  data:" + list_data.get(positon));
            }
        });
    }

    @Override
    protected int getLayoutRes() {
        return R.layout.fragment_one;
    }

    private void initData()
    {
        list_data.add("這里");
        list_data.add("是設定");
        list_data.add("的子元素");
        list_data.add("的屬性");
        list_data.add("設定的");
        list_data.add("屬性可以參考");
        list_data.add("上面的介紹，效");
        list_data.add("果圖如");
        list_data.add("下");
        list_data.add("輕輕松松");
        fAdapter.notifyDataSetChanged();
    }

    @Override
    public void onFragmentLoad() {
        super.onFragmentLoad();

        if(list_data.size() == 0)
        {
            initData();
        }
    }

    @Override
    public void onFragmentLoadStop() {
        super.onFragmentLoadStop();
    }
}

FlexBoxAdapter.java

public class FlexBoxAdapter extends RecyclerView.Adapter<FlexBoxAdapter.myHolder> {

    private Context mContext;
    private List<String> list_data;
    private LayoutInflater inflater;

    public FlexBoxAdapter(Context mContext, List<String> list_data) {
        this.mContext = mContext;
        this.list_data = list_data;
        this.inflater = LayoutInflater.from(mContext);
    }

    @NonNull
    @Override
    public myHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {

        View view = inflater.inflate(R.layout.fragment_rv_item,viewGroup,false);

        return new myHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull final myHolder myHolder, int i) {
        myHolder.tv_title.setText(list_data.get(i));

        // 如果設定了回呼，則設定點擊事件
        if (mOnItemClickLitener != null)
        {
            myHolder.itemView.setOnClickListener(new View.OnClickListener()
            {
                @Override
                public void onClick(View v)
                {
                    int pos = myHolder.getLayoutPosition();
                    mOnItemClickLitener.OnItemClick(myHolder.itemView, pos);
                }
            });


        }
    }

    @Override
    public int getItemCount() {
        return list_data.size();
    }

    class myHolder extends RecyclerView.ViewHolder
    {

        TextView tv_title;

        public myHolder(@NonNull View itemView) {
            super(itemView);

            tv_title = (TextView)itemView.findViewById(R.id.tv_title);
        }
    }

    /**
     * 定義點擊每項的介面
     */
    public interface OnItemClickLitener
    {
        void OnItemClick(View view, int positon);
    }

    private OnItemClickLitener mOnItemClickLitener;

    public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener)
    {
        this.mOnItemClickLitener = mOnItemClickLitener;
    }
}

fragment_rv_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="5dp"
    android:layout_marginTop="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:background="@drawable/flex_item_bg">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="標題"
        android:textSize="15sp"
        android:textColor="#333333"
        android:layout_gravity="center"/>

</LinearLayout>

flex_item_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <!-- 填充-->
    <solid android:color="#00000000"/>
    <!-- 描邊 -->
    <stroke
        android:width="1dp"
        android:color="#7F7F7F" />
    <!-- 圓角 -->
    <corners
        android:radius="2dp" />
</shape>

對于 FlexboxLayoutManage,還有很多好玩的使用，這里給出一個兄弟的地址

FlexboxlayoutManage的其它應用