Android Studio ViewPager

ViewPager 與頁面連結不同，是頁面區塊內容的切換，可製作圖片切換、廣告輪播效果，類似網頁頁籤功能，框架可依編寫方式，呈現不同外觀，如玩運彩討論區 APP 內，文章內頁的樓層換頁，與板規頁面皆使用此編碼，採滿版畫面切換顯示。

ViewPager 載入的分頁通常使用 Fragment 分段頁面編寫，Fragment 也能被其他 <View> 的相關標籤所用，如 <ImageView>、<WebView>等；創建一個新專案，直接來操作 ViewPager 的編寫方式吧。

【 ViewPager 】

創建新專案後，可先於對應的資料夾內新增 Fragment 文件，使用文件數量看似極少，但令人頭疼之處在於程式邏輯編寫的部分，以下稍微說明文件的用途(如上圖)。

• 新專案基本頁 activity_main.xml，設置 ViewPager 框架。 並於MainActivity.java 引用及宣告所有 Fragment 文件。
• 新增文件 fragment_blank(碼).xml，為每個分段頁面樣式，可自由命名。
• 承上，新增分段頁面時自動產生 BlankFragment(碼).java，為對應各 .xml 頁面的程式編碼。
• BlankFragmentClass.java 轉換器，用來管理 ViewPager 每一頁要顯示什麼內容，範例使用外部傳入 Fragment 陣列。

【 編寫 activity_main.xml 】

<androidx.viewpager.widget.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

• 宣告後，直接使用 <…ViewPager> 標籤設置框架，添加 id 即可，因滿版樣式不需修改樣式 layout。

【 編寫 MainActivity.java 】

public class MainActivity extends AppCompatActivity {

    //1.宣告<ViewPager>標籤為viewPager
    private ViewPager viewPager;

    //2.宣告使用轉換器
    private BlankFragmentClass adapter;

    //3.宣告變數為fragments  
    private Fragment[] fragments;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //4.指定activity_main.xml內標籤
        viewPager = findViewById(R.id.pager);

        //5.初始化三個Fragment分頁
        fragments = new Fragment[3];
        BlankFragment bf1 = new BlankFragment();
        BlankFragment2 bf2 = new BlankFragment2();
        BlankFragment3 bf3 = new BlankFragment3();
        //6.陣列內容
        fragments[0] = bf1;
        fragments[1] = bf2;
        fragments[2] = bf3;

        //7.初始化轉換器
        adapter = new BlankFragmentClass(getSupportFragmentManager(), fragments);

        //8.<ViewPager>標籤設定轉換器
        viewPager.setAdapter(adapter);
    }
}

註解處為新增內容，除了宣告內容，其餘皆編寫至 onCreate 內。

• 2.宣告使用轉換器：透過 adapter 將 Fragment 內容(陣列)轉換成 ViewPager 可以接收的資料。
• 3.宣告變數為fragments：宣告裝載 Fragment 分頁的陣列變數為 fragments。
• 6.陣列內容：將初始化三個 Fragment 分頁，放置於 fragments 陣列裡面。
• 7.初始化轉換器：初始化 adapter 轉換器，並帶入 fragments 陣列內容。

【 編寫 fragment_blank(碼).xml 】

就…分頁顯示的內容，這裡就 <ImageView> 放個大圖示意一下。

【 編寫 BlankFragment(碼).java 】

這次操作範例中並沒有修改到分頁的程式編碼，故不需新增內容。不過研究編寫時有操作到相關用法，就順便說明一下吧。

• 假設 MainActivity.java 或 BlankFragmentClass.java 內有針對分頁內容的<TextView> 標籤設定事件，進行判斷或覆寫，就必須從這裡加入該標籤的程式編碼。

public class BlankFragment extends Fragment {

    //1.宣告<TextView>標籤為textView
    private TextView textView;
    public BlankFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        //2.使用View呈現
        View view = inflater.inflate(R.layout.fragment_blank, container, false);
        //3.指定id執行事件
        textView = view.findViewById(R.id.txt_display);
        String message = getArguments().getString("message");
        textView.setText(message);
        return view;
    }

}

• 2.使用 View 呈現：將原本的 return 改為 View。
• 3.指定 id 執行事件：指定 <TextView> 標籤的 id，帶入他處宣告的內容 “message”，最後提交於畫面顯示。

【 編寫 BlankFragmentClass.java 轉換器】

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;

//1.給予class命名
public class BlankFragmentClass extends FragmentStatePagerAdapter {
    
    //2.宣告變數為mFragments
    private  Fragment[] mFragments;
    
    //3.初始化
    public BlankFragmentClass(FragmentManager fm, Fragment[] fragments) {
        super(fm);
        mFragments = fragments;
    }

    //4.分頁內容
    @Override
    public Fragment getItem(int position) {
        return mFragments[position];
    }

    //5.分頁數量
    @Override
    public int getCount() {
        return mFragments.length;
    }
}

註解處為新增內容，import 編碼處會自動新增相關文件。

• 1.給予class命名：聲明繼承自 FragmentStatePagerAdapter 轉換器，class命名可自由命名，範例命名與 .xml 文件名稱相同。
• 2.宣告變數為 mFragments：Fragment 分頁的陣列，用來管理所有的Fragment 分頁。
• 3.初始化：Fragment 分頁由外部傳入，並存放至 mFragment 裡；外部來源為 MainActivity.java 的 fragments 陣列。
• 4~5.分頁內容、分頁數量：從 mFragment 取出 Fragment 陣列，並提交，getItem、getCount 為原生原件。
• 一段程式編寫大致可分成四個階段，宣告 > 初始化 > 覆寫(下指令) > 顯示於畫面；宣告開頭常用的 public 意為通用，private 則為私用，return 提交。
• 以 Android Studio 程式編寫環境來說，完全大勝網頁編寫環境，系統自動提示細節、錯誤參考，甚至自動修正編碼、載入相關插件，對新手來說可直接當現成工具書參考，再配合網路教學了解編碼的用意。

【 ViewPagerIndicator 】

若為一般說明頁，可為分頁加上指示器，已有現成套件 ViewPagerIndicator 可使用。

• 首先，要在 build.gradle 文件內引用遠端 library 的檔案，引用後若未自動更新，可手動執行 gradle sync 下載。

//build.gradle(Project:專案名稱)文件
allprojects {
    repositories {
        google()
        jcenter()
        
        //引用套件
        maven { url 'https://jitpack.io' }
    }
}

//build.gradle(Module:app)文件
dependencies {

    //引用套件版本
    implementation 'com.github.vivchar:ViewPagerIndicator:1.1.3'   
}

• 再把套件使用的 <…ViewPagerIndicator> 標籤，編寫於 activity_main.xml 文件內，並添加相關樣式即可，以下為範例樣式。

<com.github.vivchar.viewpagerindicator.ViewPagerIndicator
        android:id = "@+id/view_pager_indicator"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_marginBottom = "38dp"
        app:delimiterSize = "8dp"
        app:itemSize = "16dp"
        app:itemIcon = "png圖片位置"
        app:itemSelectedTint = "#0d76b9"
        app:itemTint = "#03a9f4"
        app:itemScale = "1.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

• 最後於 MainActivity.java 文件進行宣告即可。

//於上方宣告處編寫...
    private ViewPagerIndicator viewPagerIndicator;

//於下方Override內編寫...
    //將宣告的套件指定標籤id
    viewPagerIndicator = findViewById(R.id.view_pager_indicator);
    //設定宣告的套件對應的ViewPager
    viewPagerIndicator.setupWithViewPager(viewPager);

【 參考資料/教學 】

• ViewPager 影片教學
• Fragment 分段頁面概念、使用方式
• Fragment 陣列概念
• ViewPagerIndicator 套件來源