目录

背景

目的

一、视觉提供颜色

二、视觉提供字体规范 

 三、代码命名规则

 四、实现使用

1、模块依赖

2、代码设计  

背景

        组件化多业务模块情况下，各模块中存在一些字号、颜色等样式定义、引用相对混乱的现象。大部分业务开发同学会随意使用颜色和字体等，没有明确的统一格式进行调用。因此，导致项目中相关重复定义颜色字号增多失控，不易维护，增加包体积，开发同学的在使用上不够简单高效，经常编写重复代码。

 

目的

  • 首先，视觉UI同学提供项目主题色和字体大小。提高UI出图效率、减少UI查验效率。
  • 其次，“主题样式库”能够为Android端项目组件化提供支持，完善模块Commen层提供的能力，为团队上层业务开发增能提效 。
  • 最后，推进对齐IOS端、PC端，更好的为公司整体项目开发服务。

 

一、视觉提供颜色

O样式 android 安卓样式库_O样式 android

二、视觉提供字体规范 

 

O样式 android 安卓样式库_样式统一_02

 三、代码命名规则

        视觉同学的“蓝湖”设计稿一般直接提供色值、字号和字重，所以方便我们直接应用。另外，为了方便ADE编辑器进行代码提示，采用了颜色（Color）以C开头， 字号（Font）以F开头，样式文件以Style开头的命名规则。

蓝湖设计稿

O样式 android 安卓样式库_样式统一_03

颜色命名规则： C_  + 颜色值 + 不透明度

代码颜色调用ADE提示

O样式 android 安卓样式库_命名规则_04

字体命名规则： F_  + 字重+尺寸值

 style样式调用ADE提示

O样式 android 安卓样式库_前端_05

 四、实现使用

1、模块依赖

独立提供样式库module，位于工具类层（Conmen），方便各业务依赖

2、代码设计  

颜色命名规则： C_  + 颜色值 + 不透明度

<!-- 样式库 颜色色值统一 -->
    <!-- 品牌主色 -->
    <color name="C_587CF7">#587CF7</color>
    <color name="C_587CF7_6">#0F587CF7</color>
    <color name="C_587CF7_20">#33587CF7</color>
    <color name="C_587CF7_32">#52587CF7</color>
    <color name="C_587CF7_40">#66587CF7</color>
    <color name="C_587CF7_60">#99587CF7</color>
    <color name="C_587CF7_80">#CC587CF7</color>
    <!-- 品牌字色 -->
    <color name="C_5B7BE9">#5B7BE9</color>
    <color name="C_5B7BE9_10">#1A5B7BE9</color>
    <color name="C_5B7BE9_40">#665B7BE9</color>
    <color name="C_5B7BE9_60">#995B7BE9</color>
    <color name="C_5B7BE9_80">#CC5B7BE9</color>
    <color name="C_5B7BE9_90">#E65B7BE9</color>
    <!-- 品牌辅助色 -->
    <color name="C_F0F5FF">#F0F5FF</color>
    <!-- 辅助色 -->
    <color name="C_F77348">#F77348</color>
    <color name="C_F4BA40">#F4BA40</color>
    <color name="C_5ECC73">#5ECC73</color>
    <color name="C_5BC7A4">#5BC7A4</color>
    <color name="C_4CA9F8">#4CA9F8</color>
    <color name="C_9373EB">#9373EB</color>
    <color name="C_C36DDE">#C36DDE</color>
    <color name="C_EC6988">#EC6988</color>
    <color name="C_FEF3EF">#FEF3EF</color>
    <color name="C_FDF6F0">#FDF6F0</color>
    <color name="C_FEF9EA">#FEF9EA</color>
    <color name="C_F1FBF4">#F1FBF4</color>
    <color name="C_F6F3FD">#F6F3FD</color>
    <color name="C_FAF3FC">#FAF3FC</color>
    <color name="C_F1F4FE">#F1F4FE</color>
    <!-- 中性辅助色 -->
    <!-- 主要信息 -->
    <color name="C_222222">#222222</color>
    <color name="C_222222_5">#0D222222</color>
    <color name="C_222222_10">#1A222222</color>
    <color name="C_222222_20">#33222222</color>
    <color name="C_222222_30">#4D222222</color>
    <color name="C_222222_40">#66222222</color>
    <color name="C_222222_80">#CC222222</color>
    <!-- 次要信息 -->
    <color name="C_666666">#666666</color>
    <color name="C_666666_40">#66666666</color>
    <!-- 辅助信息 -->
    <color name="C_999FA6">#999FA6</color>
    <!-- 辅助信息 -->
    <color name="C_B2B7BD">#B2B7BD</color>
    <!-- 分割线 -->
    <color name="C_EEEEEE">#EEEEEE</color>
    <!-- 标签背景 -->
    <color name="C_F6F7F8">#F6F7F8</color>
    <color name="C_F6F7F8_80">#CCF6F7F8</color>
    <!-- 全局背景 -->
    <color name="C_F7F8FA">#F7F8FA</color>
    <color name="C_FFFFFF">#FFFFFF</color>
    <color name="C_FFFFFF_4">#0AFFFFFF</color>
    <color name="C_FFFFFF_10">#1AFFFFFF</color>
    <color name="C_FFFFFF_20">#33FFFFFF</color>
    <color name="C_FFFFFF_40">#66FFFFFF</color>
    <color name="C_FFFFFF_60">#99FFFFFF</color>
    <color name="C_FFFFFF_80">#CCFFFFFF</color>
    <color name="C_000000">#000000</color>
    <color name="C_000000_10">#1A000000</color>
    <color name="C_000000_20">#33000000</color>
    <color name="C_000000_40">#66000000</color>
    <color name="C_000000_60">#99000000</color>
    <!-- 状态色 -->
    <!-- 红点/new标签 -->
    <color name="C_F56C62">#F56C62</color>
    <!-- 提醒 -->
    <color name="C_EC672C">#EC672C</color>
    <!-- 置灰按钮 -->
    <color name="C_CCCCCC">#CCCCCC</color>
    <!--定制化颜色 -->
    <color name="C_D4DEFF">#D4DEFF</color>
    <color name="C_2B3D7B">#2B3D7B</color>
    <color name="C_2B3D7B_40">#2B3D7B</color>
    <color name="C_2B3D7B_60">#2B3D7B</color>
    <color name="C_2B3D7B_70">#2B3D7B</color>
    <color name="C_FCF8F0">#FCF8F0</color>
    <color name="C_CCBBA5">#CCBBA5</color>
    <color name="C_4C6EE0">#4C6EE0</color>
    <color name="C_7B8CB4">#7B8CB4</color>
    <color name="C_6B6B99">#6B6B99</color>
    <color name="C_6693DE">#6693DE</color>
    <color name="C_864421">#864421</color>
    <color name="C_BD732B">#BD732B</color>
    <color name="C_B3864A">#B3864A</color>
    <color name="C_FAF3E8">#FAF3E8</color>
    <color name="C_916736">#916736</color>
    <color name="C_FFF0E0">#FFF0E0</color>
    <color name="C_FFD9AE">#FFD9AE</color>
    <color name="C_735EDD">#735EDD</color>
    <color name="C_6D97C2">#6D97C2</color>
    <color name="C_DAE7FD">#DAE7FD</color>
    <color name="C_EFF6FF">#EFF6FF</color>
    <color name="C_F0F0FF">#F0F0FF</color>
    <color name="C_607BEF">#607BEF</color>
    <color name="C_1B1C33">#1B1C33</color>
    <!--渐变色-->
    <color name="C_75A1F8">#75A1F8</color>
    <color name="C_FBFCFF">#FBFCFF</color>
    <color name="C_F4F8FF">#F4F8FF</color>
    <color name="C_72BFF7">#72BFF7</color>
    <color name="C_619BFF">#619BFF</color>
    <color name="C_4E71E6">#4E71E6</color>
    <color name="C_2D36FE">#2D36FE</color>
    <color name="C_5884F7">#5884F7</color>

字体命名规则： F_  + 尺寸值

<!-- 样式库 字号统一 -->
<dimen name="F_28">28sp</dimen>
<dimen name="F_24">24sp</dimen>
<dimen name="F_22">22sp</dimen>
<dimen name="F_20">20sp</dimen>
<dimen name="F_18">18sp</dimen>
<dimen name="F_17">17sp</dimen>
<dimen name="F_16">16sp</dimen>
<dimen name="F_14">14sp</dimen>
<dimen name="F_13">13sp</dimen>
<dimen name="F_12">12sp</dimen>
<dimen name="F_10">10sp</dimen>

样式命名规则： style_text_  + 字体 + 字号

style.xml
<!-- 样式库 字号字重样式统一 -->
<style name="style_text_normal_10">
    <item name="android:textSize">@dimen/F_10</item>
    <item name="android:textStyle">normal</item>
</style>

<style name="style_text_normal_12">
    <item name="android:textSize">@dimen/F_12</item>
    <item name="android:textStyle">normal</item>
</style>

<style name="style_text_normal_13">
    <item name="android:textSize">@dimen/F_13</item>
    <item name="android:textStyle">normal</item>
</style>

<style name="style_text_normal_14">
    <item name="android:textSize">@dimen/F_14</item>
    <item name="android:textStyle">normal</item>
</style>

<style name="style_text_bold_14">
    <item name="android:textSize">@dimen/F_14</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="style_text_normal_16">
    <item name="android:textSize">@dimen/F_16</item>
    <item name="android:textStyle">normal</item>
</style>

<style name="style_text_bold_16">
    <item name="android:textSize">@dimen/F_16</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="style_text_normal_17">
    <item name="android:textSize">@dimen/F_17</item>
    <item name="android:textStyle">normal</item>
</style>

<style name="style_text_bold_17">
    <item name="android:textSize">@dimen/F_17</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="style_text_bold_18">
    <item name="android:textSize">@dimen/F_18</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="style_text_bold_20">
    <item name="android:textSize">@dimen/F_20</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="style_text_bold_22">
    <item name="android:textSize">@dimen/F_22</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="style_text_bold_24">
    <item name="android:textSize">@dimen/F_24</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="style_text_bold_28">
    <item name="android:textSize">@dimen/F_28</item>
    <item name="android:textStyle">bold</item>
</style>

color选择器样式文件（enable + disable）设计

命名规则： color_ + common_  + 色值_ + selector

例如： color_common_666666_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/C_587CF7" android:state_enabled="true"/>
    <item android:color="@color/C_587CF7_40" android:state_enabled="false"/>
</selector>

drawable选择器样式文件（enable + disable）设计

命名规则： bg_ + common_ + shape方式  + 色值_ + 角度

例如：bg_common_solid_fff6f7f8_corner_24

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="24dp" />
    <solid android:color="@color/C_587CF7"/>
</shape>