AS 制作简易微信
作业目标
利用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"> <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@color/black" android:gravity="center_horizontal" android:text="微信" android:textColor="@color/white" android:textSize="40sp"></TextView> </LinearLayout>
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 android:id="@+id/chat" android:layout_width="100dp" android:layout_height="80dp" android:contentDescription="@string/app_name" android:onClick="onClick" android:orientation="vertical"> <ImageView android:id="@+id/imageView1" android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/black" app:srcCompat="@drawable/a" /> <TextView android:layout_width="match_parent" android:layout_height="60dp" android:layout_weight="1" android:background="@color/black" android:gravity="center" android:text="微信" android:textColor="@color/white" android:textSize="20dp"/> </LinearLayout> <LinearLayout android:id="@+id/friend" android:layout_width="100dp" android:layout_height="80dp" android:contentDescription="@string/app_name" android:onClick="onClick" android:orientation="vertical"> <ImageView android:id="@+id/imageView2" android:layout_width="match_parent" android:layout_height="51dp" android:background="@color/black" app:srcCompat="@drawable/b" /> <TextView android:layout_width="match_parent" android:layout_height="60dp" android:layout_weight="1" android:background="@color/black" android:gravity="center" android:text="联系人" android:textColor="@color/white" android:textSize="20dp"/> </LinearLayout> <LinearLayout android:id="@+id/finding" android:layout_width="100dp" android:layout_height="80dp" android:contentDescription="@string/app_name" android:onClick="onClick" android:orientation="vertical"> <ImageView android:id="@+id/imageView3" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/black" app:srcCompat="@drawable/c" /> <TextView android:layout_width="match_parent" android:layout_height="60dp" android:layout_weight="1" android:background="@color/black" android:gravity="center" android:text="发现" android:textColor="@color/white" android:textSize="20dp"/> </LinearLayout> <LinearLayout android:id="@+id/setting" android:layout_width="100dp" android:layout_height="80dp" android:contentDescription="@string/app_name" android:onClick="onClick" android:orientation="vertical"> <ImageView android:id="@+id/imageView4" android:layout_width="110dp" android:layout_height="wrap_content" android:background="@color/black" app:srcCompat="@drawable/d" /> <TextView android:layout_width="match_parent" android:layout_height="60dp" android:layout_weight="1" android:background="@color/black" android:gravity="center" android:text="设置" android:textColor="@color/white" android:textSize="20dp"/> </LinearLayout> </LinearLayout>
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=".Fragment1"> <!-- TODO: Update blank fragment layout --> <TextView android:id="@+id/tab01" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="这是微信" android:textSize="35sp" /> </FrameLayout>
main-activity
通过main_activity文件将top,bottom两个文件添加到一起
如图：
代码：
<?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" 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="match_parent" android:layout_height="0dp" android:layout_weight="1"> </FrameLayout> <include layout="@layout/buttom" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout>
切换效果的实现
要想实现点击切换的效果，需要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);
-
设置监听后，对主函数也要进行修改
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<String> 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("nine percent(＾－＾)V");
}
4️⃣创建一个Myadapter类
初始化变量和创建构造函数：
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);
}
}
结果展示
总结
本次实验，学会利用AS进行制作简易的微信界面，掌握fragment，layout，xml和相关控件的知识，实现页面的跳转功能，和recycleview实现列表功能，在实验中我遇到一个头疼的问题，我写完了代码没报错但是允许就是闪退，看了logcat中的报错才知道fragment的类要声明为public，也算是吃一堑长一智啦(＾－＾)！
1679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
