效果图:
需求分析:
如上图所示,这是一个展示年级及学期的界面。年级分为三组高中、初中和小学。因学期太多若按一个一个控件的写既繁琐又不够优雅,所以我采用 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侧滑删除的功能