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

在上一篇文章中，实现了沉浸式状态栏的布局效果，唯一欠缺颜色和官方的不一样，这次把颜色调整过来。

上篇文件链接： QMUI Android框架使用探索与详细步骤2-实现沉浸式状态栏

QMUI框架官方定义了很多颜色、样式、属性文件。如果我们对框架熟悉，也可以只使用哪个组件，就只引用相关组件的颜色定义文件。但是为了方便使用，我们直接把官方的样式相关文件都copy进来。

1、拷贝res下的values文件夹。除了strings.xml文件用我们自己的。其他的文件都用官方的，包括styles.xml、colors.xml、attr.xml、dimens.xml、ids.xml文件。

2、拷贝res下的color文件夹，到我们本地项目中。将color文件夹中的所有xml文件同步拷贝过去。

3、拷贝res下drawable文件夹下的xml文件，到我们本地的项目中。注意：我们暂时只拷贝xml文件，webp图片不拷贝。

官方的drawable文件夹下有很多webp格式图标，如果感兴趣在自己的项目中使用，也可以拷贝过去。看看这些图标，资源还是不少的。只不过都是webp格式的文件，需要使用XnConvert进行转换查看。当然，如果要使用，则不需要转换。

现在我们的项目res差不多有下面这些文件了，如下图所示。

现在编译运行项目，效果如下。可见状态栏的文字颜色都统一变成白色了，上次标题文字是黑色的。看来风格样式已经得到了统一。只是我们的颜色是淡绿色，不是淡蓝色，跟官方的颜色不一样。那我们调整过来。

现在我们把layout文件中设置的背景色修改一下。在activity_main.xml文件中，把    android:background="@color/app_color_theme_4"修改成“android:background="?attr/app_primary_color"”。

再去掉状态栏设置的颜色，在MainActivity.java文件的initTopBar()方法中把mTopBar.setBackgroundColor(ContextCompat.getColor(this, R.color.app_color_theme_4));这行代码去掉。

再运行代码，效果如下，颜色已经变过来了。

不过按钮上面有个白色的线，内容的背景色还不是白色。我们把布局再调整一下。顺便把按钮的样式也直接改成官方的圆角按钮。修改后，运行效果如下。

修改样式后的layout文件activity_main.xml代码如下，代码文件MainActivity.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="?attr/app_primary_color"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/qmui_config_color_white"
        android:gravity="center_horizontal"
        android:orientation="vertical">


        <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
            android:id="@+id/button_showDefaultDialog"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:onClick="onClickShowDefaultDialog"
            android:paddingBottom="10dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="10dp"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:text="@string/button_showDefaultDialog"
            app:qmui_isRadiusAdjustBounds="true" />


        <com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
            android:id="@+id/button_showQMUIDialog"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:clickable="true"
            android:gravity="center"
            android:onClick="onClickShowQMUIDialog"
            android:padding="10dp"
            android:text="@string/button_showQMUIDialog"
            app:qmui_radius="4dp" />
    </LinearLayout>
</LinearLayout>

MainActivity.java的关键代码如下

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) {... }
}