美食app初步构建---Navgation

Navigation搭建框架

navgation配置教程

官网: https://developer.android.google.cn/guide/navigation

NavGraph

在一个集中位置包括了所有导航相关信息的XML资源

NavHost

显示导航图中目标的空白容器.导航组件包含一个默认NavHost实现(NavHostFragment)，可显示 Fragment 目标

NavController

在NavHost中管理应用导航的对象。当用户在整个应用中移动时，NavController会安排NavHost中目标内容的交换。

项目实现步骤

1.添加NavHost
2.添加⻝谱、喜欢和谚语的Fragment
3.添加NavHostFragment
4.添加BottomNavigationView和menu
5.关联BottomNavigationView和NavController
6.关联ActionBar和NavController
7.使用视图绑定访问xml中的控件

fragment的创建

1.快捷创建：

image.png

创建完毕后会在layout文件夹里自动生成对应的xml配置文件
删去多余代码部分，只留下OncreatView方法即可
2.手动创建：

image.png

创建一个class，使它继承Fragment()，再手动创建xml文件，用inflate方法关联后即可

最后得到的代码都是这种样子的

image.png

nav_host的创建

创建一个navigation文件夹，然后创建navigation resource file，文件格式为xml文件，将自己之前创建好的fragment放进navigation文件，如图

image.png

然后将navigation视图放进activity_main中

image.png

底部导航栏的创建BottomNavigationView

首先创建一个menu文件夹，然后创建menu文件，使用fragment的id，将其与menu文件关联，然后在activity_main中添加一个BottomNavigationView配件，设置其menu为刚才创建的menu文件，即可

image.png

NavController

将bottomNavigationView和NavController关联

image.png

红线为bottomNavigationView的id（需要拓展支持），使用id调用方法与NavController关联

每个页面的标题与controller绑定

image.png

setOf里存放每个fragment，AppBarConfiguration可能报错Cannot inline bytecode built with JVM target 1.8 into bytecode that is being built with JVM target 1.6
在module中加入以下代码即可

tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).all {
    kotlinOptions {
        jvmTarget = "1.8"
    }
}

数据绑定ViewBinding

官网https://developer.android.google.cn/topic/libraries/view-binding

视图绑定会替代findViewById。

配置代码：

android {
        ...
        viewBinding {
            enabled = true
        }
    }

创建一个binding绑定MainActivity视图，然后通过binding设置bottomNavigationView的关联
binding.root代表绑定的视图，使用setContentView(binding.root)设置主视图
onDestory方法内需要销毁binding

ShimmerRecyclerView

配置代码：
implementation'com.facebook.shimmer:shimmer:0.5.0'
implementation'com.todkars:shimmer-recyclerview:0.4.1'
使用方法:在你的fragment中引入ShimmerRecyclerView部件，单独创建一个layout当作加载动画，然后使用app:shimmer_recycler_layout=""绑定，引号内为你创建的layout布局，你可以设置layout的个数以及排列方式

image.png

食谱布局

布置好食谱的布局后，在RecipesFragment中使用如下代码展示
binding?.recyclerView?.layoutManager = LinearLayoutManager(context)
binding?.recyclerView?.adapter = RecipesAdapter()

RecipesAdapter()类中的代码

class RecipesAdapter: RecyclerView.Adapter<RecipesAdapter.MyViewHolder>() {
    class MyViewHolder(item: View):RecyclerView.ViewHolder(item)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val layoutInflater = LayoutInflater.from(parent.context)
        val view = layoutInflater.inflate(R.layout.recipes_layout,parent,false)
        return MyViewHolder(view)
    }

    override fun getItemCount(): Int {
        return 20    //要布置的布局的个数
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {

    }
}

R.layout.recipes_layout中存放的是布置的食谱布局

以下是效果图（未完成）

image.png