Android端App开发之刘海屏手机全屏设置实践

笔者最近开发一款视频同步演示产品，主要功能是：多台手机设备在手机专卖店展台区同步播放宣传视频，即在任何时间打开任一台设备都要同步播放视频，达到宣传产品和整体化一的用户体验，原理即在服务器打开网页播放展示视频，循环播放同时把播放进度更新到数据库，客户端手机打开App先下载视频到本地，然后获取当前视频播放进度开始播放本地视频，从而达到媲美直播推流的效果，从效果来看视频进度参考方案完美绝杀直播推流方案。

直播推流 VS 视频参照

前者：搭建直播推流服务复杂、网络延迟较高、流量费用高、用户体验良好、成本高；

后者：搭建后台管理系统容易、网络延迟较低、无额外费用、用户体验良好、成本低；

问题提要：

在Android设备安装App播放视频时，需要视频全屏展示，即无状态栏和导航按键，但在非刘海和刘海手机设备中的遇到问题，各自设置略有不同，故简要做此记录：

1，常规全屏设置：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

该主题源码可看到已经隐藏了状态栏：

 <style name="Theme.AppCompat.Light.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

但在刘海屏幕下上面会有状态栏，无法全屏：

这样效果体验不是很好，经过测试和设置，做了彻底全屏；

2，刘海全屏设置

第一步，增加主题属性，代码如下：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>


    <style name="AppTheme.StartingWindowTheme" parent="AppTheme">
       
        <!-- 非常重要，不设置，后续设置无效 -->
        <item name="android:windowTranslucentStatus">true</item>

    </style>

</resources>

第二步，在配置文件中加入代码：

<application
        android:allowBackup="true"
        android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:networkSecurityConfig="@xml/network_config"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"
            android:theme="@style/AppTheme.StartingWindowTheme"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <!--全屏设置，必须加入-->
        <meta-data
            android:name="android.notch_support"
            android:value="true" />

    </application>

第三步，在Activity中加入如下代码：

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //全屏设置
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

        setContentView(R.layout.activity_main);
    }

至此，经测试按照如上测试，注意上面设置一个也不能少，即可达到刘海全屏的良好体验，效果如下：

另附上隐藏导航虚拟按键代码片段：

 /**
     * 隐藏虚拟按键
     */
    protected void hideBottomUIMenu() {
        //隐藏虚拟按键
        if (Build.VERSION.SDK_INT > 11 && Build.VERSION.SDK_INT < 19) { // lower api
            View v = this.getWindow().getDecorView();
            v.setSystemUiVisibility(View.GONE);
        } else if (Build.VERSION.SDK_INT >= 19) {
            //for new api versions.
            View decorView = getWindow().getDecorView();
            int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
            decorView.setSystemUiVisibility(uiOptions);
        }
    }

    /**
     * 恢复普通状态
     */
    private void showBottomUIMenu() {

        if (Build.VERSION.SDK_INT > 11 && Build.VERSION.SDK_INT < 19) { // lower api
            View v = this.getWindow().getDecorView();
            v.setSystemUiVisibility(View.VISIBLE);
        } else if (Build.VERSION.SDK_INT >= 19) {
            //for new api versions.
            View decorView = getWindow().getDecorView();
            int uiOptions = View.SCREEN_STATE_OFF;
            decorView.setSystemUiVisibility(uiOptions);
        }
    }

附：产品上线效果展示：

备注：该产品已上线，后台视频展示参考区部分请参考笔者另一篇文章：基于 Bootstrap 与 Video.js 开发Web视频播放页面 ，如有疑问，留言即可。