hubu—类微信界面android开发

一、实现目标与设计思路

功能要求：

1、请根据课程内容设计一个app的门户框架，需要实现3-4个tab切换效果；本功能要求需要的技术为：activity、xml,fragment
2、在任一tab页中实现列表效果，本功能的实现需要使用recycleview;

开发技术：android studio

设计过程：

类微信界面主要分为上中下三个部分，其中上下为 top.xm l和 bottom.xml 为基础信息显示。

主界面中间部分由4个页面叠加，在进行选择内容时变换界面

后续在一个界面中替换内容，替换成列表

二、设计流程

首先尝试实现仿微信界面：

1.导入相关资源

2.设计上中下三部分，include组合

上：

android:id="@+id/top"，为组件设置一个资源id，在java文件中可以通过findViewById(id)找到该组件。

android:layout_width=“wrap_content”，布局的宽度，通常不直接写数字，用wrap_content（组件实际大小），fill_parent或者match_parent填满父容器。

android:layout_height=“wrap_content”，布局的高度，参数同上。

android:layout_weight=“1”，用来等比例地划分区域。

android:gravity=“center”,表示textView中的文字相对于TextView的对齐方式。

android:text=“微信”,要显示的文字。

android:textColor="@color/white"，设置文字的颜色。

android:textSize=“28dp” />，设置文字的大小。

<?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:background="#26A326">

    <TextView
        android:id="@+id/top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="微信"
        android:textColor="@color/white"
        android:textSize="28dp" />

</LinearLayout>

下：

代码解析：

外部LinearLayout：android:orientation=“horizontal”，布局中组件的排列方式，有horizontal（水平）和vertical（垂直）两种方式。

内部ImageView：app:srcCompat="@drawable/a"，vector绘制图片的地址。

<?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/tab01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tab1"
            app:srcCompat="@drawable/a"
            />
        <TextView
            android:id="@+id/text1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="微信"
            android:gravity="center"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tab2"
            app:srcCompat="@drawable/b"
            />

        <TextView
            android:id="@+id/text2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="联系人" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/tab3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/c" />

        <TextView
            android:id="@+id/text3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="朋友圈" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tab4"
            app:srcCompat="@drawable/d"
            />
        <TextView
            android:id="@+id/text4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="设置"
            android:gravity="center"/>
    </LinearLayout>



</LinearLayout>

中：有四个布局，仅文字更改

<?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"
    android:orientation="horizontal"
    tools:context=".weixinFragment"
    >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50dp"
        android:text="这是微信界面"
        android:gravity="center"
        />
</LinearLayout>

组合：

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity"
    >

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

    <include layout="@layout/buttom" />
</LinearLayout>

最终造型：

3.java文件编写

创建4个fragment类，分别对应4个按钮界面切换：

编写监听类,4个一样，仅名字修改：

系统会在res-layout目录下生成四个对应的xml文件（可自主命名），对应bottom的四个按钮

package com.example.weixin;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;

public class contactFragment extends Fragment{
    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){

        return inflater.inflate(R.layout.second,container,false);
    }
}

创建4个Frangment变量、1个管理对象FragmentManager变量 、4个LinearLayout变量对象：

 Fragment weixinFragment,contactFragment,friendFragment,settingFragment;
      FragmentManager fm;

     LinearLayout tab01,tab02,tab03,tab04;

新建一个inital函数用以给Fragment页面初始化，在此函数中，将此前定义个4个Fragment变量使用fragmentManager添加到main文件中的中间主体部分的布局中：

public void initialfragment(){
        FragmentTransaction ft= fm.beginTransaction()  //重启事件
                                .add(androidx.appcompat.R.id.content,weixinFragment)
                                .add(androidx.appcompat.R.id.content,contactFragment)
                                .add(androidx.appcompat.R.id.content,friendFragment)
                                .add(androidx.appcompat.R.id.content,settingFragment)
                                .hide(weixinFragment)
                                .hide(contactFragment)
                                .hide(friendFragment)
                                .hide(settingFragment)
                                .show(weixinFragment);
        ft.commit();

在点击四个部件时需要展示其所代表的界面，故编写新的一个函数showfragment，展示fragment界面:

private void show(int i) {
        FragmentTransaction transaction = fm.beginTransaction();
        Hide(transaction);
        switch (i){
            case 1:transaction.show(weixinFragment);break;
            case 2:transaction.show(contactFragment);break;
            case 3:transaction.show(friendFragment);break;
            case 4:transaction.show(settingFragment);break;
            default:break;
        }
        transaction.commit();
    }

而在切换界面时，需要对原先的界面进行隐藏之后再展示所需界面，故编写一个新的函数fragmentHide，将所有的fragment界面都隐藏:

private void Hide(FragmentTransaction ft) {
        ft.hide(weixinFragment)
          .hide(friendFragment)
          .hide(contactFragment)
          .hide(settingFragment);
    }

仅对底部选择栏的四个控件进行监听，并根据监听所得到的结果调用fragment界面

事件触发代码：

tab01.setOnClickListener(this);  //将当前的 Activity（或 Fragment）实例设置为 tab01 的点击事件监听器
        tab02.setOnClickListener(this);
        tab03.setOnClickListener(this);
        tab04.setOnClickListener(this);

onclick函数：

public void onClick(View view) {
//        switch(view.getId()) {
//            case R.id.tab01: show(1);reset();tab1.setImageResource(R.drawable.a);break;
//            case R.id.tab02: show(2);reset();tab2.setImageResource(R.drawable.b);break;
//            case R.id.tab03: show(3);reset();tab3.setImageResource(R.drawable.c);break;
//            case R.id.tab04: show(4);reset();tab4.setImageResource(R.drawable.d);break;
//            default:break;
//        }
        if(view.getId()==R.id.tab01) show(1);
        if(view.getId()==R.id.tab02) show(2);
        if(view.getId()==R.id.tab03) show(3);
        if(view.getId()==R.id.tab04) show(4);
    }

全貌：

package com.example.weixin;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
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 {
      Fragment weixinFragment,contactFragment,friendFragment,settingFragment;
      FragmentManager fm;

     LinearLayout tab01,tab02,tab03,tab04;

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

        //列表
        tab01 = findViewById(R.id.tab01);
        tab02 = findViewById(R.id.tab02);
        tab03 = findViewById(R.id.tab03);
        tab04 = findViewById(R.id.tab04);

        weixinFragment = new weixinFragment();
        contactFragment = new contactFragment();
        friendFragment = new friendFragment();
        settingFragment = new settingFragment();

        fm=getSupportFragmentManager();
        FragmentTransaction ft=fm.beginTransaction();

        initialfragment();


        tab01.setOnClickListener(this);  //将当前的 Activity（或 Fragment）实例设置为 tab01 的点击事件监听器
        tab02.setOnClickListener(this);
        tab03.setOnClickListener(this);
        tab04.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
//        switch(view.getId()) {
//            case R.id.tab01: show(1);reset();tab1.setImageResource(R.drawable.a);break;
//            case R.id.tab02: show(2);reset();tab2.setImageResource(R.drawable.b);break;
//            case R.id.tab03: show(3);reset();tab3.setImageResource(R.drawable.c);break;
//            case R.id.tab04: show(4);reset();tab4.setImageResource(R.drawable.d);break;
//            default:break;
//        }
        if(view.getId()==R.id.tab01) show(1);
        if(view.getId()==R.id.tab02) show(2);
        if(view.getId()==R.id.tab03) show(3);
        if(view.getId()==R.id.tab04) show(4);
    }
    private void show(int i) {
        FragmentTransaction transaction = fm.beginTransaction();
        Hide(transaction);
        switch (i){
            case 1:transaction.show(weixinFragment);break;
            case 2:transaction.show(contactFragment);break;
            case 3:transaction.show(friendFragment);break;
            case 4:transaction.show(settingFragment);break;
            default:break;
        }
        transaction.commit();
    }

    public void initialfragment(){
        FragmentTransaction ft= fm.beginTransaction()  //重启事件
                                .add(androidx.appcompat.R.id.content,weixinFragment)
                                .add(androidx.appcompat.R.id.content,contactFragment)
                                .add(androidx.appcompat.R.id.content,friendFragment)
                                .add(androidx.appcompat.R.id.content,settingFragment)
                                .hide(weixinFragment)
                                .hide(contactFragment)
                                .hide(friendFragment)
                                .hide(settingFragment)
                                .show(weixinFragment);
        ft.commit();
    }
    private void Hide(FragmentTransaction ft) {
        ft.hide(weixinFragment)
          .hide(friendFragment)
          .hide(contactFragment)
          .hide(settingFragment);
    }

}

final:

至此，仿微信界面制作完成，下面进行列表的制作：

这里我们需要使用到recyclerview,先创造一个界面，将first.xml进行替换：

<?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="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    tools:context=".weixinFragment">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>

同时创建一个textview，作为内容容器填充到recyclerview中去：

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

    <TextView
        android:id="@+id/item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView"
        android:textSize="50sp" />
</LinearLayout>

对weixinfragment的类进行修改：

public class weixinFragment extends Fragment{   //继承自Fragment类的weixinFragment类。在该类中，重写了onCreateView方法用于创建视图
    private RecyclerView recyclerView;
    private List<String> list;
    private Context context;
    private Myadapter myadapter;

    @SuppressLint("MissingInflatedId")
    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){
        View view=inflater.inflate(R.layout.first,container,false);
        context=view.getContext();
        recyclerView=view.findViewById(R.id.recyclerview);
        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;

    }

}

首先，创建一个view对象，从布局文件 R.layout.first 中创建一个视图，并将其添加到container中。

然后通过findViewid确定对象；

根据你提供的代码，创建了一个名为 Myadapter的适配器对象，并将上下文和列表作为参数传递给它。然后使用 recyclerView.setAdapter() 将适配器设置到 recyclerView 上。

接下来，创建了一个 LinearLayoutManager 对象，并将上下文传递给它作为参数。然后使用 setOrientation() 方法将布局方向设置为垂直方向（LinearLayoutManager.VERTICAL）。最后，使用 recyclerView.setLayoutManager() 将布局管理器设置到 recyclerView 上。

这段代码的作用是将适配器和布局管理器与 recyclerView 关联起来，以便在列表中显示数据，并确定列表的布局方向。

Myadapter的编写：

package com.example.weixin;
import android.annotation.SuppressLint;
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.ListAdapter;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;
import java.util.zip.Inflater;

public class Myadapter extends RecyclerView.Adapter<Myadapter.Myholder>{
    Context context1;
    List<String> list1;
    public Myadapter(Context context, List<String> 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.item);
        }
    }
}

至此，完成。

效果图：

三、仓库链接

gitee:https://gitee.com/a5585788/android

github:GitHub - kter123/android