接觸Android是從UI開始的，筆者第一份工作是在金山軟件做WPS Office。當時開發主要是負責整個演示PPT這邊的UI風格開發和維護，當時的開發要求非常嚴格。要求所有控件採用App的總體風格，不過儘管這樣，一個上百人的開發團隊。並不能保證所有的人都能做出一樣的風格，總是會存在這裏或者那裏的細小差別。就拿簡單的文本框來說，文字排版、大小、顏色、字體、內邊距和外邊距等等，在不同的層級中都是有不同的要求。如果稍不注意，在後面的調整中都很費勁。
當時做法其實是從一開始都要求統一風格，儘量使用公共控件。這樣從一開始就覺得這樣挺好，不過也沒感受到沒這樣做的壞處。
當筆者去年跳槽後，相繼都去過一些公司。都發現一個共有問題，風格嚴重不統一、編碼不規範。xml佈局全部都是一個標籤一個標籤堆，幾乎看不到共用風格，比如說尺寸、顏色都是明碼，只想說這樣的代碼維護成本得多高啊。很多同學覺得一個App不就是很多Activity堆起來的嘛，而且Activity已經被Android自身封裝得很好，沒必要把層次劃得太細。而且更嚴重的是每個人都在自己的頁面中完成所有的業務處理，這種編碼能力筆者只能表示無語，本人最後把問題給他們拋出來後就離開了。
本人在這裏必須說明一下，這種思想是非常錯誤的：
1、風格不統一，那麼你會浪費更多的時間去寫xml佈局。同時你並不能保證每個頁面真的統一了；
2、Android App不是Activity的堆積。本人經常給身邊的同事或者朋友說，Android只是一層皮，真正體現個人能力的應該是如果做到你這一套app解決方案能與平臺無關後也能採用，這就上升到基礎架構；
最近項目相對有一些空餘時間，因此很有必要把這一部分內容說一說。因爲在網上並沒有看到一些系統的做法。也希望這篇文章能讓讀者意識到風格統一編碼的重要性。
下面主要說一說筆者風格統一走過的路：
1、早期風格統一的做法主要是在style中把每一種風格定義好，然後再layout中進行一個引用；
2、現在的做法是將系統控件上升到Application層面，比如android:textViewStyle、android:editTextStyle這類標籤；
Application層面風格統一
在Application層面上做風格統一，一般只能針對系統的控件。主要使用方式是在manifest的application標籤下寫入:
1
|
<application android:theme="@style/AppTheme" >
|
這裏的AppTheme就是自定義的
爲了區分style，建議在values文件夾中建立一個theme.xml文件。下面主要講講EditText的統一風格如何實現
首先需要在theme.xml中建立一份name爲AppTheme的style標籤
1 2 |
<style name="AppTheme" parent="@android:style/Theme"> </style> |
注意一下parent的繼承有非常多可選項，筆者建議大家選擇最基礎的Theme，這個風格基本上包含了App的所有系統控件默認風格；
接下來需要針對可編輯文本框做風格，那首先需要建立一個EditText的style標籤：
1 2 3 4 5 6 7 8 9 10 11 |
<style name="EditTextTheme" parent="@android:style/Widget.EditText"> <item name="android:autoText">false</item> <item name="android:capitalize">none</item> <item name="android:scrollHorizontally">true</item> <item name="android:singleLine">true</item> <item name="android:padding">10dp</item> <item name="android:textColor">@color/table_text</item> <item name="android:textCursorDrawable">@drawable/edit_text_cursor</item> <item name="android:textSize">20sp</item> <item name="android:background">@drawable/edit_text_background</item> </style> |
同樣建議先集成默認風格，再寫入需要修改的風格。比如文字大小、文字顏色和文本框背景等等。
在AppTheme中的引用如下：
1 2 3 |
<style name="AppTheme" parent="@android:style/Theme"> <item name="android:editTextStyle">@style/EditTextTheme</item> </style> |
ok，這就算是完成了對EditText的風格集成。上邊的代碼演示其實很簡單，但是要堅持做好並非一件容易事；
下邊給出筆者自己整理的一份主題風格控件，主要包括：
- Dialog
- TextView
- EditText
- Button
- ImageButton
- RadioButton
- CheckBox
- Spinner
- ScrollView
- GridView
- ListView
- ProgressView
其中，最爲重要的應該是可編輯框，單選，多選以及列表風格。有多少同學能保證帶有滾動條的列表都是一樣的風格呢？
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
<resources> <!-- Base application theme. --> <style name="AppBaseTheme" parent="@android:style/Theme"> <item name="android:background">@drawable/main_background</item> <item name="android:windowNoTitle">true</item> </style> <style name="AppTheme" parent="AppBaseTheme"> <item name="android:dialogTheme">@style/DialogTheme</item> <item name="android:textViewStyle">@style/TextViewTheme</item> <item name="android:editTextStyle">@style/EditTextTheme</item> <item name="android:buttonStyle">@style/ButtonTheme</item> <item name="android:imageButtonStyle">@style/ImageButtonTheme</item> <item name="android:radioButtonStyle">@style/RadioButtonTheme</item> <item name="android:checkboxStyle">@style/CheckboxTheme</item> <item name="android:spinnerStyle">@style/SpinnerTheme</item> <item name="android:scrollViewStyle">@style/ScrollViewTheme</item> <item name="android:gridViewStyle">@style/GridViewTheme</item> <item name="android:listViewStyle">@style/ListViewTheme</item> <item name="android:popupWindowStyle">@style/PopupWindowTheme</item> <item name="android:progressBarStyle">@style/ProgressBarTheme</item> <item name="android:progressBarStyleHorizontal">@style/ProgressBarHorizontalTheme</item> </style> <style name="DialogTheme" parent="@android:style/Theme.Dialog"> <item name="android:windowFrame">@null</item> <item name="android:windowNoTitle">true</item> <item name="android:windowIsFloating">true</item> <item name="android:windowContentOverlay">@null</item> </style> <style name="TextViewTheme" parent="@android:style/Widget.TextView"> <item name="android:textSize">14sp</item> <item name="android:textColor">@color/table_text_light</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_width">wrap_content</item> </style> <style name="EditTextTheme" parent="@android:style/Widget.EditText"> <item name="android:autoText">false</item> <item name="android:capitalize">none</item> <item name="android:scrollHorizontally">true</item> <item name="android:singleLine">true</item> <item name="android:padding">10dp</item> <item name="android:textColor">@color/table_text</item> <item name="android:textCursorDrawable">@drawable/edit_text_cursor</item> <item name="android:textSize">20sp</item> <item name="android:background">@drawable/edit_text_background</item> </style> <style name="ButtonTheme" parent="@android:style/Widget.Button"> <item name="android:paddingLeft">@dimen/margin_middle</item> <item name="android:paddingRight">@dimen/margin_middle</item> <item name="android:textSize">16sp</item> <item name="android:textColor">@color/text_light_selector</item> <item name="android:background">@drawable/background_button_rectangle</item> </style> <style name="ImageButtonTheme" parent="@android:style/Widget.ImageButton"> </style> <style name="RadioButtonTheme" parent="@android:style/Widget.CompoundButton.RadioButton"> <item name="android:button">@drawable/radiobutton</item> <item name="android:paddingLeft">@dimen/margin_small</item> </style> <style name="CheckboxTheme" parent="@android:style/Widget.CompoundButton.CheckBox"> <item name="android:button">@drawable/checkbox</item> <item name="android:paddingLeft">@dimen/margin_small</item> </style> <style name="SpinnerTheme"> <item name="android:indeterminate">true</item> <item name="android:indeterminateDrawable">@drawable/spinner</item> <item name="android:indeterminateDuration">2000</item> <item name="android:indeterminateOnly">true</item> </style> <style name="ScrollViewTheme" parent="@android:style/Widget.ScrollView"> <item name="android:scrollbarTrackVertical">@drawable/scrollbar_vertical_track</item> <item name="android:scrollbarThumbVertical">@drawable/scrollbar_vertical_thumb</item> <item name="android:scrollbarTrackHorizontal">@drawable/scrollbar_vertical_track</item> <item name="android:scrollbarThumbHorizontal">@drawable/scrollbar_vertical_thumb</item> <item name="android:scrollbarStyle">outsideOverlay</item> <item name="android:scrollbarSize">12dp</item> </style> <style name="GridViewTheme" parent="@android:style/Widget.GridView"> <item name="android:listSelector">@drawable/list_item_background</item> <item name="android:scrollbarTrackVertical">@drawable/scrollbar_vertical_track</item> <item name="android:scrollbarThumbVertical">@drawable/scrollbar_vertical_thumb</item> <item name="android:scrollbarTrackHorizontal">@drawable/scrollbar_vertical_track</item> <item name="android:scrollbarThumbHorizontal">@drawable/scrollbar_vertical_thumb</item> <item name="android:scrollbarStyle">outsideOverlay</item> <item name="android:scrollbarSize">12dp</item> </style> <style name="ListViewTheme" parent="@android:style/Widget.ListView"> <item name="android:dividerHeight">2px</item> <item name="android:divider">@drawable/bootstrap_divider</item> <item name="android:cacheColorHint">@android:color/transparent</item> <item name="android:listSelector">@drawable/list_item_background</item> <item name="android:scrollbarTrackVertical">@drawable/scrollbar_vertical_track</item> <item name="android:scrollbarThumbVertical">@drawable/scrollbar_vertical_thumb</item> <item name="android:scrollbarTrackHorizontal">@drawable/scrollbar_vertical_track</item> <item name="android:scrollbarThumbHorizontal">@drawable/scrollbar_vertical_thumb</item> <item name="android:scrollbarStyle">outsideOverlay</item> <item name="android:scrollbarSize">12dp</item> </style> <style name="PopupWindowTheme" parent="@android:style/Widget.PopupWindow"> </style> <style name="ProgressBarTheme" parent="@android:style/Widget.ProgressBar"> </style> <style name="ProgressBarHorizontalTheme" parent="@android:style/Widget.ProgressBar.Horizontal"> <item name="android:progressDrawable">@drawable/progressbar_horizontal</item> </style> </resources> |
希望看到的同學能結合UI的整體設計思路（避免臃腫的UI）這篇文章
#UI事兒雖小，但是很有必要。畢竟UI是一個非常需要時間的工作。