QMUI Android框架使用探索与详细步骤2-实现沉浸式状态栏

上一篇文章中，已经正常的将QMUI框架引入到项目中了，并且实现了调用框架里面的对话框功能。

上一篇链接：QMUI Android框架初步使用1-环境配置到正常现实对话框

这次继续在上一篇的基础上，将状态栏改为沉浸式，即修改为跟官方demo效果一样。

1、添加沉浸式状态栏，只要一行代码就够了。如下图所示，官方指引：

通过在Activity中调用QMUIStatusBarHelper.translucent()方法，即可实现沉浸式状态栏的效果。

那么我们在MainActivity 的 onCreate方法中添加这行代码。

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 沉浸式状态栏
        QMUIStatusBarHelper.translucent(this);

    }

结果却发现界面变成全白，如下图所示。跟官方的效果不一样，没有显示出官方看到的模样。难道所我们的代码加错了？查找原因。

注意到状态栏没了，连最上面的显示时间和信号的也没了，变成了全屏。那么去看看官方的demo源码是怎么使用的。官方的demo，沉浸式状态栏的样例文件是TranslucentActivity这个类，如下图所示。

官方的demo是一整个框架，代码比较复杂，我们要抽丝剥茧，只需要使用核心代码。找到了官方代码调用QMUIStatusBarHelper.translucent(this);的地方，前后都有很多其他代码。先不管那些，往下看。有个initTopBar();函数，看名字，难道我们也要初始化状态栏。

进去看看代码。好像是设置背景颜色和标题。那我们也就依葫芦画瓢，设置一下颜色和标题，看看效果。

• 直接把整个initTopBar函数的代码复制到我们的项目中，报错，提示mTopBar未定义。
• 那我们也定义，按照官方demo把顶部的@BindView(R.id.topbar) QMUITopBar mTopBar;这一行复制进去。提示BindView报错。
• BindView是什么鬼，没见过？百度一下。好像是根据注释来生成控件的绑定事件，大致看了下，搞不明白，先不管了。
• 看官方的使用，在头部引入了“import butterknife.BindView;”和“import butterknife.ButterKnife;”这2行，那我们也引入进去。
• 还是在butterknife处标红报错，继续查找哪里出了问题。最后，需要添加编译引用。在Gradle Scripts那里，找到build.gradle(Module:app)文件，在dependencies里面添加butterknife的编译引用。注意把compile改成implementation。如下所示，添加编译依赖。

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support.constraint:constraint-layout:1.1.0'
    implementation 'com.qmuiteam:qmui:1.1.2'
    implementation 'com.jakewharton:butterknife:8.4.0'
    annotationProcessor 'com.jakewharton:butterknife-compiler:8.4.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

现在再看，BindView不报错了，但是topbar还是标红报错，提示未定义。查看官方源码，我们也需要在layout布局文件中，添加状态栏区域。在我们的activity_main.xml文件中，在按钮的上面添加状态栏布局代码。如下图所示。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...>

    <com.qmuiteam.qmui.widget.QMUITopBar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/qmui_topbar_height"/>
    <Button... />

    <Button.../>
</LinearLayout>

颜色值app_color_theme_4报错未定义，那么把颜色定义文件colors.xml拷贝到我们的res下values文件夹中，直接覆盖掉我们之前的colors.xml文件。

现在项目不报错了，运行试试。一运行就报错，看debug的提示，是在空的对象上调用了QMUITopBar.setBackgroundColor(int)方法。跟那个初始化代码有关。

再对比一下官方，我们把ButterKnife.bind(this, root);也加上去，弄的跟官方的一样。代码如下。注意我们自己的setContentView要注释掉。

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);
        // 沉浸式状态栏
        QMUIStatusBarHelper.translucent(this);
        //初始化状态栏
        View root = LayoutInflater.from(this).inflate(R.layout.activity_main, null);
        ButterKnife.bind(this, root);
        initTopBar();
        setContentView(root);
    }

现在再运行，出现如下效果。状态栏出来了，不过跑到中间去了。

这可能跟我们的layout文件的gravity设置为center有关。因为既然状态栏是在layout中定义的位置，那么就是由布局文件控制的。我们调整一下，去掉gravity属性。结果却变成了下面的样子，感觉状态栏的高度好像少了一截。

我们需要在layout文件中再加上android:fitsSystemWindows="true"，在看效果。状态栏的高度正常了，不过颜色是白的。

按照官方demo，设置一下背景颜色。在布局文件layout中添加android:background="@color/app_color_theme_4"，再看效果。一切正常了。

但是我们的和官方的，还是有点差异。主要是颜色上跟官方还不一样。官方的背景是白色的。我们在下一篇文章中再调吧。

下一篇链接：QMUI Android框架使用探索与详细步骤3-沉浸式状态栏颜色调整及按钮应用

现在整体的代码贴出来。为节省篇幅，非核心的代码就省略掉。

activity_main.xml文件

<?xml version="1.0" encoding="utf-8"?><!--
  ~ *************************************************************
  ~ 文件：activity_main.xml  模块：app  项目：QMUI_Practise
  ~ 当前修改时间：2018年05月29日 19:37:00
  ~ 上次修改时间：2018年05月29日 19:36:55
  ~ 作者：大路
  ~ Copyright (c) 2018
  ~ *************************************************************
  -->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_color_theme_4"
    android:orientation="vertical"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <com.qmuiteam.qmui.widget.QMUITopBar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/qmui_topbar_height"/>
    <Button... />

    <Button.../>
</LinearLayout>

MainActivity.java文件：

import ...

public class MainActivity extends Activity {
    @BindView(R.id.topbar) QMUITopBar mTopBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);
        // 沉浸式状态栏
        QMUIStatusBarHelper.translucent(this);
        //初始化状态栏
        View root = LayoutInflater.from(this).inflate(R.layout.activity_main, null);
        ButterKnife.bind(this, root);
        initTopBar();
        setContentView(root);
    }

    private void initTopBar() {
        mTopBar.setBackgroundColor(ContextCompat.getColor(this, R.color.app_color_theme_4));
        mTopBar.addLeftBackImageButton().setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
                overridePendingTransition(R.anim.slide_still, R.anim.slide_out_right);
            }
        });

        mTopBar.setTitle("沉浸式状态栏示例");
    }
    public void onClickShowDefaultDialog(View view) {...}

    public void onClickShowQMUIDialog(View view) {...}
}