微信号:jszj2014215

介绍:主要分享移动互联网的相关产品和资讯,关注你将学习到更多,在互联网的当下你会赚更多的钱...

Android统一风格 —— 主题

2016-10-28 07:50 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标签:


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>


 
Android技术之家 更多文章 Android JSBridge的原理与实现 快速使用反射更换Android全局字体 十三项关键技能助开发者在人才市场上炙手可热 Android性能优化-App启动优化 不得不吐槽的Android PopupWindow的几个痛点
猜您喜欢 PHP中curl的应用 在Android中使用反射到底有多慢? 周末折腾的各种东西 Docker - 原理,技巧与使用指南 软银总裁离职:是大佬恋权,还是这届接班人不行?