Android UI基本測驗:線性布局
你已經閱讀過了如何在Android使用線性布局。用這些包括線性布局控件的漸進測驗來測試你的新知識,并且鞏固你Java編程和Android用戶界面設計與開發的知識。
準備
為了準備這個測驗,你希望以一個基本的Android程序開始。你只需要在Eclipse中創建一個Android程序然后編輯它的默認活動(Activity),特別是onCreate()方法,就可以測試你為本次測驗寫的代碼了。
如果你不明白剛才說的怎么做,那我推薦你們先看一看之前的文章。從一些Android教程開始,比如Android開發簡介或Android入門: Getting Started with Fortune Crunch。一旦你掌握了如何創建項目,再回來嘗試這個練習。
循序漸進的測驗
這是一個循序漸進地測驗。它包含了許多Android開發初學者想要設計和開發程序所必須掌握的技能。通過下面的每一個步驟,難度逐漸增大,你可以鞏固你的線性布局和通用的Android用戶界面設計的知識。
步驟0:定義你的字符串
現在你創建了一個合適的Android項目,你需要創建一些用于你的用戶界面的資源。
創建:
- 創建7個字符串資源,第一種都使用光譜的顏色(“Red”紅,“Orange”橙,“Yellow”黃,“Green”綠,“Blue”藍,“Indigo”青,“Violet”紫)
- 創建7個顏色資源,每一種都使用光譜的顏色(Red=>#f00, Orange=>#ffa500, Yellow=>#ffff00, Green=>#0f0, Blue=>#00f, Indigo=>#4b0082, Violet=>#ee82ee)
- 為文本顏色創建另外兩個顏色資源(Black=>#000, White=>#fff)
被創建字符串或顏色資源難住了?查看這個字符串格式教程.
測驗1:定義你的布局資源
我們以創建一個新的叫做rainbow.xml的布局資源文件開始。在這個XML文件中,添加一個填充整個屏幕的垂直方向線性布局控件。接下來,添加7個TextView控件作為線性布局的子控件:每一個控件顏色都是一種光譜色。設置每一個TextView控件的文本為合適的顏色值字符串并且背景色設為合適的顏色。同時,設置每個控件的layout_width屬性為fill_parent,layout_height屬性值為wrap_content。
如果你正確地完成了這一步,你的布局應該看起來像這樣:
測驗2:調整你的布局
在這一步,你將關注不同的對齊屬性,包括用于線性布局的這些屬性。
按以下說明更新rainbow.xml布局資源文件:將TextView控件在屏幕居中,并且每個控件中的文字也居中。提示:這需要設置兩個不同的XML屬性,一個是線性布局的,另一個是每一個TextView控件的。
如果你正確地完成了這一步,你的布局看起來應該像這樣:
測驗3:修改線性布局子控件
線性布局非常靈活。如果你修改了父級線性布局中的子控件,布局就會盡可能地調整。
這里的TextView控件的文本很小并且有些難以閱讀。先從修改TextView控件本身開始。按以下說明更新rainbow.xml布局資源:首先,添加一個叫做textsize的尺寸值。在這里我們設置為22dp。
現在你的布局應該像這樣:
注意線性布局如何靈活地適應更大的TextView控件,但是它們沒有充分利用屏幕的空間,黑色帶仍然存在。
高級技巧:你可能想考慮對不同的屏幕大小創建不同尺寸的資源,文本大小22dp看起來不錯,而在小屏幕上,文本大小為14dp或16dp可能更合適。要獲取更多關于創建備選資源的信息,查看多屏幕支持。
測驗4:有效地使用屏幕空間
注意到那些沒有使用的黑色空間了嗎?在這一步,你將關注如何有效地使用整個屏幕。線性布局中的TextView控件被適當的改變大小,但是他們可以微微變大以使用未使用的黑色空間。
我們希望TextView控件擴展到所有可用的空間,不管屏幕的方向和大小是什么樣的。
要實現這一點,調整線性布局中子控件的layout_weight屬性以給每個控件指定的增長邊界。當設備在特定方向時,layout_weight屬性的效果更明顯:對于垂直線性布局,你將看到weight在設備豎屏模式時最有效,而對于水平線性布局,你將看到weight在橫屏模式時最有效。
首先,嘗試設置權值使得每個TextView彩色帶在屏幕占據相同的區域。提示:5個控件設置為0.14和2個控件設置為0.15總和為1.0。
如果你正確地配置你的控件,你的屏幕應該看起來像這樣:
接下來,嘗試設置權值使得每個TextView控件在屏幕上逐漸增大,比如RED帶最小而VIOLET帶最大。提示:一個不錯的分布是:0.08,0.10,0.12,0.14,0.16,0.18,0.22。
如果你正確地完成了這一步,你的布局應該像這樣:
為了好玩,換到橫屏模式并發現一樣的布局如下:
附加測驗:用Java程序重新創建步驟4b中使用的布局
如果你發現前面的測驗相當簡單,考慮下面附加的測驗:用Java程序重新創建你最后的布局資源(每個TextView控件有漸變的權值),代替在布局XML資源里控制。
你需要在你的活動的onCreate()方法中添加setContentView()調用并創建你的線性布局,就像《Android用戶界面設計:線性布局》中討論的一樣。
這里有一些用程序實現rainbow布局的提示:
- 以構造每個TextView控件開始。
- 配置每個TextView控件的布局參數,構造一組LinearLayout.LayoutParams,設置每個控件的layout_width,layout_height和權值。
- 使用TextView類的setText()方法來加載和顯示合適的字符資源。
- 使用TextView類的setTextSize()方法來配置文本的字體大小。你可以使用getResources().getDimension()來獲得標尺資源。
- 使用TextView類的setTextColor()方法來配置文本的字體顏色。你可以使用getResources().getColor()來加載顏色資源。
- 使用TextView類的setBackgroundColor()方法來配置控件的背景色。同樣,你可以使用getResources().getColor()來加載顏色資源。
- 使用TextView類的setGravity()方法來配置文本對齊。Gravity類包括了不同的對齊類型的定義。
- 接下來,構造LinearLayout控件。
- 使用LinearLayout類的setOrientation()方法來配置布局方向。LinearLayout類包括了兩種方向的定義。
- 使用LinearLayout類的setGravity()方法來配置布局的子控件的對齊。Gravity類包括了不同的對齊類型的定義。
- 當你用程序設置子控件的權值,你也必須使用LinearLayout類的setWeightSum()方法設置總權值,比如setWeightSum(1.0f)。
- 別忘了構造一個LayoutParams對象來設置線性布局本身的高和寬。
- 使用addView()方法將每一個TextView控件添加到你的LinearLayout對象中。
- 最后,使用setContentView()方法來顯示你剛才配置好的LinearLayout。
你可以在這里下載到源代碼。
總結
Android用戶界面設計師一直在使用線性布局來水平或豎直地有序地顯示控件。你可以使用線性布局的對齊屬性控制子控件在哪里顯示。你可以使用layout_weight屬性控制每一個子控件分配的空間。
祝你好運![English]
轉載請注明:
作者:RockUX–WEB前端
出自:Android UI基本測驗:線性布局
- 目前還沒評論,等你發揮!