Android 凹口屏启动界面适配

今天 Google 正式发布了 Android 9 Pie,所以也着手把应用的 Target Version 升级到 API 28,现在凹口屏 (又称 "刘海屏") 的 Android 手机越来越多,Google 也是为了满足各手机厂商这个发展趋势提供了相应的 API。

我们可以参考 Google 的这篇 Android P 凹口屏支持,打造全面屏体验
提到的凹口屏幕适配方案。也可以请查阅官方文档《屏幕缺口支持指南》,了解适配过程中可能遇到的问题以及相应解决方案。

△ 凹口屏设备: Essential PH-1 (右) 和华为 P20 (左)

我们先来看看我的应用在没有适配凹口屏时的启动界面:
应用界面上方存在一条大黑边:

适配前启动界面

下面就来说说我在实际适配凹口屏 Android 手机的过程:

1. 开启显示凹口模式

如果你没有凹口屏的真机,也可以在非凹口屏 P 版本手机或者 Android 模拟器中,开启 "模拟具有凹口的显示屏" 的设置项,然后再进行调试。

2. 适配长屏幕的全面屏

我们首先要确保应用在长屏幕设备上 (纵横比大于或等于 18:9) 也能够正常运行,尤其是现在市面上长屏手机越来越多,而且这些设备往往同时还采用了凹口屏设计。
当我们的应用布局无法适应任意大的宽高比,可以通过设置最大宽高比来声明,Google 建议这个最大比率为 2.4(12:5)

  • 在 Android 8.0(API 26)及更高版本中,我们可以在 <activity> 标签中使用 android:MaxAspectRatio 来声明其支持的屏幕最大宽高比。比如我们可以声明最大宽高比为 2.4:
<!-- Render on full screen up to screen aspect ratio of 2.4 -->
<!-- Use a letterbox on screens larger than 2.4 -->
<activity android:maxAspectRatio="2.4">
 ...
</activity>
  • 对于Android 7.1及更低版本,我们可以在 <application> 元素中添加名为 android.max_aspect 的 <meta-data> 元素,如下所示:
<!-- Render on full screen up to screen aspect ratio of 2.4 -->
<!-- Use a letterbox on screens larger than 2.4 -->
<meta-data android:name="android.max_aspect" android:value="2.4" />

注意:如果设置了最大宽高比,请不要忘记也设置 android:resizeableActivity false。否则,最大宽高比无意义。

这是因为从 Android 7.0 开始,应用的多窗口模式变为默认启动。在多窗口模式下,默认你的应用已经进行了全面屏适配,如果我们不想应用在多窗口模式下运行,可以修改以下属性:

android:resizeableActivity="false"

3. 适配凹形屏幕

Google 为刘海屏显示方式提供了三种显示模式:

// 默认情况,全屏页面不可用刘海区域,非全屏页面可以进行使用
public static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT = 0;
// 允许页面延伸到刘海区域
public static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES = 1;
// 不允许使用刘海区域
public static final int LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER = 2;

我们可以通过下面两种方式来指定应用在凹形屏幕的显示模式:

  • 在主题中加入android:windowLayoutInDisplayCutoutMode 属性指定显示模式:
// value-v28/styles.xml
 <style name="AppTheme.Launcher" parent="AppTheme">
        <item name="android:windowBackground">@drawable/branded_launch_screens</item>
        <item name="android:statusBarColor">@color/colorPrimary</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>
  • 通过在代码中指定 Activity 的显示模式

我们可以在 Activity 的 onCreate 中指定凹形屏幕的显示模式:

@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT >= 28) {
            WindowManager.LayoutParams lp = getWindow().getAttributes();
            lp.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
            getWindow().setAttributes(lp);
        }
}

最终效果:

适配后的启动界面
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容