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

作业要求

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

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

先来看效果图吧

在做这个的时候不自觉的就放飞自我了，当然做的过程也是相当的折磨。本人直接用真机连接的，app弄好之后还保留在手机上，挺好玩的。

那么进入正题，首先是把程序前端的模板打出来（特别提醒，做这个东西简单归简单，但坑不少，尤其要注意顺序，顺序错了就算是拿成品照搬也不能运行，顺序对了写出来还是简单的）

页面分为上中下三个部分，顶端top的xml，中间就用layler的activity xml，底下写个bottom

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="match_parent">

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

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="#070707"
            android:gravity="center"
            android:text="二次元真恶心捏"
            android:textAppearance="@style/TextAppearance.AppCompat.Body2"
            android:textColor="#F8F5F5"
            android:textSize="26sp"
            android:textStyle="bold"
            android:typeface="monospace" />
    </LinearLayout>
</LinearLayout>

中间lactivity_main

<?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:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <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/bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>
底部重复5次下方代码

<?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="100dp"
    android:background="#0B0B0B"
    android:baselineAligned="false"
    android:gravity="center|center_horizontal">

    <LinearLayout
        android:id="@+id/bottom_mama_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center|center_horizontal"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/bottom_mama_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            android:src="@drawable/mama" />
        <!--            tools:srcCompat="@drawable/Zhengzhou" />-->

        <TextView
            android:id="@+id/bottom_mama_text"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="妈妈"
            android:textColor="#FBFBFB"
            android:textSize="24sp" />
    </LinearLayout>

那么为了增添乐趣，我将自己珍藏的二次元图片压缩剪切成64*64尺寸的图表导入到底部，在窗口进行操作后，文件会自动复制并导入在\app\src\main\res\drawable这个路径下，不需要提前将文件放在这个特定位置。

图像分辨率的修改可以用这个网站在线一次性调整多个图像文件的尺寸 (iloveimg.com)

后面就是偏后端的Fragment操作了，新建底端对应数目的控件，在mainactivity中综合调控。

对于单个fragment组件比较容易

以laopo组件为例

package com.example.zuoye;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class laopoFragment extends Fragment {


    public laopoFragment() {
        // Required empty public constructor
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_laopo, container, false);
    }
}

后几个都一样

打mainactivity的模子

private Fragment mamaFragment=new mamaFragment();
private Fragment jiejieFragment=new jiejieFragment();
private Fragment laopoFragment=new laopoFragment();
private Fragment nverFragment=new nverFragment();
private Fragment tabFragment=new tabFragment();

private FragmentManager fragmentManager;
private LinearLayout mTmama,mTjiejie,mTlaopo,mTnver,mTtab;
private ImageButton mTmgMaMa;
private ImageButton mTmgJieJie;
private ImageButton mTmgLaoPo;
private ImageButton mTmgNvEr;
private ImageButton mTmgTab;

private TextView text_mama;
private TextView text_jiejie;
private TextView text_laopo;
private TextView text_nver;
private TextView text_tab;

用于后续对图片，文字，点击事件等操作进行调控

写onCreate方法，将上述声明变量赋值连接，并调用

initFragment，showfagment

两个方法，在show中用Switch case语句调出页面，同时不要忘记相应的隐藏页面，需

hideFragment方法

最后设置个onclick监听收尾，这里的

R.id.bottom__bar没法用Switch语句了，需要修改成if语句

详情看结尾代码，这里就不多赘述了。

经过我的研究，如果想作出一个初始页面后续被底端页面切换后不再出现的情况不大现实，因为fragment页面是和bottom_bar绑定的，如果没有bottom_bar绑着，最前面的声明都无法使用，根本进不去main的这个控制方法，无法进行后续的调度，相当于白写了个fragment。当然应该是我没找到思路，实际上只有开始有起始页，后续不再出现的情况是存在的。于是乎我弄了五个控件，多做了一个就想形成类似的状况。

最后就是git的上传了，这个也费老大劲了，第一次弄基本上把能出的问题都出了一遍，跟着这个视频弄，大伙别瞎折腾了手把手教你在github上传文件_哔哩哔哩_bilibili

https://blog.csdn.net/yjw123456/article/details/119696726 这个也有用

最后这是我的源码链接：adxw01/as_zuoye: 拒绝挂科 (github.com)