2.3　簡單控件

本節(jié)介紹Android幾個簡單控件的用法與注意點，主要包括文本視圖TextView的跑馬燈與聊天室效果、按鈕Button的監(jiān)聽器使用、圖像視圖ImageView的拉伸效果與截圖功能、圖像按鈕ImageButton的適用場合等。

2.3.1　文本視圖TextView

TextView是最基礎(chǔ)的文本顯示控件，常用的基本屬性和設(shè)置方法見表2-4。

讀者對于這些基本屬性和方法想必并不陌生，因為在第1章第一個App“Hello World”中就用到了它們，這里不再贅述。接下來介紹TextView的兩個特效用法。

1. 跑馬燈效果

當(dāng)一行文本的內(nèi)容太多，導(dǎo)致無法全部顯示，也不想分行展示時，只能讓文字從左向右滾動顯示，類似于跑馬燈。電視在播報突發(fā)新聞時經(jīng)常在屏幕下方輪播消息文字，比如“快訊：我國選手***在剛剛結(jié)束的**比賽中為中國代表團奪得第**枚金牌”。

跑馬燈效果在XML布局文件中實現(xiàn)時需要額外指定部分屬性，這些特殊屬性及其設(shè)置方法的詳細說明見表2-5。

下面是演示跑馬燈效果的XML布局文件：

跑馬燈滾動的效果界面如圖2-7和圖2-8所示。左圖為跑馬燈文字在滾動中，右圖為跑馬燈文字停止?jié)L動。

2. 聊天室或者文字直播間效果

聊天室窗口的高度是固定的，新的文字消息總是加入窗口末尾，同時窗口內(nèi)部的文本整體向上滾動，窗口的大小、位置保持不變。

在XML布局文件中實現(xiàn)聊天室時需要額外指定部分屬性，這些特殊屬性及其設(shè)置方法的詳細說明見表2-7。

接下來看一個簡單聊天室的例子，點擊聊天室窗口可以添加一條聊天記錄，長按聊天窗口可以清除所有聊天記錄。聊天室的演示界面如圖2-9和圖2-10所示，圖2-10比圖2-9多添加了3條聊天記錄，整個聊天記錄的文字自動往上滾動。

下面是聊天室例子用到的XML布局文件內(nèi)容：

本書附帶源碼提供了所有例子的完整布局和代碼，其中聊天室部分詳見junior模塊的activity_bbs.xml和BbsActivity.java。

2.3.2　按鈕Button

Button派生自TextView，二者在UI上的區(qū)別主要是Button控件有個按鈕外觀，提示用戶點擊這里。系統(tǒng)默認的按鈕外觀通常都不好看，需要更換靚一點、活潑一點的圖片，這時在布局文件中修改Button節(jié)點的background屬性就可以了。如果把background屬性設(shè)置為@null，就會去除Button控件的背景樣式，此時的Button看起來跟TextView沒什么區(qū)別。

前面在演示聊天室功能時，頁面代碼給TextView引入了點擊方法和長按方法。因為點擊和長按監(jiān)聽器都來源于View類，所以這兩個方法及其監(jiān)聽器并非Button特有的，而是所有布局和控件都能使用的，一般用于為按鈕控件注冊點擊和長按事件。

Android中的簡單按鈕主要是Button和后面提到的ImageButton。這兩個按鈕對點擊和長按監(jiān)聽器的使用方法并不復(fù)雜，主要步驟如下：

步驟01　自己定義一個擴展自監(jiān)聽器的類，如點擊監(jiān)聽器擴展自View.OnClickListener，長按監(jiān)聽器擴展自View.OnLongClickListener。為了方便起見，也可以直接給頁面的Activity類加上監(jiān)聽器接口。

步驟02　在自定義監(jiān)聽器類中重寫點擊或者長按方法，加入事件處理的代碼。點擊方法的名稱是onClick，長按方法的名稱是onLongClick。

步驟03　哪個視圖要響應(yīng)點擊或長按，就給哪個視圖注冊對應(yīng)的監(jiān)聽器對象。點擊事件的注冊方法是setOnClickListener，長按事件的注冊方法是setOnLongClickListener。

下面是給Button對象注冊點擊監(jiān)聽器和長按監(jiān)聽器的頁面代碼：

2.3.3　圖像視圖ImageView

ImageView是圖像顯示控件，與圖形顯示有關(guān)的屬性說明如下。

• scaleType：指定圖形的拉伸類型，默認是fitCenter。拉伸類型的取值說明見表2-8。
• src：指定圖形來源，src圖形按照scaleType拉伸。注意背景圖不按scaleType指定的方式拉伸，背景默認以fitXY方式拉伸。

ImageView在代碼中調(diào)用的方法說明如下。

• setScaleType：設(shè)置圖形的拉伸類型。具體的取值說明見表2-8。
• setImageDrawable：設(shè)置圖形的Drawable對象。
• setImageResource：設(shè)置圖形的資源ID。
• setImageBitmap：設(shè)置圖形的位圖對象。

讀者應(yīng)該注意到ImageView的拉伸類型種類繁多、文字說明不易理解，特別是center相關(guān)的類型就有4種：fitCenter、center、centerCrop、centerInside。接下來進行一個實驗，把一張圖片放入ImageView控件，嘗試使用不同的拉伸類型，看看效果有什么區(qū)別。下面是圖片拉伸演示用的代碼示例：

至于圖像拉伸的演示界面，fitCenter的效果如圖2-11所示，圖片被拉伸但未超出控件范圍；center的效果如圖2-12所示，圖片沒有拉伸；centerCrop的效果如圖2-13所示，圖片被拉伸且已超出控件范圍；centerInside的效果如圖2-14所示，圖片沒有被拉伸。

Android能用ImageView展示圖片，也自帶屏幕截圖功能。盡管自帶的屏蔽截圖功能有些簡單，不過多數(shù)場合已經(jīng)夠用了。因為截圖功能面向所有視圖，所以可以從其他控件或布局那里截圖下來，然后顯示在ImageView上面。

使用截圖功能必須通過代碼完成，相關(guān)方法如下（這些方法都來自于View類）。

• setDrawingCacheEnabled：設(shè)置繪圖緩存的可用狀態(tài)。true表示打開，false表示關(guān)閉。
• isDrawingCacheEnabled：判斷該控件的繪圖緩存是否可用。
• setDrawingCacheQuality：設(shè)置繪圖緩存的質(zhì)量。
• getDrawingCache：獲取該控件的繪圖緩存結(jié)果，返回值為Bitmap類型。
• setDrawingCacheBackgroundColor：設(shè)置繪圖緩存的背景顏色。大家可能會奇怪為何要提供該方法，因為繪圖緩存默認背景色是黑色，如果不提前設(shè)置緩存的背景色，截圖的結(jié)果就是黑乎乎一片，所以需要將背景色設(shè)置為默認顏色（通常是白色）。

操作截圖功能的具體步驟如下：

步驟01　開始截圖前，先調(diào)用setDrawingCacheEnabled方法，設(shè)置繪圖緩存為可用狀態(tài)。注意該方法在一開始就得調(diào)用，因為先開啟繪圖緩存，之后變更的界面才會記錄到緩存中；如果先變更界面再開啟繪圖緩存，緩存里就是空的。

步驟02　調(diào)用getDrawingCache方法獲取緩存中的圖像數(shù)據(jù)。

步驟03　完成截圖，延遲若干毫秒后調(diào)用setDrawingCacheEnabled方法關(guān)閉繪圖緩存。如果接下來還要截圖，就再次調(diào)用setDrawingCacheEnabled方法重新開啟繪圖緩存。

下面是完成截圖功能的關(guān)鍵代碼片段：

對應(yīng)的截圖演示界面如圖2-15和圖2-16所示。其中，圖2-15所示為截圖前的界面，圖2-16所示為截圖后的界面。

2.3.4　圖像按鈕ImageButton

ImageButton其實派生自ImageView，而不是派生自Button，ImageView擁有的屬性和方法，ImageButton統(tǒng)統(tǒng)擁有，只是ImageButton有個默認的按鈕外觀。

ImageButton和Button都起到控制按鈕的作用，不同的是Button是文本按鈕，ImageButton是圖像按鈕，這兩個按鈕的主要區(qū)別在于：

（1）Button既可顯示文本也可顯示圖形（通過設(shè)置背景圖），而ImageButton只能顯示圖形不能顯示文本。

（2）ImageButton上的圖像可按比例拉伸，而Button上的大圖會拉伸變形（因為背景圖無法按比例拉伸）。

（3）Button只能在背景顯示一張圖形，而ImageButton可分別在前景和背景顯示兩張圖形，實現(xiàn)圖片疊加的效果。

從上面可以看出，Button與ImageButton各有千秋，通常情況下使用Button就夠用了。但在某些場合，比如輸入法打不出來的字符和以特殊字體顯示的字符串，就適合先切圖再用ImageButton顯示。

現(xiàn)在有了Button可在按鈕上顯示文字，又有ImageButton可在按鈕上顯示圖形，照理說絕大多數(shù)場合都夠用了。可是現(xiàn)實項目中的需求往往十分怪異，例如客戶要求在按鈕文字的左邊加一個圖標(biāo)，這樣按鈕內(nèi)部既有文字又有圖片，乍看之下Button和ImageButton都沒法直接使用。若把圖標(biāo)和文字放在一起切圖，每次圖標(biāo)與文字的大小或距離發(fā)生變化時豈不是都要重新切圖？若用LinearLayout對ImageView和TextView組合布局，這樣固然可行，但是布局文件會冗長許多。

其實有個既簡單又靈活的辦法，要想在文字周圍放置圖片，使用TextView就能實現(xiàn)，那么基于TextView的Button自然能實現(xiàn)。具體可在XML布局文件中設(shè)置以下5個屬性。

• drawableTop：指定文本上方的圖形。
• drawableBottom：指定文本下方的圖形。
• drawableLeft：指定文本左邊的圖形。
• drawableRight：指定文本右邊的圖形。
• drawablePadding：指定圖形與文本的間距。

若在代碼中實現(xiàn)，則可調(diào)用如下方法。

• setCompoundDrawables：設(shè)置文本周圍的圖形。可分別設(shè)置左邊、上邊、右邊、下邊的圖形。
• setCompoundDrawablePadding：設(shè)置圖形與文本的間距。

下面的代碼演示在按鈕中變換圖標(biāo)位置的功能：

變換圖標(biāo)位置的效果界面如圖2-17（圖標(biāo)在文字左邊）、圖2-18（圖標(biāo)在文字右邊）、圖2-19（圖標(biāo)在文字上邊）、圖2-20（圖標(biāo)在文字下邊）所示。