QMUI(Android)炒鸡简单的配置详解

最近由于工作紧张,没有更新博客,通过几个项目经验,小哥儿又准备了一大波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~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,902评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,037评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,978评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,867评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,763评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,104评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,565评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,236评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,379评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,034评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,637评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2 341

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,277评论 25 707
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,686评论 22 664
  • 四月匆匆,翻看之前的一篇篇文,试图去总结这一个月的的觉察、转型、甚至蜕变发生在哪里,发生了多少。 整体的感觉是心略...
    那个小惠子阅读 341评论 2 3
  • 我是天空里的一片云 偶尔投影在你的波心—— 你不必讶异, 更无须欢喜—— 在转瞬间消灭了踪影。 你我相逢在黑夜的海...
    梨落清浅阅读 260评论 0 1
  • 初心便是清醒的听从内心的声音。不被浮华扰,不被靡音欺。感受每一秒的正在存在,便是最欢喜的活。 2017年9月19日...
    唐妮儿阅读 359评论 2 2