Android常见的高级组件结合可以搭建移动应用常见的界面结构,如下图所示:


上述的界面可以发现有侧滑菜单,界面的主内容区顶部可以显示Home键、应用标题以及菜单。在底部有导航栏方便导航。通过侧滑菜单和底部的导航可以方便实现界面内容的切换。
这样的通用界面可以在多种的应用中进行套用,使用也非常方便。
一、定义顶部的工具条和侧滑菜单
(1)MainActivity对应的布局activity_main.xml如下:

<androidx.drawerlayout.widget.DrawerLayoutandroid:id="@+id/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:layout_width="match_parent"android:layout_height="match_parent"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><**androidx.appcompat.widget.Toolbar**android:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize" /></RelativeLayout>
</androidx.drawerlayout.widget.DrawerLayout>

在上述的布局中DrawerLayout和NavigationView结合定义侧滑菜单。在内容区定义了一个Toolbar.
(2)将自定义的Toolbar设置默认的ActionBar
需要在应用配置文件AndroidManifest.xml中配置如下:

<activityandroid:name=".MainActivity"**android:theme="@style/Theme.AppCompat.NoActionBar"**android:exported="true"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter>
</activity>

设置MainActivity活动的主题维NoActionBar,为Toolbar设置为动作条提供方便。
(3)在MainActivity.kt中设置Toolbar为支持的动作条

setSupportActionBar(binding.toolbar)

(4)定义动作条上的菜单:
假设在res/menu/目录下创建menu.xml为如下内容:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:android="http://schemas.android.com/apk/res/android"><item android:title="菜单"android:icon="@mipmap/ic_launcher"app:showAsAction="always"><menu><itemandroid:id="@+id/aboutItem"android:icon="@android:drawable/ic_dialog_info"android:title="关于我们"app:showAsAction="always" /><itemandroid:id="@+id/exitItem"android:icon="@android:drawable/ic_notification_clear_all"android:title="退出应用"app:showAsAction="always" /></menu></item>
</menu>

这是一个二级菜单,将一级菜单以图标显示,点击弹出二级菜单,使得二级菜单能同时将菜单标题和图标显示。
(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布局文件如下:

<androidx.drawerlayout.widget.DrawerLayoutandroid:id="@+id/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:layout_width="match_parent"android:layout_height="match_parent"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize" /></RelativeLayout>**<com.google.android.material.navigation.NavigationViewandroid:id="@+id/navigationView"android:layout_width="match_parent"android:layout_height="match_parent"app:headerLayout="@layout/header_layout"app:menu="@menu/menu_navigation"android:layout_gravity="start"/>**
</androidx.drawerlayout.widget.DrawerLayout>

其中,
NavigationView元素中定义的
app:headerLayout="@layout/header_layout":对应的是layout目录下的header_layout.xml表示侧滑菜单的头部布局,具体定义略;
app:menu="@menu/menu_navigation":对应的侧滑菜单下部的导航菜单的内容,对应res/menu目录下的menu_navigation.xml,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:id="@+id/favorityItem"android:title="我的收藏" android:icon="@android:drawable/btn_star" /><itemandroid:id="@+id/appItem"android:title="关于应用" android:icon="@android:drawable/ic_dialog_info"/><itemandroid:id="@+id/configItem"android:title="系统配置" android:icon="@android:drawable/ic_menu_manage"/>
</menu>

修改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布局

  <androidx.drawerlayout.widget.DrawerLayoutandroid:id="@+id/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:layout_width="match_parent"android:layout_height="match_parent"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize" /><com.google.android.material.floatingactionbutton.FloatingActionButtonandroid:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:layout_toEndOf="@+id/btView"/>**<com.google.android.material.bottomnavigation.BottomNavigationViewandroid:id="@+id/btView"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:menu="@menu/menu_navigation"android:layout_alignParentBottom="true"/>**</RelativeLayout><com.google.android.material.navigation.NavigationViewandroid:id="@+id/navigationView"android:layout_width="match_parent"android:layout_height="match_parent"app:headerLayout="@layout/header_layout"app:menu="@menu/menu_navigation"android:layout_gravity="start"/>
</androidx.drawerlayout.widget.DrawerLayout>

(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

Android常见的高级组件搭建移动应用界面相关推荐

  1. Android学习——UI高级组件三

    Android学习--UI高级组件三 PopupWindow(弹出式窗口) Android的对话框有两种:PopupWindow和AlertDialog.它们的不同点在于:AlertDialog位置固 ...

  2. android中的高级组件(三)(ExpandableListView,ImageSwitcher,Gallery)

    ExpandableListView 分组列表视图 和ListView不同的是它是一个两级的滚动列表视图,每一个组可以展开,显示一些子项,类似于QQ列表,这些项目来至于ExpandableListAd ...

  3. 【android编程】第五讲-Android高级组件

    Android第五讲高级组件 实践题Code链接:https://blog.csdn.net/xbean1028/article/details/104771559 文章目录 Android第五讲高级 ...

  4. android用户界面组件都是放置在,Android开发工程师第十章 节 用户界面高级组件.ppt...

    Android开发工程师第十章 节 用户界面高级组件.ppt 电子相册的设计与实现 4.图片放大与缩小显示的实现 在触摸ImageSwitcher中显示的图片后,全屏显示该图片,要全屏显示该图片,只要 ...

  5. Android常见知识点

    什么是 3G 3G,全称为3rd Generation,中文含义就是指第三代数字通信. 所谓3G,是指将无线通信与国际互联网等多媒体通信结合的新一代移动通信系统. 3G只是一种通信技术标准,符合这个标 ...

  6. Android开发实战一之搭建开发环境-附测试实例(已亲测)

    使用JDK.Android SDK.Eclipse + ADT搭建开发环境      附测试实例     (已亲测) ----------------------------------------- ...

  7. Android面试必过——Android常见的问题

    Android常见的问题 标签(空格分隔): 移动开发 常见算法问题的 Java 实现 资料可见 算法介绍可见 算法是很多公司面试必须,国内 BAT 基本面试中都会有,尤以百度为盛. 常见设计模式的 ...

  8. Android常见的问题

    转载:http://stane.sinaapp.com/android面试必过-android常见的问题/ 水平有限,有错误请提出来. Android常见的问题 标签(空格分隔): 移动开发 常见算法 ...

  9. Android中所有UI组件基类是,【详细】Android入门到放弃篇-YES OR NO-》各种UI组件,布局管理器,单元Activity...

    问:达叔,你放弃了吗? 答:不,放弃是不可能的,丢了Android,你会心疼吗?如果别人把你丢掉,你是痛苦呢?还是痛苦呢?~ 引导语 有人说,爱上一个人是痛苦的,有人说,喜欢一个人是幸福的. 人与人之 ...

最新文章

  1. esl8266开发之旅_从ESL老师到越南软件开发人员的旅程
  2. mongodb 3.0.x 添加用户名和密码设置权限
  3. luogu1975 [国家集训队]排队
  4. Windows内核实验004 API调用
  5. sama5d3 环境检测 gpio--yk测试
  6. 列注释_机器学习 Pandas 03:基础 前16题 ( 带答案、注释 )
  7. 请说说你对标签语义化的理解?
  8. 在一个C程序中,main()函数可以放在哪?
  9. rails 两表关联查询_Rails中的单表继承与多态关联:找到适合您的方法
  10. python读取txt文件并输出到表格_Python读取txt内容写入xls格式excel中的方法
  11. BizTalk开发系列(三十四) Xpath
  12. 计算机基础技能应用查询中心,计算机基础应用教程
  13. 力扣每日一刷 -两个数组的交集II
  14. 01. 仔细区分pointer和references
  15. 笔记本电脑连接WIFI速度很慢-解决办法 亲测有效【5MB/S直达10MB/S】
  16. 元宇宙需要“基建狂魔”
  17. 我的世界服务器无限背包,我的世界 无限背包MOD 我的世界1.7无限背包MOD
  18. 8种开源情报(OSINT)工具简介
  19. 2021寒假每日一题《数独检查》
  20. java web开发学习总结

热门文章

  1. img标签设置height和width无效
  2. Windows 10 侧边任务栏宽度调整
  3. xcode怎么更换app的图标和名字?
  4. SAP恢复历史记忆处理方法
  5. 马克飞象 导出html,markdown 基本语法(转载)(示例代码)
  6. cloudcompare旋转点云_CloudCompare 的简单的使用说明
  7. ServletFileUpload、MultipartRequest与MultipartParser的区别
  8. U-boot-2009.03移植之七:第一阶段之mini2440.h的理解和修改
  9. CRAFT Objects from Images(2016)
  10. 怎样计算机科学导论答案,计算机科学导论相关论文题目 计算机科学导论专业论文题目怎样拟...