类微信App门户页面设计与开发

前言：

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

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

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

使用的软件：Andriod Studio

一、设计界面：top.xml
        设计中发现界面上方有一个自带的标题框，需要在app/java/MainActivity中onCreat函数中添加如下代码去除：

     if (getSupportActionBar()!=null)
        {
            getSupportActionBar().hide();
        }
        去除自带的标题框后，设计效果及代码如下：
 

代码如下：

<?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="55dp"
    android:background="@color/black">
    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="55dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="WeChat"
        android:textColor="@color/white"
        android:textSize="30sp" />
</LinearLayout>

二、设计界面：bottom.xml

        此处以chat为例，设计效果代码如下：

<?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="wrap_content"
    android:id="@+id/LinearLayout"
    tools:context=".MainActivity"
    >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/wechat"

            />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="88dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信"
            android:textSize="24sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/friend" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="通讯录"

            android:textSize="24sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/find" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现"

            android:textSize="24sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/mine" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我"

            android:textSize="24sp" />

    </LinearLayout>
</LinearLayout>

三、创建Fragment（eg：fragment_chat）

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".tab1">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是微信聊天界面"
        android:textSize="35sp" />

</LinearLayout>

四、整体布局：activity_main.xml

        在activity_main.xml文件中体现，通过include标签引入top.xml和bottom.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/id_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>

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

</LinearLayout>

五、功能实现：MainActivity

        0、文件声明，导入等

package com.example.wechat20;

import androidx.appcompat.app.AppCompatActivity;

import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{


    private Fragment fragment4=new tab4();
    private Fragment fragment1=new tab1();
    private Fragment fragment2=new tab2();
    private Fragment fragment3=new tab3();
    private FragmentManager fragmentManager;
    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

1、onCreate()

        其中 initFragment() ;   initView() ;   initEvent() ;   selectFragment(0) ;的定义将在下文说明

 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

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

        initFragment();
    }

2、initFragment()：添加界面

private void initFragment(){
        fragmentManager=getFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.id_content,fragment1);
        transaction.add(R.id.id_content,fragment2);
        transaction.add(R.id.id_content,fragment3);
        transaction.add(R.id.id_content,fragment4);
        hideFragment(transaction);
        transaction.commit();
    }

 3、hideFragment()：视图选择

private void hideFragment(FragmentTransaction transaction){
        transaction.hide(fragment1);//转换，背景隐藏
        transaction.hide(fragment2);
        transaction.hide(fragment3);
        transaction.hide(fragment4);
    }

4、onClick()：触发点击

private void background(View v) {
        switch (v.getId()) {
            case R.id.linearLayout1:
                linearLayout1.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            case R.id.linearLayout2:
                linearLayout2.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            case R.id.linearLayout3:
                linearLayout3.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            case R.id.linearLayout4:
                linearLayout4.setBackgroundColor(Color.parseColor("#426F42"));
                break;
            default:
                break;
        }
    }

    private void backgroundreturn(View v) {
        switch (v.getId()) {
            case R.id.linearLayout1:
                linearLayout1.setBackgroundColor(Color.parseColor("white"));
                break;
            case R.id.linearLayout2:
                linearLayout2.setBackgroundColor(Color.parseColor("white"));
                break;
            case R.id.linearLayout3:
                linearLayout3.setBackgroundColor(Color.parseColor("white"));
                break;
            case R.id.linearLayout4:
                linearLayout4.setBackgroundColor(Color.parseColor("white"));
                break;
            default:
                break;
        }
    }

5、selectFragment()：点击时更改图标

private void showfragmnet(int i) {
        //展示所对应的fragment
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(fragment1);
                background(linearLayout1);
                backgroundreturn(linearLayout3);
                backgroundreturn(linearLayout2);
                backgroundreturn(linearLayout4);
                break;
            case 1:
                transaction.show(fragment2);
                background(linearLayout2);
                backgroundreturn(linearLayout4);
                backgroundreturn(linearLayout1);
                backgroundreturn(linearLayout3);
                break;
            case 2:
                transaction.show(fragment3);
                background(linearLayout3);
                backgroundreturn(linearLayout4);
                backgroundreturn(linearLayout2);
                backgroundreturn(linearLayout1);
                break;
            case 3:
                transaction.show(fragment4);
                background(linearLayout4);
                backgroundreturn(linearLayout1);
                backgroundreturn(linearLayout2);
                backgroundreturn(linearLayout3);
                break;
            default:
                break;
        }
        transaction.commit();
    }

六、效果展示

1、页面1-微信                                                                                 2、页面2-通讯录

3、页面3-发现                                                                             4、页面4-我

七、实现列表效果

1.修改tab2.xml（联系人）界面

修改为recycleview布局

<?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">
 
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycleview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"/>
 
</LinearLayout>

2.新建item.xml,设计列表布局格式，做为内容容器填充到recyclerview中去

<?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="35sp" />
</LinearLayout>

3.添加Myadapter.java，用于将数据绑定到 RecyclerView 中进行显示。

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

4.对Fragment2.java(联系人界面)进行修改
创建视图：通过LayoutInflater的inflate方法将布局文件tab2（R.layout.tab2）转换为View对象，并传入了container（父容器）和false（是否将返回的View添加到父容器中）。

初始化RecyclerView：获取到视图中的RecyclerView控件，并将其与成员变量recyclerView关联。

创建数据列表：初始化了一个空的ArrayList，并使用循环向其中添加了9个字符串元素。

创建适配器并设置给RecyclerView：实例化了MyAdapter适配器，并将上下文和数据列表传入构造函数。然后将适配器设置给RecyclerView。

设置RecyclerView布局管理器：创建LinearLayoutManager布局管理器的实例manager，并将其方向设置为垂直。最后将布局管理器设置给RecyclerView。
 

package com.example.myapplication;
 
import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Bundle;
 
import androidx.fragment.app.Fragment;
 
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
 
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
import java.util.ArrayList;
import java.util.List;
 
 
 
public class Fragment2 extends Fragment{   //继承自Fragment类的Fragment3类。在该类中，重写了onCreateView方法用于创建视图
    private RecyclerView recyclerView;
    private List<String> list= new ArrayList<>();
    private Context context;
    private Myadapter myadapter;
 
    @SuppressLint("MissingInflatedId")
    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){
        View view=inflater.inflate(R.layout.tab2,container,false);
        context=view.getContext();
        recyclerView=view.findViewById(R.id.recycleview);
        list=new ArrayList();
        for (int i=0; i<9;i++)
        {
            list.add("这是第"+i+"行数据");
        }
        myadapter = new Myadapter(context,list);
        recyclerView.setAdapter(myadapter);
        LinearLayoutManager manager=new LinearLayoutManager(context);
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);
 
        return view;
 
    }
}

界面展示：

八、项目总结

  类似微信界面的Android应用开发项目是一个复杂而令人兴奋的任务，旨在提供用户一个全面的社交平台和即时通信工具。在这个项目中，我们采用了Android Studio作为开发工具，使用了Activity、XML、Fragment、RecyclerView等技术来实现各种功能。以下是该项目的总结，总结包括项目的目标、关键功能、技术选择、挑战和未来展望。

技术选择：在项目中，我们选择了一系列关键技术来实现应用的功能：

1. Android Studio：作为主要开发工具，Android Studio提供了一个强大的开发环境，用于构建Android应用。

2. Activity、XML和Fragment：我们使用Activity来管理应用的不同界面，XML用于定义布局，Fragment用于管理每个Tab页的内容。

3. RecyclerView：RecyclerView用于实现列表效果，允许用户浏览消息、朋友圈帖子和联系人列表。

4. Retrofit：我们使用Retrofit库来处理与服务器的HTTP通信，从服务器获取数据和发送请求。

5. Firebase：Firebase用于实现用户认证、实时数据库和推送通知，为应用提供了基础的后端支持。

6. WebRTC：WebRTC技术用于实现语音通话和视频通话功能。

挑战：在项目开发过程中，我们遇到了一些挑战：

1. 多平台兼容性：确保应用在不同Android版本和设备上具有良好的兼容性需要付出不小的努力。

2. 安全性和隐私：实施安全措施和隐私保护是一个复杂的任务，需要确保用户数据的安全性。

3. 实时通信：实现高质量的语音通话和视频通话需要克服网络和性能方面的挑战。

4. 用户体验：为了提供出色的用户体验，需要不断优化应用的性能和界面设计。

总之，类似微信界面的Android应用开发项目代表了一个令人兴奋的技术挑战，旨在提供广泛的社交和通信功能。通过不断的改进和扩展，这个应用可以成为一个强大的社交平台，满足用户的需求并为他们提供有价值的在线体验。

九、仓库链接

jiangge/zj - Gitee.com