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

相关内容

热门资讯

前端-session、jwt 目录:   (1)session (2&#x...
linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
关于测试,我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语,但并没有使用过测试工具。偶然看到编程老师...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组,我们想大量频繁的去访问L到R这个区间的和,...
nodejs:本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本,node...
JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构:jdk1.8之...
无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...
fwdiary(2) dp2 1.传纸条  AcWing 275. 传纸条 - AcWing 走两条路,走一条最大的...
常用的DOS命令 常用的DOS命令 DOS(Disk Operating System,磁...
<C++> 类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数,cons...