「Android」解决Android 10 全面屏底部小横条的颜色问题

底部小横条有没有统一叫法…目前看叫 Navigation Bar

没有适配时

前言

没有适配时,运行以后发现底部被系统占用了,开始以为是跟ios一样需要对页面进行适配,后来仔细看发现两点问题:

  1. 底部左右是带弧度的,证明页面应该没问题,只是被黑色覆盖了。
  2. 仔细看黑色的小横条位置可以看到下面的白色页面,证明应该是颜色问题。

解决方案

在 styles.xml里加入如下代码,设置 navigation bar 颜色为透明即可
<item name="android:navigationBarColor">@android:color/transparent</item>

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
苹果底部横条(iPhone X 及以上机型的底部指示条)的高度为 34px,它会遮挡小程序底部部分内容,因此需要进行适配。 在支付宝小程序中,可以使用 `safe-area-view` 组件来适配苹果底部横条。`safe-area-view` 组件可以根据设备的实际情况自动调整布局,使得小程序内容不被遮挡。 具体实现步骤如下: 1. 在需要适配的页面的 `.axml` 文件中,使用 `safe-area-view` 标签包裹需要适配的内容。 2. 在 `safe-area-view` 标签中设置 `padding-bottom` 属性,属性值为 `34rpx`,表示底部留出 34px 的安全区域。 下面是一个示例代码: ```html <safe-area-view style="background-color: white;"> <view style="height: 100vh; padding-bottom: 34rpx;"> <!-- 需要适配的内容 --> </view> </safe-area-view> ``` 注意:使用 `safe-area-view` 组件进行适配时,需要将适配的内容放在 `safe-area-view` 标签内,而不能直接放在页面根节点下。另外,需要注意 `padding-bottom` 的值,不同的设备可能需要设置不同的值来适配底部横条。 另外,如果小程序中有固定在底部的 tabbar,也需要进行适配,可以在 `.axml` 文件中使用 `tabbar` 标签,并设置 `safe` 属性为 `true`,表示在底部留出安全区域。 下面是一个示例代码: ```html <tabbar safe="true"> <tabbar-item text="首页" icon="home" url="/pages/index/index"></tabbar-item> <tabbar-item text="分类" icon="category" url="/pages/category/category"></tabbar-item> <tabbar-item text="购物车" icon="cart" url="/pages/cart/cart"></tabbar-item> <tabbar-item text="我的" icon="user" url="/pages/user/user"></tabbar-item> </tabbar> ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值