android qmui教程,【QMUI教程】 Android Theme的使用

QMUI Android 对外发布了一两天了,收到了一些意见和建议,感觉比较突出的一个问题就是 Theme 的问题,今天就来聊聊这个话题。

起步

日常开发过程中,我们很少有机会去触碰到 theme,也很少有文章提及到 theme, 更没有依赖 theme 去开发 UI 组件的,QMUI 应该是除了 Android 官方组件外唯一的一个会依赖 theme 的开源库吧,至少目前我没发现有其它库是这么做的。我们这么做的原因主要是让 UI 组件可配置化,分为两个方面:

不同的项目对颜色、间距、字体大小等的要求都不相同

同一个项目对同一个组件有统一化的配置,并且需要做到差异化

所以在引入 QMUI 时,一定要记得在 AndroidManifest 中更新

Application 或者 Activity的 theme。

针对整个 Application:

...

android:theme="@style/QMUI.Compat">

...

application>复制代码

针对某个特定的 Activity:

android:name="..."

...

android:theme="@style/QMUI.Compat"/>复制代码

一般而言,我们都会在 theme.xml里添加一个 AppTheme 来作为项目的 base

theme,Android Studio 创建项目 默认都会帮我们做好这一步,因此我们只需要更改 AppTheme 的 parent就行。

关于 QMUI 和 QMUI.Compat

QMUI 提供了两套 theme: QMUI 和 QMUI.Compat:

QMUI 继承自 android:Theme.Holo.Light (4.x) 和 android:Theme.Material.Light (>=5.0),我们自己做了 Android L

前后 theme 的兼容

QMUI.Compat 继承自 Theme.AppCompat.Light。这是系统做好了各个版本 theme 兼容的处理

Android 官方是推荐用 AppCompat 系列, Android Studio 默认生成的 Activity 都是 AppCompatActivity。此外, AppCompatActivity、CoordinatorLayout、TextInputLayout等都必须在 AppCompat Theme 下运行,否则会 crash。因此大多数情况,你都应该使用 QMUI.Compat。只有当面对一些老项目,使用 QMUI.Compat 可能会造成较大影响时,才应该使用前一个 theme。

用 theme 进行配置的一个例子

这里我用 QMUITabSegment 的配置来举个例子, QMUITabSegment是一个类似于 TabLayout 的组件,但比它有更丰富的效果,具体可以下载 QMUI Demo进行查看。

先说一下QMUITabSegment的配置项:

是否有 indicator:qmui_tab_has_indicator

indicator 高度:qmui_tab_indicator_height

indicator 是否在顶部:qmui_tab_indicator_top,为false则在底部

item 的字体大小:android:textSize

item 的宽度是均分还是跟随内容宽度: qmui_tab_mode

item 如果有icon,icon的位置在上下左右哪个位置:qmui_tab_icon_position

一个自定义 view 的强大之处就是可以添加很多自定义属性,但如果每次使用这个组件都要去重复写一遍这些属性,那会是很烦的,如何解决这种问题呢?有三种解决方案:

用一个类如 AppTabSegment 去继承 QMUITabSegment,用 java 代码去 set 一遍这些属性

抽取一个公用的 style,在使用处引用

利用 View 构造器的第三个参数,通过 theme 来配置,使用者感知不到配置的存在(QMUI 采用的方案)

第一种维护起来并不会优雅;第二种每次使用时都要去引入一遍 style,如果忘了 style 的名字, 还得去查;而在第三种配置下,使用者不需要做额外的事情,只需要一次配置即可,相当优雅。例如做如下配置:

1dpitem>

falseitem>

14spitem>

leftitem>

fixeditem>style>复制代码

这样在使用的时候不加任何特殊的属性就能获得上述特效,有需要的话依然可以覆写部分属性,这对 QMUITabSegment、QMUIPullRefreshLayout 这种整个 App 基本上只有一个样式的组件是非常完美的配置方案。

QMUI 的所有自定义组件的属性都在 qmui_attr.xml, 其它 App 公用的值的定义都在qmui_attr_base.xml。有需要的话可以去看看。

如何获取 theme 中定义的属性的值?

这个问题涉及android中 “@” 和 ”?“ 的区别:

@: 如 @color、@string、@drawable,表示去取已经定义好的资源

?:只有 ?attr 的使用方式,表示去对应的 theme 中获取相应的资源,不同的 actvitiy 可以有不同的 theme, 取出来的值也就可以不一样

如果你想某一个 layout 布局的作用 margin 等于 theme 中定义好的

qmui_content_spacing_horizontal,那你可以这样:

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

android:layout_marginLeft="?attr/qmui_content_spacing_horizontal"

android:layout_marginRight="?attr/qmui_content_spacing_horizontal">

LinearLayout>复制代码

最后,欢迎大家试用,如果有任何意见或建议,欢迎留言或者在 Github 创建 issue。

本文全文转载至:【QMUI教程】 Android Theme的使用 - 小松的技术博客,已获得转载授权。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先吐槽一下现在流行的刷新库,一个字大,包涵个人很多集成到项目中不需要的类,也很难找到很满意的效果,所以自己自己动手丰衣足食,撸一个。1.概述对所有基础控件(包括,嵌套滑动例如RecyclerView、NestedScrollView,普通的TextView、ListView、ScrollerView、LinearLayout等)提供下拉刷新、上拉加载的支持,处理了横向滑动冲突(例如:顶部banner的情况) ,且实现无痕过度。gradle (改用bintray-release,2017-7-8 16:00上传,以下暂时不会生效)compile 'com.yan:pullrefreshlayout:1.1.2'2.说明支持所有基础控件 loading 出现效果默认(STATE_FOLLOW、STATE_PLACEHOLDER_FOLLOW、STATE_CENTER、STATE_PLACEHOLDER_CENTER、STATE_FOLLOW_CENTER、STATE_CENTER_FOLLOW)  //-控件设置-     refreshLayout.autoRefresh();// 自动刷新     refreshLayout.setOverScrollDampingRatio(0.2f);//  值越大overscroll越短 default 0.2     refreshLayout.setAdjustTwinkDuring(3);// 值越大overscroll越慢 default 3     refreshLayout.setScrollInterpolator(interpolator);// 设置scroller的插值器     refreshLayout.setLoadMoreEnable(true);// 上拉加载是否可用 default false     refreshLayout.setDuringAdjustValue(10f);// 动画执行时间调节,越大动画执行越慢 default 10f     // 刷新或加载完成后回复动画执行时间,为-1时,根据setDuringAdjustValue()方法实现 default 300     refreshLayout.setRefreshBackTime(300);     refreshLayout.setDragDampingRatio(0.6f);// 阻尼系数 default 0.6     refreshLayout.setPullFlowHeight(400);// 拖拽最大范围,为-1时拖拽范围不受限制 default -1     refreshLayout.setRefreshEnable(false);// 下拉刷新是否可用 default false     refreshLayout.setPullTwinkEnable(true);// 回弹是否可用 default true      refreshLayout.setAutoLoadingEnable(true);// 自动加载是否可用 default false          // headerView和footerView需实现PullRefreshLayout.OnPullListener接口调整状态     refreshLayout.setHeaderView(headerView);// 设置headerView     refreshLayout.setFooterView(footerView);// 设置footerView          /**     * 设置header或者footer的的出现方式,默认7种方式     * STATE_FOLLOW, STATE_PLACEHOLDER_FOLLOW, STATE_PLACEHOLDER_CENTER     * , STATE_CENTER, STATE_CENTER_FOLLOW, STATE_FOLLOW_CENTER     * ,STATE_PLACEHOLDER     */     refreshLayout.setRefreshShowGravity(RefreshShowHelper.STATE_CENTER,RefreshShowHelper.STATE_CENTER);     refreshLayout.setHeaderShowGravity(RefreshShowHelper.STATE_CENTER)// header出现动画     refreshLayout.setFooterShowGravity(RefreshShowHelper.STATE_CENTER)// footer出现动画     // PullRefreshLayout.OnPullListener         public interface OnPullListener {             // 刷新或加载过程中位置相刷新或加载触发位置的百分比,时刻调用             void onPullChange(float percent);             void onPullReset();// 数据重置调用             void onPullHoldTrigger();// 拖拽超过触发位置调用             void onPullHoldUnTrigger();// 拖拽回到触发位置之前调用             void onPullHolding(); // 正在刷新             void onPullFinish();// 刷新完成         }3.demo用到的库loading 动画 AVLoadingIndicatorView(https://github.com/81813780/AVLoadingIndicatorView)

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值