Android知识串讲(1) 底部导航栏遮挡丨转屏锁定丨ActionBar隐藏
发布时间:2025-05-18 16:14:08 发布人:远客网络
一、Android知识串讲(1) 底部导航栏遮挡|转屏锁定|ActionBar隐藏
Android中布局内容被底部系统导航栏遮挡
Android手机底部NavigationBar挡住界面的解决方法
在 Manifest.xml文件中设置 Activity的属性
Android布局界面隐藏顶部导航栏
Android获取手机存储总大小,系统占用空间
Android获取屏幕宽度和高度的几种方法
Android电量计重要的类及函数介绍
安卓5.0后获取所有运行的进程信息
Android获取内存(RAM)大小信息
Android开发中获取App缓存大小以及清除缓存
Looper.getMainLooper()使用误区
Android中通过资源文件获取drawable的几种方法
二、如何实现android沉浸式状态栏
有些手机是强制改变通知栏颜色的,比如魅族,苹果。但是目前主要还是通过代码作出自己想要的效果。
Android 4.4之前,即使我们打开手机app,我们还总是能看到系统顶部那条黑乎乎的通知栏,这样会使得app稍显突兀。于是Android 4.4开始,便引入了Translucent System Bar的新特性,用于弥补系统通知栏突兀之处。
状态栏透明后,你可以选择设置其颜色或者显示背景图片。效果如下
Android4.4和5.0的实现方式不同。这里简单介绍一种
主要的操作都在style.xml和 AndroidManifest.xml中,Activity里面没有任何涉及到Translucent System Bar设置的代码,所以可以忽略不看。
要在Activity中使用 Translucent System Bar特性,首先需要到AndroidManifest中为指定的Activity设置Theme。但我们不能直接在values/style.xml去定义Theme,因为改特性仅兼容 Android 4.4开始的平台,所以直接在values/style.xml声明引入,工程会报错。有些开发者朋友会在代码中去判断SDK的版本,然后再用代码设置Theme。虽然同样可以实现效果,但个人并不推荐。我采取的方法是建立多个SDK版本的values文件夹,系统会根据SDK的版本选择合适的Theme进行设置。我的工程里面有values、values-v19、values-v21。
1、在values、values-v19、values-v21的style.xml都设置一个 Translucent System Bar风格的Theme
<stylename="ImageTranslucentTheme"parent="AppTheme">
<!--在Android4.4之前的版本上运行,直接跟随系统主题-->
</style>
values-v19/style.xml
<stylename="ImageTranslucentTheme"parent="Theme.AppCompat.Light.DarkActionBar">
<itemname="android:windowTranslucentStatus">true</item>
<itemname="android:windowTranslucentNavigation">true</item>
</style>
values-v21/style.xml
<stylename="ImageTranslucentTheme"parent="Theme.AppCompat.Light.DarkActionBar">
<itemname="android:windowTranslucentStatus">false</item>
<itemname="android:windowTranslucentNavigation">true</item>
<!--Android5.x开始需要把颜色设置透明,否则导航栏会呈现系统默认的浅灰色-->
<itemname="android:statusBarColor">@android:color/transparent</item>
</style>
上面需要注意的地方是,无论你在哪个SDK版本的values目录下,设置了主题,都应该在最基本的values下设置一个同名的主题。这样才能确保你的app能够正常运行在 Android 4.4以下的设备。否则,肯定会报找不到Theme的错误。
上面需要注意的地方是,无论你在哪个SDK版本的values目录下,设置了主题,都应该在最基本的values下设置一个同名的主题。这样才能确保你的app能够正常运行在 Android 4.4以下的设备。否则,肯定会报找不到Theme的错误。
2、在AndroidManifest.xml中对指定Activity的theme进行设置
android:name=".ui.ImageTranslucentBarActivity"
android:label="@string/image_translucent_bar"
android:theme="@style/ImageTranslucentTheme"/>
3、在Activity的布局文件中设置背景图片,同时,需要把android:fitsSystemWindows设置为true
3、在Activity的布局文件中设置背景图片,同时,需要把android:fitsSystemWindows设置为true
activity_image_translucent_bar.xml
<?xmlversion="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android="
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@mipmap/env_bg"
android:fitsSystemWindows="true">
</RelativeLayout>
到此,第一种实现方式完成,系统的整个导航栏都融入了app的界面中,背景图片填满了整个屏幕,看起来舒服很多。设置android:fitsSystemWindows这个属性时需要注意。
到此,第一种实现方式完成,系统的整个导航栏都融入了app的界面中,背景图片填满了整个屏幕,看起来舒服很多。设置android:fitsSystemWindows这个属性时需要注意。
通知栏的沉浸式体验,推荐和Material Design配合使用,
@android:style/Theme.Material(dark version)
@android:style/Theme.Material.Light(light version)
@android:style/Theme.Material.Light.DarkActionBar
Theme.AppCompat.Light.DarkActionBar
我们可以根据我们的app的风格,去定制Color Palette(调色板),重点有以下几个属性:
<!--Baseapplicationtheme.-->
<stylename="AppBaseTheme"parent="Theme.AppCompat">
<!--customizethecolorpalette-->
<itemname="colorPrimary">@color/material_blue_500</item>
<itemname="colorPrimaryDark">@color/material_blue_700</item>
<itemname="colorAccent">@color/material_green_A200</item>
</resources>
colorPrimary对应ActionBar的颜色。
colorPrimary对应ActionBar的颜色。
colorPrimaryDark对应状态栏的颜色
colorAccent对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色。
于5.0以下的设备,目前colorPrimaryDark无法去个性化状态栏的颜色;底部的navagationBar可能也不一样。
另外ActionBar,被推荐使用ToolBar来代替。
<?xmlversion="1.0"encoding="utf-8"?><resources>
<colorname="md_red_50_color_code">#fde0dc</color>
<colorname="md_red_100_color_code">#f9bdbb</color>
<colorname="md_red_200_color_code">#f69988</color>
<colorname="md_red_300_color_code">#f36c60</color>
<colorname="md_red_400_color_code">#e84e40</color>
<colorname="md_red_500_color_code">#e51c23</color>
<colorname="md_red_600_color_code">#dd191d</color>
<colorname="md_red_700_color_code">#d01716</color>
<colorname="md_red_800_color_code">#c41411</color>
<colorname="md_red_900_color_code">#b0120a</color>
<colorname="md_red_a100_color_code">#ff7997</color>
<colorname="md_red_a200_color_code">#ff5177</color>
<colorname="md_red_a400_color_code">#ff2d6f</color>
<colorname="md_red_a700_color_code">#e00032</color>
<colorname="md_pink_50_color_code">#fce4ec</color>
<colorname="md_pink_100_color_code">#f8bbd0</color>
<colorname="md_pink_200_color_code">#f48fb1</color>
<colorname="md_pink_300_color_code">#f06292</color>
<colorname="md_pink_400_color_code">#ec407a</color>
<colorname="md_pink_500_color_code">#e91e63</color>
<colorname="md_pink_600_color_code">#d81b60</color>
<colorname="md_pink_700_color_code">#c2185b</color>
<colorname="md_pink_800_color_code">#ad1457</color>
<colorname="md_pink_900_color_code">#880e4f</color>
<colorname="md_pink_a100_color_code">#ff80ab</color>
<colorname="md_pink_a200_color_code">#ff4081</color>
<colorname="md_pink_a400_color_code">#f50057</color>
<colorname="md_pink_a700_color_code">#c51162</color>
<colorname="md_deep_purple_50_color_code">#ede7f6</color>
<colorname="md_deep_purple_100_color_code">#d1c4e9</color>
<colorname="md_deep_purple_200_color_code">#b39ddb</color>
<colorname="md_deep_purple_300_color_code">#9575cd</color>
<colorname="md_deep_purple_400_color_code">#7e57c2</color>
<colorname="md_deep_purple_500_color_code">#673ab7</color>
<colorname="md_deep_purple_600_color_code">#5e35b1</color>
<colorname="md_deep_purple_700_color_code">#512da8</color>
<colorname="md_deep_purple_800_color_code">#4527a0</color>
<colorname="md_deep_purple_900_color_code">#311b92</color>
<colorname="md_deep_purple_a100_color_code">#b388ff</color>
<colorname="md_deep_purple_a200_color_code">#7c4dff</color>
<colorname="md_deep_purple_a400_color_code">#651fff</color>
<colorname="md_deep_purple_a700_color_code">#6200ea</color>
<colorname="md_yellow_50_color_code">#fffde7</color>
<colorname="md_yellow_100_color_code">#fff9c4</color>
<colorname="md_yellow_200_color_code">#fff59d</color>
<colorname="md_yellow_300_color_code">#fff176</color>
<colorname="md_yellow_400_color_code">#ffee58</color>
<colorname="md_yellow_500_color_code">#ffeb3b</color>
<colorname="md_yellow_600_color_code">#fdd835</color>
<colorname="md_yellow_700_color_code">#fbc02d</color>
<colorname="md_yellow_800_color_code">#f9a825</color>
<colorname="md_yellow_900_color_code">#f57f17</color>
<colorname="md_yellow_a100_color_code">#ffff8d</color>
<colorname="md_yellow_a200_color_code">#ffff00</color>
<colorname="md_yellow_a400_color_code">#ffea00</color>
<colorname="md_yellow_a700_color_code">#ffd600</color>
<colorname="md_orange_50_color_code">#fff3e0</color>
<colorname="md_orange_100_color_code">#ffe0b2</color>
<colorname="md_orange_200_color_code">#ffcc80</color>
<colorname="md_orange_300_color_code">#ffb74d</color>
<colorname="md_orange_400_color_code">#ffa726</color>
<colorname="md_orange_500_color_code">#ff9800</color>
<colorname="md_orange_600_color_code">#fb8c00</color>
<colorname="md_orange_700_color_code">#f57c00</color>
<colorname="md_orange_800_color_code">#ef6c00</color>
<colorname="md_orange_900_color_code">#e65100</color>
<colorname="md_orange_a100_color_code">#ffd180</color>
<colorname="md_orange_a200_color_code">#ffab40</color>
<colorname="md_orange_a400_color_code">#ff9100</color>
<colorname="md_orange_a700_color_code">#ff6d00</color>
<!--...............................-->
<colorname="md_grey_50_color_code">#fafafa</color>
<colorname="md_grey_100_color_code">#f5f5f5</color>
<colorname="md_grey_200_color_code">#eeeeee</color>
<colorname="md_grey_300_color_code">#e0e0e0</color>
<colorname="md_grey_400_color_code">#bdbdbd</color>
<colorname="md_grey_500_color_code">#9e9e9e</color>
<colorname="md_grey_600_color_code">#757575</color>
<colorname="md_grey_700_color_code">#616161</color>
<colorname="md_grey_800_color_code">#424242</color>
<colorname="md_grey_900_color_code">#212121</color>
<colorname="md_black_color_code">#000000</color>
<colorname="md_white_color_code">#ffffff</color>
<colorname="md_blue_grey_50_color_code">#eceff1</color>
<colorname="md_blue_grey_100_color_code">#cfd8dc</color>
<colorname="md_blue_grey_200_color_code">#b0bec5</color>
<colorname="md_blue_grey_300_color_code">#90a4ae</color>
<colorname="md_blue_grey_400_color_code">#78909c</color>
<colorname="md_blue_grey_500_color_code">#607d8b</color>
<colorname="md_blue_grey_600_color_code">#546e7a</color>
<colorname="md_blue_grey_700_color_code">#455a64</color>
<colorname="md_blue_grey_800_color_code">#37474f</color>
<colorname="md_blue_grey_900_color_code">#263238</color>
三、Android 底部导航栏+页面切换
底部导航栏与多页面切换是常见的应用设计逻辑,如微信、QQ、抖音、淘宝等大型应用均采用此设计。实现底部导航栏通常涉及到BottomNavigationView与menu的结合,通过在点击时改变图标与标题的颜色、大小等属性,实现选中与未选中状态的切换。
页面切换的实现有两种方案:使用NavigationUI更新界面组件或使用ViewPager2。使用NavigationUI时,通过Navigation组件仅需一行代码即可完成页面切换,但存在NavHost嵌套和页面重建的问题。而ViewPager2,底层基于RecyclerView,具有页面缓存与滑动切页手势功能,避免了NavHost嵌套问题,且支持页面状态保存。
项目结构层级图中,关键问题在于MainNavHost与HomePageNavHost的嵌套关系。在Activity中放置一个NavHostFragment用于组织全局导航,且配置defaultNavHost为true,以拦截系统返回按钮并执行navigateUp操作。通过setupWithNavController将NavHost与BottomNavigationView绑定,并监听onNavigationItemSelected(MenuItem item)事件,实现页面导航。确保菜单项ID与导航图中的ID一致。
若需在子页面(如Item1、Item2、Item3)中操作全局导航,需额外获取MainNavHost的navController,但此操作在子页面中会返回HomePageNavHost的controller,因此需额外逻辑获取Activity中的MainNavHost控制器。在使用ViewPager2的场景下,不存在此类嵌套问题。
在实现BottomNavigationView与ViewPager2的集成时,首先设置点击事件监听,然后根据监听结果跳转至相应页面。这种方法在确保页面流畅切换的同时,又保持了应用的简洁性与可维护性。