效果图：

需求分析：

如上图所示，这是一个展示年级及学期的界面。年级分为三组高中、初中和小学。因学期太多若按一个一个控件的写既繁琐又不够优雅，所以我采用 RecyclerView配合分组来实现效果。注意：我这边是使用一个 RecyclerView和一个 List，然后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 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 beans) {        beanList.clear();        beanList.addAll(beans);        notifyDataSetChanged();    }}

activity

public class GradeActivity extends BaseActivity {    ActivityGradeBinding binding;    private List 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());            }        });    }}

到这里就结束啦。往期精彩回顾：

• Android实现短信验证码自动填充功能

• Android仿小红书实现长图片自动循环滚动效果

• Android实现头像重叠排列功能

• Android仿QQ个性标签功能

• Android仿QQ侧滑删除的功能