Kotlin APP首页主流框架搭建DrawerLayout+NavigationView+Toolbar+ViewPager+BottomNavigationView

yechaoa 2023-03-28 原文

效果

页面结构解析

这是一个比较常见的APP首页的结构，侧边栏+主页，侧边栏里是一些菜单，主页由底部菜单控制内容区，内容区是可滑动的子页面。整体比较舒服合理，各自为阵，却又能关联在一起，加上又是大众喜爱的Material Design风格，所以成为了当下APP首页的主流结构。

上图是做的一个简单的思维导图，并不复杂，理清了结构就能事半功倍。

页面布局

1.首页

即整个大的容器。

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".module.MainActivity"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</androidx.drawerlayout.widget.DrawerLayout>

DrawerLayout包裹着include的主页和侧边栏内容NavigationView。
app_bar_main是主页内容，采用include的方式引用是为了结构清晰，避免混乱。
侧边栏NavigationView分为头部布局headerLayout和菜单menu，注意一个是layout一个是menu。
其他需要注意的是，NavigationView的位置应与主内容app_bar_main同级，且在主内容之后。
关于DrawerLayout更多使用可以查看：DrawerLayout使用详解。

2.主页

这里主页说的是首页除侧边栏以外的页面。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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="match_parent"
    tools:context=".module.MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

    <include layout="@layout/content_main"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="@dimen/dp_20"
        android:layout_marginEnd="@dimen/dp_20"
        android:layout_marginBottom="@dimen/dp_70"
        app:srcCompat="@android:drawable/ic_dialog_email"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

上面是标题，中间是内容区，FloatingActionButton可以忽略。

3.主页内容区

效果同2一样

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".module.MainActivity"
    tools:showIn="@layout/app_bar_main">

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

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:background="?android:attr/windowBackground"
            app:layout_constraintBottom_toTopOf="@+id/viewPager"
            app:menu="@menu/bottom_navigation" />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

上面是ViewPager，可滑动的内容区，填充一个一个的Fragment子页面。
下面是BottomNavigationView底部菜单，与上面的ViewPager关联。

到此页面布局的部分介绍完毕，下面开始说代码部分。

代码部分

1.侧边栏

我们要在toolbar上加一个按钮，把侧边栏关联起来，让其点击可以弹出侧边栏。

/**
     * Drawer关联Toolbar
     */
    private fun initActionBarDrawer() {
        val toggle = ActionBarDrawerToggle(
            this,
            drawer_layout,
            toolbar,
            R.string.navigation_drawer_open,
            R.string.navigation_drawer_close
        )
        drawer_layout.addDrawerListener(toggle)
        toggle.syncState()
    }

2.内容区

关联了侧边栏，我们来看内容区，上面说过内容区是ViewPager包含的一个个子页面Fragment，来看代码的实现

/**
     * 初始化Fragment
     */
    private fun initFragments() {
        val viewPagerAdapter = CommonViewPagerAdapter(supportFragmentManager)
        viewPagerAdapter.addFragment(HomeFragment())
        viewPagerAdapter.addFragment(TreeFragment())
        viewPagerAdapter.addFragment(NaviFragment())
        viewPagerAdapter.addFragment(ProjectFragment())

        view_pager.offscreenPageLimit = 1
        view_pager.adapter = viewPagerAdapter
    }

处理事件

1.侧边栏点击事件

/**
         * 侧边栏点击事件
         */
        nav_view.setNavigationItemSelectedListener {
            // Handle navigation view item clicks here.
            when (it.itemId) {
                R.id.nav_collect -> {
                    ToastUtilKt.showToast("收藏")
                }
                R.id.nav_share -> {
                    ToastUtilKt.showToast("分享")
                }
                R.id.nav_about -> {
                    ToastUtilKt.showToast("关于")
                }
                R.id.nav_logout -> { 
                    ToastUtilKt.showToast("退出") 
                }
            }

            //关闭侧边栏
            drawer_layout.closeDrawer(GravityCompat.START)

            true
        }

根据itemId判断触发事件，并关闭侧边栏，这一步可选，也可以不关闭保持侧边栏打开的状态。

2.view_pager 滑动监听

/**
         * view_pager 滑动监听
         */
        view_pager.addOnPageChangeListener(object : OnPageChangeListener {
            override fun onPageScrollStateChanged(state: Int) {
            }

            override fun onPageScrolled(
                position: Int,
                positionOffset: Float,
                positionOffsetPixels: Int
            ) {
            }

            override fun onPageSelected(position: Int) {
                bottom_navigation.menu.getItem(position).isChecked = true
                //设置checked为true，但是不能触发ItemSelected事件，所以滑动时也要设置一下标题
                when (position) {
                    0 -> {
                        toolbar.title = resources.getString(R.string.app_name)
                    }
                    1 -> {
                        toolbar.title = resources.getString(R.string.title_tree)
                    }
                    2 -> {
                        toolbar.title = resources.getString(R.string.title_navi)
                    }
                    else -> {
                        toolbar.title = resources.getString(R.string.title_project)
                    }
                }
            }
        })

view_pager滑动之后底部对应的菜单选中，并重新设置标题。

3.bottom_navigation 底部菜单点击事件

/**
         * bottom_navigation 点击事件
         */
        bottom_navigation.setOnNavigationItemSelectedListener {
            when (it.itemId) {
                R.id.navigation_home -> {
                    view_pager.currentItem = 0
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.navigation_tree -> {
                    view_pager.currentItem = 1
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.navigation_navi -> {
                    view_pager.currentItem = 2
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.navigation_project -> {
                    view_pager.currentItem = 3
                    return@setOnNavigationItemSelectedListener true
                }
            }
            false
        }

底部菜单点击的时候也让view_pager滑动的响应的位置，同第2步其实是相互关联的。

到此，整个搭建就完成了，从页面布局到初始化控件，再到处理事件，整体思路要清晰，搭建起来就很快，小的功能细节再调试完善完善就ok了。

完整代码

https://github.com/yechaoa/wanandroid_kotlin

写作不易，有用就点个赞呗 ^ _ ^

BottomNavigationView NavigationView br android section DrawerLayout Toolbar ViewPager BottomNavigatioAndroid 移动开发

有关Kotlin APP首页主流框架搭建DrawerLayout+NavigationView+Toolbar+ViewPager+BottomNavigationView的更多相关文章

TimeSformer：抛弃CNN的Transformer视频理解框架 - 2
Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图
ruby - sinatra 框架的 MVC 模式 - 2
我想开始使用“Sinatra”框架进行编码，但我找不到该框架的“MVC”模式。是“MVC-Sinatra”模式或框架吗？最佳答案您可能想查看Padrino这是一个围绕Sinatra构建的框架，可为您的项目提供更“类似Rails”的感觉，但没有那么多隐藏的魔法。这是使用Sinatra可以做什么的一个很好的例子。虽然如果您需要开始使用这很好，但我个人建议您将它用作学习工具，以对您来说最有意义的方式使用Sinatra构建您自己的应用程序。写一些测试/期望，写一些代码，通过测试-重复:)至于ORM，你还应该结帐Sequel其中(imho
ruby-on-rails - 正确了解 Rails 框架的最佳方式是什么？ - 2
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。我一直在Rails上做两个项目，它们运行良好，但在这个过程中重新发明了轮子，自来水(和热水)和止痛药，正如我随后了解到的那样，这些已经存在于框架中。那么基本上，正确了解框架中所有智能部分的最佳方法是什么，这将节省时间而不是自己构建已经实现的功能？从第1页开始阅读文档？是否有公开所有内容的特定示例应用程序？一个特定的开源项目？所有的rails交通？还是完全
ruby - 自动将院子文档框架添加到现有的 Rails 遗留代码中 - 2
关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭4年前。Improvethisquestion我希望能够将模板化的YARD文档样式注释插入到我现有的Rails遗留应用程序中。目前它的评论很少。我想要具有指定参数的类header和方法header(通过从我假定的方法签名中提取)和返回值的占位符。在PHP代码中，我有一些工具可以检查代码并在适当的位置创建插入到代码中的文档header注释。在带有Ducktyping等的Ruby中，我确信诸如@params等类型之类
ruby-on-rails - 具有六边形架构和 DCI 模式的框架和数据库适配器 - 2
我尝试用Ruby设计一个基于Web的应用程序。我开发了一个简单的核心应用程序，在没有框架和数据库的情况下在六边形架构中实现DCI范例。核心六边形中有小六边形和网络，数据库，日志等适配器。每个六边形都在没有数据库和框架的情况下自行运行。在这种方法中，我如何提供与数据库模型和实体类的关系作为独立于数据库的关系。我想在将来将框架从Rails更改为Sinatra或数据库。事实上，我如何在这个核心Hexagon中实现完全隔离的rails和mongodb的数据库适配器或框架适配器。有什么想法吗？最佳答案 ROM呢？(Ruby对象映射器)。还有
python - Ruby 是否有相当于 Python 的扭曲框架作为网络抽象层？ - 2
据我了解，Python的扭曲框架为网络通信提供了更高级别的抽象(？)。我正在寻找在Rails应用程序中使用与twisted等效的Ruby。最佳答案看看EventMachine.它不像Twisted那样广泛，但它是围绕事件驱动网络编程的相同概念构建的。关于python-Ruby是否有相当于Python的扭曲框架作为网络抽象层？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/9
ruby-on-rails - 使用 Rails 以外的 Ruby 框架是否有任何潜在的缺点？ - 2
我想使用比Rails(Sinatra/Ramaze/Camping)更轻的框架，但我担心这样做我将无法使用许多以插件形式为Rails定制的共享库.这是一个主要问题，还是这些插件中的大多数都可以跨不同的Ruby框架使用？使用Ruby框架而不是Rails是否还有其他潜在的缺点？最佳答案您仍然可以使用gems在你提到的所有框架中，很多东西都是可重用的。想要交换一个新的ORM，没问题。想要一个花哨的shmacy语法高亮，没问题。Rails一直在大力插入摆脱旧的插件模型，转而使用gems。如果其他框架之一符合您的需求，最好使用它。请记住，
ruby - 应该 validate_format_of 。 not_with 在框架中有问题(或者在我的理解中) - 2
我将以下代码放入RSpec测试中:it{shouldvalidate_format_of(:email).not_with('test@test')}并设置实际的类:validates:email,:presence=>true,:format=>/\b[A-Z0-9._%-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,4}\b/i当我运行测试时，我得到:失败:1)用户失败/错误:它{应该validate_format_of(:email).not_with('test@test')}当电子邮件设置为“test@test”时，预期错误包括“can'tbeblank”，得到错误
ruby-on-rails - Rails 使用了哪些测试框架？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭9年前。ImprovethisquestionRails使用了哪些单元测试框架？我正在阅读一本书(PragmaticProgrammersAgileDev.withRails)，其中展示了如何在Rails中进行单元测试。这本书向我展示了默认的Rails测试套件(Test::Unit的子类)。这是Rails社区中使用的主要测试框架吗？我在执行常规ruby时使用RSpec，我也希望能够在Rails中使用它(如果不是太麻烦的话)？
ruby - rspec模拟与其他模拟框架的优缺点是什么？ - 2
我看过很多过时的播客，其中提到摩卡是我想安装的一个宝石，因为它确实比rspec更好模仿。我有一种感觉，rspec开发人员已经意识到这一点，并从那时起改进了他们的模拟。但是，在默认的spec_helper.rb文件中，我看到三个模拟框架的一些注释掉的代码存根mochaflexmockrr向任何能给我一个像样答案的人投赞成票，就这些框架中至少一个的利弊与rspec自己的模仿框架进行比较。如果你能给我一个关于这三个问题的详细说明，我会接受你的回答。最佳答案真的，这只是口味的问题。看一看语法，看看什么最适合你。当然，使用rspec的内置