安卓开发— —仿微信界面（二）

一、项目内容

对聊天主界面weixinFragment进行完善，使用recyclerView实现滚动列表，并实现点击联系人展开显示详细聊天信息。

开发环境：Android Studio、Android SDK 11.0

二、代码实现

1、项目结构

2、核心代码

1、RecyclerView列表中的行样式文件，item.xml.装载显示联系人头像、姓名、发送的信息以及发送信息时间。同时含有一个初始为隐藏的消息详情展开栏。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/Clicked"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/underline"
    android:clickable="true"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/photo"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:layout_gravity="center" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

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

                <TextView
                    android:id="@+id/cctName"
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:layout_weight="1"
                    android:gravity="left"
                    android:text="姓名"
                    android:textSize="30sp" />

                <TextView
                    android:id="@+id/time"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:layout_weight="1"
                    android:gravity="right"
                    android:text="时间"
                    android:textSize="15sp" />

            </LinearLayout>

            <TextView
                android:id="@+id/cctMsg"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_gravity="center"
                android:gravity="bottom"
                android:text="内容"
                android:textSize="20sp" />

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/detail"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@color/cardview_shadow_start_color"
        android:orientation="vertical"
        android:visibility="gone">

        <TextView
            android:id="@+id/detail_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="展开内容"
            android:textSize="20sp" />
    </LinearLayout>

</LinearLayout>

样式预览：

 2、编写RecyclerView的适配器MyAdapter，继承自RecyclerView.Adapter.其中实现了联系人信息的获取，以及展开栏的点击事件。其中头像是通过Glide加载的网络图片

package com.example.weixin;

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

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

import com.bumptech.glide.Glide;

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

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

    private Context context;
    private List<Map<String,Object>> data;

    public MyAdapter(Context context,List<Map<String,Object>> data){
        this.context = context;
        this.data = data;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View view = LayoutInflater.from(context).inflate(R.layout.item,parent,false);
        MyViewHolder holder = new MyViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        Glide.with(context)
                .load(data.get(position).get("key1").toString())
                .into(holder.imageView1);
        holder.textView5.setText(data.get(position).get("key2").toString());
        holder.textView6.setText(data.get(position).get("key3").toString());
        holder.textView7.setText(data.get(position).get("key4").toString());
        holder.detail_text.setText(data.get(position).get("key4").toString());
        holder.Clicked.setOnClickListener(onClickListener);
    }

    View.OnClickListener onClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            LinearLayout detail = view.findViewById(R.id.detail);
            TextView cctMsg = view.findViewById(R.id.cctMsg);
            if(detail.getVisibility()==View.VISIBLE)
            {
                detail.setVisibility(View.GONE);
            }
            else
            {
                detail.setVisibility(View.VISIBLE);
            }

            if(cctMsg.getVisibility()==View.VISIBLE)
            {
                cctMsg.setVisibility(View.INVISIBLE);
            }
            else
            {
                cctMsg.setVisibility(View.VISIBLE);
            }
        }
    };


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

    public class MyViewHolder extends RecyclerView.ViewHolder{

        ImageView imageView1;
        TextView textView5;
        TextView textView6;
        TextView textView7;
        LinearLayout Clicked;
        TextView detail_text;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView1 = itemView.findViewById(R.id.photo);
            textView5 = itemView.findViewById(R.id.cctName);
            textView6 = itemView.findViewById(R.id.time);
            textView7 = itemView.findViewById(R.id.cctMsg);
            Clicked = itemView.findViewById(R.id.Clicked);
            detail_text = itemView.findViewById(R.id.detail_text);
        }
    }


}

3.修改初始weixinFragment，写入RecyclerView初始化方法initRecyclerView()

private void initRecyclerView () {
        recyclerView = view.findViewById(R.id.recyclerView);
        recyclerView.getItemAnimator().setChangeDuration(500);
        recyclerView.getItemAnimator().setMoveDuration(500);
        myAdapter = new MyAdapter(getActivity(), data);
        LinearLayoutManager manager = new LinearLayoutManager(getActivity());
        manager.setOrientation(RecyclerView.VERTICAL);
        recyclerView.setAdapter(myAdapter);
        recyclerView.setLayoutManager(manager);
    }

三、运行效果

四、总结

        本次实验主要是RecyclerView使用方法以及特殊效果的实现，实现过程遇到的问题已通过错误查找解决。

项目源码Gitee地址：Kyrie/weixin