使用FlexboxLayoutManager來實現流式布局 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

您當前位置>首頁 » 新聞資(zī)訊 » 技術(shù)分享 >

使用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">
 

相關(guān)案例查看更多