Android Studio 制作类似微信界面

SJCNB

于 2023-10-16 15:04:43 发布

阅读量210

点赞数 1

文章标签： gitee

本文链接：https://blog.csdn.net/SJCNB/article/details/133858140

版权

# 作业目标

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

# 技术说明

Android Studio
Pixel 3a API 34
activity
xml
fragment

# 关键代码：
# 基本框架实现

准备工作：导入所需图片到 drawable 目录下：

基本框架 xml 分为四部分：top，bottom，四个 tab 页面和一个 main_activity
# 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="50dp"
    android:background="@color/black"
    android:gravity="center"
    android:orientation="vertical">

# 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="wrap_content"
    android:orientation="horizontal">

</LinearLayout>

# tab 页面

在用户点击页面时会显示对应的页面，这里只展示一个，其余三个类似

如图：

代码：

xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragment1">

android:id="@+id/tab01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="西红柿炒番茄"
android:textSize="35sp" />

# main-activity

通过 main_activity 文件将 top,bottom 两个文件添加到一起

如图：

代码：

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

android:layout_width="match_parent"
android:layout_height="wrap_content"/>

android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">

android:layout_width="match_parent"
android:layout_height="wrap_content" />

# 切换效果的实现

要想实现点击切换的效果，需要 fragmentmanager 来对四个不同的 tab 进行控制，让他们叠加在一起的同时，实现在不同的点击动作发生时进行一个 tab 的显示及其余三个的隐藏。
# fragment 类

创建四个 fragment，对应四个事件，这里只展示一个，其余三个类似

如图：

代码：

package com.example.mychat;

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.tab01, container, false);
}
}

# MainActivity

主函数主要的功能是实现

1. 监听部分 onclick
2. 初始化 initial 将四个 frgment 压入 content
3. 隐藏四个 tab 界面 fragmenthide
4. 展示一个 tab 界面 fragmentshow

# onclick 函数

[注] 在写 onclick 函数前要对 tab 四个页面监听，根据结果返回 fragment 界面

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

设置监听后，对主函数也要进行修改

1

public class MainActivity extends AppCompatActivity implements View.OnClickListener{}

代码：

@Override
public void onClick(View view) {
fragmenthide();
if (view.getId()==R.id.chat){
fragmentshow(fragment1);
}else if (view.getId()==R.id.friend){
fragmentshow(fragment2);
}else if (view.getId()==R.id.finding){
fragmentshow(fragment3);
}else if(view.getId()==R.id.setting){
fragmentshow(fragment4);
}
}

# initial 函数

代码：

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

}

# fragmenthide 函数

代码：

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

# fragmentshow 函数

代码：

public void fragmentshow(Fragment fragment) {

FragmentTransaction transaction = fm.beginTransaction()
.show(fragment);
transaction.commit();
}

# MainActivity.java 所有代码

package com.example.mychat;

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 fragment1,fragment2,fragment3,fragment4;
FragmentManager fm;
LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

@Override
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();
fm = getSupportFragmentManager();

linearLayout1 = findViewById(R.id.chat);
linearLayout2 = findViewById(R.id.friend);
linearLayout3 = findViewById(R.id.finding);
linearLayout4 = findViewById(R.id.setting);

initial();
fragmenthide();
fragmentshow(fragment1);
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);
}

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

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

}

@Override
public void onClick(View view) {
fragmenthide();
if (view.getId()==R.id.chat){
fragmentshow(fragment1);
}else if (view.getId()==R.id.friend){
fragmentshow(fragment2);
}else if (view.getId()==R.id.finding){
fragmentshow(fragment3);
}else if(view.getId()==R.id.setting){
fragmentshow(fragment4);
}
}

public void fragmentshow(Fragment fragment) {

FragmentTransaction transaction = fm.beginTransaction()
.show(fragment);
transaction.commit();
}
}

# recycleview 的实现

在完成了以上功能后，现在我们需要在任意 tab 页面中实现列表效果（这里我用的是 tab02）

1️⃣在 tab02.xml 页面添加一个 recycleview

2️⃣在 layout 下新建一个 item.xml, 新建一个 textview

3️⃣重写 Fragment2.java 文件

我们先初始化定义一些变量 recyclerView，list，context， myadapter（一个适配器）

private RecyclerView recyclerView;
private List list;
private Context context;
private Myadapter myadapter;

然后我们开始在 onCreateView（）函数底下写入适配器需要的一些参数和数据：

public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState){
View view=inflater.inflate(R.layout.tab02,container,false);
context=view.getContext();
recyclerView=view.findViewById(R.id.recycleview);
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;

}

定义一个 list 用来存放我们需要输出的文字，initData () 是初始化数据的函数。然后初始化 myadapter 适配器，并在底下填入参数。
接下来我们开始写 initData () 来定义需要输出的文字：

private void initial() {
list.add("番茄猪肉");
list.add("番茄鸡肉");
list.add("番茄炒蛋");
list.add("番茄鸡蛋");
list.add("番茄苞豆");
list.add("番茄米饭");
list.add("番茄炒河粉");
list.add("番茄炒米粉");
list.add("番茄三明治");
list.add("番茄香肠");
}

4️⃣创建一个 Myadapter 类

初始化变量和创建构造函数：

Context context1;
List 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);
}
}

# 结果展示

# 总结

本次实验，学会利用 AS 进行制作简易的微信界面，掌握 fragment，layout，xml 和相关控件的知识，实现页面的跳转功能，和 recycleview 实现列表功能
# 源码地址

https://github.com/Drizzle042425/AS