Android中RecyclerView配合BaseRecycl

今天来使用BaseRecyclerViewAdapterHelper来完成流式布局的标签效果。

说明：

一,使用的Androidstudio版本为3.5（最新版），因为3.5版本强制使用Androidx，所以依赖都更换成了Androidx。

二,BaseRecyclerViewAdapterHelper地址如下，使用流式布局的标签效果核心还是recyclerview。

三，这是BaseRecyclerViewAdapterHelper的系列的第八篇文章，如有简单的不懂使用请看前面的文章。

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

展示效果:

xgt1.png

现在正式开始

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,增加相关依赖
    //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'
    //谷歌流式布局库
    implementation 'com.google.android:flexbox:1.0.0'
    //gson
    implementation 'com.google.code.gson:gson:2.8.5'
}

2，再看布局文件，很简单就一个RecyclerView和一个删除按钮。点击按钮删除数据。

<?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，很简单，重点在第二步。

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    : https://www.jianshu.com/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，填充假数据，正常情况应该是从接口取
        mHistoryEntityList.add(new HistoryEntity("我", 1));
        mHistoryEntityList.add(new HistoryEntity("我爱", 2));
        mHistoryEntityList.add(new HistoryEntity("我爱你", 3));
        mHistoryEntityList.add(new HistoryEntity("我爱你我", 4));
        mHistoryEntityList.add(new HistoryEntity("我爱你我的", 5));
        mHistoryEntityList.add(new HistoryEntity("我爱你我的祖", 6));
        mHistoryEntityList.add(new HistoryEntity("我爱你我的祖国", 7));
        mHistoryEntityList.add(new HistoryEntity("我爱你我的祖国", 8));
        mHistoryEntityList.add(new HistoryEntity("我爱你我的祖国", 9));
        mHistoryEntityList.add(new HistoryEntity("我爱你我的祖国", 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) {
                //打印点击的选项
                Toast.makeText(MainActivity.this, mHistoryEntityList.get(position).getName(), Toast.LENGTH_SHORT).show();
            }
        });
    }

    @OnClick(R.id.iv_history_dele)
    public void onViewClicked() {
        //清空数据
        mHistoryEntityList.clear();
        mHistoryAdapter.setNewData(mHistoryEntityList);
    }
}

4，适配器很简单，和之前的一样

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    : https://www.jianshu.com/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) {
        //将每一个需要赋值的id和对应的数据绑定
        helper.setText(R.id.item_tv_around_name, data.getName());//名字
    }
}

5，适配器对应的布局

<?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="我爱你" />
</RelativeLayout>

6，适配器对应的实体类

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    : https://www.jianshu.com/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>

总结，很简单的实现，核心在引入谷歌的流式布局，然后加进去即可。

8，对应github地址

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

10，本系列第一篇文章地址，如果本文看不懂可以看第一篇，如有其它疑问请留言。

地址：https://www.jianshu.com/p/ce972355c71d

如果有发现错误欢迎指正我及时修改，如果有好的建议欢迎留言。如果觉得对你有帮助欢迎给小星星，谢谢。