Android使用RecyclerView实现设置界面

一、目标

二、下载地址

神马笔记最新版本下载：【神马笔记 版本1.5.0——笔名功能.apk】

三、功能设计

随着软件功能的增加，不可避免地会加入越来越多的设置项。如何管理不断增加的设置项？

• 便于CRUD
• 界面风格保持统一

首先，必修便于创建，修改，删除，并且只需要改动配置项，而不用对界面进行太大的修改。

其次，子设置界面必须与主设置界面保持风格一致。

四、准备工作

实现设置界面的方式有很多，可以选择任意的容器和控件进行组合，从而实现设置界面。

但是设置界面有其特殊性。

设置界面通常是有多个设置项组成，每一个设置项又由键值对构成。多个设置项可以组合成一个设置组，设置组之间由分割线区分开。其组成方式大概如下结构。

• 设置界面
  • 设置组
    • 设置项
    • 设置项
    • 设置项
    • ……
  • 设置组
    • 设置项
  • 设置组
  • ……

从以上结构来看，设置界面便是一组设置项的列表。列表界面自然是使用RecyclerView来实现。

五、组合起来

1. BaseSettingItem

定义设置项UI的组成。

public class BaseSettingItem<T> {
   

    public static final int DIVIDER_NONE = 0;
    public static final int DIVIDER_NAME = 1;

    String id; // 唯一ID

    @DrawableRes int iconResId; // 图标资源
    ColorStateList iconTintList; // 图标Tint

    CharSequence name; // 名称
    CharSequence text; // 文本

    boolean chevron; // 是否显示chevron

    Consumer<T> consumer; // 列表项处理点击事件

    T userObject; // 用户数据

    boolean dividerVisible; // 是否显示分割线
    int dividerType; // 分割线的显示方式
}

2. 布局文件

定义基础设置项的布局。基础布局包括图标、名称、箭头3个部分组成。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="@dimen/settingItemHeight"
        android:background="@color/colorSettingItemBackground"
        android:paddingLeft="?listPreferredItemPaddingLeft"
        android:paddingRight="?listPreferredItemPaddingRight"
        android:gravity="center_vertical"
        android:foreground="?selectableItemBackground">

    <ImageView
            android:id="@+id/iv_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="?listPreferredItemPaddingRight"/>

    <TextView
            android:id="@+id/tv_name"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Menu"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"/>

    <ImageView
            android:id="@+id/iv_chevron"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_chevron_right_white_24dp"
            android:tint="@color/colorChevron"/>

</LinearLayout>

3. BaseSettingViewHolder

RecyclerView的ViewHolder实现。

public class BaseSettingViewHolder<T extends BaseSettingItem> extends BridgeViewHolder<T> implements SectionDividerDecoration.Adapter {
   

    public static final int LAYOUT_RES_ID = R.layout.layout_setting_list_item;

    ImageView iconView;
    TextView nameView;
    TextView textView;
    ImageView chevronView;

    @Keep
    public BaseSettingViewHolder(View itemView) {
   
        super(itemView);
    }

    @Override
    public int getLayoutResourceId() {
   
        return LAYOUT_RES_ID;
    }

    @Override
    public void onViewCreated(@NonNull View view) {
   
        view.setOnClickListener(this::onItemClick);

        this.iconView = view.findViewById(R.id.iv_icon);
        this.nameView = view.findViewById(R.id.tv_name);
        this.textView = view.findViewById(R.id.tv_text);
        this.chevronView = view.findViewById(R.id.iv_chevron);

        if (iconView != null) {
   
            if (iconView.getOutlineProvider() != null) {
   
                iconView.setClipToOutline(true);
            }
        }
    }

    @Override
    public void onBind(T item, int position) {
   

        if (iconView != null) {
   
            if (item.getIcon() > 0) {
   
                iconView.setImageResource(item.getIcon());
                iconView.setVisibility(View.VISIBLE