Android Studio制作微信界面（二）

秃兔TuT

于 2024-05-20 20:52:56 发布

阅读量905

点赞数 7

分类专栏： android开发文章标签： android studio 微信 android

本文链接：https://blog.csdn.net/m0_62409036/article/details/139074519

版权

android开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现目标

实现微信聊天界面，应用Adapter适配器接口连接前端和后端数据，配合ListView列表视图组件具体实现。

效果图如下：

实现过程

AdapterView介绍

AdapterView实现过程类似于MVC架构

AdapterView实现过程：

控制层： Adapter适配器承担了控制层的角色。

视图层： AdapterView用于将前端显示和后端数据分离。

模型层：数组、XML文件等形式的数据。

ListView列表视图介绍

1.在布局中添加ListView控件。

2.准备ListView所要显示的数据，使用数组或List集合存储数据。

3.创建适配器，作为列表项数据源，并创建list_item 布局。

4.将适配器对象添加到ListView，并进行展示。

具体实现：

1.将Fragchat进行如下修改：

package com.example.myapplication1;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

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

public class FragChat extends Fragment {
    ListView chatlist;
    List<ChatData> chatData;

    @NonNull
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @NonNull ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.activity_fragchat, container, false);
        init();  // 初始化数据
        chatlist = view.findViewById(R.id.chatlist);
        registerForContextMenu(chatlist);
        chatlist.setAdapter(new ChatAdapter(getContext(), chatData));
        chatlist.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                // 根据 position 处理点击事件
                Toast.makeText(getContext(), "点击了" + position + "项", Toast.LENGTH_SHORT).show();
            }
        });
        return view;
    }

    private void init() {
        chatData = new ArrayList<>();
        chatData.add(new ChatData(R.drawable.img01, "刘一", "下课啦", "9:30"));
        chatData.add(new ChatData(R.drawable.img02, "陈二", "吃饭了", "11:30"));
        chatData.add(new ChatData(R.drawable.img03, "张三", "逛街去不？", "12:30"));
        chatData.add(new ChatData(R.drawable.img04, "李四", "打球去！", "2:30"));
        chatData.add(new ChatData(R.drawable.img05, "王五", "自习去", "4:30"));
        chatData.add(new ChatData(R.drawable.img06, "赵六", "上课啦", "5:30"));
    }
}

2.创建ChatAdapter，具体代码如下：

package com.example.myapplication1;

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

import java.util.List;

public class FindAdapter extends BaseAdapter {
    private Context context;
    private List<FindData> findData;

    public FindAdapter(Context context, List<FindData> findData) {
        this.context = context;
        this.findData = findData;
    }

    @Override
    public int getCount() {
        return findData.size();
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }
    static class ViewHolder{
        private ImageView iv;
        private TextView name,divider;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder=new ViewHolder();
        if (convertView==null){
            convertView= LayoutInflater.from(context).inflate(R.layout.find_list,null);
            viewHolder.iv= convertView.findViewById(R.id.iv_item);
            viewHolder.name=convertView.findViewById(R.id.tv_item);
            viewHolder.divider=convertView.findViewById(R.id.divider);
            convertView.setTag(viewHolder);
        }else {
            viewHolder=(ViewHolder)convertView.getTag();
        }
        if (position==1|position==3|position==6){
            viewHolder.divider.setVisibility(View.GONE);
        }
        if (position==0){
            viewHolder.divider.setVisibility(View.VISIBLE);
        }
        viewHolder.iv.setImageResource(findData.get(position).getId());
        viewHolder.name.setText(findData.get(position).getName());

        return convertView;
    }
}

3.创建ChatData,具体代码如下：

package com.example.myapplication1;

public class ChatData {
    private int id;
    private String name,content,time;

    public ChatData(int id, String name, String content, String time) {
        this.id = id;
        this.name = name;
        this.content = content;
        this.time = time;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }
}

UI设计

1.修改activity_wechat.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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/blue">
    </androidx.appcompat.widget.Toolbar>

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="446dp"
        android:layout_weight="1"
        android:orientation="vertical"/>
    <!-- 底部导航栏 -->

    <RadioGroup
        android:id="@+id/rg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <!-- 微信选项 -->
        <RadioButton
            android:id="@+id/rb_chat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:checked="true"
            android:button="@null"
            android:drawableTop="@drawable/chat"
            android:gravity="center"
            android:padding="8dp"
            android:text="微信"
            android:textSize="16sp"
            android:textColor="@drawable/text_color"/>

        <!-- 通讯录选项 -->
        <RadioButton
            android:id="@+id/rb_addresslist"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:checked="false"
            android:drawableTop="@drawable/addresslist"
            android:gravity="center"
            android:padding="8dp"
            android:text="通讯录"
            android:textColor="@drawable/text_color"
            android:textSize="16sp" />

        <!-- 发现选项 -->
        <RadioButton
            android:id="@+id/rb_find"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:checked="false"
            android:text="发现"
            android:gravity="center"
            android:textSize="16sp"
            android:textColor="@drawable/text_color"
            android:drawableTop="@drawable/find"
            android:padding="8dp"
            />

        <!-- 我选项 -->
        <RadioButton
            android:id="@+id/rb_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:checked="false"
            android:text="我"
            android:gravity="center"
            android:textSize="16sp"
            android:drawableTop="@drawable/home"
            android:padding="8dp"
            android:textColor="@drawable/text_color"></RadioButton>
    </RadioGroup>
</LinearLayout>

2.修改activity_fragchat.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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FragChat">
    <ListView
        android:id="@+id/chatlist"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ListView>
</LinearLayout>

3.新建chat_list.xml，具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="@dimen/padding">

    <ImageView
        android:id="@+id/iv_item"
        android:layout_width="@dimen/imgsize"
        android:layout_height="@dimen/imgsize"
        android:background="@color/blue"
        android:scaleType="centerCrop">
    </ImageView>
    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/name1"
        android:textColor="@color/purple_700"
        android:layout_toEndOf="@id/iv_item"
        android:layout_marginStart="@dimen/padding"
        android:layout_alignTop="@id/iv_item">
    </TextView>
    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/content"
        android:textColor="@android:color/darker_gray"
        android:layout_toEndOf="@id/iv_item"
        android:layout_marginStart="@dimen/padding"
        android:layout_below="@id/tv_name"
        android:layout_alignBottom="@id/iv_item"
        android:gravity="center">
    </TextView>
    <TextView
        android:id="@+id/tv_time"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/imgsize"
        android:text="@string/time1"
        android:layout_alignParentEnd="true"
        android:gravity="center">
    </TextView>
</RelativeLayout>