QMUI Android的学习——（1）引入库配置主题，并实现沉浸式状态栏效果

最近进行安卓方面的学习，其中用到了腾讯开源的Android UI框架——QMUI Android，这是一个封装完善的Android UI组件库，可以给项目的开发提高了很高的工作效率，但是官方的API文档并不是很详细，所以需要花费时间通过对官方给出的QMUIDEMO进行学习。

这是官方网站：https://qmuiteam.com/android，根据使用步骤引入库开始使用。

这是github上官方提供的demo：https://github.com/QMUI/QMUI_Android，下载后可以研究学习。

首先在build.gradle 中通过 implementation 'com.qmuiteam:qmui:+' 引入框架.

最终实现效果如下

主要代码：

MainActivity

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import com.qmuiteam.qmui.util.QMUIStatusBarHelper;
import com.qmuiteam.qmui.widget.QMUITopBar;

public class MainActivity extends AppCompatActivity {
    private QMUITopBar mTopBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 沉浸式状态栏
        QMUIStatusBarHelper.translucent(this);
        mTopBar=findViewById(R.id.topbar);
        //左上角←键点击事件监听
        mTopBar.addLeftBackImageButton().setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        mTopBar.setTitle(getResources().getString(R.string.app_name));
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".MainActivity">

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="QMUI.Compat.NoActionBar">
        <!-- 配置Android提供的theme -->
        <item name="android:textAppearanceListItemSmall">@style/QDTextAppearanceListItemSmall</item>
        <item name="android:textAppearanceListItem">@style/QDtextAppearanceListItem</item>
        <item name="android:listPreferredItemHeight">?attr/qmui_list_item_height_higher</item>
        <item name="android:listPreferredItemHeightSmall">?attr/qmui_list_item_height</item>

        <!-- 配置qmui提供的theme -->
        <item name="qmui_config_color_blue">@color/app_color_blue</item>
        <item name="qmui_round_btn_bg_color">@color/s_btn_blue_bg</item>
        <item name="qmui_round_btn_border_color">@color/s_btn_blue_border</item>
        <item name="qmui_round_btn_text_color">@color/s_btn_blue_text</item>
        <item name="qmui_content_spacing_horizontal">20dp</item>
        <item name="qmui_content_padding_horizontal">@dimen/qmui_content_spacing_horizontal</item>

        <item name="QMUITopBarStyle">@style/QDTopBar</item>

        <!-- 配置app自己的theme -->
        <item name="app_primary_color">?attr/qmui_config_color_blue</item>
        <item name="app_content_bg_color">@color/qmui_config_color_white</item>

    </style>

    <style name="QDtextAppearanceListItem">
        <item name="android:textColor">?attr/qmui_config_color_black</item>
        <item name="android:textSize">18sp</item>
        <item name="android:background">?attr/qmui_s_list_item_bg_with_border_bottom_inset_left
        </item>
    </style>

    <style name="QDTextAppearanceListItemSmall">
        <item name="android:textColor">?attr/qmui_config_color_gray_4</item>
        <item name="android:textSize">16sp</item>
        <item name="android:background">?attr/qmui_s_list_item_bg_with_border_bottom_inset_left
        </item>
    </style>

    <style name="QDCommonTitle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginBottom">6dp</item>
        <item name="android:textColor">?attr/qmui_config_color_gray_1</item>
        <item name="android:textSize">17sp</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="QDCommonDescription">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginBottom">20dp</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@color/app_color_description</item>
        <item name="android:textSize">15sp</item>
    </style>

    <style name="QDTopBar" parent="QMUI.TopBar">
        <item name="qmui_topbar_bg_color">?attr/app_primary_color</item>
        <item name="qmui_topbar_title_color">@color/qmui_config_color_white</item>
        <item name="qmui_topbar_subtitle_color">@color/qmui_config_color_white</item>
        <item name="qmui_topbar_text_btn_color_state_list">@color/s_topbar_btn_color</item>
        <item name="qmui_topbar_height">48dp</item>
        <item name="qmui_topbar_image_btn_height">48dp</item>
    </style>

    <style name="QDRadiusButton" parent="@style/Button">
        <item name="android:layout_height">40dp</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:paddingLeft">?attr/qmui_content_spacing_horizontal</item>
        <item name="android:paddingRight">?attr/qmui_content_spacing_horizontal</item>
        <item name="android:background">@drawable/s_radius_button_bg</item>
        <item name="android:textColor">@color/s_app_color_blue_2</item>
        <item name="android:textSize">14sp</item>
        <item name="android:gravity">center</item>
    </style>

    <style name="button_wrapper_style">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:paddingTop">24dp</item>
        <item name="android:paddingBottom">24dp</item>
        <item name="android:background">@drawable/qmui_divider_bottom_bitmap</item>
    </style>

    <style name="DialogTheme2" parent="QMUI.Dialog">
        <item name="qmui_dialog_wrapper_style">@style/dialog_wrapper_style_63</item>
        <item name="qmui_dialog_title_style">@style/DialogTheme2TitleStyle</item>
        <item name="qmui_dialog_action_container_style">@style/DialogTheme2ActionContainerStyle
        </item>
        <item name="qmui_dialog_action_style">@style/DialogTheme2ActionStyle</item>
        <item name="qmui_dialog_message_content_style">@style/DialogTheme2MessageContentStyle</item>
        <item name="qmui_dialog_menu_container_style">@style/DialogTheme2MenuContainerStyle</item>
        <item name="qmui_dialog_menu_item_style">@style/DialogTheme2MenuItemStyle</item>
    </style>

    <style name="ReleaseDialogTheme" parent="DialogTheme2">
        <item name="qmui_dialog_wrapper_style">@style/QMUI.Dialog.Wrapper</item>
        <item name="qmui_dialog_message_content_style">@style/ReleaseMessageContentStyle</item>

    </style>

    <style name="dialog_wrapper_style_63">
        <item name="android:paddingLeft">63dp</item>
        <item name="android:paddingRight">63dp</item>
    </style>

    <style name="DialogTheme2TitleStyle" parent="QMUI.Dialog.Title">
        <item name="android:textColor">?attr/qmui_config_color_gray_1</item>
        <item name="android:textSize">17sp</item>
        <item name="android:gravity">center</item>
        <item name="android:paddingTop">28dp</item>
        <item name="android:singleLine">false</item>
        <item name="android:lineSpacingExtra">3dp</item>
    </style>

    <style name="DialogTheme2ActionContainerStyle">
        <item name="android:paddingLeft">0dp</item>
        <item name="android:paddingRight">0dp</item>
        <item name="android:paddingTop">0dp</item>
        <item name="android:paddingBottom">0dp</item>
        <item name="qmui_dialog_action_container_justify_content">stretch</item>
        <item name="qmui_dialog_action_height">56dp</item>
        <item name="qmui_dialog_action_space">8dp</item>
        <item name="qmui_topDividerColor">?attr/qmui_config_color_separator</item>
        <item name="qmui_topDividerHeight">1px</item>
    </style>

    <style name="DialogTheme2ActionStyle">
        <item name="android:textColor">?attr/qmui_config_color_blue</item>
        <item name="android:textSize">15sp</item>
        <item name="android:gravity">center</item>
        <item name="android:minWidth">64dp</item>
        <item name="android:background">@null</item>
        <item name="qmui_dialog_action_button_padding_horizontal">12dp</item>
        <item name="qmui_dialog_action_icon_space">6dp</item>
        <item name="qmui_dialog_positive_action_text_color">?attr/qmui_config_color_blue</item>
        <item name="qmui_dialog_negative_action_text_color">?attr/qmui_config_color_red</item>
    </style>

    <style name="DialogTheme2MessageContentStyle" parent="QMUI.Dialog.MessageContent">
        <item name="android:textColor">?attr/qmui_config_color_gray_4</item>
        <item name="android:textSize">13sp</item>
        <item name="android:gravity">center</item>
        <item name="android:paddingTop">13dp</item>
        <item name="android:paddingBottom">27dp</item>
        <item name="android:lineSpacingExtra">5dp</item>
        <item name="qmui_paddingTopWhenNotTitle">27dp</item>
    </style>

    <style name="ReleaseMessageContentStyle" parent="DialogTheme2MessageContentStyle">
        <item name="android:textSize">14sp</item>
        <item name="android:gravity">left</item>
    </style>

    <style name="DialogTheme2MenuItemStyle" parent="@style/QMUI.Dialog_MenuItem">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">?attr/qmui_config_color_gray_1</item>
        <item name="android:paddingLeft">32dp</item>
        <item name="android:paddingRight">32dp</item>
    </style>

    <style name="DialogTheme2MenuContainerStyle" parent="@style/QMUI.Dialog.MenuContainer">
        <item name="qmui_dialog_menu_item_height">52dp</item>
        <item name="qmui_dialog_menu_container_padding_top_when_title_exist">23dp</item>
        <item name="qmui_dialog_menu_container_padding_bottom_when_action_exist">24dp</item>
    </style>
</resources>

其他相关文件从qmuidemo的res文件夹里拿过来吧

下期学习底部导航栏的实现