AS-制作简易微信界面

蛮蛮75

已于 2023-10-16 19:36:16 修改

阅读量111

点赞数 1

文章标签：微信 gitee

于 2023-10-16 10:46:47 首次发布

本文链接：https://blog.csdn.net/qq_74606611/article/details/133848779

版权

#设计目标

利用 android studio 制作一个类微信页面的框架，包含上中下布局，四个 tab 页面，点击底部按钮实现跳转功能，同时需要在任意一个 tab 页中实现列表效果。

#开发技术

Android Studio
Pixel 3a API 34
activity
xml
fragment

#框架实现及代码

1、将botton所需的图片导入drawable目录下

2、top栏设计

代码如下：

<?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/textView"
        android:layout_width="wrap_content"
        android:layout_height="55dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="微信"
        android:textColor="@color/black"
        android:textSize="30sp" />

</LinearLayout>

3、bottom栏设计

代码如下：

<?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="match_parent"
    android:orientation="horizontal"
    >
    <LinearLayout
        android:id="@+id/talk"
        android:layout_width="58dp"
        android:layout_height="121dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="107dp"
            android:layout_height="233dp"
            android:layout_weight="1"
            android:src="@drawable/message" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="消息"
            android:textColor="@color/black"
            android:textSize="25sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/book"
        android:layout_width="46dp"
        android:layout_height="121dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="261dp"
            android:layout_weight="1"
            android:src="@drawable/tele"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="通讯录"
            android:textColor="@color/black"
            android:textSize="25sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/look"
        android:layout_width="60dp"
        android:layout_height="123dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="261dp"
            android:layout_weight="1"
            android:src="@drawable/discover" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现"
            android:textColor="@color/black"
            android:textSize="25sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/me"
        android:layout_width="49dp"
        android:layout_height="121dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/me" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我"
            android:textColor="@color/black"
            android:textSize="25sp" />
    </LinearLayout>

</LinearLayout>

4、tab页面设计

用户点击时分别显示的四个页面的设计大致相同，如图

代码如下：

<?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=".BlankFragment1">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是微信聊天界面"
        android:textSize="35sp"  />

</FrameLayout>

<?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=".BlankFragment2">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是通讯录界面"
        android:textSize="35sp" />

</FrameLayout>

<?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=".BlankFragment3">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是发现界面"
        android:textSize="35sp" />

</FrameLayout>

<?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=".BlankFragment4">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="这是我的界面"
        android:textSize="35sp"/>

</FrameLayout>

5、activity-main

通过activity-main文件将top以及bottom文件结合到一起。

页面如图：

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

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

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

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

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

6、创建fragment类

需要运用fragmentmanager 来对四个不同的 tab 进行控制，让他们叠加在一起的同时，实现在不同的点击动作发生时进行一个 tab 的显示及其余三个的隐藏，以此达到点击切换的效果。由于有四个事件，因此我们需要创建三个fragment。

代码如下：

BlankFragment1

package com.example.myapplication;

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 BlankFragment1 extends Fragment {

    private View view;
    private Myadapter myadapter;
    private RecyclerView recyclerView;
    private List<String> list1;
    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            view = inflater.inflate(R.layout.activity_recycleview, container, false);
            recyclerView = view.findViewById(R.id.recyclerview);
            list1 = new ArrayList<>();
            for (int i= 0; i < 9; i++)
            {
                list1.add("这是第" + i + "行数据");
            }
            myadapter = new Myadapter(view.getContext(), list1);
            LinearLayoutManager manager = new LinearLayoutManager(view.getContext());
            manager.setOrientation(LinearLayoutManager.VERTICAL);
            recyclerView.setLayoutManager(manager);
            recyclerView.setAdapter(myadapter);
            return view;
    }
}

BlankFragment2

package com.example.myapplication;

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

import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.RecyclerView;

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

import java.util.List;

public class BlankFragment2 extends Fragment {
    private RecyclerView recyclerView;
    private List<String> list;
    private Context context;
    private Myadapter myadapter;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_blank_fragment2, container, false);
        context=view.getContext();


        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_blank_fragment2, container, false);
    }
}

BlankFragment3

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 BlankFragment3 extends Fragment {

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

BlankFragment4

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 BlankFragment4 extends Fragment {

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

7、MainActivity

主函数主要实现功能是监听onlick、初始化initial、隐藏四个tab界面fragmentHide、展示一个tab界面showfragment。

#onlick函数

    public void onClick(View view) {
        fragmentHide();
        int id = view.getId();
        if (id == R.id.talk) {
            showfragment(fragment1);
        } else if (id == R.id.book) {
            showfragment(fragment2);
        } else if (id == R.id.look) {
            showfragment(fragment3);
        } else {
            showfragment(fragment4);
        }
    }

#initial函数

public void inital(){
        transaction=manager.beginTransaction()
                .add(R.id.content,fragment1)
                .add(R.id.content,fragment2)
                .add(R.id.content,fragment3)
                .add(R.id.content,fragment4)
                .commit();
    }

#fragmentHide函数

    public void fragmentHide(){
        transaction=manager.beginTransaction()
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4)
                .commit();
    }

#showfragment函数

    private void showfragment(Fragment fragment) {
        transaction=manager.beginTransaction()
                .show(fragment)
                .commit();
    }

#MainActivity.java完整代码

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;

import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity  implements View.OnClickListener
{

    LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
    Fragment fragment1,fragment2,fragment3,fragment4;
    FragmentManager manager;
    int transaction;

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

        linearLayout1=findViewById(R.id.talk);
        linearLayout2=findViewById(R.id.book);
        linearLayout3=findViewById(R.id.look);
        linearLayout4=findViewById(R.id.me);
        manager=getSupportFragmentManager();

        fragment1=new BlankFragment1();
        fragment2=new BlankFragment2();
        fragment3=new BlankFragment3();
        fragment4=new BlankFragment4();

        inital();
        fragmentHide();
        showfragment(fragment1);

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


    }
    public void onClick(View view) {
        fragmentHide();
        int id = view.getId();
        if (id == R.id.talk) {
            showfragment(fragment1);
        } else if (id == R.id.book) {
            showfragment(fragment2);
        } else if (id == R.id.look) {
            showfragment(fragment3);
        } else {
            showfragment(fragment4);
        }
    }
    private void showfragment(Fragment fragment) {
        transaction=manager.beginTransaction()
                .show(fragment)
                .commit();
    }
    public void inital(){
        transaction=manager.beginTransaction()
                .add(R.id.content,fragment1)
                .add(R.id.content,fragment2)
                .add(R.id.content,fragment3)
                .add(R.id.content,fragment4)
                .commit();
    }

    public void fragmentHide(){
        transaction=manager.beginTransaction()
                .hide(fragment1)
                .hide(fragment2)
                .hide(fragment3)
                .hide(fragment4)
                .commit();
    }
}

8、recycleview的实现

在layout下新建一个item.xml，新建一个textview

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    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" />
</LinearLayout>

在BlankFragment1初始化定义变量 recyclerView，list，context， myadapter，然后onCreateView（）函数底下写入适配器需要的一些参数和数据。

代码具体为BlankFragment1中的代码。

#创建Myadapter类

初始化变量，创造构造函数。

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 myholder=new Myholder(view);
        return myholder;
    }
    @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);
        }

    }
}

9、结果展示

10、总结

在本次实验中，我学会利用 AS 进行制作简易的微信界面，掌握 fragment，layout，xml 和相关控件的知识，实现页面的跳转功能，和 recycleview 实现列表功能，在实验中我在一直被switch-case无法运行困扰，在查询资料后我发现用if-else就可以解决，并且AS可以便捷的实现两者的相互转换；在老师的帮助下解决了版本不兼容的问题，成功实现代码的运行；由于只能在recycleview里显示一行数据，最后发现在item里要将match_parent改为wrap_content。

11、源代码来源

fuzengyu/fzy (github.com)

蛮蛮75

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
AS-制作简易微信界面

在本次实验中，我学会利用 AS 进行制作简易的微信界面，掌握 fragment，layout，xml 和相关控件的知识，实现页面的跳转功能，和 recycleview 实现列表功能，在实验中我在一直被switch-case无法运行困扰，在查询资料后我发现用if-else就可以解决，并且AS可以便捷的实现两者的相互转换；在老师的帮助下解决了版本不兼容的问题，成功实现代码的运行。
复制链接

扫一扫