[Android] Android 滑動視窗教學 ~S－葛瑞斯肯樂活筆記

Android app 上的滑動視窗功能很常見，也可以讓app有更多元化的呈現，滑動視窗也可以用來呈現廣告與更多的資訊。先來看完成的樣子，我這邊介紹兩頁，看完程式碼後，就可以知道怎麼去新增頁面了。

請依照下述步驟進行:

建構adapter預先需要的類別
建構需要的xml檔
建構 RadioButton相關資訊
滑動視窗主程式

Step 1: 建構adapter類別:

新增一個 MyViewPagerAdapter，類別名稱自定，不一定要叫這個名字

MyViewPagerAdapter:

import android.view.View;
import android.view.ViewGroup;
import androidx.viewpager.widget.PagerAdapter;
import java.util.List;
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;
    }
}

Step 2: 建構需要的xml檔

這邊我介紹滑動視窗，然後只滑動兩個頁面，所以我們要建構兩個滑動視窗的頁面如下:

兩個檔案分別叫做 viewpage_1.xml，另一個是 viewpage_2.xml

內容:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="第一頁"
        android:autoSizeTextType="uniform"/>

</LinearLayout>

Step 3: 建構 RadioButton相關資訊

要做出下圖黃色部分的效果，所以需要額外的顏色，與觸控行為識別:

先增加顏色:

在colors.xml中新增顏色(紅色部分):

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="blue">#03A9F4</color>
    <color name="grey">#C3C7C9</color>
</resources>

然後新增觸控的行為:

共 dot_blue_shape.xml、dot_grey_shape.xml與radiobutton_bg_selector.xml

dot_blue_shape.xml:

<?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_grey_shape.xml:

<?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>

radiobutton_bg_selector.xml: 這是按鈕的狀態改變。

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

滑動視窗主程式:

主要的layout: activity_main.xml:

	<?xml version="1.0" encoding="utf-8"?>
	<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".MainActivity">

	<FrameLayout
	android:id="@+id/group1"
	android:layout_width="match_parent"
	android:layout_height="180dp">
	<androidx.viewpager.widget.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:layout_marginBottom="10dp"
	android:orientation="horizontal">
	<RadioButton
	android:id="@+id/radioButton_1"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:button="@drawable/radiobutton_bg_selector"
	android:checked="true" />
	<RadioButton
	android:id="@+id/radioButton_2"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:button="@drawable/radiobutton_bg_selector" />
	</RadioGroup>
	</FrameLayout>

	</androidx.constraintlayout.widget.ConstraintLayout>

view raw gistfile1.txt hosted with ❤ by GitHub

主程式:

	import androidx.appcompat.app.AppCompatActivity;
	import androidx.viewpager.widget.ViewPager;
	import android.os.Bundle;
	import android.view.LayoutInflater;
	import android.view.View;
	import android.widget.RadioGroup;

	import java.util.ArrayList;

	public class MainActivity extends AppCompatActivity {

	//滑動視窗
	private ViewPager viewPager; //宣告 ViewPager 元件
	private ArrayList<View> viewPager_List;
	private RadioGroup radioGroup;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);

	viewPager = findViewById(R.id.viewpager);
	radioGroup = findViewById(R.id.radioGroup);

	final LayoutInflater mInflater = getLayoutInflater().from(this);
	View viewPagerMainPage = mInflater.inflate(R.layout.viewpage_1, null);
	View viewPager1 = mInflater.inflate(R.layout.viewpage_2, null);
	viewPager_List = new ArrayList<View>();
	viewPager_List.add(viewPagerMainPage);
	viewPager_List.add(viewPager1);//funpark
	viewPager.setAdapter(new MyViewPagerAdapter(viewPager_List));
	viewPager.setCurrentItem(0);
	//ViewPager 頁面滑動監聽器
	viewPager.setOnPageChangeListener(listener);

	}

	//滑動視窗頁面控制
	ViewPager.OnPageChangeListener listener = new ViewPager.OnPageChangeListener(){
	@Override
	public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

	//當頁面滑動到其中一頁時，觸發該頁對應的 RadioButton 按鈕
	@Override
	public void onPageSelected(int position){
	switch (position) {
	case 0:
	radioGroup.check(R.id.radioButton_1);
	break;
	case 1:
	radioGroup.check(R.id.radioButton_2);
	break;
	default:
	break;
	}
	}

	@Override
	public void onPageScrollStateChanged(int state) {}
	};
	}