Android介面程式設計——Android基本控制元件
Android介面程式設計
Android應用開發的一項重要內容就是介面開發。對於使用者來說，不管APP包含的邏輯多麼複雜，功能多麼強大，如果沒有提供友好的圖形互動介面，將很難吸引終端使用者。
作為一個程式設計師如何才能開發出友好的圖形介面呢。實際上Android提供了非常豐富UI（User Interface）控制元件，開發者只要掌握了這些控制元件的特性，按照一定的規律，就可以像堆積木一樣開發出友好的圖形介面。
本章內容將介紹常用控制元件的具體用法。
2.1 Android UI的基礎知識
Android中所有的視覺化元件都是繼承自View類，通常把它們稱之為檢視。檢視也經常被稱為控制元件或者小元件。ViewGroup類繼承自
2.2 Android基本控制元件
TextView直接繼承自View類，是一個只讀文字標籤，支援多行顯示，字串格式化以及自動換行等特性。通過XML屬性和TextView類的相關方法可以設定TextView的顯示特性。
下面通過例項講解TextView具體的使用方法。
首先說明一下如何使用Android Studio建立layout檔案。
選擇res/layout,右擊滑鼠選擇new--->XML
在彈出的對話方塊中，進行如圖所示的操作，完成XML檔案的建立。
例項2-1：
通過在佈局檔案中設定TextView的屬性來控制TextView的顯示行為，具體實現如下。
表2-1列出了TextView常用的屬性和方法。
表2-1 TextView XML屬性和方法
|
XML屬性 |
對應方法 |
備註 |
|
android:text |
setText(CharSquence) setText(int resId) |
設定文字框顯示的文字內容 |
|
android:textColor |
setTextColor(ColorStateList) |
設定文字框顯示文字的顏色 |
|
android:textSize |
setTextSize(float) |
設定文字框顯示文字的字號 |
|
android:textStyle |
setTypeface(Typeface) |
設定文字框顯示文字的字型風格 |
|
android:textAppearance |
設定文字框顯示文字的顏色、字型、大小等樣式 |
|
|
android:ellipsize |
setEllipsize(TextUitls.TruncateAt) |
設定顯示文字超出TextView的長度時如何處理處理文字內容 |
|
android:gravity |
setGravity(int) |
設定文字框顯示文字的對齊方式 |
|
android:maxLines |
setMaxLines(int) |
設定文字框的最多佔幾行 |
|
android:minLines |
setMinines(int) |
設定文字框最少佔幾行 |
|
android:singleLine |
setTransformationMethod |
設定文字框是否是單行模式。 |
|
android:drawableLeft |
setCompoundDrawablesWithIntrinsicBounds(Drawable,Drawable,Drawable,Drawable) |
在文字框左側繪製圖像 |
|
android:drawableRight |
setCompoundDrawablesWithIntrinsicBounds(Drawable,Drawable,Drawable,Drawable) |
在文字框右側繪製圖像 |
|
android:drawableTop |
setCompoundDrawablesWithIntrinsicBounds(Drawable,Drawable,Drawable,Drawable) |
在文字框上方繪製圖像 |
|
android:drawableBottom |
setCompoundDrawablesWithIntrinsicBounds(Drawable,Drawable,Drawable,Drawable) |
在文字框下方繪製圖像 |
|
android:drawableStart |
在文字框開始處繪製圖像 |
|
|
android:drawableEnd |
在文字框結束處繪製圖像 |
|
|
android:drawablePadding |
設定文字框顯示文字和影象之間的間距 |
2.2.2文字編輯框(EditText)
EditText是TextView的直接子類，一個可編輯的文字輸入框。它可以接受多行輸入，並自動換行。EditText常用的XML屬性如表2-2所示。
表2-2 EditText XML屬性及方法
|
XML屬性 |
對應方法 |
備註 |
|
android:hint |
setHint(int) |
設定文字編輯框顯示的提示文字 |
|
Android:textColorHint |
setHintTextColor(int) |
設定提示文字的顏色 |
|
Android:inputType |
setRawInputType(int) |
設定文字編輯框的輸入型別 |
下面通過一個例項來講解EditText的使用方法。
例項2-2：
使用者登入介面要求輸入使用者名稱和密碼，對於一個友好的互動介面而言，接收使用者輸入的編輯框應提示使用者如何輸入；當用戶切換到輸入框時，輸入框應自動選擇已經輸入的內容；當有特定輸入要求時，輸入框應做出相應的判斷和相應。
登入介面具體內容如程式清單2-2所示。
上面佈局中含有兩個EditText，分別通過android:hint屬性指定了提示文字的內容；通過android:textColorHint屬性指定了提示文字的顏色；通過android:inputType指定了密碼框的輸入型別。使用Activity呈現該佈局，效果如
2.2.3按鈕 (Button&ImageButton)
Android按鈕可包含文字、圖片和圖片及文字，分為Button和ImagetButton兩個控制元件。Button是TextView的直接子類，如圖圖2-4所示，主要響應使用者的單擊操作，如常見的“確定”、“登入”、“註冊”按鈕等
表2-3Button的常用屬性及方法
|
XML屬性 |
方法 |
備註 |
|
android:text |
setText(CharSequence) |
設定按鈕文字 |
|
android:drawableLeft |
設定左側圖片(上側drawableTop、右側drawableRight、 底部drawableBottom) |
ImageButton和Button一樣也是主要響應使用者的單擊操作的UI控制元件，ImageButton可設定圖片的按鈕，不過ImageButton並不是TextView的子類而是ImageView的直接子類
|
XML屬性 |
方法 |
備註 |
|
android:src |
setImageResource(int ) |
製作按鈕圖片 |
下面通過例項講解Button的用法
2.2.4單選按鈕 (RadioButton和RadioGroup)
RadioButton是單選按鈕，可提供若干選項方便使用者進行選擇操作，且在一組選項中只能選擇一個。RadioGroup繼承自ViewGroup和RadioButton結合使用，將若干RadioButton選項組合為一組。如圖2-7所示
|
XML屬性 |
方法 |
備註 |
|
android:text |
setText(CharSequence) |
設定單選按鈕文字 |
|
android:button |
setButtonDrawable(int) |
設定單選按鈕圖形，常用於取消單選按鈕預設圖形，如：android：button=”@null” |
|
android:checked |
設定單選按鈕的選擇狀態true表示選擇，false表示未選擇，但單選按鈕的選擇狀態並不能通過該屬性實現，而是通過RadioGroup的check(int)方法實現 |
|
XML屬性 |
方法 |
備註 |
|
android:orientation |
設定單選按鈕的排列方式”horizontal”:水平排列，”vertical”：垂直排列 |
|
|
check(int id) |
設定單選按鈕組的預設選項 |
2.2.5複選框 (CheckBox)
CheckBox是和RadioButton一樣是常見的選項控制元件，CheckBox是複選框控制元件即使用者可任意選擇多個選項
表2-8CheckBox的常用屬性及方法
|
XML屬性 |
方法 |
備註 |
|
android:text |
setText(CharSequence) |
設定複選框文字 |
|
android:checked |
setChecked(boolean) |
設定複選框組的預設選項 |
|
android:button |
setButtonDrawable(int) |
設定複選框按鈕圖形，常用於取消複選框預設圖形，如：android：button=”@null” |
下面通過例項講解CheckBox、RadioButton和RadioGroup的介面設計
2.2.6圖片控制元件(ImageView)
ImageView用於顯示本地資源圖片或載入網路圖片的UI控制元件，TextView和ImageView實現了Android圖文並茂的介面
表2-9ImageView的常用屬性及方法
|
XML屬性 |
方法 |
備註 |
|
android:src |
setImageResource(int) |
設定圖片 |
|
android:scaleType |
setScaleType(ScaleType) |
設定圖片的縮放、等比縮放、裁剪 |
scaleType是ImageView控制元件的重要屬性，當載入的圖片資源與控制元件的大小不匹配時，該如何呈現圖片資源就可通過這個屬性進行配置。scaleType屬性值如表2-10所示：
表2-10scaleType屬性及說明
|
屬性值 |
說明 |
|
fitCenter |
預設值.保持縱橫比縮放，圖片放在ImageView中央 |
|
fitStart |
保持縱橫比縮放，圖片放在ImageView左上角 |
|
fitEnd |
保持縱橫比縮放，圖片放在ImageView右下角 |
|
fitXY |
對圖片橫向、縱向獨立縮放以適應控制元件大小。 |
|
center |
把圖片放在ImageView中間，不進行任何縮放 |
|
centerCrop |
保持縱橫比縮放，圖片完全覆蓋ImageView。 |
|
centerInside |
保持縱橫比縮小，ImageView能完全顯示該圖片。 |
下面通過例項來驗證scaleType屬性的作用
fitCenter、fitStart、fitEnd相似都是會保持圖片縱橫比進行縮放，這樣不會造成圖片的寬和高比例失調，但會出現ImageView沒有被完全覆蓋的問題，即會在寬或高出現空缺。
程式碼:
作者：沖天之峰 20160705