褪黑激素算什麼！　撰寫鐵人文，自然不會想睡！

Fragment+ViewPager+Tablayout

tags: 鐵人賽

Created At 2020/7/9 By uuko

Step 0:在 gradle dependencies 加上

 implementation 'com.google.android.material:material:1.0.0'
    implementation 'androidx.appcompat:appcompat:1.1.0'

第一個作用是引入google matariel套件

Step 1: Layout

建立一個TabLayout(上面滑動的)，TabItem(上面滑動塊狀內容)

建立一個ViewPager 作用是讓他可以左右滑動，也要綁上Adapter

因為滑動TabLayout在上方，所以ViewPager應在下方

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Main">

 
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayoutMain"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.tabs.TabItem
            android:id="@+id/production"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" 生產排程 " />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/today_report"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="當日進度表" />

        <com.google.android.material.tabs.TabItem
            android:id="@+id/emil"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="訊息通知" />
        >
    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPagerMain"
        android:layout_width="734dp"
        android:layout_height="352dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tabLayoutMain" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step2

1. 在Activity FindViewByID

1.5 建立幾個Fragment

2. 建立一個Class命名為 MainPagerAdapter ，作用是當ViewPager的Adapter，將Fragment傳入Adapter，有點像將RecycleView List 傳入Adapter一樣

3.將Adapter跟ViewPager綁定

4.可以將TabLayout綁addOnTabSelectedListener根據按下的事件去監聽

解釋方法

這個為建構子，內建的，傳FragmentManager是因為他要處理Fragment的事情

  public MainPagerAdapter(@NonNull FragmentManager fm) {
        super(fm);
    }

因為是綁上Fragment所以Adapter要extends FragmentPagerAdapter
第一個應先將fragment傳入，之後才能得到資料去判斷
所以先建立一個function為

  public void addFragment(Fragment fragment,String title){
        fragmentList.add(fragment);
        fragmentTitle.add(title);
    }

這樣list有資料後才能知道內容跟判斷，在getCount回傳listSize代表Fragment數量多寡

@Override
    public int getCount() {
        return fragmentList.size();
    }

在getItem()回傳List.get(position)代表他現在拿到的是哪個數值

 @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

• MainPagerAdapter

public class MainPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragmentList=new ArrayList<>();

    private List<String> fragmentTitle=new ArrayList<>();

    public MainPagerAdapter(@NonNull FragmentManager fm) {
        super(fm);
    }

    @Override
    public int getCount() {
        return fragmentList.size();
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

    public void addFragment(Fragment fragment,String title){
        fragmentList.add(fragment);
        fragmentTitle.add(title);
    }

     /**
     * 設置ViewPager的標題，可能之後可以寫一些判斷像是現在在哪個fragment之用
     */
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return fragmentTitle.get(position);
    }
}

1.第一步先創立Adapter並調用addFragment方法傳入資料
2.將viewPager綁上adapter
3.ViewPager使用addOnPageChangeListener監聽滑動事件，這裡參數要傳
new TabLayout.TabLayoutOnPageChangeListener(tab_layout)
這樣才能監聽的是TabLayout的滑動事件，上下才能綁定
4.TabLayout使用addOnTabSelectedListener，可以監聽你現在按下的是哪個TabItem
可以用switch case(tab.getTag或是position)做判斷之後在去做下一步動作

• Activity

     private ViewPager viewPager;
    private TabLayout tab_layout;
    private MainPagerAdapter mainPagerAdapter;
     @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        tab_layout=findViewById(R.id.tabLayoutMain);
        viewPager=findViewById(R.id.viewPagerMain);
        mainPagerAdapter=new MainPagerAdapter(getSupportFragmentManager());
        mainPagerAdapter.addFragment(new Production(),"production");
        mainPagerAdapter.addFragment(new today_report(),"todayReport");
        mainPagerAdapter.addFragment(new Emil(),"email" );

        viewPager.setAdapter(mainPagerAdapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tab_layout));
        tab_layout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Toast.makeText(Main.this, ""+tab.getText(), Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }

• [X] 完成

:::info
:bulb: 如果有寫錯的可以直接改
:::

有時間再看的東西

進階用法:https://www.jianshu.com/p/7f4857c85ff2

詳解:https://www.jianshu.com/p/e5abbda4a71c