【QMUI教程】 Android Theme的使用-CSDN博客

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

起步

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

不同的项目对颜色、间距、字体大小等的要求都不相同
同一个项目对同一个组件有统一化的配置，并且需要做到差异化

所以在引入 QMUI 时，一定要记得在 AndroidManifest 中更新
Application 或者 Activity的 theme。

针对整个 Application：

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

针对某个特定的 Activity：

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

一般而言，我们都会在 theme.xml里添加一个 AppTheme 来作为项目的 base
theme，Android Studio 创建项目默认都会帮我们做好这一步，因此我们只需要更改 AppTheme 的 parent就行。

<style name="AppTheme" parent="QMUI.Compat">
    <!-- 重写系统 或者 QMUI 提供的 attr -->
</style>复制代码

关于 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 的名字，还得去查；而在第三种配置下，使用者不需要做额外的事情，只需要一次配置即可，相当优雅。例如做如下配置：

<style name="AppTheme" parent="QMUI.Compat">
    <item name="QMUITabSegmentStyle">@style/AppTabSegment</item>
</style>

<style name="AppTabSegment">
    <item name="qmui_tab_has_indicator">false</item>
    <item name="qmui_tab_indicator_height">1dp</item>
    <item name="qmui_tab_indicator_top">false</item>
    <item name="android:textSize">14sp</item>
    <item name="qmui_tab_icon_position">left</item>
    <item name="qmui_tab_mode">fixed</item>
</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，那你可以这样：

<LinearLayout
    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">
   <!-- children -->
</LinearLayout>复制代码