AS-类微信界面的制作

szf111111

已于 2023-10-13 21:54:29 修改

阅读量82

点赞数 1

文章标签：微信 gitee

于 2023-10-08 21:26:22 首次发布

本文链接：https://blog.csdn.net/m0_63330153/article/details/133689500

版权

作业目标：

做出一个类似微信的界面框架，要求点击下方四个底部部件可以进行页面之间的切换，在任一tab页中实现列表效果。

技术说明：

activity

xml

fragment

关键代码解析：

实验思路：

该页面主要分为上中下三个部分，底部的bottom.xml和顶部的top.xml是不变的，主要是中间部分会随着用户的点击而进行切换

实验内容：

1.xml文件的编写

1.需要的图片放到drawable目录下面

2.进行top.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"
    android:background="@color/black">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:text="微信"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="40sp" />
</LinearLayout>

3.bottom的创建

其本质就是一个图片下面加文字，同样的创建四个，调整好布局就可以了

效果如下：

代码如下：

<?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">

    <LinearLayout
        android:id="@+id/llayout11"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#000000"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView11"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:src="@drawable/a"/>

        <TextView
            android:id="@+id/textView11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="聊天"
            android:textColor="#ffffff"
            android:textSize="30sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/llayout22"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/black"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView22"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:src="@drawable/b" />

        <TextView
            android:id="@+id/textView22"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="联系人"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/llayout33"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/black"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView33"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:src="@drawable/c" />

        <TextView
            android:id="@+id/textView33"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="位置"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/llayout44"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/black"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView44"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:src= "@drawable/d" />

        <TextView
            android:id="@+id/textView44"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="设置"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>
</LinearLayout>

4.中间部分

其实中间部分就是一段文字，我们要创建四个用以切换，这里展示一个，其他三个以此类推，只有文字内容有点区别，创建四个xml文件然后进行编辑

效果如下：

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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=".Fragment1">

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

</FrameLayout>

5.main.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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

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

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


</LinearLayout>

2.java文件的编写

创建四个fragment

代码如下：

package com.example.myapplication;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

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


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

注意这里R.layout.tab1这里，四个是不一样的，R.layout.后面的内容与你中间页面的命名有关

Mainactivity的编写

1.初始化：将fragment加入到MainActivity的布局中

public void inital() {

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

    }

2.编写隐藏函数，编写隐藏函数的目的就是中间显示一个文字，隐藏其他三个

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

3.编写show函数

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

4.onclick事件：点击切换中间界面

 @Override
    public void onClick(View view) {
        fragmenthide();
        if (view.getId()==R.id.llayout11){
            fragmentshow(fragment1);
        }else if (view.getId()==R.id.llayout22){
            fragmentshow(fragment2);
        }else if (view.getId()==R.id.llayout33){
            fragmentshow(fragment3);
        }else if(view.getId()==R.id.llayout44){
            fragmentshow(fragment4);
        }
    }

3.Recycleview的编写

在Fragment1中修改，在微信界面显示列表

先初始化定义一些变量recyclerView，list，context， myadapter

private RecyclerView recyclerView;
private List<String> list;
private Context context;
private  myadapter myadapter;

在onCreateView（）函数底下写入适配器需要的一些参数和数据：

    View view=inflater.inflate(R.layout.tab1,container,false);
        context=view.getContext();
        recyclerView=view.findViewById(R.id.tab1);
        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;

在Fragment1写initData()来定义需要输出的文字(可自定义改成你想要的)：

 private void initial() {
        list.add("算法");
        list.add("分析");
        list.add("应用");
        list.add("计算");
        list.add("网络");
        list.add("安全");
        list.add("病毒");
        list.add("防护");
        list.add("技术");
        list.add("ending~");
    }

新建一个名叫myadapter的类来初始化定义适配器：

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Bundle;

import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.DividerItemDecoration;
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;


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;
import java.util.zip.Inflater;

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

写完后运行结果如下：

总体效果如下：

实验心得：

如果说你得到了上面和我一样的实验结果，那么恭喜你完结撒花啦，但是如果你出现小问题的话，一定要耐心仔细地解决，代码很多，出错的可能性很大，大家一定要耐心一点。这也是我第一次利用as进行类微信的界面设计，使我对fragment，xml，layout的编写有了更加深刻的理解，难点其实就是在于怎么实现中间界面的跳转，as的提词器很好用，也鼓励了我勇敢大胆的去试错。

下面是我的源代码地址：https://gitee.com/shao-zhenfeng/as-weichat.git