《Android》『ViewPager』- 利用 ViewPager 搭配 RadioButton 實作使用者導覽滑動頁面

《Android Developers 參考文獻》

➥ViewPager

 

《簡單介紹》

在我們第一次使用一個 App 的時候,通常一開始都會有使用者導覽的畫面,讓使用者可以透過左右滑動的方式,一頁一頁的觀看這個 App 的使用教學,並在下面透過圈圈表示現在滑到的是第幾張圖,而這個功能是怎麼做到的呢?其實是透過兩個元件,分別是 ViewPager 以及 RadioButton。

 

《實作方法》

要實作使用者導覽頁面的功能,我們必須建立一個 ViewPager 來儲存不同的導覽頁面,並透過 RadioButton 顯示目前使用者滑到的是第幾個頁面。先來看看如何建立一個 ViewPager。

建立 ViewPager

MainActivity.java

首先,我們宣告了一個名為 viewPager 的 ViewPager 元件,接著定義了 4 個 View 元件,分別用來代表 4 個不同的導覽畫面,接著宣告一個名為viewPager_List 的 ArrayList 來儲存這 4 個 View 元件,並利用 viewPager.setAdapter 的方式將 viewPager_List 設定給 viewPager。

activity_main.xml

在這邊我們使用 FrameLayout,因為之後還要加入 RadioButton,我們希望它是懸浮在頁面上面不隨之滑動的效果。

 

在 Layout 中加入 RadioGroup、RadioButton

建立好 ViewPager 後,我們就可以透過 RadioButton 來建立表示現在滑到的是第幾張圖的圈圈了,這邊直接將上面的程式碼繼續修改如下 –

activity_main.xml

我們直接在 activity_main.xml 中加入 RadioGroup 與 RadioButton 元件,其中四個 RadioButton 分別用來對應四個不同的導覽頁面。

radiobutton_bg_selector.xml

dot_grey_shape.xml

dot_blue_shape.xml

接著我們進一步透過修改每一個 RadioButton 的 android:button 屬性,達到自訂外觀的效果;這邊我們自訂了一個名為 radiobutton_bg_selector 的 Selector 資源檔。並在其中定義了不同按鈕狀態下的顯示圖案。

 

在 MainActivity 中加入 RadioGroup、RadioButton

MainActivity.java

在這邊要特別說明的是,我們將 RadioButton 加入以後,必須在 ViewPager 中加入 setOnPageChangeListener 監聽器,在其中偵測使用者滑動的動作,並在滑動到不同頁面時(onPageSelected),觸發點擊不同 RadioButton 的效果。

以上就是利用 ViewPager 搭配 RadioButton 實作使用者導覽滑動頁面的方式。

賽肥膩膩

我們是低調到不行的肥膩夫妻檔,一路上一邊吵鬧一邊記錄著生活大小事,偶爾一起暴飲暴食再偶爾一起節食減肥,最沒恆心與毅力但一路走來也持續減肥了好幾次,我們重量不重質,所以完全沒有效果也是理所當然的事。

上 / 下一篇文章

臉書留言

一般留言

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *