您当前的位置:首页 > 互联网教程

Android知识串讲(1) 底部导航栏遮挡丨转屏锁定丨ActionBar隐藏

发布时间:2025-05-18 16:14:08    发布人:远客网络

Android知识串讲(1) 底部导航栏遮挡丨转屏锁定丨ActionBar隐藏

一、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的集成时,首先设置点击事件监听,然后根据监听结果跳转至相应页面。这种方法在确保页面流畅切换的同时,又保持了应用的简洁性与可维护性。