作业1: App门户页面设计与开发

一、作业内容

请根据课程内容设计一个app的门户框架，需要实现3-4个tab切换效果；本功能要求需要的技术为：activity、xml、fragment；在任一tab页中实现列表效果；本功能的实现需要使用recycleview；

二、具体代码内容

（1）编写layout文件

1、activity_main.xml

将LinearLayout布局设置为vertical，然后把top.xml和buttom.xml添加到activity_main1.xml，添加FrameLayout，使页面中间能够显示需要的文本。修改各控件的参数，让FrameLayout布满父布局的所有可用空间。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity1">

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

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

    </FrameLayout>

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

2、fragment.xml

为了表示出用户当前所处的页面，需创建4个不同的fragment.xml文件，分别展示聊天页面、通讯录页面、发现页面、我的页面。

在聊天页面中实现列表效果，需在fragment1.xml中添加一个recyclerView

fragment1.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="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="聊天界面"
        android:textColor="#009688"
        android:textSize="60sp" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="15" />

</LinearLayout>

fragment2.xml

fragment2.xml、fragment3.xml、fragment4.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="match_parent">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="通讯录界面"
        android:textSize="60sp" />
</LinearLayout>

3、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_weight="1"
        android:text="微信"
        android:textAlignment="center"
        android:textColor="@color/white"
        android:textSize="50sp" />

</LinearLayout>

4、bottom.xml

在LinearLayout（vertical）下添加一个imageView和一个textView，将LinearLayout（vertical）复制粘贴3次，生成4个水平的LinearLayout；在imageView中使用自己上传的图片；textView中分别填入“聊天”、“通讯录”、“发现”和“我的”；并为4个LinearLayout及其图片与文本设置各自的id，便于之后调用。

<?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:orientation="horizontal">


    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/jjh" />

        <TextView
            android:id="@+id/textView11"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="聊天"
            android:textSize="30sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/jjh" />

        <TextView
            android:id="@+id/textView12"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="通讯录"
            android:textSize="30sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/jjh" />

        <TextView
            android:id="@+id/textView13"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现"
            android:textSize="30sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayout4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/jjh" />

        <TextView
            android:id="@+id/textView14"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我的"
            android:textSize="30sp" />

    </LinearLayout>

</LinearLayout>

5、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">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_weight="1" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="20"
        android:gravity="center"
        android:text="TextView"
        android:textSize="40sp" />

</LinearLayout>

（2）编写Java文件

创建Fragment类的实例对象，定义FragmentManager对Fragment进行控制，以及用于监听的变量。

    Fragment fragment1,fragment2,fragment3,fragment4;
    FragmentManager fm;
    LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

onCreate()函数：从activity_main1.xml文件中，添加需要找到的LinearLayout，然后初始化fragment实例对象并且调用fragment页面的展示函数fragmentshow()，最后用setOnClickListener()对添加的4个linearlayout作全局的点击监听。

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main1);

        linearLayout1=findViewById(R.id.LinearLayout1);
        linearLayout2=findViewById(R.id.LinearLayout2);
        linearLayout3=findViewById(R.id.LinearLayout3);
        linearLayout4=findViewById(R.id.LinearLayout4);

        fm=getSupportFragmentManager();
        fragment1=new Fragment1();
        fragment2=new Fragment2();
        fragment3=new Fragment3();
        fragment4=new Fragment4();

        initial();
        fragmentshow(fragment1);

        // 在当前类有全局的点击监听
        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);

    }

fragmenthide()函数：为了分别显示4个页面，需要隐藏fragment中定义的content。

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

fragmentshow()函数：使用FragmentTransaction来管理每个fragment的显示。

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

initial()函数：一个初始化函数，把4个fragment放到ft中，实现页面的切换。

    private void initial() {
        // 把fragment加入content
        FragmentTransaction ft =fm.beginTransaction()
                .add(R.id.content,fragment1)
                .add(R.id.content,fragment2)
                .add(R.id.content,fragment3)
                .add(R.id.content,fragment4);
        // 事务的完整性以提交commit为准
        ft.commit();
    }

onClick()函数：用于监听被点击的图标，并根据此显示对应页面的内容。

    public void onClick(View view) {
        // 获取控件变量的id，然后决定点击监听
        if (view.getId()==R.id.LinearLayout1){
            fragmentshow(fragment1);
        }
        if (view.getId()==R.id.LinearLayout2){
            fragmentshow(fragment2);
        }
        if (view.getId()==R.id.LinearLayout3){
            fragmentshow(fragment3);
        }
        if (view.getId()==R.id.LinearLayout4){
            fragmentshow(fragment4);
        }
 
    }

Album.java

存放列表的每张图片和每个文件，使列表能够通过适配器存入fragment1

package com.example.myapplication;
public class Album {
    private String name;
    private int imageid;
    public Album(String name,int imageid){
        this.name=name;
        this.imageid=imageid;
    }
 
    public String getName() {
        return name;
    }
 
    public int getImageid() {
        return imageid;
    }
}

Myadapter2.java代码

package com.example.myapplication3;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class Myadapter2 extends RecyclerView.Adapter<Myadapter2.Viewholder> {
    private List<Album> list1;

    // 传入值
    public Myadapter2(List list) {
        list1=list;
    }

    @NonNull
    @Override
    public Viewholder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view=LayoutInflater.from(parent.getContext()).inflate(R.layout.item1,parent,false);
        Viewholder viewholder=new Viewholder(view);
        return viewholder;
    }

    @Override
    public void onBindViewHolder(@NonNull Viewholder holder, int position) {
        Album album=list1.get(position);
        // 获取专辑的名称和封面图片
        holder.textView.setText(album.getName());
        holder.imageView.setImageResource(album.getImageid());
    }

    @Override
    public int getItemCount() {
        return list1.size();
    }

    // 内嵌类 holder类似一个行指针
    static class Viewholder extends RecyclerView.ViewHolder{
        View view;
        // 存放专辑名称
        TextView textView;
        // 存放专辑封面
        ImageView imageView;

        public Viewholder(@NonNull View itemView) {
            super(itemView);
            view=itemView;
            // item1.xml中的控件对象
            textView=itemView.findViewById(R.id.textView4);
            imageView=itemView.findViewById(R.id.imageView);
        }
    }
}

三、运行结果：

聊天界面

通讯录界面

发现界面

我的界面

四、实验心得

实验心得：App门户页面设计与开发

在这次的实验中，我完成了一个App的门户页面设计与开发的任务。通过这个实验，我学到了很多关于Android开发的知识和技能，并且对于activity、xml、fragment和recycleview有了更深入的理解。在实验中，我首先进行了App的门户页面的设计。我使用了TabLayout和ViewPager来实现tab切换效果，并且创建了多个Fragment来实现不同的tab页面。通过设置ViewPager的适配器，我成功将Fragment与tab标签关联起来，实现了tab切换的效果。

在实验过程中，我遇到了一些问题。比如，在使用RecyclerView时，我遇到了数据显示不全的问题。通过查找资料和调试代码，我最终找到了问题所在，并成功解决了这个bug。这个过程让我学会了如何通过调试和查找资料来解决问题，提高了我的问题解决能力。

通过完成这个实验，我不仅学到了很多关于Android开发的知识和技能，还提高了自己的问题解决能力。我觉得这个实验对于我的学习和成长都有很大的帮助。我会继续努力学习和实践，提升自己在Android开发方面的能力。

五、源码

yidongkaifazuoye: 创建新仓库 (gitee.com)