學習筆記|AS入門(二) 簡單控制元件篇(下)

釐米姑娘發表於2017-12-21

本文將介紹的簡單控制元件與上篇最大的不同就是引入了各種各樣的監聽器,用於捕捉使用者動作並做出特定的響應,相信大家學java時候對它有了一定的認識,接下來以Button為例,總結三種監聽器實現方法,然後會分別介紹其餘簡單控制元件的作用和所需監聽器的型別。

6.Botton :按鈕

按鈕無處不在,它是和使用者進行互動的一個常用控制元件。如下圖這樣的一個Button:

學習筆記|AS入門(二) 簡單控制元件篇(下)

為了實現點選登入按鈕後登入的操作,就需要用監聽器捕捉點選的動作並作出反應,因為此處涉及到跳轉頁面等知識,暫且先用Log日誌進行除錯,使用Log日誌的方法是Log.i(),含有的兩個引數都是string型別,前者表示標籤名稱,便於快速定位,後者表示除錯資訊。

Button的監聽器是OnClickListener,如何註冊點選事件呢?首先在Mainactivity中對宣告一個Button物件並繫結資料,然後用setOnClickListener方法給它安上監聽器,這裡需要一個OnClickListener物件的引數,實現方式有以下三種方法:

(1)匿名內部類

學習筆記|AS入門(二) 簡單控制元件篇(下)

在括號內部new一個匿名監聽器物件,然後直接重寫方法onClick。這時執行app並點選登入按鈕,從Log日誌可見onClick事件被觸發了:

學習筆記|AS入門(二) 簡單控制元件篇(下)

檢視Log日誌方法見技能篇

(2)獨立類

學習筆記|AS入門(二) 簡單控制元件篇(下)

和匿名類相對的,在外部初始化一個有名字的監聽器物件。

(3)監聽介面方式

學習筆記|AS入門(二) 簡單控制元件篇(下)

繼承監聽介面要在MainActivity類內重寫方法onClick,此時用this就可以實現監聽器的作用。

7.ImageButton :圖片按鈕

ImageButton是顯示圖片的按鈕,它和Button的區別是:Button可以顯示文字資訊,有android:text屬性但沒有android:src屬性,它也可以沒有任何文字資訊就是一個按鈕;ImageButton正好相反,沒有android:text屬性但有android:src屬性,如果不設定scr屬性ImageButton的高度會不確定。當然兩者都有android:background屬性,Button想顯示圖片,ImageButton想有高度,也可以通過它實現,但圖片變形與否就要看控制元件大小了。下圖展示了兩個Button的效果:

學習筆記|AS入門(二) 簡單控制元件篇(下)

ImageButton的監聽器也是OnClickListener,具體見Button,此處不再贅述。

在環境篇介紹過drawable和mipmap系列資料夾都存放圖片資源,在src和backgroud可通 過 @drawable/@mipmap/ 顯示系統提供的圖片,也可以將系統外的圖片拖進上述資料夾裡,這和用@string/顯示文字的功能是一致的。觀察上面的兩個按鈕,它們預設底色是灰色,被點選之後有輕微的效果,現在要把Button改成底色為橘色點選後閃現紅色的按鈕,下面通過改變按鈕的樣式的這個小例子介紹如何用drawable實現自定義影象。

step1:在drawable資料夾下新建xml檔案,shape標籤。

因為本例需要給按鈕兩個背景顏色,而shape是就是用於定義形狀的。過程講解見下圖:

學習筆記|AS入門(二) 簡單控制元件篇(下)

學習筆記|AS入門(二) 簡單控制元件篇(下)

學習筆記|AS入門(二) 簡單控制元件篇(下)
上圖展示了在shape裡常用的四個屬性,這裡給Button自定義前兩個屬性就可以。

學習筆記|AS入門(二) 簡單控制元件篇(下)

step2.在drawable資料夾下新建xml檔案,selector標籤。

光有兩個圖形還不夠,我們需要selector將兩者聯絡在一起。過程講解見下圖:

學習筆記|AS入門(二) 簡單控制元件篇(下)

學習筆記|AS入門(二) 簡單控制元件篇(下)

step3.設定Button的background屬性。

學習筆記|AS入門(二) 簡單控制元件篇(下)

學習筆記|AS入門(二) 簡單控制元件篇(下)

總的來說,android自定義控制元件樣式在drawable資料夾下的XML檔案中,然後通過設定控制元件的background屬性達到效果。

8.ToggleButton :多狀態按鈕

ToggleButton是開關按鈕,它有兩種狀態:選中和未選擇狀態。比如使用手機的手電筒,有開和關兩種狀態,分別對應不同的圖示。ToggleButton有幾個常用的屬性:android:checked(當前按鈕的狀態,true表示當前處於選中狀態,false表示未選中也是預設狀態)、 android:textOn (當被選中時按鈕上的文字內容)、android:textOff(當未被選中時按鈕上的文字內容)。現在下圖這個佈局就很容易理解了(我事先在drawable下放入了兩張圖示):

學習筆記|AS入門(二) 簡單控制元件篇(下)

那麼如何讓圖示和按鈕同時變化呢?就需要ToggleButton的監聽器OnCheckedChangeListener了。當選中ToggleButton時,觸發onCheckedChanged事件並會返回一個布林型別的引數ischecked,利用ischecked可以改變ToggleButton的選中狀態從而改變ToggleButton顯示的文字內容,還可以改變ImageView顯示的背景圖示。

學習筆記|AS入門(二) 簡單控制元件篇(下)

學習筆記|AS入門(二) 簡單控制元件篇(下)

9.CheckBox :核取方塊

CheckBox是個選框,有兩種狀態:選中和未選擇狀態,“復”說明它可以在這兩個狀態反覆切換。CheckBox常用屬性:android:checked(當前核取方塊的狀態,true表示當前處於選中狀態,false表示未選中也是預設狀態)、android:text(核取方塊後文字內容)。CheckBox的監聽器也是OnCheckedChangeListener。下面我們用CheckBox實現一道可多選的選擇題:

學習筆記|AS入門(二) 簡單控制元件篇(下)

用Log日誌進行除錯程式碼如下,我們希望在日誌檔案顯示出被選中的CheckBox上的文字內容,先用getText()方法拿到核取方塊上的文字資訊再通過toString()方法轉換成string型別,就能實現了。

學習筆記|AS入門(二) 簡單控制元件篇(下)

除錯結果:

學習筆記|AS入門(二) 簡單控制元件篇(下)

10.RadioButton :單選按鈕

RadioButton也有選中和未選中的兩個狀態,但它和核取方塊CheckBox的區別是它選中後再點選不能改變狀態,這有什麼用處呢?其實RadioButton常常構成一個集合以RadioGroup的形式為我們所用,比如一道多選一的選擇題,每組RadioGroup裡只能有一個RadioButton被選中,如果想改變此時被選中的RadioButton的狀態,只能通過選中其他RadioButton來實現。RadioGroup有個常用的屬性:android:orientation(表示包含的RadioButton的排列方式,horizontal表示水平排列,vertical表示垂直排列)。

學習筆記|AS入門(二) 簡單控制元件篇(下)

RadioGroup的監聽器也是OnCheckedChangeListener,它們都和選中改變狀態有關。關於OnCheckedChangeListener監聽器也介紹了許多,相信大家一定能理解下圖的程式碼含義了!

學習筆記|AS入門(二) 簡單控制元件篇(下)

關於簡單控制元件就介紹到這裡,後續還會介紹一些稍微高階的控制元件,謝謝大家的觀看~

>下一篇預告:佈局篇

相關文章