项目搭建经历记录

背景

前面已经把逻辑框架搭建得差不多了，开始搭建UI方面的框架，Google在Jectpack包中提供了很多UI方面的框架，可供我们使用。

BottomNavigationView

底部导航控件，适合主页底部导航

1.主页添加BottomNavigationView

默认label不是常显的，所以需要设置labelVisibilityMode为labeled，让label常显

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:labelVisibilityMode="labeled"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/bottom_nav_menu" />

2. 设置底部菜单，主要是设置`icon`和`title`

<!-- bottom_nav_menu -->
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_launcher_foreground"
        android:title="@string/home" />

    <item
        android:id="@+id/navigation_blog"
        android:icon="@drawable/ic_launcher_foreground"
        android:title="@string/blog" />

    <item
        android:id="@+id/navigation_search"
        android:icon="@drawable/ic_launcher_foreground"
        android:title="@string/search" />

    <item
        android:id="@+id/navigation_project_type"
        android:icon="@drawable/ic_launcher_foreground"
        android:title="@string/project_type" />

    <item
        android:id="@+id/navigation_me"
        android:icon="@drawable/ic_launcher_foreground"
        android:title="@string/me" />
</menu>

3. 设置切换底部导航栏时的事件

//MainActivity
binding.navView.setOnItemSelectedListener {
    when (it.itemId) {
        R.id.navigation_home -> switchFragment(0)
        R.id.navigation_blog -> switchFragment(1)
        R.id.navigation_search -> switchFragment(2)
        R.id.navigation_project_type -> switchFragment(3)
        R.id.navigation_me -> switchFragment(4)
    }
    true
}

private fun switchFragment(position: Int) = binding.mainViewPager.setCurrentItem(position, true)

效果

www.alltoall.net_device-2023-01-04-170832_eqoXgC6iGT.gif

Navigation

这个是官方推荐的导航控件，Android Studio可以可视化操作，使用起来很直观

1. 添加依赖

//build.gradle
implementation 'androidx.navigation:navigation-fragment-ktx:2.4.0'
implementation 'androidx.navigation:navigation-ui-ktx:2.4.0'

2. 将主页修改为FragmentContainerView

//activity_main.xml
<androidx.fragment.app.FragmentContainerView
    android:id="@+id/fragment_container"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:layout_constraintBottom_toTopOf="@+id/nav_view"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:navGraph="@navigation/nav_graph"
    tools:context=".MainActivity" />

3. 主页跳转

//MainActivity
//获取navController
val navHostFragment = supportFragmentManager.findFragmentById(R.id.fragment_container) as NavHostFragment
    navController = navHostFragment.navController
}

//导航栏切换是，navController跳转到不同的界面
private fun switchFragment(position: Int) {
    val targetFragment = when (position) {
        0 -> R.id.home_fragment
        1 -> R.id.block_fragment
        2 -> R.id.search_fragment
        3 -> R.id.project_fragment
        4 -> R.id.me_fragment
        else -> R.id.home_fragment
    }
    navController.navigate(targetFragment)
}

4. 详情页跳转

使用了Safe Args, 这里是safe-args使用连接

//HomeFragment
adapter.getItem(position)?.let {
    val action = HomeFragmentDirections.actionHomeFragmentToArticleActivity(it)
    findNavController().navigate(action)
}

Android App封装 —— Jectpack控件使用

背景