Android Studio ViewPager

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

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

【 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 程式編寫環境來說,完全大勝網頁編寫環境,系統自動提示細節、錯誤參考,甚至自動修正編碼、載入相關插件,對新手來說可直接當現成工具書參考,再配合網路教學了解編碼的用意。
範例展示:模擬討論區APP換頁

【 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);
範例展示

【 參考資料/教學 】

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *