Android开发-类微信界面设计

一实现效果图

二.完整动态图

三.java和xlm说明

红线画掉无关的，涂浅蓝的是未具体实现的，只是一个简单tab页面，如右上图（这是通讯录页面）；剩下的着重展示。

（1）未实现

<1>Fragment2.java

Fragment3.java,Fragment4.java类似

package com.example.myapplication2;

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

import androidx.fragment.app.Fragment;

public class Fragment2 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_layout2, container, false);
    }
}

<2>fragment_layout2.xml

fragment_layout3.xml，fragment_layout4.xml类似

（2）已实现

<1> fragment_MainActivity.java

public class fragment_MainActivity extends AppCompatActivity implements View.OnClickListener{

    // 定义变量
    Fragment fragment1,fragment2,fragment3,fragment4;
    LinearLayout layout1,layout2,layout3,layout4;
    FragmentManager manager;
    FragmentTransaction transaction;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragment_main);

        // 初始化四个LinearLayout
        layout1=findViewById(R.id.bottom_LinearLayout1);
        layout2=findViewById(R.id.bottom_LinearLayout2);
        layout3=findViewById(R.id.bottom_LinearLayout3);
        layout4=findViewById(R.id.bottom_LinearLayout4);

        // 初始化四个Fragment
        fragment1=new Fragment1();
        fragment2=new Fragment2();
        fragment3=new Fragment3();
        fragment4=new Fragment4();

        // 获取FragmentManager并开始一个事务
        manager=getSupportFragmentManager();
        transaction=manager.beginTransaction();

        // 调用initial方法添加所有Fragment到FrameLayout
        intial();

        // 调用fragementHide方法隐藏所有Fragment
        fragementHide();

        // 显示第一个Fragment
        transaction.show(fragment1);
        transaction.commit();

        // 为每个LinearLayout设置点击监听器，点击时显示对应的Fragmen
        layout1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                transaction=manager.beginTransaction();
                fragementHide();
                transaction.show(fragment1);
                transaction.commit();
            }
        });

        layout2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                transaction=manager.beginTransaction();
                fragementHide();
                transaction.show(fragment2);
                transaction.commit();
            }
        });

        layout3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                transaction=manager.beginTransaction();
                fragementHide();
                transaction.show(fragment3);
                transaction.commit();
            }
        });

        layout4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                transaction=manager.beginTransaction();
                fragementHide();
                transaction.show(fragment4);
                transaction.commit();
            }
        });
    }

    // 初始化方法：将四个Fragment添加到FrameLayout中
    private void intial() {
        transaction.add(R.id.framelayout,fragment1);
        transaction.add(R.id.framelayout,fragment2);
        transaction.add(R.id.framelayout,fragment3);
        transaction.add(R.id.framelayout,fragment4);
    }

    // 隐藏所有Fragment的方法
    void fragementHide() {
        transaction.hide(fragment1);
        transaction.hide(fragment2);
        transaction.hide(fragment3);
        transaction.hide(fragment4);
    }

    // 实现View.OnClickListener接口的onClick方法
    @Override
    public void onClick(View view) {
        if (view.getId() == R.id.bottom_LinearLayout1) {
            fragementHide();
            showfragment(fragment1);
        } else if (view.getId() == R.id.bottom_LinearLayout2) {
            fragementHide();
            showfragment(fragment2);
        } else if (view.getId() == R.id.bottom_LinearLayout3) {
            fragementHide();
            showfragment(fragment3);
        } else if (view.getId() == R.id.bottom_LinearLayout4) {
            fragementHide();
            showfragment(fragment4);
        } else {}
    }

    // 显示指定Fragment的方法
    private void showfragment(Fragment fragment) {
        transaction=manager.beginTransaction();
        fragementHide();
        transaction.show(fragment);
        transaction.commit();
    }
}

定义一个 fragment_MainActivity.java，实现了使用 Fragment 和底部导航栏来切换不同的视图内容的功能。以下是该代码的主要功能和组成部分的详细说明：

1. 变量定义：
   • fragment1, fragment2, fragment3, fragment4：这四个变量分别代表四个不同的 Fragment 实例。
   • layout1, layout2, layout3, layout4：这四个变量分别代表底部导航栏中的四个 LinearLayout，用作导航按钮。
   • manager：FragmentManager 的实例，用于管理 Fragment 的事务。
   • transaction：FragmentTransaction 的实例，用于执行 Fragment 的添加、移除、替换、隐藏和显示等操作。
2. 初始化：
   • 在 onCreate 方法中，首先通过 setContentView 方法设置活动的布局文件 activity_fragment_main。
   • 接着，初始化四个 LinearLayout 和四个 Fragment。
   • 获取 FragmentManager 并开始一个 Fragment 事务。
3. Fragment 的添加和初始显示：
   • intial 方法：将所有四个 Fragment 添加到布局文件中 ID 为 framelayout 的 FrameLayout 中，但此时它们都是隐藏的。
   • fragementHide 方法：隐藏所有四个 Fragment。
   • 初始状态下，通过事务显示第一个 Fragment (fragment1)。
4. 底部导航栏的点击事件：
   • 为每个 LinearLayout 设置了一个点击监听器，当点击时，执行以下操作：
     • 开始一个新的 Fragment 事务。
     • 隐藏所有 Fragment。
     • 显示与点击的 LinearLayout 对应的 Fragment。
     • 提交事务。
5. 显示指定 Fragment 的方法：
   • showfragment 方法：接受一个 Fragment 作为参数，隐藏所有 Fragment，然后显示传入的 Fragment。

<2>Fragment1.java

public class Fragment1 extends Fragment {

    RecyclerView recyclerView;// 定义RecyclerView变量，用于展示数据
    Context context;// 定义Context变量，用于访问应用的资源和类以及启动活动、广播和接收意图等
    adapter adapter;// 定义自定义的adapter变量，用于将数据绑定到RecyclerView的视图上

    // 定义一个List来存储Map，每个Map包含一个头像资源ID和一个名称字符串
    List> list1;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // 使用LayoutInflater来加载布局文件activity_main5，并将其作为Fragment的视图返回
        View view=inflater.inflate(R.layout.activity_main5, container, false);

        // 获取Fragment的Context
        context=getContext();
        recyclerView =view.findViewById(R.id.recyclerview);

        // 定义一个int数组，存储头像图片的资源ID
        int[] avatar={R.drawable.yq1,R.drawable.yq2,R.drawable.yq3,R.drawable.yq4,
                R.drawable.yq5,R.drawable.yq6,R.drawable.yq7,R.drawable.yq8,R.drawable.yq9,
                R.drawable.yq10,R.drawable.yq11,R.drawable.yq12,R.drawable.yq13,R.drawable.yq14,};

        // 定义一个String数组，存储名称
        String[] name={"傲慢","嫉妒","暴怒","懒惰","贪婪","暴食","色欲","堕落",
                "大逆","恶谋","恋物","变态","不孝","不义"};

        // 初始化list1，用于存储头像和名称的数据
        list1=new ArrayList>();
        // 遍历avatar数组，为每个头像和名称创建一个Map，并将这些Map添加到list1中
        for (int i=0;i map=new HashMap<>();
            map.put("avatar",avatar[i]);
            map.put("name",name[i]);
            list1.add(map);
        }

        // 创建adapter实例，将context和list1传递给adapter的构造函数，为RecyclerView设置adapter
        adapter=new adapter(context,list1);
        recyclerView.setAdapter(adapter);

        // 创建LinearLayoutManager实例，用于管理RecyclerView的布局，并设置布局方向为垂直
        LinearLayoutManager manager = new LinearLayoutManager(context);
        manager.setOrientation(LinearLayoutManager.VERTICAL);

        // 为RecyclerView设置LayoutManage
        recyclerView.setLayoutManager(manager);

        return view;// 返回Fragment的视图
    }
}

Fragment1 是一个Android Fragment类，用于在应用中展示一个包含头像和名称列表的界面。主要通过RecyclerView组件来实现这一功能。

1. 定义变量：
   • RecyclerView recyclerView：用于展示数据列表。
   • Context context：用于访问应用的资源和类。
   • adapter adapter：自定义的适配器，用于将数据绑定到RecyclerView的视图上。
   • List> list1：存储头像资源ID和名称字符串的列表。
2. 加载布局：
   • 在onCreateView方法中，使用LayoutInflater加载activity_main5布局文件作为Fragment的视图。
3. 初始化数据：
   • 定义并初始化头像资源ID数组avatar和名称字符串数组name。
   • 遍历这两个数组，为每个头像和名称创建一个Map对象，并将这些Map对象添加到list1列表中。
4. 设置适配器：
   • 创建adapter实例，将context和list1传递给其构造函数。
   • 将适配器设置到recyclerView上。
5. 设置布局管理器：
   • 创建LinearLayoutManager实例，并设置其布局方向为垂直。
   • 将布局管理器设置到recyclerView上。
6. 返回视图：
   • 返回加载的视图，以便在Fragment中展示。

<3>adapter.java

public class adapter extends RecyclerView.Adapter {

    // 声明一个List，用于存储Map类型的数据，以及一个Context类型的变量
    List> list;
    Context context;

    // 构造函数，用于初始化list和context
    public adapter(Context context, List> list) {
        this.context = context;
        this.list = list;
    }

    // onCreateViewHolder方法：用于创建和返回一个新的ViewHolder实例
    // ViewGroup viewGroup：RecyclerView中用于放置新View的父ViewGroup
    // int i：当前ViewHolder的位置（通常未使用）
    @Override
    public adapter.myviewholder onCreateViewHolder(ViewGroup viewGroup, int i) {
        // 使用LayoutInflater从context中加载layout_item布局文件，并返回一个新的View实例
        View inflater = LayoutInflater.from(context).inflate(R.layout.layout_item, viewGroup, false);
        // 使用这个新加载的View实例来创建一个新的myviewholder实例，并返回它
        myviewholder myviewholder = new myviewholder(inflater);
        return myviewholder;
    }

    // onBindViewHolder方法：用于将数据绑定到ViewHolder的视图上
    // adapter.myviewholder myviewholder：当前要绑定的ViewHolder实例
    // int j：当前ViewHolder的位置（即数据列表中的索引）
    @Override
    public void onBindViewHolder(adapter.myviewholder myviewholder, int j) {
        // 从list中获取当前位置的数据项
        Map currentItem = list.get(j);
        // 设置imageView的图片资源
        myviewholder.imageView.setImageResource((Integer) currentItem.get("avatar"));

        // 获取name键对应的值，并将其转换为String类型，然后设置给textView1
        String str1 = list.get(j).get("name").toString();
        myviewholder.textView1.setText(str1);

        // 为linearLayout11设置点击监听器
        myviewholder.linearLayout11.setOnClickListener(new View.OnClickListener() {
            @Override
            // 当linearLayout11被点击时，执行以下操作
            public void onClick(View view) {
                // 创建一个新的Intent，用于启动Activity_contact_detail活动
                Intent intent = new Intent(context, Activity_contact_detail.class);
                // 将name的值作为额外数据放入intent中
                intent.putExtra("name", str1);
                // 使用context启动新的活动
                context.startActivity(intent);
            }
        });
    }

    // getItemCount方法：返回数据列表的大小
    @Override
    public int getItemCount() {
        return list.size();
    }

    // 定义一个静态内部类myviewholder，它继承自RecyclerView.ViewHolder
    class myviewholder extends RecyclerView.ViewHolder {
        TextView textView1;
        ImageView imageView;
        LinearLayout linearLayout11;

        // 构造函数，用于初始化视图组件
        public myviewholder(View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.imageView);
            textView1 = itemView.findViewById(R.id.textView_rc_1);
            linearLayout11 = itemView.findViewById(R.id.LinearLayout11);
        }
    }
}

adapter 类是一个自定义的 RecyclerView 适配器，用于将数据存储到 RecyclerView 的视图上，并处理用户的交互。

1. 数据存储：
   • List> list：存储数据项的列表，每个数据项是一个包含头像资源 ID 和名称字符串的 Map 对象。
   • Context context：用于访问应用的资源和类，以及启动活动。
2. 构造函数：
   • 初始化 list 和 context 变量，以便在适配器中使用。
3. 创建 ViewHolder：
   • onCreateViewHolder 方法：使用 LayoutInflater 从提供的布局文件（R.layout.layout_item）中加载视图，并创建一个新的 myviewholder 实例来持有这些视图组件。
4. 绑定数据到 ViewHolder：
   • onBindViewHolder 方法：从 list 中获取当前位置的数据项，并将头像资源 ID 设置到 ImageView 上，将名称字符串设置到 TextView 上。
   • 为 LinearLayout 设置点击监听器，当用户点击时，启动一个新的活动（Activity_contact_detail），并将名称作为额外数据传递。
5. 获取数据项数量：
   • getItemCount 方法：返回数据列表的大小，即 RecyclerView 中应显示的项目数。
6. ViewHolder 内部类：
   • myviewholder 是一个静态内部类，继承自 RecyclerView.ViewHolder。
   • 它持有 ImageView、TextView 和 LinearLayout 的引用，以便在 onBindViewHolder 方法中访问和更新这些视图组件。

<4>Activity_contact_detail.java

public class Activity_contact_detail extends AppCompatActivity {

    TextView textView,textView2;

    // 定义一个静态的Map，用于存储名称到URL的映射
    private static final Map NAME_TO_URL_MAP = new HashMap<>();
    
    // 静态代码块，用于初始化NAME_TO_URL_MAP
    static {
        // 将每个名称与其对应的URL添加到Map中
        NAME_TO_URL_MAP.put("傲慢", "http://略");
        NAME_TO_URL_MAP.put("嫉妒", "");
        NAME_TO_URL_MAP.put("暴怒", "");
        NAME_TO_URL_MAP.put("懒惰", "");
        NAME_TO_URL_MAP.put("贪婪", "");
        NAME_TO_URL_MAP.put("暴食", "");
        NAME_TO_URL_MAP.put("色欲", "");
        NAME_TO_URL_MAP.put("堕落", "");
        NAME_TO_URL_MAP.put("大逆", "");
        NAME_TO_URL_MAP.put("恶谋", "");
        NAME_TO_URL_MAP.put("恋物", "");
        NAME_TO_URL_MAP.put("变态", "");
        NAME_TO_URL_MAP.put("不孝", "");
        NAME_TO_URL_MAP.put("不义", "");
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_contact_detail);

        textView = findViewById(R.id.textView_contact_detail);
        textView2=findViewById(R.id.textView2);

        // 从启动该Activity的Intent中获取名为"name"的额外数据
        String name = getIntent().getStringExtra("name");

        if (name != null) {
            // 构造显示文本并设置给textView
            String str = "这是" + name + "的详情页面";
            textView.setText(str);

            // 从Map中获取name对应的URL
            String url = NAME_TO_URL_MAP.get(name);
            if (url != null) {// 为textView2设置点击事件监听器，点击时打开URL
                setClickListenerWithUrl(url);
            } else {}
        }
    }

    // 定义一个私有方法，用于为textView2设置点击事件监听器
    private void setClickListenerWithUrl(final String url) {
        // 为textView2设置点击事件监听器
        textView2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 创建一个Intent，用于打开浏览器并访问URL
                Intent intent = new Intent(Intent.ACTION_VIEW);
                intent.setData(Uri.parse(url));// 设置Intent的数据为URL
                startActivity(intent);// 启动Activity，这里会打开浏览器并加载URL
            }
        });
    }
}

Activity_contact_detail 的主要功能是展示一个详细页面，该页面包含从上一个活动传递过来的名称（name），并提供一个选项来在浏览器中打开与该名称相关的网页。

1. 成员变量：
   • TextView textView, textView2：用于显示文本信息的视图组件。）。
   • Map NAME_TO_URL_MAP：一个静态的 Map，用于存储名称到 URL 的映射。这个 Map 在静态代码块中被初始化，为每个名称关联了一个百度百科的网页链接。
2. 静态代码块：
   • 在静态代码块中，将每个名称与其对应的 URL 添加到 NAME_TO_URL_MAP 中。
3. onCreate 方法：
   • 这是活动生命周期中的一个关键方法，它会在活动创建时被调用。
   • 使用 EdgeToEdge.enable(this) 来启用边缘到边缘的布局优化。
   • 设置活动的内容视图为 R.layout.activity_contact_detail。
   • 从启动该活动的 Intent 中获取名为 "name" 的额外数据。
   • 如果获取到的名称不为空，则构造一个显示文本（例如 "这是XXX的详情页面"），并将其设置给 textView。
   • 从 NAME_TO_URL_MAP 中获取与名称对应的 URL。
   • 如果 URL 不为空，则调用 setClickListenerWithUrl 方法为 textView2 设置点击事件监听器。
4. setClickListenerWithUrl 方法：
   • 这是一个私有方法，用于为 textView2 设置点击事件监听器。
   • 在监听器的 onClick 方法中，创建一个新的 Intent，其动作为 Intent.ACTION_VIEW，用于在浏览器中打开网页。
   • 使用 Uri.parse(url) 将 URL 字符串解析为 Uri 对象，并将其设置为 Intent 的数据。
   • 调用 startActivity(intent) 启动活动，这会打开系统的默认浏览器并加载指定的 URL。

源码地址

四、使用gitee上传代码

下载xGit (git-scm.com)

‘git‘不是内部或外部命令，也不是可运行的程序或批处理文件。_git' 不是内部或外部命令,也不是可运行的程序 或批处理文件。-CSDN博客【使用gitee上传代码 （最简单最实用的操作）】https://www.bilibili.com/video/BV1Mh4y1Y73m?vd_source=57f0a1220ffe2ed63e1d7154537483ac