状态栏设置图片填充,解決设置沉浸式通知栏,华为手机底部虚拟键为灰色

本文详细介绍了如何在华为手机上实现状态栏图片填充,同时解决底部虚拟键变为灰色的问题。通过修改styles.xml和AndroidManifest.xml文件,以及在Activity中进行适配,实现了状态栏的透明效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

公司要求状态栏设置图片填充。在网上查找资料,实现以后发现华为手机底部虚拟键为灰色。于是又开始在网上查找资料,找了好多方法都不行,或者实现很麻烦,最后试出了一种简单的方法。

先在styles.xml文件中设置状态栏图片填充

    <!--设置状态栏图片填充-->
    <style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus" tools:ignore="NewApi">false</item>
        <item name="android:windowTranslucentNavigation" tools:ignore="NewApi">true</item>
        <!--Android 5.x开始需要把颜色设置透明,否则导航栏会呈现系统默认的浅灰色-->
        <item name="android:statusBarColor" tools:ignore="NewApi">@android:color/transparent</item>
    </style>

然后再AndroidManifest.xml中的activity设置

android:theme="@style/ImageTranslucentTheme"
  <activity
            android:name=".view.ui.activity.LoginActivity"
            android:launchMode="singleTask"
            android:theme="@style/ImageTranslucentTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

最后在需要设置的Activity中设置


        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = getWindow();
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS
                    | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);
            window.setNavigationBarColor(Color.TRANSPARENT);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//4.4到5.0
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }

之前的效果

之后的效果

要用Web语言(通常指HTML、CSS和JavaScript)为华为手机制作介绍页面,可以按照以下步骤来设计: 1. **HTML结构**: - 使用HTML5框架创建网页骨架,包括头部(head)、主体(body)等元素。例如: ``` <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>华为手机介绍</title> <link rel="stylesheet" href="styles.css"> <!-- 引入样式表 --> </head> <body> <header> <h1>华为手机介绍</h1> </header> <main> <section class="phone-intro"> <!-- 产品图片和信息将放在这里 --> </section> </main> </body> </html> ``` 2. **CSS样式**: - 创建一个名为`styles.css`的文件,添加样式来美化布局和内容。比如字体、颜色、间距和响应式设计,让页面适应不同屏幕尺寸的华为手机。 ``` .phone-intro { /* 样式如:背景颜色、标题样式、内容区域大小等 */ } ``` 3. **JavaScript交互**: - 如果需要动态效果,可以使用JavaScript来控制图片轮播、展示详细规格或者用户交互。例如: ```javascript document.addEventListener('DOMContentLoaded', function() { // 图片轮播或按钮点击事件处理 }); ``` 4. **内容填充**: - 在`<section>`标签内插入华为手机图片、型号、特色功能、性能指标等文字描述。 5. **响应式设计**: - 通过媒体查询(@media)确保页面在不同华为设备上显示良好,考虑到屏幕尺寸和触控优化。 完成以上步骤后,用户访问该网页就能看到华为手机的简介,并能通过简单的交互获取更多信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值