Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 高級開發 >> 解析Android樣式:布局是根本

解析Android樣式:布局是根本

編輯:高級開發

如果你曾經是一名WEB前台設計師,如果你曾經有過設計的功底,那麼你很榮幸,如果你切到android平台中,以前的知識和經驗都能很好的移植到android平台中。本人以為,學習是一個長期的積累過程,經驗很重要,為什麼有的人不管做神馬生意都賺錢,因為他有經驗,經驗加上變通,就是智慧。

布局是根本,不管在WEB設計還是在手機客戶端設計中,都是如此。如果一開始局就沒有布好,就算你的細節做得再精美,到頭來還是要重構。相比傳統WEB設計中的布局,Android平台一樣都不少,只是WEB設計的層布局,在android中有了個新的叫法,叫幀布局。布局在本篇中不是重點,因為和WEB中的概念幾乎一樣,所以一筆帶過。

說實話,我還是比較喜歡WEB設計中的樣式命名規范,簡單,易用,最主要的是WEB的樣式很好管理,不像android樣式文件分得很細,看起來比較零亂。如果你研究過SDK的設計方式,你會發現一個按鈕的樣式,分得很細,有btn_default.xml,btn_default_small.XML等二十幾個樣式文件。

下面我們模仿SDK的設計方式,自定義一個按鈕樣式文件btn_default.XML,包含非焦點,焦點,pressed三種不同狀態。

  1. 1 <?XML version="1.0" encoding="utf-8"?>
  2. 2 <selector XMLns:android="http://schemas.android.com/apk/res/android">
  3. 3 <item android:state_pressed="true">
  4. 4 <shape>
  5. 5 <gradIEnt
  6. 6 android:startColor="#ff8c00"
  7. 7 android:endColor="#FFFFFF"
  8. 8 android:angle="270" />
  9. 9
  10. 10 <stroke
  11. 11 android:width="2dp"
  12. 12 android:color="#dcdcdc" />
  13. 13
  14. 14 <corners
  15. 15 android:radius="2dp" />
  16. 16
  17. 17 <padding
  18. 18 android:left="10dp"
  19. 19 android:top="10dp"
  20. 20 android:right="10dp"
  21. 21 android:bottom="10dp" />
  22. 22
  23. 23 </shape>
  24. 24
  25. 25 </item>
  26. 26
  27. 27 <item android:state_focused="true">
  28. 28 <shape>
  29. 29 <gradIEnt
  30. 30 android:startColor="#ffc2b7"
  31. 31 android:endColor="#ffc2b7"
  32. 32 android:angle="270" />
  33. 33
  34. 34 <stroke
  35. 35 android:width="2dp"
  36. 36 android:color="#dcdcdc" />
  37. 37
  38. 38 <corners
  39. 39 android:radius="2dp" />
  40. 40
  41. 41 <padding
  42. 42 android:left="10dp"
  43. 43 android:top="10dp"
  44. 44 android:right="10dp"
  45. 45 android:bottom="10dp" />
  46. 46
  47. 47 </shape>
  48. 48
  49. 49 </item>
  50. 50
  51. 51 <item>
  52. 52 <shape>
  53. 53 <gradIEnt
  54. 54 android:startColor="#ff9d77"
  55. 55 android:endColor="#ff9d77"
  56. 56 android:angle="270" />
  57. 57
  58. 58 <stroke
  59. 59 android:width="2dp"
  60. 60 android:color="#fad3cf" />
  61. 61
  62. 62 <corners
  63. 63 android:radius="2dp" />
  64. 64
  65. 65 <padding
  66. 66 android:left="10dp"
  67. 67 android:top="10dp"
  68. 68 android:right="10dp"
  69. 69 android:bottom="10dp" />
  70. 70
  71. 71 </shape>
  72. 72
  73. 73 </item>
  74. 74
  75. 75 </selector

selector可以理解為狀態切換器,不同的狀態下切換不同的樣式,在傳統WEB設計中就是偽類hover。shape意為定義按鈕的形狀。

樣式的引用很簡單,android統一把樣式文件作為她的一種資源,下面是樣式的使用方式。

  1. 1 <Button
  2. 2 android:background="@drawable/btn_default"
  3. 3 android:layout_width="wrap_content"
  4. 4 android:layout_height="wrap_content"
  5. 5 android:text="test Style"
  6. 6 >
  7. 7
  8. 8 </Button>
  9. 9

效果

總結

整體來說,Android的樣式設計非常的靈活,WEB設計中的大部分概念都適用於android平台,包括樣式的繼承概念。

注:本文版權歸作者所有,點此 原文連接

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved