QMUI（Android）炒鸡简单的配置详解

2017-11-24 本文已影响2224人一只文艺猿猿猿

最近由于工作紧张，没有更新博客，通过几个项目经验，小哥儿又准备了一大波Android开发技能跟大家分享。
来不及解释了，准备好了嘛？快上车！

1. QMUI已开源，页面开发新技能，腾讯出品，必属精品。

使用QMUI已经有一段时间了，但是小哥也有几个技术交流群，问及QMUI的体验时，用过的都说好~ 但是，还有很多小伙伴对于QMUI的官网的文档说明表示看不懂。呃。。。确实，因为小哥也是看了好几遍文档没搞明白文档说的什么，所以呢，小哥就把官网的demo源码down下来看了一下，其实也不难，小哥也建议大家通过demo学习使用，点击直达QMUI官网
好了，废话不多说，开车！

2.QMUI配置

配置很简单，跟着我一步步走，总共三步：一步配置依赖，一步修改主题。

1.引入库

As导入依赖 compile 'com.qmuiteam:qmui:1.0.4'
在build.gradle（module:app）的dependencies的闭包中添加QMUI依赖

    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1' 
    ********************************************
    * compile 'com.qmuiteam:qmui:1.0.4' //QMUI *
    ********************************************
}

2. 配置主题

修改主题，官方文档说的有点含糊不清，其实其意思就是将AndroidManifest的application指向的theme（按住ctrl点击@style/AppTheme）的parent根布局修改为QMUI的根元素QMUI.Compat(有actionbar)或者QMUI.Compat.NoActionBar(无actionbar，项目经常用，个人推荐)。至此，QMUI控件都可以使用了。

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="QMUI.Compat.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>

截至以上一步QMUI已经可以使用了，但是这样QMUI中有些控件的颜色并还是默认的，可以通过覆盖item的方式修改控件颜色，此步骤最好配合QMUI的Demo点击直达QMUIDemo，缺少什么复制什么就好，然后根据项目的主题颜色进行修改。
。（根据项目需要，这步可以省略。）

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



        <!-- 配置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_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>
        <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>

Demo很大，加载的时候挺慢的，耐心等待编译即可
Demo中包含很多依赖库，运行Demo时运行全部文件，不要只运行qmuidemo部分
QMUI的控件都在qmuidemo中的的package下的fragment中，里面有详细的使用

QMUI组件位置
Demo正常结构是这样的：

QMUIDemo的项目正确结构

Bingo! 配置已经搞定啦，接下来就是QMUI控件的使用了，炒鸡激动~

3. QMUI组件使用

QMUI的组件非常非常的丰富：

自动圆角的button（上下左右圆角都可设定，圆角可自行指定）
圆形、椭圆imageview（不多说，Glide也可以实现）
Dialog（普通弹窗（弹窗按钮自定颜色，警告颜色（比如删除），正常颜色）；多item单选菜单弹窗，多item复选弹窗，根据键盘高度自适应高度dailog（比如dailog中有editText，键盘有肯能被遮挡，踩过坑的都知道））。
流布局（搜索中历史记录，购物车页面的型号什么的，因为字数不确定，用GridLayout适配很不友好）
tablayout（Material Desig库中的也有，但是QMUI中有各式各样的，你一定会爱上它）
可以回滚的progressbar（进度条：横向，圆形都有）
多种动画样式的下拉刷新
万能设置页面（系统设置页面再也不用写了，一个控件集成搞定）
可以垂直显示的textview，根据宽带高度自动适配字体大小的textview（Android8.0也可以了，textview宽高指定后，android:autoSizeTextType="uniform"，字体大小会自动适配，给亲爹点赞，ios说了：“切，老子天生自带！”），自动识别网址URL，Emai，phone的textview，点击就跳转~
popwindow（除了基本的，还可以pop列表）
QQ表情view（拿来就用）
viewpager（底部导航栏+viewpager已经封装好了，拿走就用；自带翻转效果的viewpager（类似探探左右滑效果））；和一些常用的布局（其实用Material Desig都可以实现，不多介绍）
一行代码沉浸式
设备型号判断（mi啊，Meizu啊，Huawei啊，这些适配恶心的机型，<== 不黑不吹），浮窗权限判断。
通过一个View生成一个bitmap对象（俗称截屏）
更多的常用工具类（比如dp2px等等）

由于工作时间关系，我要下班啦，好开森，先写到这里吧，后续后详细讲解QMUI组件的详细使用。

空欢喜就是早上醒来，以为自己长高了，仔细一看，原来是tm被子盖横了…… Embarrassing~