开发类微信小程序的首页框架

连备胎都不是

已于 2022-03-21 19:04:41 修改

阅读量3k

点赞数

分类专栏： java 文章标签： java

于 2022-03-21 19:02:21 首次发布

本文链接：https://blog.csdn.net/xieshaoshuaifei/article/details/123643123

版权

java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

掌握UI设计中的layout布局（约束布局）与基本控件（button、text、imageview等）；
掌握复杂控件与adapter的使用。（请使用RecycleView进行设计）
功能说明与核心代码

总体功能：在消息页面实现recycleview并对消息进行分组和实现点击效果。

确认数据格式，新建一个JavaBean设置数据格式
public class MegList {
//数据本身
private String meg;
//组号
private int group;

public MegList(String meg, int group) {
this.meg = meg;
this.group = group;
}

public String getMeg() {
return meg;
}

public void setMeg(String meg) {
this.meg = meg;
}

public int getGroup() {
return group;
}

public void setGroup(int group) {
this.group = group;
}
}

在FragmentWx.java中设置数据，将数据每五个分为一组，并通过Adapter的构造方法传递给Adapter
//private List<MegList> data;
private void InitData(){
data = new ArrayList<>();
int group=0;
for (int i =0;i<100;i++){
if(i%5==0){
group++;
}
data.add(new MegList("第"+i+"条消息",group));
}
}

在fragment_wx.xml中添加布局文件recycleview用于数据的展示
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/wxRecy"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
/>

新建一个item.xm设置数据显示格式，将组名和数据写在一起。左侧显示图像右边显示文字
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@color/white"
>

</LinearLayout>

编写一个自己Adapter类MyAdpter并继承
RecyclerView.Adapter<MyAdapter.MyViewHolder>
在其中写一个MyViewHolder类获取布局文件
public class MyViewHolder extends RecyclerView.ViewHolder{
TextView itemText;
TextView groupName;
public MyViewHolder(@NonNull View itemView) {
super(itemView);
itemText=itemView.findViewById(R.id.item_text);
groupName=itemView.findViewById(R.id.group_name);
}
}
实现分组逻辑代码：
在onBindViewHolder方法中，判断数据的组号，如果当前位置数据的组号与前一个位置数据的组号相同则不显示组信息，否则显示组信息。
@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {

//设置数据
holder.itemText.setText(data.get(position).getMeg());
//设置组名
holder.groupName.setText("第"+data.get(position).getGroup()+"组");
if(position==0){
holder.groupName.setVisibility(view.VISIBLE);
}else {
if(data.get(position).getGroup()==data.get(position-1).getGroup()){

holder.groupName.setVisibility(View.GONE);
}
else {
holder.groupName.setVisibility(View.VISIBLE);
}
}
//点击事件逻辑
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
myItemClicklistener.onClick();
}
});

}

点击事件功能实现：在MyAdapter中编写一个点击事件的接口，用于在FragmentWx.java中使用
//点击事件的接口
public interface MyItemClicklistener{
void onClick();
}

在onBindViewHolder函数中设置itemView的点击事件，在重写的onClick方法中调用自己的点击事件方法
//private MyItemClicklistener myItemClicklistener;
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
myItemClicklistener.onClick();
}
}

在FragmentWx.java中实现点击事件的逻辑代码
myAdapter = new MyAdapter(data,view.getContext(), new MyAdapter.MyItemClicklistener() {
@Override
public void onClick() {
Toast.makeText(view.getContext(), "更多内容有待开发", Toast.LENGTH_SHORT).show();
}
});

数据分割线实现

自定义一个MyDecoration类继承RecyclerView.ItemDecoration
class MyDecoration extends RecyclerView.ItemDecoration{
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
outRect.set(0,0,0,getResources().getDimensionPixelOffset(R.dimen.dividerHeight));
}
}

设置分割线样式：使用dimen自动适配屏幕尺寸

<resources>
<dimen name="dividerHeight">1dp</dimen>
</resources>

InitRecyclerview()函数，绑定recycleview控件，实现myAdapter类并向其传递数据和要绑定的view，最后在onCreateView中调用InitRecyclerview()
private void InitRecyclerview(){
recyclerView = view.findViewById(R.id.wxRecy);
myAdapter = new MyAdapter(data,view.getContext(), new MyAdapter.MyItemClicklistener() {
@Override
public void onClick() {
Toast.makeText(view.getContext(), "更多内容有待开发", Toast.LENGTH_SHORT).show();
}
});

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(view.getContext());
linearLayoutManager.setOrientation(RecyclerView.VERTICAL);
recyclerView.setLayoutManager(linearLayoutManager);
recyclerView.addItemDecoration(new MyDecoration());
recyclerView.setAdapter(myAdapter);
}

结果截图：

点击效果：