实验二： 安卓应用UI设计

实验目标和实验内容：

1. 掌握UI设计中的layout布局（约束布局）与基本控件（button、text、imageview等）；
2. 掌握复杂控件与adapter的使用。（请使用RecycleView进行设计）

实验结果：（实验小结与结果截图）

1. 功能说明与核心代码

总体功能：在消息页面实现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"
    >


    <TextView
        android:id="@+id/group_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="50sp"
        android:layout_weight="1"
        android:textColor="@color/white"
        android:background="@color/teal_200"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/wx_0" />

        <TextView
            android:id="@+id/item_text"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_gravity="center"
            android:text="TextView"
            android:textColor="@color/black"
            android:textSize="24sp" />
    </LinearLayout>
</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);
}

结果截图：

 

点击效果：

 

1. 实验小结

  简单的recycleview实现数据的布局只需要设置好数据、设置好数据显示的格式和使用adapter规定数据以那种布局方式（列表，网格等）即可，但是对数据进行分组时还要设置好数据的组号，并写好是否显示分组的逻辑，例如在本次实验中，分组显示要避免每个数据都显示组名：只在每个组中第一个位置的数据才显示组名信息。

杨腾飞/移动开发