Android UI基本測驗:線性佈局

你已經閱讀過了如何在Android使用線性佈局。用這些包括線性佈局控件的漸進測驗來測試你的新知識,並且鞏固你Java編程和Android用戶界面設計與開發的知識。

準備

為了準備這個測驗,你希望以一個基本的Andr​​oid程序開始。你只需要在Eclipse中創建一個Android程序然後編輯它的默認活動(Activity),特別是onCreate()方法,就可以測試你為本次測驗寫的代碼了。

如果你不明白剛才說的怎麼做,那我推薦你們先看一看之前的文章。從一些Android教程開始,比如Android開發簡介Android入門: Getting Started with Fortune Crunch。一旦你掌握瞭如何創建項目,再回來嘗試這個練習。

 

循序漸進的測驗

這是一個循序漸進地測驗。它包含了許多Android開發初學者想要設計和開發程序所必須掌握的技能。通過下面的每一個步驟,難度逐漸增大,你可以鞏固你的線性佈局和通用的Andr​​oid用戶界面設計的知識。

步驟0:定義你的字符串

現在你創建了一個合適的Andr​​oid項目,你需要創建一些用於你的用戶界面的資源。



創建:

  • 創建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基本測驗:線性佈局

 

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.