天天看點
傳回

Android style & Theme 再探析(二) —— 一統View規範的大殺器——material design

在上一篇android style和Theme的探析中，筆者描述了自己對于它的了解與認識，但是筆者發現僅僅了解這些其實是不夠的，在移動應用軟體工程化以後，對于像Theme這種全局化的管控view樣式來說，十分強大也是意味着十分危險的，因為app在足夠龐大以後，Theme的随意改動都會引發，很多頁面樣式的改變，并且當你不夠了解改變會影響到的部分時，這無疑是巨大的風險！

View規範的現狀

一般我們談論的view的規範，一般都提及的是一般資源檔案的命名規範，這部分的内容，其實阿裡的Android命名規範已經基本覆寫的十分全面了，但是筆者想提及的是一些我們在和UI合作時的一些問題，而這些同樣影響着我們的規範…

筆者發現的一些問題

  1. 筆者接觸到的公司，UI圖中文字的尺寸定義一直是一個不确定的事情，我們無法确定各個場景的文字到底應該用哪個尺寸，隻能根據自動化标注工具一一仔細定義，無法提取通用
  2. 另一個不定的内容，就是我們app中的顔色，是另一大不定因素，目前一般都使用阿裡的命名規範，管理顔色

【推薦】 color 資源使用#AARRGGBB 格式，寫入 module_colors.xml 檔案中，命

名格式采用以下規則：

子產品名_邏輯名稱_顔色

如：

對于子產品的顔色規範我們采用這樣的方式，完全沒有問題的，并且在後期的國際化中；這樣的形式完全也是沒有問題的，但是對于一些常用的主題顔色，會一直在很多元件上大量使用，反複重複的顔色；一般這樣情況我們都會進行提取，目前見到常用有兩種：

  1. color命名格式：color_16進制顔色值，如紅色 color_ff0000
  1. color命名格式：直接用英文，如果顔色多相近則，顔色值後面加數字 red1，如紅色 red1

對比兩種方式：

第一種

優勢：替換顔色，添加顔色比較友善，因為直接在标有十六進制的顔色值按規範敲，有沒有該顔色即可直接顯示

劣勢：解釋性比較差，直接檢視并不能知曉對應的顔色，和直接敲 十六進制顔色值毫無差別

第二種

優勢：解釋性強，更符合我們常見的命名規範

劣勢：增加修改不是很友善

例如：

添加三種相近的紅色

<color name="red1">#xxxxxx</color>
   <color name="red2">#xxxxxx</color>
   <color name="red3">#xxxxxx</color>

由于這三種紅色很有可能不是同一時間提出，是以顔色值的數字标号隻能以時間順序作為順延，而無有淺到深或者由深到淺的順序，同樣不好管理

解決方案探究

雖然這個問題非常細枝末節，但是卻困擾了筆者很久，我覺得不可能國外的app開發不遭遇相同的問題，于是我找到了一個開源app Materialistic for Hacker News

styles.xml檔案部分代碼展示：

<!-- =========== -->
    <!-- Text styles -->
    <!-- =========== -->
    <style name="textRankStyle">
        <item name="android:textAppearance">@style/TextAppearance.App.Large</item>
        <item name="android:gravity">center|center_vertical</item>
    </style>

    <style name="textTitleStyle">
        <item name="android:textAppearance">@style/TextAppearance.App.Title</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:paddingLeft">@dimen/padding</item>
        <item name="android:paddingRight">@dimen/padding</item>
    </style>

    <style name="textSubtitleStyle">
        <item name="android:textAppearance">@style/TextAppearance.App.Subtitle</item>
        <item name="android:singleLine">true</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:paddingLeft">@dimen/padding</item>
        <item name="android:paddingRight">@dimen/padding</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

colors.xml檔案部分代碼展示：

<color name="red500">#F44336</color>
    <color name="redA100">#FF8A80</color>
    <color name="redA200">#FF5252</color>
    <color name="purpleA400">#D500F9</color>
    <color name="indigoA700">#304FFE</color>
    <color name="lightBlue700">#0288D1</color>
    <color name="lightBlueA700">#0091EA</color>
    <color name="teal50">#E0F2F1</color>
    <color name="teal100">#B2DFDB</color>
    <color name="teal300">#4DB6AC</color>
    <color name="teal400">#26A69A</color>

再次浏覽過幾個開源項目同樣有針對文字和顔色的這種寫法，再經過幾番調查，才真正意識到 原來 material design,并不隻是給UI設計師看的，而是解決UI和開發的一些溝通問題的一種方案，而不單單隻是那一套元件庫那麼簡單

Material Design詳解

UI調色闆 Color Palette

設計師使用部分

調色闆以一些基礎色為基準，通過填充光譜來為Android、Web和iOS環境提供一套完整可用的顔色。基礎色的飽和度是500。
Android style &amp; Theme 再探析(二) —— 一統View規範的大殺器——material design

這部分雖然是放置在設計子產品用于設計師去檢視的，但是，實際上我們的對于我們開發使用也有着影響

開發使用展示

開發示例

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- google's material design colours from 
http://www.google.com/design/spec/style/color.html#color-ui-color-palette -->

    <!--reds-->
    <color name="md_red_50">#FFEBEE</color>
    <color name="md_red_100">#FFCDD2</color>
    <color name="md_red_200">#EF9A9A</color>
    <color name="md_red_300">#E57373</color>
    <color name="md_red_400">#EF5350</color>
    <color name="md_red_500">#F44336</color>
    <color name="md_red_600">#E53935</color>
    <color name="md_red_700">#D32F2F</color>
    <color name="md_red_800">#C62828</color>
    <color name="md_red_900">#B71C1C</color>
    <color name="md_red_A100">#FF8A80</color>
    <color name="md_red_A200">#FF5252</color>
    <color name="md_red_A400">#FF1744</color>
    <color name="md_red_A700">#D50000</color>
    <!--部分代碼隐藏-->
</resources>

開發使用分析

首先，可以看的出我們的開發使用的是筆者在上面提及的第二種顔色值的命名，但是與我們的直接無腦添加數字又不一樣的，顔色取值完全根據規範material 調色闆

優勢

  1. 使得我們顔色數量一定時間内是可控的
  2. 它采用飽和度數值做為命名的形式将 red_100 和 #FFCDD2 關聯起來使得UI和開發團隊内部讨論顔色全部都有了一個統一名稱指代，且以顔色英文開頭有解釋性
  3. 飽和度和顔色深淺具有規律性，使得顔色的排列由淺至深而非以時間排列；且再次插入新的顔色值根據其飽和度和英文名完全可以直接知曉其位置

文字樣式 typography

設計師使用部分

自從Ice Cream Sandwich釋出以來，Roboto都是Android系統的預設字型集。在這個版本中，将Roboto做了進一步全面優化，以适配更多平台。寬度和圓度都輕微提高，進而提升了清晰度，并且看起來更加愉悅。
Android style &amp; Theme 再探析(二) —— 一統View規範的大殺器——material design

标準樣式（Standard Styles）

字型排版的縮放和基本樣式（Typographic Scale & Basic Styles）

同時使用過多的字型尺寸和樣式可以很輕易的毀掉布局。字型排版的縮放是包含了有限個字型

尺寸的集合，并且他們能夠良好的适應布局結構。最基本的樣式集合就是基于12、14、16、20和34号的字型排版縮放。

這些尺寸和樣式在經典應用場合中讓内容密度和閱讀舒适度取得平衡。字型尺寸是通過SP（可縮放像素數，scaleable pixels）指定的，讓大尺寸字型獲得更好的可接受度。

Android style &amp; Theme 再探析(二) —— 一統View規範的大殺器——material design

針對Display4，Display3此類字段每一個都是針對一種場景可以，通過點選連結檢視具體場景說明

開發使用展示

首先，要說明一個概念對于我們以前的文字其實很多方面都是不關注的，加粗斜體透明度字型之類的，而隻關注到的隻是尺寸；而我們的android 在view的字型使用中，一般其實都不會把字号做為一個單獨使用方面,而是用 TextAppearance 這樣一個概念

開發示例

google dimens_material.xml檔案

<resource>
    <dimen name="text_size_display_4_material">71sp</dimen>
    <dimen name="text_size_display_3_material">44sp</dimen>
    <dimen name="text_size_display_2_material">36sp</dimen>
    <dimen name="text_size_display_1_material">27sp</dimen>
    <dimen name="text_size_headline_material">18sp</dimen>
    <dimen name="text_size_title_material">16sp</dimen>
    <dimen name="text_size_subhead_material">16sp</dimen>
    <dimen name="text_size_title_material_toolbar">16dp</dimen>
    <dimen name="text_size_subtitle_material_toolbar">16dp</dimen>
    <dimen name="text_size_menu_material">16sp</dimen>
    <dimen name="text_size_menu_header_material">14sp</dimen>
    <dimen name="text_size_body_2_material">14sp</dimen>
    <dimen name="text_size_body_1_material">14sp</dimen>
    <dimen name="text_size_caption_material">12sp</dimen>
    <dimen name="text_size_button_material">14sp</dimen>
</resource>

goolge style_material.xml

<resources>
<style name="TextAppearance.Material.Display2">
        <item name="textSize">@dimen/text_size_display_2_material</item>
        <item name="fontFamily">@string/font_family_display_2_material</item>
        <item name="textColor">?attr/textColorSecondary</item>
    </style>

    <style name="TextAppearance.Material.Display1">
        <item name="textSize">@dimen/text_size_display_1_material</item>
        <item name="fontFamily">@string/font_family_display_1_material</item>
        <item name="textColor">?attr/textColorSecondary</item>
    </style>

    <style name="TextAppearance.Material.Headline">
        <item name="textSize">@dimen/text_size_headline_material</item>
        <item name="fontFamily">@string/font_family_headline_material</item>
        <item name="textColor">?attr/textColorPrimary</item>
    </style>
    <!--部分代碼省略-->
</resource>

優勢

  1. 所有場景的文字，對于的樣式都是一目了然；友善開發歸納總結，提取使用
  2. 各個場景的架構已經提出，調整都是針對一種場景進行直接替換；無論是字型還是其他樣式都友善管理替換，無需再像我們目前開發狀态一般；各個字型設定散落各個頁面毫無統一可言

總結

material design在這一番研究後，讓我真心覺得其作用不止是提供給設計一種新規範，給開發一套新元件那麼簡單，更多也是結合了開發app中的實際情況，針對一些内容進行規範，并且為了友善規範的執行，友善我們開發更好的管理應用，google還使用了提供了顔色，當然material design的内容不止這些，筆者隻是針對文字和顔色兩方面進行了探究；希望更多的特性能被大家發掘出來！

專題系列：

Android style & Theme 再探析(一)—— 你真的懂Style和Theme嗎？

Android style & Theme 再探析(二) —— 一統View規範的大殺器——material design

Android style & Theme 再探析(三) —— 定制Theme示例和日夜間模式踩坑大彙總

Android style & Theme 再探析(四)——業務實踐心得總結

部落客部落格：

http://www.whdreamblog.cn/

android style theme Material Design view 規範
上一篇: 反射枚舉與lambda
下一篇: java 反射 枚舉 執行個體_java中反射，枚舉實際應用例子

繼續閱讀