iT邦幫忙

2023 iThome 鐵人賽

DAY 9
0
Mobile Development

Android Studio初學系列 第 9

Android Studio初學 DAY9 Viewpager2

  • 分享至 

  • xImage
  •  

viewpager2是一個滑動式的頁面,可以想成是一個主頁面當作主容器,放入了多個不同的頁面當作子容器,左右翻動就可以看到不同的頁面,常用於圖片瀏覽器、瀏覽引導介面等,接下來就看看程式碼
首先我這邊是先做一個tablayout,讓他除了能用滑動的方式,也可以直接點擊跳至想要的畫面,話不多說,馬上來看看
首先,先來看一下XML

<com.google.android.material.tabs.TabLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Monday" />

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tuesday" />

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Wednesday" />
        </com.google.android.material.tabs.TabLayout>

這邊的範例我放了三個tabitem,需要更多的話可以自己增加。
再來就是要來做頁面,有幾個tabitem就要做幾頁fragment

Activity程式碼

public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager2 viewPager2;
    private MyAdapter myAdapter;
    private String[] tab_title = {"第一頁","第二頁","第三頁"};
    @SuppressLint("MissingInflatedId")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = findViewById(R.id.tabLayout);
        viewPager2 = findViewById(R.id.viewPager);
        myAdapter = new MyAdapter(this);
        viewPager2.setAdapter(myAdapter);
        new TabLayoutMediator(tabLayout, viewPager2, true,true, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                viewPager2.setCurrentItem(tab.getPosition());
            }
        }).attach();
        for(int i = 0 ; i < tabLayout.getTabCount() ; i++){
            tabLayout.getTabAt(i).setText(tab_title[i]);
        }
    }
}

這邊我做了一個Adapter去綁定資料
以下是Adapter的程式碼

public class MyAdapter extends FragmentStateAdapter {

    public MyAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        if (position == 0){
            return new PageFragment1();
        }
        else if (position == 1){
            return new PageFragment2();
        }
        else {
            return new PageFragment3();
        }
    }

    @Override
    public int getItemCount() {
        return 3;
    }
}

成果如下/images/emoticon/emoticon41.gif


上一篇
Android Studio初學 DAY8 SeekBar元件
下一篇
Android Studio初學 DAY10 Log
系列文
Android Studio初學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言