TabLayout、Viewpager簡介

• TabLayout在畫面上的感覺是如下圖的樣式，可以在上方進行點擊的動作。
  
• ViewPager是將多個Fragment結合並且可以不透過點擊的方式進行換頁，而是透過滑動的方式來達到換頁效果。

建立Fragment

延續昨天已經建立完成的Fragment，並且完成內容的改動。

<!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Fragment01"
        android:textAlignment="center"
        android:textSize="50dp"/>

建立TabLayout以及ViewPager

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@+id/guideline2"
        app:tabGravity="fill"
        tools:ignore="MissingConstraints" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/tabs"
        app:layout_constraintBottom_toTopOf="@id/guideline5"
        tools:ignore="MissingConstraints" />

• Adapter轉接器建立
  新增一個java檔案，並在新增成功後會如同下方的程式碼，並在後方輸入extends FragmentStatePagerAdapter

public class TestAdapter{
}

接著會對著程式碼點Alt+Enter會出現下方附圖，並點選implement methods實施方法。

引入方法後會如同下方程式碼，接著還會要你在新增Constructor matching super。

public class TestAdapter extends FragmentStatePagerAdapter {
    @NonNull
    @Override
    public Fragment getItem (int position) {
        return null;
    }

    @Override
    public int getCount () {
        return 0;
    }
}

最後就會如同下方的程式碼

public class TestAdapter extends FragmentStatePagerAdapter {
    public TestAdapter (@NonNull FragmentManager fm) {
        super (fm);
    }

    public TestAdapter (@NonNull FragmentManager fm, int behavior) {
        super (fm, behavior);
    }

    @NonNull
    @Override
    public Fragment getItem (int position) {
        return null;
    }

    @Override
    public int getCount () {
        return 0;
    }
}

新增方法並利用List儲存等等會寫入的文字

    private final List<Fragment> mFragmentList = new ArrayList<> ();
    private final List<String> mFragmentTitleList = new ArrayList<>();

//方法
    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }

    @Override
    public int getItemPosition(Object object) {
        return PagerAdapter.POSITION_NONE;
    }

Java程式

 //主程式
        tabs = findViewById(R.id.tabs);
        pager = findViewById(R.id.viewpager);

        pagerAdapter = new ViewpagerAdapter(this.getSupportFragmentManager());
        pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

        setupViewPager(pager);
        tabs.setupWithViewPager(pager);


//副程式
//寫在主程式下方，功能是新增主題並在TabLayout上顯示，此功能是在Adapter所寫的功能。
   public void setupViewPager(ViewPager viewPager) {
        pagerAdapter.addFragment(new BlankFragment_Scene01 (), "Home");
        pagerAdapter.addFragment(new BlankFragment_Scene02 (), "Shop");
        pagerAdapter.addFragment(new BlankFragment_Scene03 (), "Setting");
        viewPager.setAdapter(pagerAdapter);
   }

結果展示

第二張圖片用於展示滑動效果

以上是今天所做Viewpager和TabLayout的練習。