安卓开发之微信界面模仿实现

一、项目概要

给路人一个提示：这是一个课程的作业帖子，不需要细心看，看了就是浪费时间

1. 设计介绍

开发出一个类似微信主界面的简化版的安卓项目，项目的实现主要是靠老师上课讲述的代码，还停留在入门阶段。自己修改的含量不高，最多也就是UI方面有点改动，其他就中规中矩。

二、界面设计

微信主界面很明显分为三个部分，这次项目也是按照这个逻辑展开的
也就是说：我们需要将三个xml页面集中在一个页面里面

1. 主页头部

这玩意的实现就是一个静态的标签，相比较与真正的微信页面，还少了一个搜索按钮和展开服务
所以在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="65dp"
    android:gravity="center"
    android:background="#B1B6B1"
    android:orientation="vertical">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_weight="1"
        android:background="#B1B6B1"
        android:text="微信"
        android:textColor="#616161"
        android:textSize="40sp" />

</LinearLayout>

解读一下这段代码，就是拉了一个linearLayout，然后里面放了一个文本框TextView。主要问题就是需要注意一下两者的布局和居中设置，其他诸如颜色的随意调整

2. 主页底部

用过微信的都知道，微信界面下面有4个按钮来实现界面跳转，所以我们只需要在一个linearLayout中插入4个按钮就行，但是作为初学者，我们还是选择插入四张图片来实现这个功能。
直接展示效果图：

实现代码：

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/LinearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_gravity="bottom">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@android:drawable/ic_menu_mapmode"
            android:clickable="false" />

        <TextView
            android:id="@+id/textView22"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:saveEnabled="false"
            android:text="微信"
            android:textSize="15sp" />
    </LinearLayout>
</LinearLayout>

代码只单单展示了4个空间中的一个（因为4个的差别就是ID名字不一样），我们从代码可以发现在一个linearLayout中，只需要一个图片标签和文本标签，真的是通俗易懂呢！！！那么这里的难点还是在于需要设置一下格式和布局，不然后面无法平凑在一起

3. 主页中间的Tab内容页

所谓Tab内容页，其实就是根据底部控件的选择，会自行跳转到相应的页面。当然，这里的实现方式非常简陋，后面会对实现方式进行详细的介绍（将4个页面压缩在中间页面当中）
所以，我们会有4个一模一样的tab页，其中一页的代码如下：

<?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/textView4"
        android:layout_width="wrap_content"
        android:layout_height="32dp"
        android:layout_weight="1"
        android:text="这是设置界面" />
</LinearLayout>

实现列表效果

为了完成老师的任务需要在一个页面中显示列表效果,也就需要在一个tab页中添加如下代码

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:layout_weight="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

4.三个页面的整合方法

在这里我们需要重新写一个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"
    android:orientation="vertical">

    <include layout="@layout/top"></include>

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

    </FrameLayout>

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

可以看到，这里将顶部的页面和底部的空间页面通过include的方式导入进来，可以看到我们在中间定义了一个FrameLayout，这个东西就是用来存放上面的Tab页面的

三、功能实现

这里的功能主要就是分为两个

1. 把Tab页面压缩到中部页面
2. 实现底部控件的按钮跳转

1. 文件声明及部分变量定义

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.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;


public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    FragmentManager fm;
    LinearLayout linearLayout1, linearLayout2,linearLayout3,linearLayout4;
    Fragment fragment1,fragment2,fragment3,fragment4;

由于安卓的版本变化较大，不同版本之间连导入的包的名字都不相同，所以，这方面是需要看版本号来提高注意的

2. 各函数的功能及其作用

onCreate（）

主要起到了一个初始化界面（把Tab1页面给显示出来） 以及 实现对底部的控件进行监听

    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();


        linearLayout1=findViewById(R.id.LinearLayout1);
        linearLayout2=findViewById(R.id.LinearLayout2);
        linearLayout3=findViewById(R.id.LinearLayout3);
        linearLayout4=findViewById(R.id.LinearLayout4);

        fm = getSupportFragmentManager();

        initial();
        fragmenthide();
        fragmentshow(fragment1);

        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);

    }

fragmenthide（）

实现当页面切换时，对上一个页面进行页面的隐藏，以避免页面重叠显示

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

initial()

初始化页面，也就是将四个Tab页面全部不显示

    private 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（）

实现当监听到页面点击后，进行相应tab页的显示

    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);
        }
    }

fragmentshow（）

将对应的tab显示出来，因为一开始页面都被hide了

    private void fragmentshow(Fragment fragment){
        FragmentTransaction transaction=fm.beginTransaction()
                .show(fragment);
        transaction.commit();
    }

3. 列表的实现

需要创建Myadapter类连接item，主要作用是在Fragment的UI界面中展示一个列表视图（RecyclerView），并将数据源（List）提供给适配器（Adapter），以便进行数据的绑定和显示。

Myadapter

RecyclerView中的Myadapter是一个管理数据和视图之间关系的类，为RecyclerView提供数据并创建对应的视图项。Adapter通常继承自RecyclerView.Adapter类，并通过重写其中的方法来实现自定义逻辑。Myadapter的实现具体产看代码仓库

Fragment1

那么同时呢我们需要改变数据源,在对应的页面中将代码修改成如下状态，来向adapter提供数据源

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view=inflater.inflate(R.layout.tab1,container,false);
        recyclerView=view.findViewById(R.id.recyclerview);//连接至tab1的控件
        list=new ArrayList();
        for(int i=0;i<9;i++){
            list.add("这是第"+i+"行数据");
        }

        adapter=new Myadapter(view.getContext(),list);//把list导入
        LinearLayoutManager manager=new LinearLayoutManager(view.getContext());
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setAdapter(adapter);
        recyclerView.setLayoutManager(manager);
        // Inflate the layout for this fragment
        return view;
    }

四、本代码的地址仓库

由于偷懒的缘故，将整个项目里的所有文件全部上传到了仓库，路径也是本来的路径，所以想要看到MainActivity文件还得仔细找找
github仓库链接: 微信界面仿真

五、总结

有难度，有压力，可以说我本人对这个安卓的开发编程不怎么上心，投入的时间太少了。上课上的也比较糊里糊涂，很多地方的逻辑上课也是没搞懂。可以说这次作业，是花了大力气完成的。好了，我腰都坐酸了，也不多说什么了。