Android MVVM框架搭建（五）Navigation + Fragment + BottomNavigationView

.fallback(R.drawable.wallpaper_bg) //url为空的时候,显示的图片

.error(R.mipmap.ic_loading_failed);//图片加载失败后，显示的图片

将这个值配置进去，如下图所示：

下面我们运行一下看是什么效果。

效果还可以的，下面进入主页面的代码编写。

五、主页面

---

当到了每日壁纸页面时，我们需要再提供一个入口可以进入下一个页面，现在的每日壁纸页面不能算是真正意义上的主页面，因此我们写一个入口，可以在MainActivity中增加一个浮动按钮，页面上下滑动时控制按钮的显示和消失。下面在activity_main.xml中增加如下布局代码：

<com.google.android.material.floatingactionbutton.FloatingActionButton

android:id=“@+id/fab_home”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_gravity=“end|bottom”

android:layout_margin=“20dp”

android:background=“@color/purple_500”

android:onClick=“toHome”

android:src=“@mipmap/ic_home”

app:backgroundTint=“@color/purple_500”

app:fabSize=“auto”

tools:ignore=“UsingOnClickInXml”

android:contentDescription=“主页” />

添加的位置如下，这里的图标到我的源码里拿就好，白色的放出来也看不见。

下面回到MainActivity中，继承BaseActivity，在initView方法中增加如下代码：

//页面上下滑动监听

dataBinding.scrollView.setOnScrollChangeListener((NestedScrollView.OnScrollChangeListener) (v, scrollX, scrollY, oldScrollX, oldScrollY) -> {

if (scrollY > oldScrollY) {

//上滑

dataBinding.fabHome.hide();

} else {

//下滑

dataBinding.fabHome.show();

}

});

然后也增加一个方法，当点击时跳转到HomeActivity，我们将在这个HomeActivity中显示Fragment，现在还没有，下面会创建的。

public void toHome(View view) {

jumpActivity(HomeActivity.class);

}

代码添加位置如下图所示：

下面在activity包下创建一个HomeActivity，对应的布局是activity_home.xml，在改动之前我们先做好准备的工作。

六、Navigation使用

---

在res包下新建一个navigation包，包下新建一个nav_graph.xml，里面的代码如下：

<?xml version="1.0" encoding="utf-8"?>

<navigation 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/nav_graph”

app:startDestination=“@id/news_fragment”>

<fragment

android:id=“@+id/news_fragment”

android:name=“com.llw.mvvm.ui.fragment.NewsFragment”

android:label=“news_fragment”

tools:layout=“@layout/news_fragment” />

<fragment

android:id=“@+id/video_fragment”

android:name=“com.llw.mvvm.ui.fragment.VideoFragment”

android:label=“video_fragment”

tools:layout=“@layout/video_fragment” />

这里就是将Fragment配置到Navigation中，app:startDestination表示显示的第一个Fragment。那么这一步就完成了，下面是另一个操作，就是通过点击底部导航栏菜单去进行Fragment的切换。我们在res下新建一个menu包，包下新建一个navigation_menu.xml，里面的代码如下：

<?xml version="1.0" encoding="utf-8"?>

<item

android:id=“@+id/news_fragment”

android:icon=“@mipmap/ic_hot_news”

android:title=“新闻” />

<item

android:id=“@+id/video_fragment”

android:icon=“@mipmap/ic_hot_video”

android:title=“视频” />

这里有两个图标，同样是白色的。

下面我们回到activity_home.xml中，里面的代码如下：

<?xml version="1.0" encoding="utf-8"?>

<layout 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”>

<RelativeLayout

android:layout_width=“match_parent”

android:layout_height=“match_parent”

tools:context=“.ui.activity.HomeActivity”>

<com.google.android.material.appbar.MaterialToolbar

android:id=“@+id/toolbar”

android:layout_width=“match_parent”

android:layout_height=“?attr/actionBarSize”

android:background=“@color/purple_500”>

<TextView

android:id=“@+id/tv_title”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_gravity=“center”

android:text=“头条新闻”

android:textColor=“@color/white”

android:textSize=“18sp”

android:textStyle=“bold” />

</com.google.android.material.appbar.MaterialToolbar>

<fragment

android:id=“@+id/nav_host_fragment”

android:name=“androidx.navigation.fragment.NavHostFragment”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:layout_above=“@+id/bottom_navigation”

android:layout_below=“@+id/toolbar”

app:navGraph=“@navigation/nav_graph” />

<com.google.android.material.bottomnavigation.BottomNavigationView

android:id=“@+id/bottom_navigation”

android:layout_width=“match_parent”

android:layout_height=“?attr/actionBarSize”

android:layout_alignParentBottom=“true”

android:background=“#FFF”

app:menu=“@menu/navigation_menu” />

这里分为三个部分，一个是标题栏、一个是装载Fragment的容器，另一个是控制Fragment切换的。

下面我们进入到HomeActivity页面，修改代码如下：

public class HomeActivity extends BaseActivity {

private ActivityHomeBinding binding;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

binding = DataBindingUtil.setContentView(this, R.layout.activity_home);

initView();

}

/**

• 初始化

*/

private void initView() {

//获取navController

NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);

binding.bottomNavigation.setOnNavigationItemSelectedListener(item -> {

switch (item.getItemId()) {

case R.id.news_fragment:

binding.tvTitle.setText(“头条新闻”);

navController.navigate(R.id.news_fragment);

break;

case R.id.video_fragment:

binding.tvTitle.setText(“热门视频”);

navController.navigate(R.id.video_fragment);

break;

default:

}

return true;

});

}

}

下面在fragment包下创建一个BaseFragment，里面的代码如下：

public class BaseFragment extends Fragment {

protected AppCompatActivity context;

@Override

public View onCreateView(@NonNull @NotNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

return super.onCreateView(inflater, container, savedInstanceState);

}

@Override

public void onViewCrea