需求

需求分析：

如上圖所示，這是一個展示年級及學期的界面。年級分為三組高中、初中和小學。因學期太多若按一個一個控件的寫既繁瑣又不夠優雅，所以我采用 RecyclerView配合分組來實現效果。
注意：我這邊是使用一個 RecyclerView和一個 List<Bean>，然后Adapter使用getItemViewType將填充視圖分為標題和內容兩個 ItemView，通過Bean中的 type 來決定加載哪個視圖。
因為是三列的列表，所以在插入 item 時，標題 item 會和內容 item 在同一行，顧在插入標題 item 的時候讓它跨三列即可獨占一行，具體實現如下。

實現過程：

xml相關文件

<layout
    xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="gradeBean"
            type="cn.toctec.wrongbook.grade.bean.GradeBean" />
    </data>
    <TextView
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="@{gradeBean.gradeName}"
        android:textSize="12dp"
        android:textColor="@color/color888888">

    </TextView>
</layout>

標題 item.xml

<layout
    xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="gradeBean"
            type="cn.toctec.wrongbook.grade.bean.GradeBean" />
    </data>
    <com.nanbox.ripplelayout.RippleLayout
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/bg_grade_gray_fillet">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:text="@{gradeBean.gradeName}"
                android:textColor="@color/color333333"
                android:textSize="12dp"/>

        </RelativeLayout>

    </com.nanbox.ripplelayout.RippleLayout>

</layout>

內容 item.xml

<layout
    xmlns:android="http://schemas.android.com/apk/res/android">

    <RelativeLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white">

        <ImageView
            android:onClick="onBack"
            android:layout_width="18dp"
            android:layout_height="18dp"
            android:layout_marginTop="45dp"
            android:layout_marginLeft="15dp"
            android:background="@mipmap/ic_back"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:includeFontPadding="false"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="43dp"
            android:text="@string/grade"
            android:textColor="@color/color333333"
            android:textSize="18dp"/>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/gradeRv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="94dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"/>

    </RelativeLayout>
</layout>

activity.xml

bean

public class GradeBean {

    private int gradeId;
    private String gradeName;
    private boolean gradeType;

    public GradeBean() {
    }

    public GradeBean(int gradeId, String gradeName, boolean gradeType) {
        this.gradeId = gradeId;
        this.gradeName = gradeName;
        this.gradeType = gradeType;
    }

    public int getGradeId() {
        return gradeId;
    }

    public void setGradeId(int gradeId) {
        this.gradeId = gradeId;
    }

    public String getGradeName() {
        return gradeName;
    }

    public void setGradeName(String gradeName) {
        this.gradeName = gradeName;
    }

    public boolean isGradeType() {
        return gradeType;
    }

    public void setGradeType(boolean gradeType) {
        this.gradeType = gradeType;
    }

    @Override
    public String toString() {
        return "GradeBean{" +
                "gradeId=" + gradeId +
                ", gradeName='" + gradeName + '\'' +
                ", gradeType=" + gradeType +
                '}';
    }
}

adapter

public class GradeAdapter extends RecyclerView.Adapter<BindingViewHolder> {

    private LayoutInflater layoutInflater;
    private List<GradeBean> beanList;
    private OnItemClickListener listener;


    public GradeAdapter(Context context) {
        layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        beanList = new ArrayList<>();
    }

    public interface OnItemClickListener {
        void onItemClick(GradeBean gradeBean);
    }

    public void setOnItemClickListener(OnItemClickListener listener) {
        this.listener = listener;
    }
    /**
     * item 分類
     */
    public enum ItemType {
        LEVEL,  //年級級別
        GRADE   //年級
    }

    /**
     * 設置每個 item 類型
     * @param position
     * @return
     */
    @Override
    public int getItemViewType(int position) {
        final GradeBean bean = beanList.get(position);
        if (bean.isGradeType()) {
            return ItemType.LEVEL.ordinal();    //級別
        }else {
            return ItemType.GRADE.ordinal();    //年級
        }
    }

    @NonNull
    @Override
    public BindingViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        ViewDataBinding binding;
        if (viewType == ItemType.LEVEL.ordinal()) {
            binding = DataBindingUtil.inflate(layoutInflater, R.layout.item_level, parent, false);
        }else {
            binding = DataBindingUtil.inflate(layoutInflater, R.layout.item_grade_number, parent, false);
        }
        return new BindingViewHolder(binding);
    }

    @Override
    public void onBindViewHolder(@NonNull BindingViewHolder holder, int position) {
        final GradeBean bean = beanList.get(position);
        holder.getBinding().setVariable(BR.gradeBean, bean);
        holder.getBinding().executePendingBindings();

        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (listener != null) {
                    listener.onItemClick(bean);
                }
            }
        });
    }

    @Override
    public int getItemCount() {
        return beanList == null ? 0 : beanList.size();
    }

    public void addAll(List<GradeBean> beans) {
        beanList.clear();
        beanList.addAll(beans);
        notifyDataSetChanged();
    }
}

activity

public class GradeActivity extends BaseActivity {

    ActivityGradeBinding binding;
    private List<GradeBean> gradeBeanList;
    private GradeAdapter adapter;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_grade);

        gradeBeanList = new ArrayList<>();
        gradeBeanList.add(new GradeBean(1, "小學", true));
        gradeBeanList.add(new GradeBean(2, "一年級 上", false));
        gradeBeanList.add(new GradeBean(3, "一年級 下", false));

        gradeBeanList.add(new GradeBean(4, "二年級 上", false));
        gradeBeanList.add(new GradeBean(5, "二年級 下", false));

        gradeBeanList.add(new GradeBean(6, "三年級 上", false));
        gradeBeanList.add(new GradeBean(7, "三年級 下", false));

        gradeBeanList.add(new GradeBean(8, "四年級 上", false));
        gradeBeanList.add(new GradeBean(9, "四年級 下", false));

        gradeBeanList.add(new GradeBean(10, "五年級 上", false));
        gradeBeanList.add(new GradeBean(11, "五年級 下", false));

        gradeBeanList.add(new GradeBean(12, "六年級 上", false));
        gradeBeanList.add(new GradeBean(13, "六年級 下", false));

        gradeBeanList.add(new GradeBean(14, "初中", true));
        gradeBeanList.add(new GradeBean(15, "七年級 上", false));
        gradeBeanList.add(new GradeBean(16, "七年級 下", false));

        gradeBeanList.add(new GradeBean(17, "八年級 上", false));
        gradeBeanList.add(new GradeBean(18, "八年級 下", false));

        gradeBeanList.add(new GradeBean(19, "九年級 上", false));
        gradeBeanList.add(new GradeBean(20, "九年級 下", false));

        gradeBeanList.add(new GradeBean(21, "高中", true));
        gradeBeanList.add(new GradeBean(22, "高一 上", false));
        gradeBeanList.add(new GradeBean(23, "高一 下", false));

        gradeBeanList.add(new GradeBean(24, "高二 上", false));
        gradeBeanList.add(new GradeBean(25, "高二 下", false));

        gradeBeanList.add(new GradeBean(26, "高三 上", false));
        gradeBeanList.add(new GradeBean(27, "高三 下", false));

        GridLayoutManager gridLayoutManager = new GridLayoutManager(GradeActivity.this, 3, GridLayoutManager.VERTICAL, false);
        gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                if (gradeBeanList.get(position).isGradeType()) {
                    return 3;   //如果是標題 item 則跨三列
                } else {
                    return 1;   //如果是內容 item 則不夸咧
                }

            }
        });
        gridLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        binding.gradeRv.setLayoutManager(gridLayoutManager);
        adapter = new GradeAdapter(GradeActivity.this);
        adapter.addAll(gradeBeanList);
        binding.gradeRv.setAdapter(adapter);

        adapter.setOnItemClickListener(new GradeAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(GradeBean gradeBean) {
                Log.e("onItemClick", "onItemClick: " + gradeBean.getGradeName());
            }
        });

    }
}