iT邦幫忙

2022 iThome 鐵人賽

DAY 9
0
Mobile Development

Android studio 30天初學筆記系列 第 9

[Android Studio 30天挑戰] Day09 - 介紹ViewPager2

  • 分享至 

  • xImage
  •  

ViewPager可以用來達到左右翻頁的效果,這裡可以把它想像成一個容器,放入了不同的頁面進行翻頁,與大多數容器相同,它們都需要Adapter來綁定資料,而不同元件的Adapter都有不同的函數需要複寫。
而這邊我使用了與Fragment連動的方法切換頁面,廢話不多說就先來講講程式碼。

Layout.xml

這裡我多加了一個tabLayout來當作按鈕切換,讓它不只能滑動改變頁面。

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabSelectedTextColor="#1AB5B9"
        app:tabTextColor="#070707"
        tools:layout_editor_absoluteY="40dp">
        
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="圖片1" />
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="圖片2" />
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="圖片2" />
    </com.google.android.material.tabs.TabLayout>
    
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpeger"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

並在新增三個Fragment。
https://ithelp.ithome.com.tw/upload/images/20220714/20150369RGqfFO03oY.png

Activity

public class MainActivity extends AppCompatActivity {
    //---------------宣告變數和TabLayout的titles---------------
    private ViewPager2 viewPager;
    private TabLayout tabLayout;
    private MyPagerAdapter myPagerAdapter;
    private String[] titles=new String[]{"圖片1","圖片2","圖片3"};
    //-------------------------------------------------------
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //---------------綁定元件---------------
        viewPager=(ViewPager2) findViewById(R.id.viewpeger);
        tabLayout=(TabLayout) findViewById(R.id.tabLayout);
        //-------------------------------------
        init();
    }
    public void init(){
        //---------------設定Adapter---------------
        myPagerAdapter= new MyPagerAdapter(this);
        viewPager.setAdapter(myPagerAdapter);
        //-------------------------------------------
        tablayoutFun();
    }

Tablayout

TabLayoutMediator傳入相對參數(下面有註解)並呼叫.attch()就可以與viewpager2連動。

    public void tablayoutFun(){                
        new TabLayoutMediator(
        //使用的tabLayout
        tabLayout, 
        //使用的viewPager
        viewPager,
        //內容改變時是否刷新
        true,
        //使滑動時更順暢
        true,
        new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
                public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                    //放入Titles
                    tab.setText(titles[position]);
                }
            }).attach();
       //設定初始化位置在哪    
       tabLayout.selectTab(tabLayout.getTabAt(1));
    }

Adapter

   private class MyPagerAdapter extends FragmentStateAdapter {
        public MyPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
            super(fragmentActivity);
        }
        @NonNull
        @Override
        //根據你所滑動到的頁數,切換到該頁面
        public Fragment createFragment(int position) {
            switch (position){
                case    0:
                    return new BlankFragment1();
                case    1:
                    return new BlankFragment2();
                default:
                    return new BlankFragment3();
            }
        }
        //要使用的頁數
        @Override
        public int getItemCount() {
            return 3;
        }
    }

成果 /images/emoticon/emoticon07.gif

https://ithelp.ithome.com.tw/upload/images/20220714/20150369k2TgU9nYhd.png


上一篇
[Android Studio 30天挑戰] Day08 - 介紹Button和Toast
下一篇
[Android Studio 30天挑戰] Day10 - 介紹Toolbar
系列文
Android studio 30天初學筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言