移动开发--类微信界面的实现

Hubu-Teng

已于 2023-10-15 00:55:27 修改

阅读量415

点赞数 13

文章标签： java 前端

于 2023-10-15 00:49:50 首次发布

本文链接：https://blog.csdn.net/m0_65068610/article/details/133829727

版权

预期目标：

设计一个app的门户框架,需要实现3-4个tab切换效果；

功能的实现要求需要的技术为：activity、xml、fragment；

在任一tab页中实现列表效果（本功能的实现需要使用recycleview）。

使用的软件：Andriod Studio

设计思路:

1.实现类微信界面：

将界面分为上、中、下三个子布局,分别为top.xml, tab.xml, bottom.xml文件，

中间部分的内容分别为tab1.xml，tab2.xml， tab3.xml，tab4.xml。

2.实现列表效果：

将任一tab页面的内容替换成列表。

设计过程：

首先设计头部布局top.xml

使用LinearLayout作为父容器。它是一个线性布局,用于在垂直或水平方向上排列子视图。

android:layout_width="match_parent"：设置布局的宽度为与父容器匹配,即填充满父容器。（wrap_content表示设置元素的高度为包裹其内容,即根据文本内容自动调整高度）
android:gravity="center"：设置文本在TextView中的对齐方式为居中对齐。
android:text="微信"：设置TextView显示的文本内容为"微信"。
android:textColor="@color/black"：设置文本的颜色为黑色。
android:textSize="30sp"：设置文本的字体大小为30sp。
android:background="@color/design_default_color_secondary"：设置TextView的背景颜色。

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

    <FrameLayout
        android:id="@+id/top"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/black"
            android:textSize="30sp"
            android:background="@color/design_default_color_secondary"
            />
    </FrameLayout>
</LinearLayout>

然后设计底部布局bottom.xml

先创建一个水平布局的LinearLayout作为父容器,再创建四个垂直布局的LinearLayout子布局,子布局包含一个图片视图和一个居中对齐的文本视图。

android:orientation="horizontal"：设置布局的方向为水平方向,子视图水平排列。
android:orientation="vertical"：设置第一部分布局的方向为垂直方向,子视图垂直排列。
android:layout_width="0dp"：设置第一部分布局的宽度为0dp。
android:layout_weight="1"：设置第一部分布局的权重为1。配合父布局的android:layout_width="0dp"，可以让第一部分布局占据剩余的宽度。
android:onClick="onClick"：设置点击事件的监听方法为"onClick"。在Java代码中需要定义一个名为"onClick"的方法来处理点击事件。
android:background="#FF03DAC6"：设置第一部分布局的背景颜色。
四个子布局类似，此处仅列举一部分。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <!--第一部分-->
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:onClick="onClick"
        android:background="#FF03DAC6"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"

            app:srcCompat="@android:drawable/sym_action_chat" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="消息"
            android:textSize="30sp" />
    </LinearLayout>
</LinearLayout>

设计中间部分tab.xml

添加文本信息做提示内容，四个布局均类似，此处仅列举一个。

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

    <TextView
        android:id="@+id/tab01"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="这是聊天界面"
        android:textSize="30sp"/>

</LinearLayout>

整合布局元素，完成基础布局

activity_main.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"
    tools:context=".MainActivity">

    <include
        layout="@layout/top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />


    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>

    <include
        layout="@layout/bottom"
        android:gravity="bottom" />

</LinearLayout>

结果展示：

需要编辑的xml文件：

top.xml: bottom.xml:

activity_main.xml:

创建java文件

Fragment类

onCreateView() ，通过 LayoutInflater 将 XML 布局文件 R.layout.tab1 实例化为一个 View 对象，并将其返回作为 Fragment 的视图。inflater.inflate() 方法的第三个参数是一个布尔值，表示是否将生成的 View 添加到 container 容器中。

public class Fragment1 extends Fragment {
    public Fragment1() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.tab1, container, false);
    }
}

MainActivity：实现导航栏和 Fragment布局切换功能

定义四个 Fragment：Fragment1、Fragment2、Fragment3 和 Fragment4

四个 LinearLayout 类型的变量：linearLayout1、linearLayout2、linearLayout3 和 linearLayout4

定义FragmentManager 类型的变量 fm，用于管理 Fragment 对象的生命周期和切换操作。

Fragment1 fragment1;
    Fragment2 fragment2;
    Fragment3 fragment3;
    Fragment4 fragment4;
    FragmentManager fm;
    LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

定义Fragmenthide（）用于隐藏Fragment

private void fragmenthide() {
        FragmentTransaction ft = fm.beginTransaction()
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4);
        ft.commit();
    }

定义initial() 方法用于初始化 Fragment

public void initial() {
        FragmentTransaction ft = fm.beginTransaction()
                .add(R.id.content,fragment1)
                .add(R.id.content,fragment2)
                .add(R.id.content,fragment3)
                .add(R.id.content,fragment4);
        ft.commit();

    }

定义onClick() 实现了 View.OnClickListener 接口，用于处理底部导航栏中选项的点击事件。

public void fragmentshow(Fragment fragment) {

        FragmentTransaction transaction = fm.beginTransaction()
                .show(fragment);
        transaction.commit();
    }

定义fragmentshow()，用于展示Fragment。

public void fragmentshow(Fragment fragment) {

        FragmentTransaction transaction = fm.beginTransaction()
                .show(fragment);
        transaction.commit();
    }

完整代码

package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;

import android.view.View;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    Fragment1 fragment1;
    Fragment2 fragment2;
    Fragment3 fragment3;
    Fragment4 fragment4;
    FragmentManager fm;
    LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();
        fragment4 = new Fragment4();
        fm = getSupportFragmentManager();

        linearLayout1 = findViewById(R.id.linearLayout1);
        linearLayout2 = findViewById(R.id.linearLayout2);
        linearLayout3 = findViewById(R.id.linearLayout3);
        linearLayout4 = findViewById(R.id.linearLayout4);


        initial();
        fragmenthide();
        fragmentshow(fragment1);
        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
    }
    private void fragmenthide() {
        FragmentTransaction ft = fm.beginTransaction()
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4);
        ft.commit();
    }

    public void initial() {
        FragmentTransaction ft = fm.beginTransaction()
                .add(R.id.content,fragment1)
                .add(R.id.content,fragment2)
                .add(R.id.content,fragment3)
                .add(R.id.content,fragment4);
        ft.commit();

    }

    @Override
    public void onClick(View view) {
        fragmenthide();
        if (view.getId()==R.id.linearLayout1)
            fragmentshow(fragment1);
        else if (view.getId()==R.id.linearLayout2)
            fragmentshow(fragment2);
        else if (view.getId()==R.id.linearLayout3)
            fragmentshow(fragment3);
        else if(view.getId()==R.id.linearLayout4)
            fragmentshow(fragment4);

    }

    public void fragmentshow(Fragment fragment) {

        FragmentTransaction transaction = fm.beginTransaction()
                .show(fragment);
        transaction.commit();
    }
}

结果：

实现列表效果

这里选择修改了第三页

需要完成视图的创建、数据的初始化、适配器的设置以及列表的布局方式设置。

在tab3.xml中添加recycleview

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Fragment3">



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

</FrameLayout>

新建列表，准备数据源

private List<String> list= new ArrayList<>();

private void initial() {
        list.add("朋友圈");
        list.add("视频号");
        list.add("直播");
        list.add("扫一扫");
        list.add("摇一摇");
        list.add("看一看");
        list.add("搜一搜");
        list.add("附近");
        list.add("购物");
        list.add("游戏");
        list.add("小说");
        list.add("音乐");
        list.add("收藏");
        list.add("小程序");
        list.add("其他功能");
        list.add("999+");
    }

新建item.xml,设计列表布局格式

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"

        android:text="TextView"
        android:textColor="@color/black"
        android:textSize="40sp" />
</LinearLayout>

重新编写fragment3.java文件内容

重写onCreateView方法，创建了一个视图并将其返回

public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){
        View view=inflater.inflate(R.layout.tab3,container,false);
        context=view.getContext();
        recyclerView=view.findViewById(R.id.recycleview);
        list=new ArrayList();

        initial();
        myadapter = new Myadapter(context,list);
        recyclerView.setAdapter(myadapter);
        LinearLayoutManager manager=new LinearLayoutManager(context);
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);

        return view;

    }

创建Myadapter类

自定义的适配器类Myadapter,将数据源中的数据与RecyclerView的列表项进行绑定,从而完成列表项的显示和更新操作。

onCreateViewHolder(),在创建新的列表项时被调用, 其中通过LayoutInflater从给定的上下文对象中，将布局文件R.layout.item转换为视图对象view,然后创建一个Myholder对象holder，并传入这个视图对象作为参数。
onBindViewHolder(),在绑定每个列表项时被调用。在方法内部，根据列表项的位置position,从数据源列表list1中获取对应位置的字符串, 并将其设置为holder中的textView的文本内容
getItemCount(),返回列表项的数量。

package com.example.myapplication;

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

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

import java.util.List;


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

    Context context1;
    List<String> list1;
    public Myadapter(Context context,List list) {
        context1=context;
        list1=list;
    }

    @NonNull
    @Override
    public Myholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context1).inflate(R.layout.item,parent,false);

        Myholder holder = new Myholder(view);

        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull Myholder holder, int position) {
        holder.textView.setText(list1.get(position));
    }

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

    public class Myholder extends RecyclerView.ViewHolder{
        TextView textView;
        public Myholder(@NonNull View itemView) {
            super(itemView);
            textView=itemView.findViewById(R.id.textView1);
        }
    }
}

结果展示:

最终效果

总结

在设计实验的过程中需要注意AS的版本问题，否则总会遇到意想不到且不会提示修改的报错，就比如：在 Android 开发中，资源 ID 通常用于在代码中引用布局文件、图像、字符串和其他资源，以便能够动态加载和使用它们，在高版本的AS中，默认情况下资源 id 将是非final 的，使用它们在 switch case 语句中可能会导致编译错误。使用 if-else 语句更具灵活性，并且通常不会受到工具链和编译器的限制。