DrawerLayout+NavigationView+Toolbar+ViewPager+BottomNavigationView
这是一个比较常见的APP首页的结构,侧边栏+主页,侧边栏里是一些菜单,主页由底部菜单控制内容区,内容区是可滑动的子页面。整体比较舒服合理,各自为阵,却又能关联在一起,加上又是大众喜爱的Material Design风格,所以成为了当下APP首页的主流结构。
上图是做的一个简单的思维导图,并不复杂,理清了结构就能事半功倍。
即整个大的容器。
<?xml version="1.0" encoding="utf-8"?>
这里主页说的是首页除侧边栏以外的页面。
<?xml version="1.0" encoding="utf-8"?>
上面是标题,中间是内容区,FloatingActionButton可以忽略。
效果同2一样
<?xml version="1.0" encoding="utf-8"?>
到此页面布局的部分介绍完毕,下面开始说代码部分。
我们要在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()
}
关联了侧边栏,我们来看内容区,上面说过内容区是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
}
/**
* 侧边栏点击事件
*/
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判断触发事件,并关闭侧边栏,这一步可选,也可以不关闭 保持侧边栏打开的状态。
/**
* 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 滑动之后底部对应的菜单选中,并重新设置标题。
/**
* 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了。
写作不易,有用就点个赞呗 ^ _ ^
页面更新:2024-05-11
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号