移动开发--设计app门户框架以及在每个tab添加列表效果

留白153

已于 2023-10-30 22:00:19 修改

阅读量103

点赞数

文章标签： gitee

于 2023-10-15 21:13:57 首次发布

本文链接：https://blog.csdn.net/qq_65279045/article/details/133846081

版权

一 . 作业内容：

1、请根据课程内容设计一个app的门户框架，需要实现3-4个tab切换效果--本功能要求需要的技术为：activity、xml、fragment

2、在任一tab页中实现列表效果--本功能的实现需要使用recycleview

二 . 作业目标：

充分消化吸收前段时间对于该课程的教学，并在该过程当中找到问题并解决

三 . 具体步骤：

内容一：设计app（微信）的门户框架

1. 设计框架--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="wrap_content">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/black"
        android:gravity="center"
        android:text="微信"
        android:textColor="@color/white"
        android:textSize="40sp" />
</LinearLayout>

在这个布局文件中，我们定义了一个 LinearLayout，并设置了其宽度（match_parent）和高度（wrap_content），意味着它将填充父容器的宽度，并根据其内容自动调整高度。

在 LinearLayout 中，我们嵌套了一个 TextView（文本视图）。它有一个唯一的标识符（@+id/textView），以便我们可以在代码中引用它。TextView 的宽度设置为 wrap_content，以适应文本内容的宽度。高度设置为 wrap_content，以根据文本内容自动调整高度。

TextView 的背景颜色设置为黑色（@color/black），文本内容设置为“微信”，字体颜色设置为白色（@color/white），字体大小设置为40sp。gravity 属性被设置为 center，将文字在文本视图中居中显示。

这个布局文件描述了一个简单的界面元素，用于显示黑色背景、白色字体的“微信”文本。你可以将这个布局文件放入 Android 项目的布局文件夹中，然后通过代码或其他方式加载和使用它。

效果图：

2.设计框架--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:background="@color/black"
    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/imageView11"
            android:layout_width="115dp"
            android:layout_height="109dp"

            android:layout_weight="1"
            app:srcCompat="@android:drawable/ic_menu_compass" />

        <TextView
            android:id="@+id/textView11"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="聊天"
            android:textColor="@color/white"
            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/imageView22"
            android:layout_width="115dp"
            android:layout_height="109dp"

            android:layout_weight="1"
            app:srcCompat="@android:drawable/ic_btn_speak_now" />

        <TextView
            android:id="@+id/textView22"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="联系人"
            android:textColor="@color/white"
            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/imageView33"
            android:layout_width="match_parent"
            android:layout_height="109dp"

            android:layout_weight="1"
            app:srcCompat="@android:drawable/ic_menu_add" />

        <TextView
            android:id="@+id/textView33"
            android:layout_width="115dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="位置"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView44"
            android:layout_width="match_parent"
            android:layout_height="109dp"

            android:layout_weight="1"
            app:srcCompat="@android:drawable/ic_menu_manage" />

        <TextView
            android:id="@+id/textView44"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="设置"
            android:textColor="@color/white"
            android:textSize="30sp" />
    </LinearLayout>
</LinearLayout>

第一个 LinearLayout（LinearLayout1）包含一个 ImageView（imageView11）和一个 TextView（textView11）。ImageView 的宽度设置为 115dp，高度设置为 109dp，它显示一个指南针图标（@android:drawable/ic_menu_compass）。TextView 的宽度设置为 match_parent，高度设置为 wrap_content，字体大小为 30sp，文本内容为“聊天”，字体颜色为白色（@color/white），并且文本会在 TextView 中居中显示。

第二个 LinearLayout（LinearLayout2）包含一个 ImageView（imageView22）和一个 TextView（textView22）。ImageView 的宽度设置为 115dp，高度设置为 109dp，它显示一个语音输入图标（@android:drawable/ic_btn_speak_now）。TextView 的宽度设置为 match_parent，高度设置为 wrap_content，字体大小为 30sp，文本内容为“联系人”，字体颜色为白色（@color/white），并且文本会在 TextView 中居中显示。

第三个 LinearLayout（LinearLayout3）包含一个 ImageView（imageView33）和一个 TextView（textView33）。ImageView 的宽度设置为 match_parent，高度设置为 109dp，它显示一个加号图标（@android:drawable/ic_menu_add）。TextView 的宽度设置为 115dp，高度设置为 wrap_content，字体大小为 30sp，文本内容为“位置”，字体颜色为白色（@color/white），并且文本会在 TextView 中居中显示。

LinearLayout4 包含一个 ImageView（imageView44）和一个 TextView（textView44）。ImageView 的宽度设置为 match_parent，高度设置为 109dp，它显示一个管理图标（@android:drawable/ic_menu_manage）。TextView 的宽度设置为 match_parent，高度设置为 wrap_content，字体大小为 30sp，文本内容为“设置”，字体颜色为白色（@color/white），并且文本会在 TextView 中居中显示。

LinearLayout4 的宽度设置为 109dp，高度设置为 wrap_content，并且它有一个权重 android:layout_weight=“1”，以便在垂直方向上平均分配空间。

效果图：

3.设计框架--tab

本内容设计页面居中显示的提示信息

<?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/textView2"
        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="50sp" />
</LinearLayout>

LinearLayout 的宽度和高度都设置为 match_parent，这意味着它会填充父容器的整个空间。

TextView 的宽度和高度都设置为 wrap_content，它显示文本内容为“这是聊天界面”。TextView 的布局参数中，android:layout_gravity=“center” 表示将 TextView 在父容器中水平和垂直方向上居中对齐。android:layout_weight=“1” 表示 LinearLayout 中的子视图在垂直方向上均匀分配剩余空间。android:gravity=“center” 表示 TextView 内容在自身的边界内居中显示。android:textSize=“50sp” 设置了文字大小为 50sp。

类似的，只需要将“聊天”换为“联系人”，"位置"和“设置”

效果图：

4.设计框架--main

<?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" />

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

    </FrameLayout>

    <include
        android:id="@+id/content"
        layout="@layout/bottom" />

</LinearLayout>

LinearLayout 的宽度和高度都设置为 match_parent，这意味着它会填满父容器的整个空间。android:orientation=“vertical” 表示 LinearLayout 的子视图按垂直方向排列。

首先使用 include 标签引入了一个名为 top 的布局文件，表示在这个 LinearLayout 中包含了一个名为 top 的布局。然后是一个 FrameLayout（content1），它的宽度设为 match_parent，高度设为 wrap_content，而且有一个权重 android:layout_weight=“1” 以便在垂直方向上平均分配剩余空间。

接下来又使用 include 标签引入了一个名为 bottom 的布局文件，表示在这个 LinearLayout 中包含了一个名为 bottom 的布局。

5.设计框架--fragment

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



    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment


        return inflater.inflate(R.layout.tab1, container, false);
    }
}

这段代码是一个名为 “Fragment1” 的 Fragment 类。它继承自 androidx.fragment.app.Fragment 类。

在 onCreateView 方法中，通过 LayoutInflater 对象将一个名为 “tab1” 的布局文件转换成一个视图对象，并将其返回。

通过使用 Fragment，你可以将界面的一部分封装成可重用的组件，并在活动中动态地加载和管理这些组件。在 onCreateView 方法中加载布局文件，然后返回该视图对象是 Fragment 的基本用法。

类似的，将tab2，3，4同样处理

6.设计框架--mainactivity

package com.example.myapplication;

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 {

    Fragment1 fragment;
    Fragment fragment1,fragment2,fragment3,fragment4;

    FragmentManager fm;
    FragmentTransaction ft;
    LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

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

        fragment1=new Fragment1();
        fragment2=new Fragment2();
        fragment3=new Fragment3();
        fragment4=new Fragment4();
        linearLayout1=findViewById(R.id.LinearLayout1);
        linearLayout2=findViewById(R.id.LinearLayout2);
        linearLayout3=findViewById(R.id.LinearLayout3);
        linearLayout4=findViewById(R.id.LinearLayout4);
        fm=getSupportFragmentManager();
        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();

    }

    private void initial() {
        FragmentTransaction ft=fm.beginTransaction()
                .add(R.id.content1,fragment1)
                .add(R.id.content1,fragment2)
                .add(R.id.content1,fragment3)
                .add(R.id.content1,fragment4);
        ft.commit();
    }

    @Override
    public void onClick(View view){
        fragmenthide();

        /*switch (view.getId()){
            case R.id.LinearLayout1: fragmentshow(fragment1);break;
            case R.id.LinearLayout2: fragmentshow(fragment2);break;
            case R.id.LinearLayout3: fragmentshow(fragment3);break;
            case R.id.LinearLayout4: fragmentshow(fragment4);break;
            default:  break;*/
        if(view.getId()==R.id.LinearLayout1){
            fragmenthide();
            fragmentshow(fragment1);
        }
        if(view.getId()==R.id.LinearLayout2){
            fragmenthide();
            fragmentshow(fragment2);
        }
        if(view.getId()==R.id.LinearLayout3){
            fragmenthide();
            fragmentshow(fragment3);
        }
        if(view.getId()==R.id.LinearLayout4){
            fragmenthide();
            fragmentshow(fragment4);
        }


    }

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

代码是一个名为 “MainActivity” 的活动（Activity）类，它是一个继承自 AppCompatActivity 类的主活动。它实现了 View.OnClickListener 接口来处理点击事件。

在 onCreate 方法中，首先设置了活动使用的布局文件为 “main”。然后创建了四个 Fragment 对象：fragment1、fragment2、fragment3、fragment4，它们分别对应不同的片段。

接下来，通过 findViewById 方法初始化了四个 LinearLayout 对象：linearLayout1、linearLayout2、linearLayout3、linearLayout4，这些 LinearLayout 对象将用于处理点击事件。

在初始化 Fragment 管理器（FragmentManager）和 Fragment 事务（FragmentTransaction）对象后，调用了 initial() 方法和 fragmenthide() 方法来初始化并隐藏所有的 Fragment。

然后，为每个 LinearLayout 对象设置了点击事件监听器，指定了点击事件发生时要执行的操作。当点击 LinearLayout 时，将会调用 fragmenthide() 方法隐藏所有 Fragment，并根据点击的 LinearLayout 对应的 id 调用 fragmentshow() 方法来显示特定的 Fragment。

在 fragmenthide() 方法中，创建了一个 FragmentTransaction 对象并使用 hide() 方法隐藏了所有的 Fragment，然后调用了 commit() 方法来提交事务。

在 initial() 方法中，创建了一个 FragmentTransaction 对象并使用 add() 方法将 fragment1、fragment2、fragment3、fragment4 添加到名为 “content1” 的布局容器中（其中 R.id.content1 是在布局文件 main.xml 中定义的容器），然后调用了 commit() 方法来提交事务。

在 fragmentshow() 方法中，创建了一个 FragmentTransaction 对象并使用 show() 方法显示了指定的 Fragment，然后调用了 commit() 方法来提交事务。

最终效果图：

内容二：在任意tab页中实现列表效果

1.修改tab1--在其中加入recycleView

<?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">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycleView"
        android:layout_width="388dp"
        android:layout_height="701dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        />
</LinearLayout>

这是一个使用 RecyclerView 的布局代码片段。RecyclerView 是 Android Support Library 中的一个强大的视图容器，用于显示大量数据列表。

在这个片段中，RecyclerView 的属性如下：

android:id="@+id/recyclerView"：为 RecyclerView 定义一个唯一的标识符，方便在代码中引用它。
android:layout_width="388dp"：设置 RecyclerView 的宽度为 388dp。
android:layout_height="701dp"：设置 RecyclerView 的高度为 701dp。
android:layout_marginStart="8dp"：设置 RecyclerView 的左边距为 8dp。
android:layout_marginTop="8dp"：设置 RecyclerView 的上边距为 8dp。

2.创建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;
import java.util.zip.Inflater;

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();
    }
    protected class Myholder extends RecyclerView.ViewHolder {
        TextView textView;
        public Myholder(@NonNull View itemView) {
            super(itemView);
            textView=itemView.findViewById(R.id.textView6);
        }
    }
}

在这段代码中，主要有以下几个关键部分：

构造方法：接受一个上下文 Context 对象和一个数据列表 List<String>，将其赋值给类的成员变量 context1 和 list1。
onCreateViewHolder 方法：负责创建 RecyclerView 的 ViewHolder 对象。这里通过 LayoutInflater 从 XML 布局文件 item.xml 中创建一个视图，并传递给 Myholder 构造方法创建 ViewHolder 对象。
onBindViewHolder 方法：负责将数据绑定到 ViewHolder 中的视图组件。这里根据位置获取对应的数据，并将其设置到 Myholder 中的 TextView 组件中。
getItemCount 方法：返回数据列表的项数，即需要显示的列表项数量。
Myholder 内部类：继承自 RecyclerView.ViewHolder，作为 RecyclerView 的一个视图容器，持有每个列表项的视图组件。在构造方法中初始化 ViewHolder 中的 TextView 组件。

3.修改fragment2：

package com.example.myapplication;

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.*;

public class Fragment2 extends Fragment {
    Context context;
    List list;
    RecyclerView recyclerView;
    com.example.myapplication.Myadapter myadapter;

    @SuppressLint("MissingInflatedId")
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.tab2, container, false);
        context = view.getContext();
        recyclerView = view.findViewById(R.id.recycleView);
        list = new ArrayList();
        for(int i=0;i<9;i++){
            list.add("这是第"+i+"行");}

        myadapter = new com.example.myapplication.Myadapter(context, list);
        recyclerView.setAdapter(myadapter);
        LinearLayoutManager manager = new LinearLayoutManager(context);
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);

        return view;


    }
}

在这段代码中，主要有以下几个关键部分：

onCreateView 方法：在创建 Fragment 视图时被调用。使用 LayoutInflater 将布局文件 tab2.xml 转换为 View 对象，并将其返回。
初始化 RecyclerView：在 onCreateView 方法中，使用 findViewById 方法从布局中获取 RecyclerView 的实例，并将其赋值给 recyclerView 变量。
准备数据：创建一个 ArrayList 对象，用于存储要显示在 RecyclerView 中的数据。这里简单地添加了一些字符串作为示例数据。
创建适配器：使用自定义的 Myadapter 类创建一个适配器对象 myadapter，并将上下文和数据列表传递给它。
设置适配器和布局管理器：将适配器对象 myadapter 设置到 RecyclerView 中，然后创建一个 LinearLayoutManager 对象 manager，并设置其方向为垂直方向。最后将 manager 设置到 RecyclerView 上。

最终结果图：