Android常见的高级组件搭建移动应用界面
创始人
2024-04-01 05:57:06
0

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键,如运行结果显示的:显示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

相关内容

热门资讯

保存时出现了1个错误,导致这篇... 当保存文章时出现错误时,可以通过以下步骤解决问题:查看错误信息:查看错误提示信息可以帮助我们了解具体...
汇川伺服电机位置控制模式参数配... 1. 基本控制参数设置 1)设置位置控制模式   2)绝对值位置线性模...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
表格中数据未显示 当表格中的数据未显示时,可能是由于以下几个原因导致的:HTML代码问题:检查表格的HTML代码是否正...
本地主机上的图像未显示 问题描述:在本地主机上显示图像时,图像未能正常显示。解决方法:以下是一些可能的解决方法,具体取决于问...
表格列调整大小出现问题 问题描述:表格列调整大小出现问题,无法正常调整列宽。解决方法:检查表格的布局方式是否正确。确保表格使...
不一致的条件格式 要解决不一致的条件格式问题,可以按照以下步骤进行:确定条件格式的规则:首先,需要明确条件格式的规则是...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限:此外...
【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...