學習筆記|AS入門(五) 高階控制元件篇(中)

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

本篇繼續學習高階控制元件及獨具特色的監聽器,目錄如下:

  • ScrollView 滾動檢視
  • ProgressBar 進度條
  • ProgressDialog 對話方塊形式進度條
  • SeekBar 可拖動進度條
  • DataPicker 日曆選擇器
  • DataPickerDialog 對話方塊形式日曆選擇器
  • TimePicker 時間選擇器
  • TimePickerDialog 對話方塊形式時間選擇器

1.ScrollView 滾動檢視

當展示的內容很多螢幕顯示不下時就需要用ScrollView來顯示完整的檢視。下圖對比了有無ScrollView兩種不同的情況:

學習筆記|AS入門(五) 高階控制元件篇(中)

可以看到當整個頁面只有一個TextView時因為內容不完整視覺上感覺很不好,如果加上ScrollView,使用者就可以滑動滾動條看到後面的內容。ScrollView使用起來也很容易,只要將TextView作為它的子標籤就可以了,如果不想看到滾動條,可以設定屬性android:scrollbars="none"隱藏起來。另外,根據需要也可以使用水平滾動檢視HorizantalScrollView,替換SrollView標籤就可以了。

學習筆記|AS入門(五) 高階控制元件篇(中)

之後在MainActivity獲取TextView例項並set內容,執行之後就能看到之前的效果了。

學習筆記|AS入門(五) 高階控制元件篇(中)

再介紹一個監聽器OnTouchListener,它可以監聽ScrollView滑行情況,比如希望使用者看完文字後繼續新增一些文字內容,那麼就可以在監聽到ScrollView到達底部的事件後做出相應的動作,程式碼見下:

學習筆記|AS入門(五) 高階控制元件篇(中)

有必要對上述程式碼做一些解釋:從 event.getAction() 可以監聽到滑塊各種狀態,其中一種狀態 MotionEvent.ACTION_MOVE 表示滑塊在滑動的過程中。接下來在判斷文字處於最頂端還是最低端時,使用了ScrollView三個測量高度的方法: scrollView.getChildAt(0).getMeasuredHeight() 表示ScrollView第一個子標籤即TextView文字內容總長度, scrollView.getHeight() 表示ScrollView高度即螢幕總高度, scrollView.getScrollY() 表示滾動條滑動距離。易得出當滑動距離+螢幕總高度=文字總長度時,正好到達文字最低端。除錯結果如圖:

學習筆記|AS入門(五) 高階控制元件篇(中)

學習筆記|AS入門(五) 高階控制元件篇(中)

2.ProgressBar 進度條

ProgressBar通常用於展示某個耗時操作完成的進度,來更好的提升使用者介面的友好性。首先來學習ProgressBar幾個關鍵屬性:

max:最大顯示進度 progress:第一顯示進度 secondaryProgress:第二顯示進度 三者關係見圖:

學習筆記|AS入門(五) 高階控制元件篇(中)

學習筆記|AS入門(五) 高階控制元件篇(中)

style:進度條的型別,上圖顯示了四種常見的型別--大、中、小環形進度條以及水平進度條。其實每種型別的進度條顯示風格也是多種多樣的,以水平進度條舉例,實際上style可選值中 @android:style/ 下系統還提供了更多可選風格,比如選擇第一項:

學習筆記|AS入門(五) 高階控制元件篇(中)

進度條就換了個風格。

學習筆記|AS入門(五) 高階控制元件篇(中)

ctrl點進去看這個style原始碼,發現整個進度條風格由很多Item共同組成,比如通過第二項progressDrawable就可以實現自定義一個進度條樣式了。

學習筆記|AS入門(五) 高階控制元件篇(中)

介紹完ProgressBar幾個關鍵屬性後,再通過一個小demo學習它的幾個關鍵方法。在佈局裡準備三個button和一個textview,用於控制進度條加減和重置以及顯示進度條具體進度資料。

學習筆記|AS入門(五) 高階控制元件篇(中)

接著在MainActivity獲取到所有控制元件的例項並給所有按鈕都設定好監聽器。為了顯示初始進度百分比,從ProgressBar三個get方法分別獲取到三個進度數值,經過相應的計算便可以得到了。

學習筆記|AS入門(五) 高階控制元件篇(中)
學習筆記|AS入門(五) 高階控制元件篇(中)

按鈕監聽事件中,進度的重置直接用set方法,而進度的增加和減少就需要increment方法,引數為正數即加,負數即減。這裡讓進度條每次變化十個百分比。

學習筆記|AS入門(五) 高階控制元件篇(中)

執行後點選增加按鈕效果見圖,減少和重置功能也能很好的完成:

學習筆記|AS入門(五) 高階控制元件篇(中)

3.ProgressDialog 對話方塊形式進度條

學習完ProgressBar,趁熱打鐵,看看Dialog的進度條如何做到。直接在上個demo佈局最後再新增一個Button,用於開啟一個ProgressDialog,給它設定監聽器後,在點選事件裡完成一個ProgressDialog的程式碼見下:

學習筆記|AS入門(五) 高階控制元件篇(中)

用ProgressDialog的各種set方法設定了對話方塊頁面風格(進度條樣式、標題和圖示)、進度條屬性和一個名為“確認”的按鈕以及對應的點選事件,且這個對話方塊可通過返回鍵取消,最後一定要有 progressDialog.show() 否則之前設定都功虧一簣對話方塊是無法彈出來的。另外再說明一個方法setIndeterminate(),當值為true表示不精確顯示進度條,比如環形進度條就會一直轉圈,而值為false表示精確顯示進度條,比如此例中水平進度條下就會顯示刻度。執行程式後結果如下:

學習筆記|AS入門(五) 高階控制元件篇(中)

當點選確定按鈕之後,確實彈出一個檢視成功的Toast。

學習筆記|AS入門(五) 高階控制元件篇(中)

4.SeekBar 可拖動進度條

在我們調整音量或者聽歌的時候,會有這樣的進度條上面帶有滑塊允許使用者拖動以改變當前進度的大小,這就是SeekBar。因為都是進度條,SeekBar的關鍵屬性就不多說了,這裡認識一個監聽器OnSeekBarChangeListener,用於監聽SeekBar上滑塊執行狀態。接下來通過一個小例子學習如何使用,先準備這樣一個佈局:

學習筆記|AS入門(五) 高階控制元件篇(中)

在MainActiviity給SeekBar註冊監聽器並具體實現三個方法,對應滑塊三個狀態,其中onProgressChanged()方法會返回當前進度progress數值使之顯示在第一個文字框。

學習筆記|AS入門(五) 高階控制元件篇(中)

學習筆記|AS入門(五) 高階控制元件篇(中)

執行結果如下,“開始拖動”一瞬間很快就進入到“正在拖動”的狀態。

學習筆記|AS入門(五) 高階控制元件篇(中)

5.DataPicker 日曆選擇器

當我們在備忘錄寫每日行程或設定鬧鐘的時候必不可少需要填寫日期和時間,安卓有提供相應的選擇器,幫助我們快速選擇日期和時間,剩下部分就來介紹這些Picker。

DataPicker日曆選擇器可選擇年月日,下圖預覽可看到就是一個很常見的日曆。

學習筆記|AS入門(五) 高階控制元件篇(中)

既然是選擇器,那麼肯定可以監聽到使用者選擇的內容,所以每個選擇器固然有對應的監聽器。現在做這樣的小demo來看監聽器的作用,標題欄顯示當前日期和時間,每當使用者在DataPicker上選擇一個日期後,標題欄實時變化以顯示當前選擇的日期。

先利用系統提供的Calendar類可獲取到當前年月日時分,這裡注意Calendar計算月是從0開始。初始時標題欄顯示當前時間。

學習筆記|AS入門(五) 高階控制元件篇(中)

DataPicker想要註冊監聽器OnDateChangedListener,要通過它的一個方法init()並提供四個引數,前三個引數正是之前獲取的年月日,表示初始時日曆上所顯示的日期,注意月份的計算和Calendar相同,所以不需要加1,第四個引數是監聽器物件。觸發事件後會返回被使用者選擇的年月日三個引數,再顯示到標題上即可。

學習筆記|AS入門(五) 高階控制元件篇(中)

看看執行後效果吧!

學習筆記|AS入門(五) 高階控制元件篇(中)

6.DataPickerDialog 對話方塊形式日曆選擇器

根據不同的需求,還可以通過對話方塊的形式選擇日期。方法是直接在程式碼中new一個DataPickerDialog物件,再show() 出來就完成了。和DataPicker非常相似的,初始化DataPickerDialog的時候需要五個引數,第一個引數是上下文,然後就是監聽器OnDateSetListener物件,之後才是年月日。

學習筆記|AS入門(五) 高階控制元件篇(中)

此時程式一啟動會先彈出一個對話方塊,使用者可直接選擇日期,確定後就可以看到剛剛選擇的日期顯示在標題上了。

學習筆記|AS入門(五) 高階控制元件篇(中)

7.TimePicker 時間選擇器

下面來看看可選擇時分的TimePicker 時間選擇器,可在鐘錶上先選擇小時的數值,再選擇分鐘的數值。

學習筆記|AS入門(五) 高階控制元件篇(中)

比DataPicker簡單的是,它可以直接通過setOnTimeChangedListener()方法註冊監聽器OnTimeChangedListener,就不需要提供其他引數了。這裡同樣地在事件觸發後讓標題顯示被選擇的時分。

學習筆記|AS入門(五) 高階控制元件篇(中)

執行後:

學習筆記|AS入門(五) 高階控制元件篇(中)

8.TimePickerDialog 對話方塊形式時間選擇器

最後一個TimePickerDialog,學到現在,是不是能很容易掌握了?註冊監聽器OnTimeSetListener過程如下:

學習筆記|AS入門(五) 高階控制元件篇(中)

執行:

學習筆記|AS入門(五) 高階控制元件篇(中)

好啦,本篇內容暫時告一段落,還有一篇的高階控制元件等你來學習哦!

相關文章