AS作业二

目录

一、设计目标

二、功能说明

三、设计流程及核心代码

（1）核心代码文件

（2）页面设计展示

四、运行效果显示

总结

---

一、设计目标

在作业一的基础上，对其中一个tab页面添加recycleview，实现列表功能，并在该列表页面基础上实现点击跳转设计。

二、功能说明

在基础门户页面的通讯录页面添加recycleview，实现好友列表显示，再在该列表上进行点击跳转设计，使其点击某一行后能跳转到对应的好友详细信息页面。

三、设计流程及核心代码

（1）核心代码文件

1、在原有项目基础上，对fragment_tongxun页面添加recycleview实现好友列表显示功能

fragment_tongxun.java文件主要代码如下：

public class fragment2_tongxun extends Fragment {

    //定义RecyclerView，只与fragment2有关，故在fragment2文件中定义
    RecyclerView recyclerView;

    private Context context;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        //定义一个View，将return拆解开
        //return inflater.inflate(R.layout.fragment2_tongxun, container, false);
        View view;
        view=inflater.inflate(R.layout.fragment2_tongxun,container,false);
        recyclerView=view.findViewById(R.id.recyclerView);

        //data，创建好友列表
        ArrayList<String> data = new ArrayList<String>();
        for (int i=1;i<21;i++){
            data.add("好友"+i+"");
        }
        //只有activity和service两种组件可以直接取this
        Context context = getContext();
        Myadapter myadapter = new Myadapter(data, context);

        //recycleview是怎么铺的
        LinearLayoutManager manager = new LinearLayoutManager(context);
        //垂直结构
        manager.setOrientation(recyclerView.VERTICAL);
        recyclerView.setLayoutManager(manager);
        recyclerView.setAdapter(myadapter);
        return view;
    }

}

2、Adapter将所携带的数据映射到用户界面上，通过adapter相关函数编写将要在列表内显示的数据和列表本身结合起来

MyAdapter.java文件主要代码如下：

//将要在列表内显示的数据和列表本身结合起来
// recycleview的初始化及item的监听设置
public class Myadapter extends RecyclerView.Adapter <Myadapter.MyViewHolder> {

    private ArrayList<String> mydata;
    private Context mycontext;
    private Button button;

    public Myadapter(ArrayList<String> data, Context context){
        mydata = data;
        mycontext = context;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        //inflater可以把一个xml文件压缩为一个view
        //inflater方法怎么调？
        //需要将某个方法转为视图则用LayoutInflater 将列表显示内容结合起来
        View view = LayoutInflater.from(mycontext).inflate(R.layout.item,parent,false);
        //参数里需要一个view，相当于holder指向view的一个指针
        MyViewHolder holder=new MyViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        //可以找到文本在哪里,通过holder找到textview，再将其文本位置赋值
        holder.textView.setText(mydata.get(position));
        holder.textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //使用Intent实现跳转的信息传递，mycontext实现动态跳转启动对应的activity
                Intent intent = new Intent(mycontext,resultActivity.class);
                mycontext.startActivity(intent);
            }
        });
        //选一个图片
        holder.imageView.setImageResource(R.drawable.tongxun);
        //RecycView的点击事件，在Adapter里面直接对控件做点击事件

    }


    @Override
    public int getItemCount() {
        return mydata.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder{
        private TextView textView;
        private ImageView imageView;
        public  MyViewHolder(@NonNull View itemView){
            super(itemView);
            textView=itemView.findViewById(R.id.textView);
            imageView=itemView.findViewById(R.id.imageView);
        }
    }
}

3、点击好友列表中的好友名称，跳转至好友详情页面，实现页面跳转功能

resultActivity.java文件主要代码如下：

public class resultActivity<ActivityResultLauncher> extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.result);
    }
}

（2）页面设计展示

1、将fragment_tongxun转换为列表界面，其设计如下：

2、fragment_tongxun界面中的每一列的item界面设计如下：

3、点击好友后进行页面跳转，页面跳转至result界面，其设计如下：

 

 

四、运行效果显示

1、项目运行默认主页面如下：

2、点击通讯录后，展示好友列表显示如下：

3、点击好友后，页面跳转至好友详情页面，其显示如下：

总结

        在本次的实验中，对在课堂上所学习的recycleview和页面跳转这部分的知识点进行再一次的回顾，对课堂上的代码进行相关的完善与补充。通过这次的实验撰写，我对于本次实验的逻辑思路也更加清晰，将本次所涉及的内容间的关系等进一步进行梳理，加深相关知识的理解与掌握。本次实验只是完成了较简单的内容呈现，理解原理知识，对于更加复杂丰富的页面在后续学习再逐步探索。

源码：homework: 移动开发——类微信界面ui设计