《Android》『ViewPager』- 利用 ViewPager 搭配 RadioButton 實作使用者導覽滑動頁面
《Android Developers 參考文獻》
《簡單介紹》
在我們第一次使用一個 App 的時候，通常一開始都會有使用者導覽的畫面，讓使用者可以透過左右滑動的方式，一頁一頁的觀看這個 App 的使用教學，並在下面透過圈圈表示現在滑到的是第幾張圖，而這個功能是怎麼做到的呢？其實是透過兩個元件，分別是 ViewPager 以及 RadioButton。
《實作方法》
要實作使用者導覽頁面的功能，我們必須建立一個 ViewPager 來儲存不同的導覽頁面，並透過 RadioButton 顯示目前使用者滑到的是第幾個頁面。先來看看如何建立一個 ViewPager。
建立 ViewPager
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
package ... import ... public class MainActivity extends FragmentActivity { private ViewPager viewPager; //宣告 ViewPager 元件 private ArrayList<View> viewPager_List; private MyViewPagerAdapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager = (ViewPager) findViewById(R.id.viewpager); final LayoutInflater mInflater = getLayoutInflater().from(this); View viewPager0 = mInflater.inflate(R.layout.intro_layout_0, null); View viewPager1 = mInflater.inflate(R.layout.intro_layout_1, null); View viewPager2 = mInflater.inflate(R.layout.intro_layout_2, null); View viewPager3 = mInflater.inflate(R.layout.intro_layout_3, null); viewPager_List = new ArrayList<View>(); viewPager_List.add(viewPager0); viewPager_List.add(viewPager1); viewPager_List.add(viewPager2); viewPager_List.add(viewPager3); viewPager.setAdapter(new MyViewPagerAdapter(viewPager_List)); viewPager.setCurrentItem(0); } public class MyViewPagerAdapter extends PagerAdapter { private List<View> mListViews; public MyViewPagerAdapter(List<View> mListViews) { this.mListViews = mListViews; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } @Override public Object instantiateItem(ViewGroup container, int position) { View view = mListViews.get(position); container.addView(view); return view; } @Override public int getCount() { return mListViews.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } } } |
MainActivity.java
首先，我們宣告了一個名為 viewPager 的 ViewPager 元件，接著定義了 4 個 View 元件，分別用來代表 4 個不同的導覽畫面，接著宣告一個名為viewPager_List 的 ArrayList 來儲存這 4 個 View 元件，並利用 viewPager.setAdapter 的方式將 viewPager_List 設定給 viewPager。
|
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout> |
activity_main.xml
在這邊我們使用 FrameLayout，因為之後還要加入 RadioButton，我們希望它是懸浮在頁面上面不隨之滑動的效果。
在 Layout 中加入 RadioGroup、RadioButton
建立好 ViewPager 後，我們就可以透過 RadioButton 來建立表示現在滑到的是第幾張圖的圈圈了，這邊直接將上面的程式碼繼續修改如下 –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" /> <RadioGroup android:id="@+id/radioGroup" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal|bottom" android:orientation="horizontal" android:layout_marginBottom="10dp"> <RadioButton android:id="@+id/radioButton0" android:button="@drawable/radiobutton_bg_selector" android:checked="true"/> <RadioButton android:id="@+id/radioButton1" android:button="@drawable/radiobutton_bg_selector"/> <RadioButton android:id="@+id/radioButton2" android:button="@drawable/radiobutton_bg_selector"/> <RadioButton android:id="@+id/radioButton3" android:button="@drawable/radiobutton_bg_selector"/> </RadioGroup> </FrameLayout> |
activity_main.xml
我們直接在 activity_main.xml 中加入 RadioGroup 與 RadioButton 元件，其中四個 RadioButton 分別用來對應四個不同的導覽頁面。
|
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" //true表示被按下時套用 android:drawable="@drawable/dot_blue_shape"/> <item android:state_checked="true" //true表示被勾選時套用 android:drawable="@drawable/dot_blue_shape"/> <item android:drawable="@drawable/dot_grey_shape" />//預設值 </selector> |
radiobutton_bg_selector.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="@color/grey"/> <size android:width="15dp" android:height="15dp"/> </shape> |
dot_grey_shape.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="@color/blue"/> <size android:width="15dp" android:height="15dp"/> </shape> |
dot_blue_shape.xml
接著我們進一步透過修改每一個 RadioButton 的 android:button 屬性，達到自訂外觀的效果；這邊我們自訂了一個名為 radiobutton_bg_selector 的 Selector 資源檔。並在其中定義了不同按鈕狀態下的顯示圖案。
在 MainActivity 中加入 RadioGroup、RadioButton
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
package ... import ... public class MainActivity extends FragmentActivity { private ViewPager viewPager; //宣告 ViewPager 元件 private ArrayList<View> viewPager_List; private MyViewPagerAdapter mAdapter; private RadioGroup radioGroup; private RadioButton radioButton0, radioButton1, radioButton2, radioButton3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); radioGroup = (RadioGroup) findViewById(R.id.radioGroup); radioButton0 = (RadioButton) findViewById(R.id.radioButton0); radioButton1 = (RadioButton) findViewById(R.id.radioButton1); radioButton2 = (RadioButton) findViewById(R.id.radioButton2); radioButton3 = (RadioButton) findViewById(R.id.radioButton3); viewPager = (ViewPager) findViewById(R.id.viewpager); final LayoutInflater mInflater = getLayoutInflater().from(this); //宣告四個 View 以儲存四種不同 layout。 View viewPager0 = mInflater.inflate(R.layout.intro_layout_0, null); View viewPager1 = mInflater.inflate(R.layout.intro_layout_1, null); View viewPager2 = mInflater.inflate(R.layout.intro_layout_2, null); View viewPager3 = mInflater.inflate(R.layout.intro_layout_3, null); viewPager_List = new ArrayList<View>(); viewPager_List.add(viewPager0); viewPager_List.add(viewPager1); viewPager_List.add(viewPager2); viewPager_List.add(viewPager3); //將四種不同 layout 加入 Arraylist 中 viewPager.setAdapter(new MyViewPagerAdapter(viewPager_List)); //將 Arratlist 設定給 viewPager viewPager.setCurrentItem(0); ViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() //ViewPager 頁面滑動監聽器 { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {} @Override public void onPageSelected(int position) //當頁面滑動到其中一頁時，觸發該頁對應的 RadioButton 按鈕 { switch (position) { case 0: radioGroup.check(R.id.radioButton0); break; case 1: radioGroup.check(R.id.radioButton1); break; case 2: radioGroup.check(R.id.radioButton2); break; case 3: radioGroup.check(R.id.radioButton3); break; } } @Override public void onPageScrollStateChanged(int state) {} }); } public class MyViewPagerAdapter extends PagerAdapter { private List<View> mListViews; public MyViewPagerAdapter(List<View> mListViews) { this.mListViews = mListViews; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } @Override public Object instantiateItem(ViewGroup container, int position) { View view = mListViews.get(position); container.addView(view); return view; } @Override public int getCount() { return mListViews.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } } } |
MainActivity.java
在這邊要特別說明的是，我們將 RadioButton 加入以後，必須在 ViewPager 中加入 setOnPageChangeListener 監聽器，在其中偵測使用者滑動的動作，並在滑動到不同頁面時(onPageSelected)，觸發點擊不同 RadioButton 的效果。
以上就是利用 ViewPager 搭配 RadioButton 實作使用者導覽滑動頁面的方式。
臉書留言
一般留言