RecyclerFlexboxLayoutManagerDemo【使用FlexboxLayoutManager實現流式布局】

本文轉載自查看原文 2018-07-22 15:43 3935 【Android快速開發常用知識點系列】

前言

FlexboxLayout是一個Google 開源的庫項目，它將CSS Flexible Box Layout Module的類似功能引入Android。

這里只記錄FlexboxLayoutManager搭配RecyclerView實現流式布局的實現方式，至於FlexboxLayout的獨立使用以及相關資料，請閱讀《參考資料》。

效果圖

代碼分析

將FlexboxLayoutManager理解為RecyclerView的一種manager，比如LinearLayoutManager等。

        //設置布局管理器
        FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(MainActivity.this);
        //flexDirection 屬性決定主軸的方向（即項目的排列方向）。類似 LinearLayout 的 vertical 和 horizontal。
        flexboxLayoutManager.setFlexDirection(FlexDirection.ROW);//主軸為水平方向，起點在左端。
        //flexWrap 默認情況下 Flex 跟 LinearLayout 一樣，都是不帶換行排列的，但是flexWrap屬性可以支持換行排列。
        flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);//按正常方向換行
        //justifyContent 屬性定義了項目在主軸上的對齊方式。
        flexboxLayoutManager.setJustifyContent(JustifyContent.FLEX_START);//交叉軸的起點對齊。

        mRecyclerView.setLayoutManager(flexboxLayoutManager);

使用步驟

一、項目組織結構圖

注意事項：

1、導入類文件后需要change包名以及重新import R文件路徑

2、 Values目錄下的文件（strings.xml、dimens.xml、colors.xml等），如果項目中存在，則復制里面的內容，不要整個覆蓋

二、導入步驟

（1）在build.gradle中引用recyclerview【版本號和appcompat保持一致】和Flexboxlayout

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.why.project.recyclerflexboxlayoutmanagerdemo"
        minSdkVersion 16
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    //RecyclerView compile "com.android.support:recyclerview-v7:27.1.1" //FlexboxLayout implementation 'com.google.android:flexbox:1.0.0'
}

（2）在項目中實現Recyclerview基本數據展現

1、創建Bean類

package com.why.project.recyclerflexboxlayoutmanagerdemo.bean;

import java.util.Date;

/**
 * Created by HaiyuKing
 * Used 搜索歷史記錄bean
 */

public class SearchHistoryBean {
    private String searchTitle;//搜索的標題
    private Date searchDate;//搜索的時間（如果重新搜索了的話，只需要更新搜索時間即可，不需要添加）

    public String getSearchTitle() {
        return searchTitle;
    }

    public void setSearchTitle(String searchTitle) {
        this.searchTitle = searchTitle;
    }

    public Date getSearchDate() {
        return searchDate;
    }

    public void setSearchDate(Date searchDate) {
        this.searchDate = searchDate;
    }
}

SearchHistoryBean.java

2、創建Adapter以及item的布局文件

package com.why.project.recyclerflexboxlayoutmanagerdemo.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.why.project.recyclerflexboxlayoutmanagerdemo.R;
import com.why.project.recyclerflexboxlayoutmanagerdemo.bean.SearchHistoryBean;

import java.util.ArrayList;

/**
 * Created by HaiyuKing
 * Used 搜索記錄列表適配器
 */

public class SearchHistoryAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{
    /**上下文*/
    private Context myContext;
    /**頻道集合*/
    private ArrayList<SearchHistoryBean> listitemList;

    /**
     * 構造函數
     */
    public SearchHistoryAdapter(Context context, ArrayList<SearchHistoryBean> itemlist) {
        myContext = context;
        listitemList = itemlist;
    }

    /**
     * 獲取總的條目數
     */
    @Override
    public int getItemCount() {
        return listitemList.size();
    }

    /**
     * 創建ViewHolder
     */
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(myContext).inflate(R.layout.searchhistory_list_item, parent, false);
        ItemViewHolder itemViewHolder = new ItemViewHolder(view);
        return itemViewHolder;
    }

    /**
     * 聲明grid列表項ViewHolder*/
    static class ItemViewHolder extends RecyclerView.ViewHolder
    {
        public ItemViewHolder(View view)
        {
            super(view);

            listItemLayout = (LinearLayout) view.findViewById(R.id.listitem_layout);
            mTitle = (TextView) view.findViewById(R.id.tv_title);
        }

        LinearLayout listItemLayout;
        TextView mTitle;
    }

    /**
     * 將數據綁定至ViewHolder
     */
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int index) {

        //判斷屬於列表項還是上拉加載區域
        if(viewHolder instanceof ItemViewHolder){
            SearchHistoryBean searchHistoryBean = listitemList.get(index);
            final ItemViewHolder itemViewHold = ((ItemViewHolder)viewHolder);

            itemViewHold.mTitle.setText(searchHistoryBean.getSearchTitle());

            //如果設置了回調，則設置點擊事件
            if (mOnItemClickLitener != null)
            {
                itemViewHold.listItemLayout.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        int position = itemViewHold.getLayoutPosition();//在增加數據或者減少數據時候，position和index就不一樣了
                        mOnItemClickLitener.onItemClick(itemViewHold.listItemLayout, position);
                    }
                });
            }

        }
    }

    /**
     * 添加Item--用於動畫的展現*/
    public void addItem(int position,SearchHistoryBean listitemBean) {
        listitemList.add(position,listitemBean);
        notifyItemInserted(position);
    }
    /**
     * 刪除Item--用於動畫的展現*/
    public void removeItem(int position) {
        listitemList.remove(position);
        notifyItemRemoved(position);
    }

    /*=====================添加OnItemClickListener回調================================*/
    public interface OnItemClickLitener
    {
        void onItemClick(View view, int position);
    }

    private OnItemClickLitener mOnItemClickLitener;

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

SearchHistoryAdapter.java

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listitem_layout"
    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/searchhistory_item_bg">

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

</LinearLayout>

searchhistory_list_item.xml

列表項布局文件中用到了背景drawable文件

<?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>

searchhistory_item_bg.xml

3、在Activity布局文件中引用Recyclerview控件

<?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:orientation="vertical"
    android:background="#ffffff">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="歷史記錄"/>

    <!-- RecyclerView列表 -->
    <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:cacheColorHint="#00000000" android:divider="@null" android:listSelector="#00000000" android:scrollbars="none"
        />
</LinearLayout>

三、使用方法

（1）Activity中使用如下

package com.why.project.recyclerflexboxlayoutmanagerdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Toast;

import com.google.android.flexbox.FlexDirection;
import com.google.android.flexbox.FlexWrap;
import com.google.android.flexbox.FlexboxLayoutManager;
import com.google.android.flexbox.JustifyContent;
import com.why.project.recyclerflexboxlayoutmanagerdemo.adapter.SearchHistoryAdapter;
import com.why.project.recyclerflexboxlayoutmanagerdemo.bean.SearchHistoryBean;

import java.util.ArrayList;
import java.util.Calendar;

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private ArrayList<SearchHistoryBean> mSearchHistoryBeanArrayList;
    private SearchHistoryAdapter mSearchHistoryAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();
        initDatas();
        initEvents();
    }

    private void initViews() {
        mRecyclerView = findViewById(R.id.recycler_view);
    }

    private void initDatas() {
        //初始化集合
        mSearchHistoryBeanArrayList = new ArrayList<SearchHistoryBean>();
        String[] testDatas = new String[]{"牙刷","滅蚊器","移動空調","吸塵器","布衣櫃","收納箱 書箱","暑期美食滿99減15","掛燙機","吸水拖把","反季特惠"};
        for(int i=0; i<testDatas.length;i++){
            SearchHistoryBean channelBean = new SearchHistoryBean();
            channelBean.setSearchTitle(testDatas[i]);
            //獲取當前日期
            Calendar calendar = Calendar.getInstance();
            channelBean.setSearchDate(calendar.getTime());

            mSearchHistoryBeanArrayList.add(channelBean);
        }

        //設置布局管理器
        FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(MainActivity.this); //flexDirection 屬性決定主軸的方向（即項目的排列方向）。類似 LinearLayout 的 vertical 和 horizontal。
        flexboxLayoutManager.setFlexDirection(FlexDirection.ROW);//主軸為水平方向，起點在左端。 //flexWrap 默認情況下 Flex 跟 LinearLayout 一樣，都是不帶換行排列的，但是flexWrap屬性可以支持換行排列。
        flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);//按正常方向換行 //justifyContent 屬性定義了項目在主軸上的對齊方式。
        flexboxLayoutManager.setJustifyContent(JustifyContent.FLEX_START);//交叉軸的起點對齊。

        mRecyclerView.setLayoutManager(flexboxLayoutManager);

        //設置適配器
        if(mSearchHistoryAdapter == null){
            //設置適配器
            mSearchHistoryAdapter = new SearchHistoryAdapter(this, mSearchHistoryBeanArrayList);
            mRecyclerView.setAdapter(mSearchHistoryAdapter);
            //添加分割線
            //設置添加刪除動畫
            //調用ListView的setSelected(!ListView.isSelected())方法，這樣就能及時刷新布局
            mRecyclerView.setSelected(true);
        }else{
            mSearchHistoryAdapter.notifyDataSetChanged();
        }
    }private void initEvents() {
        //列表適配器的點擊監聽事件
        mSearchHistoryAdapter.setOnItemClickLitener(new SearchHistoryAdapter.OnItemClickLitener() {
            @Override
            public void onItemClick(View view, int position) {
                Toast.makeText(MainActivity.this, mSearchHistoryBeanArrayList.get(position).getSearchTitle(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

效果圖：

（2）如果在Adapter中添加以下代碼，效果圖則會發生變化（原理請閱讀《參考資料》）【這段代碼更適合用於圖片展示，這里是搜索記錄文本展現，不太合適】

package com.why.project.recyclerflexboxlayoutmanagerdemo.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.google.android.flexbox.AlignSelf;
import com.google.android.flexbox.FlexboxLayoutManager;
import com.why.project.recyclerflexboxlayoutmanagerdemo.R;
import com.why.project.recyclerflexboxlayoutmanagerdemo.bean.SearchHistoryBean;

import java.util.ArrayList;

/**
 * Created by HaiyuKing
 * Used 搜索記錄列表適配器
 */

public class SearchHistoryAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{
    /**上下文*/
    private Context myContext;
    /**頻道集合*/
    private ArrayList<SearchHistoryBean> listitemList;

    /**
     * 構造函數
     */
    public SearchHistoryAdapter(Context context, ArrayList<SearchHistoryBean> itemlist) {
        myContext = context;
        listitemList = itemlist;
    }

    /**
     * 獲取總的條目數
     */
    @Override
    public int getItemCount() {
        return listitemList.size();
    }

    /**
     * 創建ViewHolder
     */
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(myContext).inflate(R.layout.searchhistory_list_item, parent, false);
        ItemViewHolder itemViewHolder = new ItemViewHolder(view);
        return itemViewHolder;
    }

    /**
     * 聲明grid列表項ViewHolder*/
    static class ItemViewHolder extends RecyclerView.ViewHolder
    {
        public ItemViewHolder(View view)
        {
            super(view);

            listItemLayout = (LinearLayout) view.findViewById(R.id.listitem_layout);
            mTitle = (TextView) view.findViewById(R.id.tv_title);
        }

        LinearLayout listItemLayout;
        TextView mTitle;
    }

    /**
     * 將數據綁定至ViewHolder
     */
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int index) {

        //判斷屬於列表項還是上拉加載區域
        if(viewHolder instanceof ItemViewHolder){
            SearchHistoryBean searchHistoryBean = listitemList.get(index);
            final ItemViewHolder itemViewHold = ((ItemViewHolder)viewHolder);

            itemViewHold.mTitle.setText(searchHistoryBean.getSearchTitle());

            ViewGroup.LayoutParams lp = itemViewHold.listItemLayout.getLayoutParams(); if (lp instanceof FlexboxLayoutManager.LayoutParams) { FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) itemViewHold.listItemLayout.getLayoutParams(); flexboxLp.setFlexGrow(1.0f); flexboxLp.setAlignSelf(AlignSelf.FLEX_END); } //如果設置了回調，則設置點擊事件
            if (mOnItemClickLitener != null)
            {
                itemViewHold.listItemLayout.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        int position = itemViewHold.getLayoutPosition();//在增加數據或者減少數據時候，position和index就不一樣了
                        mOnItemClickLitener.onItemClick(itemViewHold.listItemLayout, position);
                    }
                });
            }

        }
    }

    /**
     * 添加Item--用於動畫的展現*/
    public void addItem(int position,SearchHistoryBean listitemBean) {
        listitemList.add(position,listitemBean);
        notifyItemInserted(position);
    }
    /**
     * 刪除Item--用於動畫的展現*/
    public void removeItem(int position) {
        listitemList.remove(position);
        notifyItemRemoved(position);
    }

    /*=====================添加OnItemClickListener回調================================*/
    public interface OnItemClickLitener
    {
        void onItemClick(View view, int position);
    }

    private OnItemClickLitener mOnItemClickLitener;

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

效果圖

混淆配置

無

參考資料

google/flexbox-layout

Android FlexboxLayout 聰明的UI布局

Android可伸縮布局－FlexboxLayout(支持RecyclerView集成)

Google 開源的 Android 排版庫：FlexboxLayout

項目demo下載地址

https://github.com/haiyuKing/RecyclerFlexboxLayoutManagerDemo

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 flex實現流式布局什么是流式布局 RV LayoutManager 流式布局 MD 樣式表、格式布局、流式布局網頁的三種布局（固定布局，流式布局，彈性布局）兩欄布局，三欄布局，等高布局，流式布局 iOS:UICollectionView流式布局及其在該布局上的擴展的線式布局 CSS3 彈性盒模型與流式布局 web前端流式布局詳細介紹布局的幾種方式（靜態布局、自適應布局、流式布局、響應式布局、彈性布局）