Android統一風格 —— 主題

2021-02-19 開發者全社區

相關閱讀：

吊炸天！74款APP完整源碼！

123個微信小程序源碼分享（附下載）

［乾貨］2017已來，最全面試總結——這些Android面試題你一定需要


原文連結：http://frodoking.github.io/2015/07/01/android-theme/?utm_source = tuicool & utm_medium =referral

接觸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標籤：


<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中的引用如下：


<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

其中，最為重要的應該是可編輯框，單選，多選以及列表風格。有多少同學能保證帶有滾動條的列表都是一樣的風格呢？

<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是一個非常需要時間的工作。

Java和Android大牛頻道

歡迎關注我們，一起討論技術，掃描和長按下方的二維碼可快速關注我們。或搜索微信公眾號:JANiubility。

公眾號：JANiubility

相關焦點

  • Android 多主題之坑
    關於 Android 多主題早前我也推薦過類似的文章，但這一篇，滿滿的都是各種填坑經驗，相信今後大家在做類似需求的時候會很有幫助，因此推薦給各位。作者透露將會在不久後開源文中提到的多主題框架，也是非常值得期待。年後重構了一版多主題框架，在重構過程中遇到了不少的坑，特此記錄下與君共勉。
  • Android新手入門-Android中文SDK
    你好Android　(Hello Android)編寫你首個Android程序，經典流行的Hello World，Android風格。container classes, XML utilities, etc)android.os提供基本的操作服務，消息傳遞和進程進程間通訊IPC(provides basic operating system services, message passing, and inter-process communication)android.graphics
  • Android 代碼規範文檔
    ，我們可以先從體量上分析，首先谷歌的開發人員和項目數量肯定是最多的，那麼谷歌在這塊的探索和研究肯定是多於 Glie 和 OkHttp 的，其次是 Glide 和 OkHttp 的源碼都有一個特點，很多類都維持在 1k 行代碼左右，而谷歌源碼很多類都接近 10k 行代碼，例如 Activity 的源碼在 API 30 上面有 8.8k 行代碼，所以谷歌在這塊略勝一籌，如果非要二選一，我選擇谷歌的代碼風格
  • Android 10 適配攻略,你適配了嗎?
    因為具體的項目中的View都按照設計的風格進行了重定義。其實適配的方法很簡單，類似屏幕適配、國際化的操作，並不需要繼承上面的主題。比如你要修改顏色，就在res 下新建 values-night目錄，創建對應的colors.xml文件。將具體要修改的色值定義在裡面。圖標之類的也是一個思路，創建對應的 drawable-night目錄。
  • Android Support Library主要庫詳細介紹
    一、主工程、依賴包、jar包、android.jar、Android Support Library的關係  一個Android工程通常包括主工程和依賴包，依賴包又有兩種形式：  為了程序能夠編譯通過並在設備中正常運行，主工程除了依賴第三方的工程和jar包之外，還需要依賴安卓系統本身的代碼，也就是我們在sdk的每個版本中看到的android.jar，這裡面集成了android
  • 最新優秀的通用Android應用架構:從建項目開始
    launchmainaccountnewsmusic……utilswidget2.配置主題對於不遵守Material Design的項目無視這一步。而導致界面顏色不統一。2.在style.xml裡定義主題：<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar"><!-- Customize your theme here.
  • Android App國際化
    一般在涉及字符串的位置都要在strings.xml裡面設置對應的item，方便後續的修改和復用，其他語言只需要新建values_xx(xx表示國家代號)資源文件夾，系統會自動進行替換。但是經常一個項目由多位同事參與，每個人的編程習慣會有異同，在xml或者java文件中會有遺漏的硬編碼(HardCode)，因此第一步是整理項目中的硬編碼，統一歸併到strings.xml中。
  • 替換iOS與Android默認圖標 Line Deco卡通風格系統主題上線
    簡單地說，Line Deco能夠將系統默認應用圖標改為卡通風格的主題圖標樣式，並且提供配套的壁紙選擇。
  • 優化細節表現 Nexus 5體驗Android M
    下載完成後解壓，得到android-sdk-macosx文件夾，進入文件夾，再進入tools文件夾，雙擊android文件，就可以打開SDK管理器。    在打開的TextEdit編輯器中輸入「PATH=${PATH}:/文件夾路徑/android-sdk-macosx/platform-tools」，之後保存
  • Android之自定義EditText光標和下劃線顏色
    ><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <size android:width="2dp" /> <solid android:color="@android:color
  • Android-HIDL實例解析
    其注釋風格與 JAVA 是一致的。為什麼需要HIDL「（HIDL design）The goal of HIDL is that the framework can be replaced without having to rebuild HALs.
  • 翻譯自國外大牛總結的各種Android開發經驗和實用技巧
    靜態代碼審查工具也是個代碼審查工具，檢查可能出現的bug代碼風格管理的插件增加了例如卸載，重啟App的功能這個玩意挺NB的輸入個大概就能幫你寫代碼。其中的bind view 挺好用的。雖然是個人愛好，反正我覺得使用白色主題好瞎眼啊別使用小字體給你的 Android Studio 選擇一個合適的字體，作者推薦使用Menlo font 反正我覺得mac的字體就挺好的，在linux上開發已經覺得不順眼了.
  • android 狀態欄梳理
    :windowFullscreen">true</item>    </style>        android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"這個好理解，就不展開了，有區別的是 方法2， 方法2 會生成一個狀態欄由顯示到隱藏的動畫，模擬器上跑的挺好
  • android絕對布局
    >02<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"03android:orientation="vertical"04android:layout_width="fill_parent"05android:layout_height
  • 經驗丨Android開發最佳實踐
    Retrolambda 是一個在Android和預JDK8平臺上的使用Lambda表達式語法的Java類庫。 它有助於保持你代碼的緊湊性和可讀性，特別當你使用如RxJava函數風格編程時。xml version="1.0" encoding="utf-8"?
  • Android 設備按鍵詳解
    \server\policy\PhoneWindowManager.javaalps\frameworks\base\core\java\android\view\WindowManagerPolicy.java
  • android基礎入門
    第一天、android簡介和開發環境的搭建:android的簡介android開發環境搭建android工程的目錄介紹>第一個應用程式——計算器部署到真實手機第二天、android的系統架構和核心模塊簡介:
  • android 排列 - CSDN
    每一個LinearLayout裡面又可分為垂直布局(android:orientation="vertical")和水平布局(android:orientation="horizontal" )。當垂直布局時，每一行就只有一個元素，多個元素依次垂直往下；水平布局時，只有一行，每一個元素依次向右排列。
  • Android夜間模式實現
    貫徹我的風格，以解決問題為目標，寫了個小Demo，簡單了實現了切換夜間模式，為大家講解。在Activity中有一個方法叫setTheme()，可以設置Activity的Theme，當然Application類中也有相同的方法，也可以在Application中設置當前應用的Theme。就好像我們可以在Manifest文件中通過android:theme=「」來設置主題一樣。
  • Android Schema協議略知一二
    scheme://host:port/path/queryParameter=queryString首先想讓別人調用需要在清單文件中配置<intent-filter> <action android