最近由于工作紧张,没有更新博客,通过几个项目经验,小哥儿又准备了一大波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中,里面有详细的使用
-
Demo正常结构是这样的:
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~