安卓应用UI设计

实验目标和实验内容：

1、请在基础门户页面(作业1)的某个tab页面中添加recycleview，例如:新闻列表页面；

2、请在上一列表页面的基础上进行点击跳转设计。比如，某一tab页是新闻列表，则点击某一行能跳转到新闻详情页面。

功能说明：

1）点击微信通讯录出现五个小动物的图片和名称

2）点击动物名称会出现“你点击了动物名称：”

实验步骤与核心代码：

1、在fragment_Fragment2.xml中创建recyclerview

2、Layout中新建item.xml

3、编写Fragment2.java

package com.example.myapplication;

import android.content.Context;
import android.media.Image;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class Fragment2 extends Fragment {

    RecyclerView recyclerView;
    Myadapter myadapter;
    ImageView imageView;
    List<String> data;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View view;
        // Inflate the layout for this fragment
        view=inflater.inflate(R.layout.fragment_fragment2, container, false);
        recyclerView=view.findViewById(R.id.RecylerView);
        imageView=view.findViewById(R.id.imageView);

        //ArrayList<String> data = new ArrayList<String>();
        //for (int i=0;i<10;i++){
            //data.add("这是第"+i+"个测试");
       // }
        data=new ArrayList<>();
        String[] name={"哈士奇","金毛","拉布拉多","泰迪","萨摩耶","柴犬"};
        int[] jpg={R.drawable.h1,R.drawable.j2,R.drawable.l6,R.drawable.t3,R.drawable.s4,R.drawable.c5};
        List<Map<String,Object>> list=new ArrayList<Map<String,Object>>();

        for(int i=0;i<name.length;i++){
            Map<String,Object> listitem=new HashMap<String,Object>();
            listitem.put("图片",jpg[i]);
            listitem.put("名字",name[i]);

            list.add(listitem);
        }

        //获取变量的环境值
        Context context=getContext();  //下述需要两个context，统一context

        myadapter=new Myadapter(list,context);
        LinearLayoutManager manager=new LinearLayoutManager(context);
        manager.setOrientation(recyclerView.VERTICAL);
        recyclerView.setLayoutManager(manager);   //控件水平/垂直铺开
        recyclerView.setAdapter(myadapter);

        return view;
    }
}

4、编写MyAdapter.java

package com.example.myapplication;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

public class Myadapter extends RecyclerView.Adapter <Myadapter.MyViewHolder> {

    private List<Map<String,Object>> mydata;
    private Context mycontext;


    public Myadapter(List<Map<String,Object>> data, Context context) {
        /*
        构造方法，传入数据
         */
        mydata=data;
        mycontext=context;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        /*
        构建ViewHolder，返回每一项的布局
        inflater:将xml文件压缩为view
         */
        View view= LayoutInflater.from(mycontext).inflate(R.layout.item,parent,false);
        final MyViewHolder holder=new MyViewHolder(view);
        holder.textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Toast.makeText(v.getContext(), "你点击了动物名称："+mydata.get(position).get("名字") ,Toast.LENGTH_SHORT).show();

            }
        });
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        /*
        将数据和控件绑定
         */

        holder.textView.setText(mydata.get(position).get("名字").toString());
        holder.imageView.setImageResource(Integer.parseInt(mydata.get(position).get("图片").toString()));

    }

    @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);
        }
    }
}

 

实验结果

 

 点击动物名称出现一排小字