Android常见的高级组件结合可以搭建移动应用常见的界面结构,如下图所示:
上述的界面可以发现有侧滑菜单,界面的主内容区顶部可以显示Home键、应用标题以及菜单。在底部有导航栏方便导航。通过侧滑菜单和底部的导航可以方便实现界面内容的切换。
这样的通用界面可以在多种的应用中进行套用,使用也非常方便。
一、定义顶部的工具条和侧滑菜单
(1)MainActivity对应的布局activity_main.xml如下:
<**androidx.appcompat.widget.Toolbar**android:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize" />
在上述的布局中DrawerLayout和NavigationView结合定义侧滑菜单。在内容区定义了一个Toolbar.
(2)将自定义的Toolbar设置默认的ActionBar
需要在应用配置文件AndroidManifest.xml中配置如下:
设置MainActivity活动的主题维NoActionBar,为Toolbar设置为动作条提供方便。
(3)在MainActivity.kt中设置Toolbar为支持的动作条
setSupportActionBar(binding.toolbar)
(4)定义动作条上的菜单:
假设在res/menu/目录下创建menu.xml为如下内容:
这是一个二级菜单,将一级菜单以图标显示,点击弹出二级菜单,使得二级菜单能同时将菜单标题和图标显示。
(5)修改MainActivity.kt代码,增加菜单的处理:
class MainActivity : AppCompatActivity() {lateinit var binding:ActivityMainBindingoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)binding = ActivityMainBinding.inflate(layoutInflater)configToolbar()setContentView(binding.root)}fun configToolbar(){setSupportActionBar(binding.toolbar)}override fun onCreateOptionsMenu(menu: Menu?): Boolean {menuInflater.inflate(R.menu.menu,menu)return true}override fun onOptionsItemSelected(item: MenuItem): Boolean {when(item.itemId){R.id.aboutItem-> Toast.makeText(MainActivity@this,"Testing...",Toast.LENGTH_LONG).show()R.id.exitItem-> exitProcess(0)}return true}
}
(6)增加侧滑菜单的导航视图NavigationView,需要修改activity_main.xml布局文件如下:
** **
其中,
NavigationView元素中定义的
app:headerLayout="@layout/header_layout":
对应的是layout目录下的header_layout.xml表示侧滑菜单的头部布局,具体定义略;
app:menu="@menu/menu_navigation":
对应的侧滑菜单下部的导航菜单的内容,对应res/menu目录下的menu_navigation.xml,代码如下:
修改MainActivity.kt,增加对侧滑菜单的处理
class MainActivity : AppCompatActivity() {lateinit var binding:ActivityMainBindingoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)binding = ActivityMainBinding.inflate(layoutInflater)configToolbar()configDrawer()setContentView(binding.root)}fun configToolbar(){setSupportActionBar(binding.toolbar)}fun configDrawer(){supportActionBar?.let{it.setDisplayHomeAsUpEnabled(true)it.setHomeAsUpIndicator(R.mipmap.ic_launcher)}binding.navigationView.itemIconTintList = nullbinding.navigationView.setCheckedItem(R.id.favorityItem)binding.navigationView.setNavigationItemSelectedListener {when(it.itemId){R.id.favorityItem->Snackbar.make(binding.drawerLayout,"FAVORITE",Snackbar.LENGTH_LONG).setAction("点击"){exitProcess(0)}.show()R.id.appItem->Toast.makeText(this,"APP",Toast.LENGTH_LONG).show()R.id.configItem->Toast.makeText(this,"CONFIG",Toast.LENGTH_LONG).show()}binding.drawerLayout.closeDrawer(GravityCompat.START)true}}override fun onCreateOptionsMenu(menu: Menu?): Boolean {menuInflater.inflate(R.menu.menu,menu)return true}override fun onOptionsItemSelected(item: MenuItem): Boolean {when(item.itemId){android.R.id.home->binding.drawerLayout.openDrawer(GravityCompat.START)R.id.aboutItem-> Toast.makeText(MainActivity@this,"Testing...",Toast.LENGTH_LONG).show()R.id.exitItem-> exitProcess(0)}return true}
}
对上述代码的说明:
(a)代码:
supportActionBar?.let{it.setDisplayHomeAsUpEnabled(true)it.setHomeAsUpIndicator(R.mipmap.ic_launcher)}
上述代码块调用的两个函数是允许显示顶部的Home键以及设置顶部Home键的图标为res/mipmap目录的ic_launcher
(b)代码:
binding.navigationView.setNavigationItemSelectedListener {when(it.itemId){R.id.favorityItem->Snackbar.make(binding.drawerLayout,"FAVORITE",Snackbar.LENGTH_LONG).setAction("点击"){exitProcess(0)}.show()R.id.appItem->Toast.makeText(this,"APP",Toast.LENGTH_LONG).show()R.id.configItem->Toast.makeText(this,"CONFIG",Toast.LENGTH_LONG).show()}binding.drawerLayout.closeDrawer(GravityCompat.START)true}}
增加侧滑菜单的导航菜单的导航处理。在这里简单的处理显示交互的消息框Toast,并通过binding.drawerLayout.closeDrawer(GravityCompat.START)关闭侧滑菜单。
(c)在Toolbar仍需要增加Home键,通过点击Home键实现侧滑菜单的显示
在onOptionsItemSelected中增加
when(item.itemId){**android.R.id.home->binding.drawerLayout.openDrawer(GravityCompat.START)**...}
这里android.R.id.home对应Home键,如运行结果显示的:
(7) 定义底部导航视图BottomNavigationView
(a)修改activity_main.xml布局
** **
(b)定义修改MainActivity增加底部导航视图BottomNavigationView的处理
class MainActivity : AppCompatActivity() {lateinit var binding:ActivityMainBindingoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)binding = ActivityMainBinding.inflate(layoutInflater)configToolbar()configDrawer()configBottomNavigationView()setContentView(binding.root)}fun configToolbar(){setSupportActionBar(binding.toolbar)}fun configDrawer(){supportActionBar?.let{it.setDisplayHomeAsUpEnabled(true)it.setHomeAsUpIndicator(R.mipmap.ic_launcher)}binding.navigationView.itemIconTintList = nullbinding.navigationView.setCheckedItem(R.id.favorityItem)binding.navigationView.setNavigationItemSelectedListener {when(it.itemId){R.id.favorityItem->Snackbar.make(binding.drawerLayout,"FAVORITE",Snackbar.LENGTH_LONG).setAction("点击"){exitProcess(0)}.show()R.id.appItem->Toast.makeText(this,"APP",Toast.LENGTH_LONG).show()R.id.configItem->Toast.makeText(this,"CONFIG",Toast.LENGTH_LONG).show()}binding.drawerLayout.closeDrawer(GravityCompat.START)true}}fun configBottomNavigationView(){binding.btView.itemIconTintList = nullbinding.btView.setOnItemSelectedListener {when(it.itemId){R.id.favorityItem->Snackbar.make(binding.drawerLayout,"FAVORITE",Snackbar.LENGTH_LONG).setAction("点击"){exitProcess(0)}.show()R.id.appItem->Toast.makeText(this,"APP",Toast.LENGTH_LONG).show()R.id.configItem->Toast.makeText(this,"CONFIG",Toast.LENGTH_LONG).show()}true}}override fun onCreateOptionsMenu(menu: Menu?): Boolean {menuInflater.inflate(R.menu.menu,menu)return true}override fun onOptionsItemSelected(item: MenuItem): Boolean {when(item.itemId){android.R.id.home->binding.drawerLayout.openDrawer(GravityCompat.START)R.id.aboutItem-> Toast.makeText(MainActivity@this,"Testing...",Toast.LENGTH_LONG).show()R.id.exitItem-> exitProcess(0)}return true}
}
参考文献
《Android移动应用开发(微课版)》 陈轶 清华大学出版社
ISBN:978-7-302-59734-6