[Android] ViewPager+Radio Button實現使用者導覽效果

延續上篇：利用ViewPager切換Fragment，實作完後只要再加上Radio Button就可以實現像是使用者導覽的效果。

Step1 設計Radio Button樣式

先要實作圈圈的樣式，分為：當前頁面、其他頁面
新增兩個檔案：dot_blue.xml、dot_grey.xml至drawable資料夾中

	<?xml version="1.0" encoding="utf-8"?>
	<shape
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="oval">
	<solid
	android:color="@color/colorBlue"/>
	<size
	android:width="8dp"
	android:height="8dp"/>
	</shape>

view raw dot_blue.xml hosted with ❤ by GitHub

dot_grey.xml做法一樣，只是把顏色換掉而已

再來要設定Radio Button切換的樣式
新增一個檔案：radio_background.xml至drawable資料夾中

	<?xml version="1.0" encoding="utf-8"?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item
	android:drawable="@drawable/dot_blue"
	android:state_checked="true"
	android:state_pressed="true" />
	<item
	android:drawable="@drawable/dot_blue"
	android:state_pressed="true" />
	<item
	android:drawable="@drawable/dot_blue"
	android:state_checked="true" />
	<item
	android:drawable="@drawable/dot_grey" />
	</selector>

view raw radio_background.xml hosted with ❤ by GitHub

最後在styles.xml中新增Radio Button的樣式

	<style name="radioButton" parent="Widget.AppCompat.CompoundButton.RadioButton">
	<item name="android:button">@drawable/radio_background</item>
	<item name="android:paddingLeft">4dp</item>
	<item name="android:paddingRight">4dp</item>
	</style>

view raw styles.xml hosted with ❤ by GitHub

Step2 在activity_main.xml中加上RadioGroup的標籤

	<RadioGroup
	android:id="@+id/radiogroup"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_gravity="center_horizontal|bottom"
	android:layout_marginBottom="32dp"
	android:orientation="horizontal"
	app:layout_constraintBottom_toBottomOf="parent"
	app:layout_constraintLeft_toLeftOf="parent"
	app:layout_constraintRight_toRightOf="parent">
	<RadioButton
	android:id="@+id/radioButton"
	style="@style/radioButton"
	android:checked="true" />
	<RadioButton
	android:id="@+id/radioButton2"
	style="@style/radioButton" />
	</RadioGroup>

view raw activity_main.xml hosted with ❤ by GitHub

Step3 在MainActivity.java中設定Radio Button

宣告Radio Group並加入ViewPager的.OnPageChangeListener()監聽器，來控制Radio Button顯示的樣式

	mRadio = (RadioGroup) findViewById(R.id.radiogroup);
	mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
	@Override
	public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
	}
	@Override
	public void onPageSelected(int position) {
	switch (position) {
	case 0:
	mRadio.check(R.id.radioButton);
	break;
	case 1:
	mRadio.check(R.id.radioButton2);
	break;
	}
	}
	@Override
	public void onPageScrollStateChanged(int state) {
	}
	});

view raw MainActivity.java hosted with ❤ by GitHub

執行結果：

參考來源：賽肥膩膩