使用FlexboxLayoutManager來實現流式布局
發表時間:2020-10-19
發布人:葵宇科技
浏覽次數:84
在項目中(zhōng)經常會用到流式布局,以前一直是使用鴻洋開源的哪個(gè)版本,然後在其上進行修改,之前看到了google開源了一個(gè)FlexboxLayoutManager的控件,也可(kě)以實現流式布局,但是一直也沒有細看。今天偶然又見到一篇相關(guān)的文(wén)章,這裡簡單做一個(gè)記錄,以備以後使用。
[官方地址](https://github.com/google/flexbox-layout)
這裡注意,它默認給出的版本是androidX使用的,你(nǐ)看一下(xià)它下(xià)面的說明,非X使用的版本在裡面有說明。
好不多說,直接上代碼,這裡的流式布局,采用的是RecyclerView + FlexboxLayoutManager來實現的。
我這裡寫到了fragment裡,主要是當時為了試一下(xià)新寫的懶惰加載功能。
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 和(hé) horizontal。
flexboxLayoutManager.setFlexDirection(FlexDirection.ROW);//主軸為水平方向,起點在左端。
//flexWrap 默認情況下(xià) Flex 跟 LinearLayout 一樣,都是不帶換行排列的,但是flexWrap屬性可(kě)以支持換行排列。
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 rel="stylesheet">