今天來(lái)使用BaseRecyclerViewAdapterHelper來(lái)完成流式布局的標(biāo)簽效果。

說(shuō)明：

一,使用的Androidstudio版本為3.5（最新版），因?yàn)?.5版本強(qiáng)制使用Androidx，所以依賴(lài)都更換成了Androidx。

二,BaseRecyclerViewAdapterHelper地址如下，使用流式布局的標(biāo)簽效果核心還是recyclerview。

三，這是BaseRecyclerViewAdapterHelper的系列的第八篇文章，如有簡(jiǎn)單的不懂使用請(qǐng)看前面的文章。

原作的github地址為：https://github.com/CymChad/BaseRecyclerViewAdapterHelper

展示效果:

xgt1.png

現(xiàn)在正式開(kāi)始

1，先看gradle文件

apply plugin: 'com.android.application'

android {
    compileSdkVersion 29
    defaultConfig {
        applicationId "com.mumu.jsrecyclerview7"
        minSdkVersion 19
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }

    //1，支持1.8
    compileOptions {
        targetCompatibility 1.8
        sourceCompatibility 1.8
    }
}

//,2,增加itpack支持
allprojects {
    repositories {
        jcenter()
        maven { url 'https://jitpack.io' }
        maven { url "https://maven.google.com" }

    }
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.0.2'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    //3,增加相關(guān)依賴(lài)
    //butterKnife
    implementation 'com.jakewharton:butterknife:10.1.0'
    annotationProcessor 'com.jakewharton:butterknife-compiler:10.1.0'
    //androidx
    implementation 'androidx.recyclerview:recyclerview:1.0.0'
    //RecyclerView的適配器
    implementation 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.47'
    //谷歌流式布局庫(kù)
    implementation 'com.google.android:flexbox:1.0.0'
    //gson
    implementation 'com.google.code.gson:gson:2.8.5'
}

2，再看布局文件，很簡(jiǎn)單就一個(gè)RecyclerView和一個(gè)刪除按鈕。點(diǎn)擊按鈕刪除數(shù)據(jù)。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginLeft="12dp"
        android:layout_marginTop="18dp">

        <TextView
            android:id="@+id/tv_history"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:text="歷史記錄"
            android:textColor="#333333"
            android:textSize="15sp"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/iv_history_dele"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="12dp"
            android:padding="5dp"
            android:src="@mipmap/icon_dele" />
    </RelativeLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_history"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

3，主activity，很簡(jiǎn)單，重點(diǎn)在第二步。

package com.mumu.jsrecyclerview7;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;

import com.chad.library.adapter.base.BaseQuickAdapter;
import com.google.android.flexbox.FlexDirection;
import com.google.android.flexbox.FlexWrap;
import com.google.android.flexbox.FlexboxLayoutManager;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

/**
 * @author : zlf
 * date    : 2019/9/6
 * github  : https://github.com/mamumu
 * blog    : http://www.itdecent.cn/u/281e9668a5a6
 * desc    :
 */
public class MainActivity extends AppCompatActivity {

    @BindView(R.id.tv_history)
    TextView tvHistory;
    @BindView(R.id.iv_history_dele)
    ImageView ivHistoryDele;
    @BindView(R.id.rv_history)
    RecyclerView rvHistory;

    private HistoryAdapter mHistoryAdapter;
    private List<HistoryEntity> mHistoryEntityList = new ArrayList<>();

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

        initView();
    }

    private void initView() {
        //1，填充假數(shù)據(jù)，正常情況應(yīng)該是從接口取
        mHistoryEntityList.add(new HistoryEntity("我", 1));
        mHistoryEntityList.add(new HistoryEntity("我愛(ài)", 2));
        mHistoryEntityList.add(new HistoryEntity("我愛(ài)你", 3));
        mHistoryEntityList.add(new HistoryEntity("我愛(ài)你我", 4));
        mHistoryEntityList.add(new HistoryEntity("我愛(ài)你我的", 5));
        mHistoryEntityList.add(new HistoryEntity("我愛(ài)你我的祖", 6));
        mHistoryEntityList.add(new HistoryEntity("我愛(ài)你我的祖國(guó)", 7));
        mHistoryEntityList.add(new HistoryEntity("我愛(ài)你我的祖國(guó)", 8));
        mHistoryEntityList.add(new HistoryEntity("我愛(ài)你我的祖國(guó)", 9));
        mHistoryEntityList.add(new HistoryEntity("我愛(ài)你我的祖國(guó)", 10));

        //2，增加谷歌流式布局
        FlexboxLayoutManager manager = new FlexboxLayoutManager(this, FlexDirection.ROW, FlexWrap.WRAP) {
            @Override
            public boolean canScrollVertically() {
                return false;
            }
        };
        rvHistory.setLayoutManager(manager);
        mHistoryAdapter = new HistoryAdapter(mHistoryEntityList);
        rvHistory.setAdapter(mHistoryAdapter);
        mHistoryAdapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(BaseQuickAdapter adapter, View view, int position) {
                //打印點(diǎn)擊的選項(xiàng)
                Toast.makeText(MainActivity.this, mHistoryEntityList.get(position).getName(), Toast.LENGTH_SHORT).show();
            }
        });
    }

    @OnClick(R.id.iv_history_dele)
    public void onViewClicked() {
        //清空數(shù)據(jù)
        mHistoryEntityList.clear();
        mHistoryAdapter.setNewData(mHistoryEntityList);
    }
}

4，適配器很簡(jiǎn)單，和之前的一樣

package com.mumu.jsrecyclerview7;


import androidx.annotation.Nullable;

import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;

import java.util.List;

/**
 * @author : zlf
 * date    : 2019/9/6
 * github  : https://github.com/mamumu
 * blog    : http://www.itdecent.cn/u/281e9668a5a6
 * desc    :
 */
public class HistoryAdapter extends BaseQuickAdapter<HistoryEntity, BaseViewHolder> {
    public HistoryAdapter(@Nullable List<HistoryEntity> data) {
        super(R.layout.item_history_around, data);
    }

    public HistoryAdapter() {
        super(R.layout.item_history_around);
    }

    @Override
    protected void convert(BaseViewHolder helper, HistoryEntity data) {
        //將每一個(gè)需要賦值的id和對(duì)應(yīng)的數(shù)據(jù)綁定
        helper.setText(R.id.item_tv_around_name, data.getName());//名字
    }
}

5，適配器對(duì)應(yīng)的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#FFFFFF">

    <TextView
        android:id="@+id/item_tv_around_name"
        android:layout_width="wrap_content"
        android:layout_height="38dp"
        android:layout_centerVertical="true"
        android:background="@drawable/shape_around"
        android:gravity="center"
        android:paddingLeft="15dp"
        android:paddingTop="3dp"
        android:layout_marginLeft="10dp"
        android:layout_marginBottom="10dp"
        android:paddingRight="15dp"
        android:paddingBottom="3dp"
        android:textColor="#666666"
        android:textSize="15sp"
        tools:text="我愛(ài)你" />
</RelativeLayout>

6，適配器對(duì)應(yīng)的實(shí)體類(lèi)

package com.mumu.jsrecyclerview7;

import com.google.gson.annotations.Expose;

import java.io.Serializable;

/**
 * @author : zlf
 * date    : 2019/9/6
 * github  : https://github.com/mamumu
 * blog    : http://www.itdecent.cn/u/281e9668a5a6
 * desc    :
 */
public class HistoryEntity implements Serializable {
    @Expose
    private String name;
    @Expose
    private int id;

    public HistoryEntity(String name, int id) {
        this.name = name;
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }
}

7，適配器布局中的背景drawable文件

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#efefef" />
            <corners android:topLeftRadius="30dp" android:topRightRadius="30dp" android:bottomLeftRadius="30dp" android:bottomRightRadius="30dp" />
        </shape>
    </item>
</layer-list>

總結(jié)，很簡(jiǎn)單的實(shí)現(xiàn)，核心在引入谷歌的流式布局，然后加進(jìn)去即可。

8，對(duì)應(yīng)github地址

demo地址：https://github.com/mamumu/jsRecyclerView7

10，本系列第一篇文章地址，如果本文看不懂可以看第一篇，如有其它疑問(wèn)請(qǐng)留言。

地址：http://www.itdecent.cn/p/ce972355c71d

如果有發(fā)現(xiàn)錯(cuò)誤歡迎指正我及時(shí)修改，如果有好的建議歡迎留言。如果覺(jué)得對(duì)你有幫助歡迎給小星星，謝謝。