基于 Theme.AppCompat.Light.NoActionBar
-
拿到UI视觉标准图：
UI标准.jpg -
拆解UI视觉标准，设置等级：
进行颜色配置，完成colors.xml：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- *****************
****** UI标准-颜色规范 ********
********************* -->
<color name="pal_1">#f33c3e</color>
<color name="pal_2">#f99d9e</color>
<color name="pal_3">#333333</color>
<color name="pal_4">#666666</color>
<color name="pal_5">#999999</color>
<color name="pal_6">#eeeeee</color>
<color name="pal_7">#f7f7f7</color>
<color name="pal_8">#ffffff</color>
</resources>
- 进行字体、间距配置，完成dimens.xml：
<resources>
<!-- *****************
****** UI标准-字体规范 ********
********************* -->
<dimen name="pal_text_1">@dimen/text_size_720_1280_34</dimen>
<dimen name="pal_text_2">@dimen/text_size_720_1280_32</dimen>
<dimen name="pal_text_3">@dimen/text_size_720_1280_28</dimen>
<dimen name="pal_text_4">@dimen/text_size_720_1280_24</dimen>
<dimen name="pal_text_5">@dimen/text_size_720_1280_20</dimen>
<!-- *****************
****** UI标准-间距规范 ********
********************* -->
<dimen name="pal_div_1">@dimen/width_720_1280_96</dimen>
<dimen name="pal_div_2">@dimen/width_720_1280_88</dimen>
<dimen name="pal_div_3">@dimen/width_720_1280_32</dimen>
<dimen name="pal_div_4">@dimen/width_720_1280_16</dimen>
<dimen name="pal_div_5">@dimen/width_720_1280_2</dimen>
</resources>
- 进行通用样式配置，完成styles.xml：
<style name="PandaTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- *****************
****** 通用设置 ********
********************* -->
<item name="colorPrimary">@color/app_primary</item>
<item name="colorPrimaryDark">@color/app_primary_dark</item>
<item name="colorAccent">@color/app_accent</item>
<!-- 窗口的背景颜色 -->
<item name="android:windowBackground">@color/bg_window</item>
<!-- 字体样式 -->
<item name="android:textAppearanceLarge">@style/PandaTheme.FirstText</item>
<item name="android:textAppearanceMedium">@style/PandaTheme.SecondText</item>
<item name="android:textAppearanceSmall">@style/PandaTheme.ThirdText</item>
<!-- *****************
****** 各种控件主题 ********
********************* -->
<!-- Dialog属性 -->
<item name="android:dialogTheme">@style/PandaTheme.Dialog</item>
<!-- alertDialog属性 -->
<item name="android:alertDialogTheme">@style/PandaTheme.Dialog.Alert</item>
<!-- SearchView -->
<item name="searchViewStyle">@style/Widget.AppCompat.SearchView</item>
<!-- overflow menu的样式 -->
<item name="actionOverflowMenuStyle">@style/PandaTheme.OverflowMenuStyle</item>
<!-- listDivider的样式 -->
<item name="android:listDivider">@style/PandaTheme.DividerThin</item>
</style>
...
此文件比较复杂：参考themes_panda.xml
