Android开发：利用Fragment,ListView和RecyclerView综合实现微信界面

效果展示

功能实现分析：

要实现功能主要包括两个部分
1.底部4个Tab，当点击不同Tab时，Tab图片变换形式，内容显示不同Fragment
2.各个界面的Fragment，用来显示内容，具体每个Fragment中可以使用ListView和RecyclerView来填充。

界面显示内容布局可根据需求调整。

首先搭建主体框架

在activity_main中布局微信的主题部分，分别用两个线性布局将界面分为两个部分，上部分用来放内容，下部分用来放四个Tab

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <LinearLayout
            android:id="@+id/content_layout"
            android:layout_width="match_parent"
            android:layout_height="703dp"
            android:orientation="vertical">
    </LinearLayout>

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true">
        <ImageView
                android:id="@+id/wechat"
                android:layout_width="0dp"
                android:layout_height="55dp"
                android:layout_weight="1"
                android:src="@drawable/wechat"/>
        <ImageView
                android:id="@+id/people"
                android:layout_width="0dp"
                android:layout_height="55dp"
                android:layout_weight="1"
                android:src="@drawable/people"/>
        <ImageView
                android:id="@+id/find"
                android:layout_width="0dp"
                android:layout_height="55dp"
                android:layout_weight="1"
                android:src="@drawable/find"/>
        <ImageView
                android:id="@+id/me"
                android:layout_width="0dp"
                android:layout_height="55dp"
                android:layout_weight="1"
                android:src="@drawable/me"/>
    </LinearLayout>

</RelativeLayout>

创建四个用来填充内容的布局，在布局文件中布局好样式

wechat.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <androidx.constraintlayout.widgetConstraintLayout  
    
            android:layout_height="60dp"
            android:layout_width="match_parent"
            android:background="#ededed">

        <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="微信"
                android:textSize="20sp"
                android:textColor="#000000"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.05"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        <ImageView
                android:id="@+id/imageView8"
                android:layout_width="26dp"
                android:layout_height="30dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.8"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/search" />

        <ImageView
                android:id="@+id/imageView7"
                android:layout_width="23dp"
                android:layout_height="28dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/imageView8"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/add" />

    </androidx.constraintlayout.widget.ConstraintLayout>
    <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
</LinearLayout>

people.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_height="60dp"
            android:layout_width="match_parent"
            android:background="#ededed">

        <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="通讯录"
                android:textColor="#000000"
                android:textSize="20sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.05"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        <ImageView
                android:id="@+id/imageView5"
                android:layout_width="26dp"
                android:layout_height="26dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.8"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/search" />

        <ImageView
                android:id="@+id/imageView6"
                android:layout_width="23dp"
                android:layout_height="23dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/imageView5"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/add" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/list_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

</LinearLayout>

find.xml

<sss>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:orientation="vertical"
        android:layout_width="match_parent" 
        android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_height="60dp"
            android:layout_width="match_parent"
            android:background="#ededed">

        <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="发现"
                android:textColor="#000000"
                android:textSize="20sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.05"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        <ImageView
                android:id="@+id/imageView5"
                android:layout_width="26dp"
                android:layout_height="26dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.8"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/search" />

        <ImageView
                android:id="@+id/imageView6"
                android:layout_width="23dp"
                android:layout_height="23dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/imageView5"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/add" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/find_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
</LinearLayout>
</sss>

me.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="157dp"
            android:layout_marginBottom="10dp"
            android:background="#ffffff"
            android:orientation="horizontal">

        <ImageView
                android:id="@+id/imageView"
                android:layout_width="63dp"
                android:layout_height="58dp"
                android:layout_marginStart="24dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.71"
                app:srcCompat="@drawable/head_sculpture" />

        <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="好的"
                android:textColor="#000000"
                android:textSize="20sp"
                app:layout_constraintBottom_toBottomOf="@+id/imageView"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.063"
                app:layout_constraintStart_toEndOf="@+id/imageView"
                app:layout_constraintTop_toTopOf="@+id/imageView"
                app:layout_constraintVertical_bias="0.0" />

        <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="微信号：A2605827434"
                app:layout_constraintBottom_toBottomOf="@+id/imageView"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.1"
                app:layout_constraintStart_toEndOf="@+id/imageView"
                app:layout_constraintTop_toBottomOf="@+id/textView"
                app:layout_constraintVertical_bias="1.0" />

        <ImageView
                android:id="@+id/imageView2"
                android:layout_width="20dp"
                android:layout_height="20dp"
                app:layout_constraintBottom_toBottomOf="@+id/textView2"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.9"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="1.0"
                app:srcCompat="@drawable/erweima" />

        <ImageView
                android:id="@+id/imageView3"
                android:layout_width="15dp"
                android:layout_height="15dp"
                app:layout_constraintBottom_toBottomOf="@+id/imageView"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.959"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="1.0"
                app:srcCompat="@drawable/more" />

        <ImageView
                android:id="@+id/imageView4"
                android:layout_width="30dp"
                android:layout_height="30dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.958"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.221"
                app:srcCompat="@drawable/camera" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <ListView
            android:id="@+id/me_list"
            android:layout_width="match_parent"
            android:layout_height="551dp" />

</LinearLayout>

分别为四个内容界面创建Fragment,实现每个Fragment的内容。

实现聊天界面

首先创建wechat_list.xml的布局文件，样式自行调整

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <ImageView
            android:id="@+id/image"
            android:layout_width="54dp"
            android:layout_height="52dp"
            android:layout_margin="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0"
            app:srcCompat="@drawable/me" />

    <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="TextView"
            android:textColor="#000000"
            android:textSize="17sp"
            app:layout_constraintBottom_toBottomOf="@+id/image"
            app:layout_constraintStart_toEndOf="@+id/image"
            app:layout_constraintTop_toTopOf="@+id/image"
            app:layout_constraintVertical_bias="0.07999998" />

    <TextView
            android:id="@+id/content"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginTop="3dp"
            android:ellipsize="end"
            android:singleLine="true"
            android:text="TextView"
            android:textSize="15sp"
            app:layout_constraintBottom_toBottomOf="@+id/image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/image"
            app:layout_constraintTop_toBottomOf="@+id/name"
            app:layout_constraintVertical_bias="0.0" />

    <TextView
            android:id="@+id/time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="270dp"
            android:layout_marginLeft="270dp"
            android:text="TextView"
            app:layout_constraintBottom_toBottomOf="@+id/image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/image"
            app:layout_constraintTop_toTopOf="@+id/image"
            app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

创建WeChat的实体类

package com.huatec.edu.hw6avtivity;

public class WeChat {
    private int id;
    private String name;
    private String context;
    private String time;

    public WeChat(int id, String name, String context, String time) {
        this.id = id;
        this.name = name;
        this.context = context;
        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 getContext() {
        return context;
    }

    public void setContext(String context) {
        this.context = context;
    }

    public String getTime() {
        return time;
    }

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

创建WeChatAdapter,通过适配器，将要显示的数据，加载到页面中

package com.huatec.edu.hw6avtivity;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

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

import java.util.List;

public class WeChatAdapter extends RecyclerView.Adapter<WeChatAdapter.ViewHolder> {
    List<WeChat> wechats;

    public WeChatAdapter(List<WeChat> wechats) {
        this.wechats = wechats;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.wechat_list,null);
        ViewHolder viewHolder = new ViewHolder(itemView);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        WeChat message = wechats.get(position);
        holder.image.setImageResource(message.getId());
        holder.name.setText(message.getName());
        holder.content.setText(message.getContext());
        holder.time.setText(message.getTime());
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView image;
        TextView name;
        TextView content;
        TextView time;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            image = itemView.findViewById(R.id.image);
            name = itemView.findViewById(R.id.name);
            content = itemView.findViewById(R.id.content);
            time = itemView.findViewById(R.id.time);
        }
    }
}

在WeChatFragment中，显示创建好的视图

package com.huatec.edu.hw6avtivity;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

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

public class WeChatFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.wechat,null);
        List<WeChat> wechats = initData();
        WeChatAdapter weChatAdapter = new WeChatAdapter(wechats);
        LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
        RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
        recyclerView.addItemDecoration(new DividerItemDecoration(getActivity(),DividerItemDecoration.VERTICAL));
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(weChatAdapter);
        return view;
    }

    private List<WeChat> initData() {
        List<WeChat> datas = new ArrayList<>();
        datas.add(new WeChat(R.drawable.headsculpture1,"Lisa","今天天气真好，去放风筝吧","19:21"));
        datas.add(new WeChat(R.drawable.headsculpture2,"Jack","看鬼灭之刃了吗","12:07"));
        datas.add(new WeChat(R.drawable.headsculpture3,"Tom","okk","昨天"));
        datas.add(new WeChat(R.drawable.headsculpture4,"KiKi","TheShy太顶了","周四"));
        datas.add(new WeChat(R.drawable.headsculpture1,"Lisa","今天天气真好，去放风筝吧","19:21"));
        datas.add(new WeChat(R.drawable.headsculpture2,"Jack","看鬼灭之刃了吗","12:07"));
        datas.add(new WeChat(R.drawable.headsculpture3,"Tom","okk","昨天"));
        datas.add(new WeChat(R.drawable.headsculpture4,"KiKi","TheShy太顶了","周四"));
        datas.add(new WeChat(R.drawable.headsculpture1,"Lisa","今天天气真好，去放风筝吧","19:21"));
        datas.add(new WeChat(R.drawable.headsculpture2,"Jack","看鬼灭之刃了吗","12:07"));
        datas.add(new WeChat(R.drawable.headsculpture3,"Tom","okk","昨天"));
        datas.add(new WeChat(R.drawable.headsculpture4,"KiKi","TheShy太顶了","周四"));
        datas.add(new WeChat(R.drawable.headsculpture1,"Lisa","今天天气真好，去放风筝吧","19:21"));
        datas.add(new WeChat(R.drawable.headsculpture2,"Jack","看鬼灭之刃了吗","12:07"));
        datas.add(new WeChat(R.drawable.headsculpture3,"Tom","okk","昨天"));
        datas.add(new WeChat(R.drawable.headsculpture4,"KiKi","TheShy太顶了","周四"));
        return datas;
    }
}

实现通信录界面

首先创建people_list.xml的布局文件，样式自行调整

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:background="#ffffff"
        android:layout_width="match_parent" android:layout_height="wrap_content">


    <ImageView
            android:id="@+id/list_image"
            android:layout_width="60dp"
            android:layout_height="60dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0"
            app:srcCompat="@drawable/xindepengyou" />

    <TextView
            android:id="@+id/list_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textColor="#000000"
            android:textSize="17sp"
            app:layout_constraintBottom_toBottomOf="@+id/list_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.07"
            app:layout_constraintStart_toEndOf="@+id/list_image"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.515" />
</androidx.constraintlayout.widget.ConstraintLayout>

创建People的实体类

package com.huatec.edu.hw6avtivity;

public class People {
    private int imageId;
    private String text;

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public People(int imageId, String text) {
        this.imageId = imageId;
        this.text = text;
    }
}

创建PeopleAdapter,通过适配器，将要显示的数据，加载到页面中

package com.huatec.edu.hw6avtivity;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ListAdapter;
import android.widget.TextView;

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

import java.util.List;

public class PeopleAdapter extends RecyclerView.Adapter<PeopleAdapter.ViewHolder> {
    List<People> peopleLists;

    public PeopleAdapter(List<People> peopleLists) {
        this.peopleLists = peopleLists;
    }

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

        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.people_list,parent,false);
        PeopleAdapter.ViewHolder viewHolder = new PeopleAdapter.ViewHolder(itemView);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        People peopleList = peopleLists.get(position);
        holder.list_image.setImageResource(peopleList.getImageId());
        holder.list_text.setText(peopleList.getText());
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView list_image;
        TextView list_text;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            list_image = itemView.findViewById(R.id.list_image);
            list_text = itemView.findViewById(R.id.list_text);
        }
    }
}

在PeopleFragment中，显示创建好的视图

package com.huatec.edu.hw6avtivity;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

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

public class PeopleFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.people,null);
        List<People> peopleList = initData();
        PeopleAdapter peopleAdapter = new PeopleAdapter(peopleList);
        LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
        RecyclerView recyclerView = view.findViewById(R.id.list_recycler_view);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(peopleAdapter);
        return view;
    }

    private List<People> initData() {
        List<People> datas = new ArrayList<>();
        datas.add(new People(R.drawable.xindepengyou,"新的朋友"));
        datas.add(new People(R.drawable.qunliao,"群聊"));
        datas.add(new People(R.drawable.biaoqian,"标签"));
        datas.add(new People(R.drawable.gongzhonghao,"公众号"));
        return datas;
    }
}

实现发现界面

首先创建find_list.xml的布局文件，样式自行调整

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_marginBottom="10dp"
        android:background="#ffffff"
        android:layout_width="match_parent" android:layout_height="wrap_content">


    <ImageView
            android:id="@+id/find_image"
            android:layout_width="60dp"
            android:layout_height="60dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0"
            app:srcCompat="@drawable/pengyouquan" />

    <TextView
            android:id="@+id/find_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textColor="#000000"
            android:textSize="17sp"
            app:layout_constraintBottom_toBottomOf="@+id/find_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.059"
            app:layout_constraintStart_toEndOf="@+id/find_image"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.515" />

    <ImageView
            android:id="@+id/find_more"
            android:layout_width="20dp"
            android:layout_height="20dp"
            app:layout_constraintBottom_toBottomOf="@+id/find_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.95"
            app:layout_constraintStart_toStartOf="@+id/find_image"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/more" />
</androidx.constraintlayout.widget.ConstraintLayout>

创建Find的实体类

package com.huatec.edu.hw6avtivity;

public class Find {
    private int imageId;
    private String text;
    private int more;

    public Find(int imageId, String text, int more) {
        this.imageId = imageId;
        this.text = text;
        this.more = more;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public int getMore() {
        return more;
    }

    public void setMore(int more) {
        this.more = more;
    }
}

创建FindAdapter,通过适配器，将要显示的数据，加载到页面中

package com.huatec.edu.hw6avtivity;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

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

import java.util.List;

public class FindAdapter extends RecyclerView.Adapter<FindAdapter.ViewHolder> {
    List<Find> findList;

    public FindAdapter(List<Find> findList) {
        this.findList = findList;
    }

    @NonNull
    @Override
    public FindAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.find_list,parent,false);
        FindAdapter.ViewHolder viewHolder = new FindAdapter.ViewHolder(itemView);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull FindAdapter.ViewHolder holder, int position) {
        Find find = findList.get(position);
        holder.imageId.setImageResource(find.getImageId());
        holder.more.setImageResource(find.getMore());
        holder.text.setText(find.getText());
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView imageId;
        TextView text;
        ImageView more;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            imageId = itemView.findViewById(R.id.find_image);
            text = itemView.findViewById(R.id.find_text);
            more = itemView.findViewById(R.id.find_more);
        }
    }
}

在FindFragment中，显示创建好的视图

package com.huatec.edu.hw6avtivity;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

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

public class FindFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.find,null);
        List<Find> findList = initData();
        FindAdapter findAdapter = new FindAdapter(findList);
        LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
        RecyclerView recyclerView = view.findViewById(R.id.find_recycler_view);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(findAdapter);
        return view;
    }

    private List<Find> initData() {
        List<Find> datas = new ArrayList<>();
        datas.add(new Find(R.drawable.pengyouquan,"朋友圈",R.drawable.more));
        datas.add(new Find(R.drawable.kanyikan,"看一看",R.drawable.more));
        datas.add(new Find(R.drawable.xiaocengxu,"小程序",R.drawable.more));
        return datas;
    }
}

实现关于我界面

首先创建me_list.xml的布局文件，样式自行调整

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:background="#ffffff">

    <ImageView
            android:id="@+id/me_image"
            android:layout_width="60dp"
            android:layout_height="60dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/zhifu" />

    <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textColor="#000000"
            android:textSize="17sp"
            app:layout_constraintBottom_toBottomOf="@+id/me_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.079"
            app:layout_constraintStart_toEndOf="@+id/me_image"
            app:layout_constraintTop_toTopOf="@+id/me_image" />

    <ImageView
            android:id="@+id/more"
            android:layout_width="20dp"
            android:layout_height="20dp"
            app:layout_constraintBottom_toBottomOf="@+id/me_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.926"
            app:layout_constraintStart_toEndOf="@+id/me_image"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/more" />
</androidx.constraintlayout.widget.ConstraintLayout>

创建Me的实体类

package com.huatec.edu.hw6avtivity;

public class Me {
    private int imageId;
    private String name;
    private int more;

    public Me(int imageId, String name, int more) {
        this.imageId = imageId;
        this.name = name;
        this.more = more;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    public String getName() {
        return name;
    }

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

    public int getMore() {
        return more;
    }

    public void setMore(int more) {
        this.more = more;
    }
}

创建MeAdapter,通过适配器，将要显示的数据，加载到页面中

package com.huatec.edu.hw6avtivity;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;


import java.util.List;

public class MeAdapter  extends ArrayAdapter<Me> {

    private int resourceId;
    public MeAdapter(@NonNull Context context, int resource, @NonNull List<Me> objects) {
        super(context, resource, objects);
        this.resourceId = resource;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        Me me = getItem(position);
        View view;
        ViewHolder viewHolder;
        if(convertView == null){
            view = LayoutInflater.from(getContext()).inflate(resourceId,parent,false);
            viewHolder = new ViewHolder();
            viewHolder.me_image = view.findViewById(R.id.me_image);
            viewHolder.text = view.findViewById(R.id.text);
            viewHolder.more = view.findViewById(R.id.more);
            view.setTag(viewHolder);
        }else{
            view = convertView;
            viewHolder = (ViewHolder)view.getTag();
        }
        viewHolder.me_image.setImageResource(me.getImageId());
        viewHolder.text.setText(me.getName());
        viewHolder.more.setImageResource(me.getMore());
        return view;
    }

    class ViewHolder{
        ImageView me_image;
        TextView text;
        ImageView more;
    }
}

在MeFragment中，显示创建好的视图

package com.huatec.edu.hw6avtivity;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;

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

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

public class MeFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.me,null);
        final List<Me> datas = initDatas();
        MeAdapter meAdapter = new MeAdapter(getActivity(),R.layout.me_list,datas);
        ListView listView = view.findViewById(R.id.me_list);
        listView.setAdapter(meAdapter);
        return view;
    }

    private List<Me> initDatas() {
        List<Me> datas = new ArrayList<>();
        datas.add(new Me(R.drawable.zhifu,"支付",R.drawable.more));
        datas.add(new Me(R.drawable.shouchang,"收藏",R.drawable.more));
        datas.add(new Me(R.drawable.xiangce,"相册",R.drawable.more));
        datas.add(new Me(R.drawable.kabao,"卡包",R.drawable.more));
        datas.add(new Me(R.drawable.biaoqing,"表情",R.drawable.more));
        datas.add(new Me(R.drawable.shezhi,"设置",R.drawable.more));
        return datas;
    }
}

在MainActivity中实现点击下方Tab，切换到对应的Fragment

package com.huatec.edu.hw6avtivity;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private ImageView wechat;
    private ImageView people;
    private ImageView find;
    private ImageView me;
    private WeChatFragment weChatFragment;
    private PeopleFragment peopleFragment;
    private FindFragment findFragment;
    private MeFragment meFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setContentView(R.layout.activity_main);
        getSupportActionBar().hide();
        init();
    }

    private void init() {
        wechat = findViewById(R.id.wechat);
        people = findViewById(R.id.people);
        find = findViewById(R.id.find);
        me = findViewById(R.id.me);
        wechat.setOnClickListener(this);
        people.setOnClickListener(this);
        find.setOnClickListener(this);
        me.setOnClickListener(this);
        hideAllFrag();
        if(weChatFragment==null){
            weChatFragment = new WeChatFragment();
        }
        addFrag(weChatFragment);
        wechat.setImageResource(R.drawable.wechat_on);
    }

    private void addFrag(Fragment fragment) {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        if(fragment!=null&&!fragment.isAdded()){
            transaction.add(R.id.content_layout,fragment);
        }
        transaction.commit();
        getSupportFragmentManager().beginTransaction().show(fragment).commit();
    }

    private void hideFrag(Fragment fragment) {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        if(fragment!=null&&fragment.isAdded()){
            transaction.hide(fragment);

        }
        transaction.commit();
    }

    private void hideAllFrag() {
        hideFrag(weChatFragment);
        hideFrag(peopleFragment);
        hideFrag(meFragment);
        hideFrag(findFragment);
    }

    private void setImage(int flag){
        switch (flag){
            case 1:
                wechat.setImageResource(R.drawable.wechat_on);
                people.setImageResource(R.drawable.people);
                find.setImageResource(R.drawable.find);
                me.setImageResource(R.drawable.me);
                break;
            case 2:
                wechat.setImageResource(R.drawable.wechat);
                people.setImageResource(R.drawable.people_on);
                find.setImageResource(R.drawable.find);
                me.setImageResource(R.drawable.me);
                break;
            case 3:
                wechat.setImageResource(R.drawable.wechat);
                people.setImageResource(R.drawable.people);
                find.setImageResource(R.drawable.find_on);
                me.setImageResource(R.drawable.me);
                break;
            case 4:
                wechat.setImageResource(R.drawable.wechat);
                people.setImageResource(R.drawable.people);
                find.setImageResource(R.drawable.find);
                me.setImageResource(R.drawable.me_on);
                break;
        }
    }

    @Override
    public void onClick(View v) {
        hideAllFrag();
        switch (v.getId()){
            case R.id.wechat:
                showWeChat();
                break;
            case R.id.people:
                showPeople();
                break;
            case R.id.find:
                showFind();
                break;
            case R.id.me:
                showMe();
                break;
        }
    }

    private void showMe() {
        if(meFragment==null){
            meFragment = new MeFragment();
        }
        addFrag(meFragment);
        setImage(4);
    }

    private void showFind() {
        if(findFragment==null){
            findFragment = new FindFragment();
        }
        addFrag(findFragment);
        setImage(3);
    }

    private void showPeople() {
        if(peopleFragment==null){
            peopleFragment = new PeopleFragment();
        }
        addFrag(peopleFragment);
        setImage(2);
    }

    private void showWeChat() {
        if(weChatFragment==null){
            weChatFragment = new WeChatFragment();
        }
        addFrag(weChatFragment);
        setImage(1);
    }


}