Campus Talking 小记(3)-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46097862/article/details/124152298

Let us to make our app

根据上次的研究，我们采用了ViewPager的方式来制作，登陆和注册页面，但还是草图，后期再进行，目前只进行功能实现。通过了使用了登陆和注册环节，我们就进入了主页面，这次我们就来绘制主页面！
先给你们看看实际开发效果：
请添加图片描述

在开始之前，我们先进行需求分析：
1，首先首页是具有Bottom的底部tab
2，在点击tab的时候，能够实现tab切换的目的。
3，再点击的过程是具有UI变化过程

现在我们来实现我们的UI
1，首先我们去创建我们的导航页面，也就是我们添加我们切换页面，我们创建了四个Tab页面，创建方式如下：
（采用Fragment+viewModel的方式是因为每个页面有自己的业务，所以采用这种方式）

请添加图片描述

1，我们在resouse文件夹中添加menu文件，并且在其中添加请添加图片描述
2，我们在登陆后的主界面进行编写，我们先在res中添加menu，这个menu界面如图，我们在其中也添加了几个Item作为我们的tab，但是这是不是感觉不太像啊🤔，不要急，各位大大！

请添加图片描述
3，接下来我们去创建navigation.xml在资源文件夹中，添加我们所创建的四个Fragment。

我们在Menu Activity的xml文件中添加，两个组件（相当于容器），用于装下面的meun组件和上面的Fragment，这样就可以把它们组装在一起，但是这样就完成了吗？NO NO NO，这只是完成了两部分界面，并没有把它们组装在一起形成一个生动的整体。

请添加图片描述
所以我们接下来，在Menu Activity.java中处理逻辑关系：

package com.example.campus_talk.menu;

import androidx.appcompat.app.AppCompatActivity;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.fragment.NavHostFragment;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;

import android.os.Bundle;

import com.example.campus_talk.R;
import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MenuActivity extends AppCompatActivity {
BottomNavigationView bottomNavigationView;
NavController navController;
    NavHostFragment navHostFragment;
AppBarConfiguration configuration;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_menu);

        initView();


    }

    private void initView() {
        bottomNavigationView=findViewById(R.id.bottomNavigationView);
        navHostFragment= (NavHostFragment) getSupportFragmentManager().findFragmentById(R.id.fragmentView);
        navController= navHostFragment.getNavController();
        configuration=new AppBarConfiguration.Builder(bottomNavigationView.getMenu()).build();
        NavigationUI.setupActionBarWithNavController(MenuActivity.this,navController,configuration);
        NavigationUI.setupWithNavController(bottomNavigationView,navController);
    }
}

其中我们要注意的是

NavigationUI.setupActionBarWithNavController(MenuActivity.this,navController,configuration);

在这个方法中我们可能会出现
Attempt to invoke virtual method void androidx.appcompat.app.ActionBar.setTitle(java.lang.CharSequence) on a null object reference at android.app.ActivityThread.performLaunchActivity(Activit…
的错误,这可能是因为你在Activity，或者在res的theme中取消了ActionBar，只要把它恢复为以下即可


    <style name="Theme.Campus_Talk" parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge">

今天的代码编写已完成，越努力越幸运，加油各位！！！！