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