刘海屏适配和状态栏、标题栏隐藏

刘海屏从Iphone 8开始,这股风慢慢吹到了Android平台,目前市面上的刘海屏主要集中在高版本的高端机器上,国内主要以华为P20,Vivo,Oppo最新旗舰机在引领刘海屏,刘海屏如下图:


各种样式刘海屏

在刘海屏之前先了解一下标题栏和状态栏,状态栏就是App中最上面的那一栏,显示信号、电量等状态信息,标题栏一般显示App名称,返回键按钮等,Android3.0叫ActionBar,5.0又推出ToolBar,使用support包可以在4.0的版本上使用ToolBar。下图中,深蓝色的为状态栏,浅蓝色带“App”字样的为标题栏。

标题栏和状态栏

在对刘海屏进行适配时,如果界面状态栏和标题栏都存在的情况下,界面会自动适配,不需要再做过多的适配设置,如果状态栏和标题栏都隐藏,开发者就需要考虑刘海屏的适配问题。下面对状态栏和标题栏隐藏进行说明。
父Activity为Activity
对于继承自Acitivity的,隐藏标题栏可以通过如下代码,需要注意代码需要放在setContentView()之前,否则没效果:

 requestWindowFeature(Window.FEATURE_NO_TITLE);

也可以通过在AndroidManifest中对Application或者Activity中对Theme进行设置,来隐藏状态栏区别是Application是对整个应用起作用,即所有Activity;Activity只对当前Activity起作用。

       android:theme="@android:style/Theme.Black.NoTitleBar"

关于隐藏状态栏,网上都说通过如下代码进行设置,本人进行了真机测试发现和全屏一样,即将状态栏和标题栏一起隐藏了,隐藏直接跳过隐藏状态栏。

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

隐藏状态栏和标题栏通过如下代码设置,同样代码需要放在setContentView()之前,否则没效果

 requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

也可以在AndroidManifest中设置Theme,将状态栏和标题栏隐藏:

 android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"

父Activity为AppCompatActivity
在Android Studio中创建的Activity默认是继承AppCompatActivity,AppCompatActivity使用如下代码,只能隐藏状态栏,无法将标题栏隐藏

 requestWindowFeature(Window.FEATURE_NO_TITLE);
 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

要想将标题栏隐藏可以再加一行代码:

android.support.v7.app.ActionBar actionBar = getSupportActionBar();
        actionBar.hide();

最终代码为:

   requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);
        android.support.v7.app.ActionBar actionBar = getSupportActionBar();
        actionBar.hide();

注意代码的前后顺序,注意代码的顺序,注意代码的顺序,重要的事说三遍。
在Activity中通过代码隐藏玩状态栏之后
对于AppCompatActivity同样可以对Theme进行设置,来隐藏状态栏和标题栏,在Theme中添加如下两行代码即可实现:

 <item name="windowActionBar">false</item>
 <item name="windowNoTitle">true</item>
隐藏状态栏
全屏显示(隐藏状态栏和标题栏)

刘海屏适配

状态栏和标题栏告一段落,现在来讲一下刘海屏适配问题。刘海屏分为三种情况:

  • 有状态栏页面,不会受到刘海影响
  • 无状态栏页面,未适配刘海
  • 无状态栏页面,适配刘海


    带状态栏刘海屏
不带状态栏刘海屏
不带状态栏适配刘海屏

从上面三张图片可以明显看出区别,刘海屏适配分为两种方案,一种是按照Google官方,另一种就是各个手机厂商自己的。由于Google官方需要SDK_INT >=28,也就是Android P才能使用,所以目前还无法进行实测。所以本文主要以第二种方案进行实测。
华为刘海屏适配方案:
http://mini.eastday.com/bdmip/180411011257629.html
Oppo刘海屏适配方案:
https://open.oppomobile.com/wiki/doc#id=10139
Vivo刘海屏适配方案
https://dev.vivo.com.cn/doc/document/info?id=103
本文以华为P20 Pro为测试机进行了适配方案实测,首先按照上面描述的将页面进行全屏设置,将状态栏和标题栏进行隐藏,界面显示为:

根据官方刘海屏适配,在AndroidManifest中对Application或者Activity添加如下代码:

<meta-data
        android:name="android.notch_support"
        android:value="true" />

或者在Activity中使用代码设置:

/*刘海屏全屏显示FLAG*/
public static final int FLAG_NOTCH_SUPPORT=0x00010000;
/**
 * 设置应用窗口在华为刘海屏手机使用刘海区
 * @param window 应用页面window对象
 */
public static void setFullScreenWindowLayoutInDisplayCutout(Window window) {
    if (window == null) {
        return;
    }
    WindowManager.LayoutParams layoutParams = window.getAttributes();
    try {
        Class layoutParamsExCls = Class.forName("com.huawei.android.view.LayoutParamsEx");
        Constructor con=layoutParamsExCls.getConstructor(LayoutParams.class);
        Object layoutParamsExObj=con.newInstance(layoutParams);
        Method method=layoutParamsExCls.getMethod("addHwFlags", int.class);
        method.invoke(layoutParamsExObj, FLAG_NOTCH_SUPPORT);
    } catch (ClassNotFoundException | NoSuchMethodException | IllegalAccessException |InstantiationException 
    | InvocationTargetException e) {
        Log.e("test", "hw add notch screen flag api error");
    } catch (Exception e) {
        Log.e("test", "other Exception");
    }
}

最终适配刘海屏实测结果为:


实测结果

主意观察显示的Button,由于适配了刘海屏,导致Button显示不全。因此开发人员还要进行UI的适配,尽量调整布局避开刘海区,布局原则:保证重要的文字、图片和视频信息、可点击的控件和图标还有应用弹窗等等布局建议显示在状态栏区域以下(安全区域);不重要,遮挡不会出现问题的布局可以延伸到状态栏区域(危险区域)显示。


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

推荐阅读更多精彩内容