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

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常见的高级组件搭建移动应用界面相关推荐

Android学习——UI高级组件三
Android学习--UI高级组件三 PopupWindow(弹出式窗口) Android的对话框有两种:PopupWindow和AlertDialog.它们的不同点在于:AlertDialog位置固 ...
android中的高级组件（三）（ExpandableListView,ImageSwitcher,Gallery）
ExpandableListView 分组列表视图和ListView不同的是它是一个两级的滚动列表视图,每一个组可以展开,显示一些子项,类似于QQ列表,这些项目来至于ExpandableListAd ...
【android编程】第五讲-Android高级组件
Android第五讲高级组件实践题Code链接:https://blog.csdn.net/xbean1028/article/details/104771559 文章目录 Android第五讲高级 ...
android用户界面组件都是放置在,Android开发工程师第十章节用户界面高级组件.ppt...
Android开发工程师第十章节用户界面高级组件.ppt 电子相册的设计与实现 4．图片放大与缩小显示的实现在触摸ImageSwitcher中显示的图片后,全屏显示该图片,要全屏显示该图片,只要 ...
Android常见知识点
什么是 3G 3G,全称为3rd Generation,中文含义就是指第三代数字通信. 所谓3G,是指将无线通信与国际互联网等多媒体通信结合的新一代移动通信系统. 3G只是一种通信技术标准,符合这个标 ...
Android开发实战一之搭建开发环境-附测试实例（已亲测）
使用JDK.Android SDK.Eclipse + ADT搭建开发环境附测试实例 (已亲测) ----------------------------------------- ...
Android面试必过——Android常见的问题
Android常见的问题标签(空格分隔): 移动开发常见算法问题的 Java 实现资料可见算法介绍可见算法是很多公司面试必须,国内 BAT 基本面试中都会有,尤以百度为盛. 常见设计模式的 ...
Android常见的问题
转载:http://stane.sinaapp.com/android面试必过-android常见的问题/ 水平有限,有错误请提出来. Android常见的问题标签(空格分隔): 移动开发常见算法 ...
Android中所有UI组件基类是,【详细】Android入门到放弃篇-YES OR NO-》各种UI组件，布局管理器，单元Activity...
问:达叔,你放弃了吗? 答:不,放弃是不可能的,丢了Android,你会心疼吗?如果别人把你丢掉,你是痛苦呢?还是痛苦呢?~ 引导语有人说,爱上一个人是痛苦的,有人说,喜欢一个人是幸福的. 人与人之 ...

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

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

最新文章

热门文章