记一次使用Android AppCompat(兼容库)的Them

问题产生的原因

最近在优化App，首先从界面上优化，对所有页面的ui绘制进行查看和优化，其中发现在

Api 小于21的手机设备上的效果图为：

image.png

运行在Api大于21的设备上的效果图为：

image.png

同样是使用统一兼容主题

<pre style="margin: 8px 0px; background-color: rgb(255, 255, 255); font-family: 'Source Code Pro'; font-size: 10.5pt;"><resources>

    <!--&lt;!&ndash; Base application theme. &ndash;&gt;-->
 <!--<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">--> <!--&lt;!&ndash; Customize your theme here. &ndash;&gt;--> <!--<item name="colorPrimary">@color/colorPrimary</item>--> <!--<item name="colorPrimaryDark">@color/colorPrimaryDark</item>--> <!--<item name="colorAccent">@color/colorAccent</item>--> <!--</style>-->   <!-- Base application theme. -->  <style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowActionBar">true</item>
        <item name="android:windowBackground">@android:color/white</item>
    </style>

</resources></pre>

在图1中发现了过度绘制现象。就是这一端绿色的区域。可我们的完全定义的是全屏的啊？为什么会出现这种情况呢。

问题的追究

在解释上面现象之前，首先了解下Android使用Theme的正确用法：

Android的Theme的主要来源分为以下三种：

• 来自Android系统自带的

• 来自兼容包的(比如v7兼容包)

• 自定义主题(当然也是需要继承系统主题)

这里主要探讨前两者，自定义主题不做探讨，使用Android系统自带的Theme要加上"android:",如：android:Theme.Light,使用v7兼容包的主题就不需要前缀了，直接：Theme.AppCompat。现在看看有哪些主题：

1.系统自带主题：

• API 1:
  1.android:Theme 根主题
  2.android:Theme.Black 背景黑色
  3.android:Theme.Light 背景白色
  4.android:Theme.Wallpaper 以桌面墙纸为背景
  5.android:Theme.Translucent 透明背景
  6.android:Theme.Panel 平板风格
  7.android:Theme.Dialog 对话框风格
• API 11:
  1.android:Theme.Holo Holo根主题
  2.android:Theme.Holo.Black Holo黑主题
  3.android:Theme.Holo.Light Holo白主题
• API 14:
  1.Theme.DeviceDefault 设备默认根主题 2.Theme.DeviceDefault.Black 设备默认黑主题 3.Theme.DeviceDefault.Light 设备默认白主题
• API 21: (网上常说的 Android Material Design 就是要用这种主题) 1.Theme.Material Material根主题
  2.Theme.Material.Light Material白主题
  2.兼容包v7中带的主题：
  1.Theme.AppCompat 兼容主题的根主题
  2.Theme.AppCompat.Black 兼容主题的黑色主题
  3.Theme.AppCompat.Light 兼容主题的白色主题

Theme.AppCompat主题是兼容主题，是什么意思呢？

意思就是说如果运行程序在手机API是21则就是相当于使用Material主题，如果运行程序的手机API是11则就相当于使用Holo主题，以此类推。

兼容v7会被Google公司不断升级：

比如appcompat-v7-21.0表示升级到向API 21兼容

比如appcompat-v7-23.2表示升级到向API 23兼容

所以要使用最新的兼容包。

问题解释

我们已经知道了统一使用兼容包的话，目标设备API 为21及以上时会使用Material主题，API 为11时使用Holo主题，下面我们来比较下Material与Holo主题的区别：

image.png

通过比较发现Holo主题的windoContentOverlay使用ab_solid_shadow_holo为背景，而Material未设置任何背景。再来看下windoContentOverlay是何许人也，查看源码得知：

onCreate()中设置的Window.FEATURE_NO_TITLE对应的窗口修饰布局文件为screen_simple.xml：

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:fitsSystemWindows="true"

    android:orientation="vertical">

    <ViewStub android:id="@+id/action_mode_bar_stub"

              android:inflatedId="@+id/action_mode_bar"

              android:layout="@layout/action_mode_bar"

              android:layout_width="match_parent"

              android:layout_height="wrap_content" />

    <FrameLayout

         android:id="@android:id/content"

         android:layout_width="match_parent"

         android:layout_height="match_parent"

         android:foregroundInsidePadding="false"

         android:foregroundGravity="fill_horizontal|top"

         android:foreground="?android:attr/windowContentOverlay" />

</LinearLayout> 

windowContentOverlay代表content的foreground并且填充宽，位于content的顶部，代表内容区域顶部的阴影背景(与TitleBar和ActionBar都没有关系)，因为这种属性是在无标题栏的时候才会被设置到content的top，所以有标题栏或者actionBar时也不会出现这种情况。现在问题就迎刃而解了，修改Theme为：

<pre style="margin: 8px 0px; background-color: rgb(255, 255, 255); font-family: 'Source Code Pro'; font-size: 10.5pt;"><resources>

    <!--&lt;!&ndash; Base application theme. &ndash;&gt;-->
 <!--<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">--> <!--&lt;!&ndash; Customize your theme here. &ndash;&gt;--> <!--<item name="colorPrimary">@color/colorPrimary</item>--> <!--<item name="colorPrimaryDark">@color/colorPrimaryDark</item>--> <!--<item name="colorAccent">@color/colorAccent</item>--> <!--</style>-->   <!-- Base application theme. -->  <style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowActionBar">true</item>
        <item name="android:windowBackground">@android:color/white</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

</resources></pre>

增加<item name="android:windowContentOverlay">@null</item>