作业目标
设计一个app的门户框架，实现3-4个tab切换效果，并在任一tab页中实现列表效果。
开发技术
layout xml、各种控件、监听onClick、fragment、recyclerView
思路分析
类微信主界面分为上中下三个部分，分别使用一个xml文件写好内容，再用一个mainlayout.xml文件把它们包含进去；
微信主界面中间部分由四个tab叠加，再用java文件实现界面的隐藏、切换和显示；
最后选择在tab1界面显示列表数据，所以把tab1.xml修改成含有recyclerView的界面，增加一个item.xml为列表数据布局，并修改fragment1.java文件以实现列表数据展示效果。
设计过程
一、设计app门户框架，实现界面切换
1.布局设计（xml部分）
分为三个部分：标题栏top，底部按钮选择栏button，中间主体部分tab
(1)标题栏
创建top.xml，用linearLayout(vertical)布局，添加TextView控件，在代码区改变字体大小位置颜色等属性。
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:layout_editor_absoluteX="34dp"
tools:layout_editor_absoluteY="0dp">
<TextView
android:layout_width="match_parent"
android:layout_height="64dp"
android:background="@color/black"
android:backgroundTint="@color/design_default_color_on_secondary"
android:rotationX="0"
android:shadowColor="@color/white"
android:text="微信"
android:gravity="center"
android:textColor="@color/white"
android:textColorHighlight="@color/black"
android:textColorHint="@color/black"
android:textSize="48sp" />
</LinearLayout>
（2）底部按钮选择栏
设置一个水平放置的LinearLayout，在它的下面放四个垂直放置的LinearLayout，然后修改属性设置各个按钮的布局，再添加onclick连接java代码片段以实现切换页面。
四个垂直部分内容类似，故只呈现一个按钮部件的代码：
<LinearLayout
android:id="@+id/chat"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="onClick"
android:orientation="vertical">
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:contentDescription="@string/app_name"
android:scaleType="centerInside"
android:src="@android:drawable/stat_notify_chat" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="聊天"
android:textColor="#000000"
android:textSize="20dp" />
</LinearLayout>
（3）中间部分
通过一个xml文件将标题栏部分和底部按钮选择栏包含进去，再往这两个文件中间添加一个content部分，将四个tab压入中间的主体部分。
<include
layout="@layout/top"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</FrameLayout>
<include
layout="@layout/button"
android:layout_width="match_parent"
android:layout_height="wrap_content" />效果图：
四个tab的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=".fragment2">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="这是联系人界面"
android:textSize="35sp"/>
</FrameLayout>2.java部分
xml部分只实现了一个简单的框架，并不能实现界面切换的功能，接下来java文件要包括四个代码部分：
（1）点击监听部分onclick
（2）将四个tab压入content里面的代码部分
（3）将四个卡片隐藏起来的代码部分
（4）点击时展示的代码部分
首先导入四个中间tab卡片到主体界面，需要先创建各个界面的fragment对象并创建一个管理对象manager
fragment1=new fragment1();
fragment2=new fragment2();
fragment3=new fragment3();
fragment4=new fragment4();
manager=getSupportFragmentManager();新建一个initial函数给fragment页面初始化，在该函数中用manager把4个fragment变量添加到mainlayout文件中的中间主体部分
public void initial(){
transaction=manager.beginTransaction()
.add(R.id.id_content,fragment1)
.add(R.id.id_content,fragment2)
.add(R.id.id_content,fragment3)
.add(R.id.id_content,fragment4)
.commit();
}编写一个showfragment函数，实现在点击四个部件时显示其所代表的界面的功能
private void showfragment(Fragment fragment){
transaction=manager.beginTransaction()
.show(fragment)
.commit();
}切换界面时需隐藏上一个界面再展示所需界面，故编写函数fragmentHide把所有的fragment界面隐藏掉
public void fragmentHide(){
transaction=manager.beginTransaction()
.hide(fragment1)
.hide(fragment2)
.hide(fragment3)
.hide(fragment4)
.commit();
}对底部选择栏的四个控件进行监听，并根据监听得到的结果调用fragment界面
linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);public void onClick(View view){
fragmentHide();
if(view.getId()==R.id.chat)
{
showfragment(fragment1);
}
else if (view.getId()==R.id.friend) {
showfragment(fragment2);
}
else if (view.getId()==R.id.share) {
showfragment(fragment3);
}
else if(view.getId()==R.id.setting) {
showfragment(fragment4);
}
}最开始直接显示聊天界面
showfragment(fragment1);3.结果展示
二、在任一tab页中实现列表效果
1.创建item.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">
<TextView
android:id="@+id/textView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView"
android:textSize="35sp" />
</LinearLayout>
2.创建Myadapter.java文件
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.textView5);
}
}
}
3.我选择在tab1里面显示列表数据，故修改tab1.xml文件和fragment1.java文件如下：
<?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=".fragment1">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycleview"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
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 fragment1 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.tab1, container, false);
recyclerView = view.findViewById(R.id.recycleview);
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;
}
}
4.结果展示：
三、总结
这次作业我是分三次完成的。第一次完成了微信主界面的设计，在这过程中我学会了最基础的界面各种布局形式，还学会了多个控件的使用，我遇见了两个问题：第一个问题就是底部按钮控件分布不均，然后我把LinearLayout里面的layout_width改为match_parent就好了，第二个问题就是不知道怎么把上中下各部分放在一个界面显示，后来我学会用include把它们包含进一个xml文件中来解决该问题；第二次完成了各界面的切换，这次就是要写4个fragment和1个MainActivity的java文件来实现该功能，在该过程中发现switch语句报错，无法实现切换，然后就换用if-else语句来实现切换功能，最后成功；第三次就实现在一个界面中展示列表数据功能，增加一个item界面，然后我把tab1.xml和fragment1.java的文件实现了部分修改，最后成功实现在聊天界面显示列表数据。
四、源代码
4803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
