ViewPage2和Fragment以及Tablayout使用

# ViewPage2是基于recycleview的基本上实现方法类似

### 好了废话不多说它的使用也很简单只需要简单的配置即可实现https://developer.android.google.cn/training/animation/screen-slide-2?hl=zh-cn

# viewPage2首先搭配fragment使用

## 1.首先需要建立一个包含viewpage2的xml文件

```

<androidx.viewpager2.widget.ViewPager2

            android:id="@+id/my_view_page2"

            android:layout_weight="9"

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:orientation="horizontal"/>

```

**有人说需要引入viewpage2的包，在我发现目前可以直接用，省略导包过程**

其次viewpage2最重要的属性android:orientation="horizontal"可以实现水平和竖直滑动，这是recycleview很相似的功能。

## 2.需要实现FragmentStateAdapter，这是和之前viewpage有区别的地方

```

import androidx.fragment.app.Fragment

import androidx.fragment.app.FragmentActivity

import androidx.viewpager2.adapter.FragmentStateAdapter

class MyFragmentAdapter(fragmentActivity: FragmentActivity,fragments:List<Fragment>) :

    FragmentStateAdapter(fragmentActivity) {

    private val list= fragments

    override fun getItemCount(): Int {

        return list.size

    }

    override fun createFragment(position: Int): Fragment {

        return list[position]

    }

}

```

此方法设定viewpage2的adapter，通过viewpage2和adapter的绑定，实现list的fragment数组访问

```

val viewpage=findViewById<ViewPager2>(R.id.my_view_page2)

//设置page切换的动画特效，在google，Android官网上有示例

        viewpage.setPageTransformer(zoom())

        //创建包含fragment的list

        val listFragment=ArrayList<Fragment>()

        //添加fragment

        listFragment.add(BlankFragment())

        listFragment.add(ScrollingFragment())

        //创建adapter实例

        val myFragmentAdapter=MyFragmentAdapter(this,listFragment)

        //绑定adapter就可以使用了

        viewpage.adapter=myFragmentAdapter

```

这样就可以实现在activity中愉快的滑动界面实现fragment滑动了

# 在项目中我们还会使用tablayout控件来搭配fragment和viewpage2

## 使用方法也很简单

### 1.首先我们得使用xml定义一个TabLayout,默认使用google，Android的TabLayout

```

<com.google.android.material.tabs.TabLayout

            android:id="@+id/my_tab_layout"

            android:layout_weight="1"

            android:layout_width="match_parent"

            app:tabIndicatorFullWidth="false"

            android:layout_height="0dp"/>

```

在这里有一个小问题，就是在设置TabItem,就是在这里实现item初始化的时候，文字不显示，item标题就不见了，据我分析，是只实现了界面上的数据展示，并没有绑定到tablayout上，导致不能展示

```

<com.google.android.material.tabs.TabLayout

            android:id="@+id/my_tab_layout"

            android:layout_weight="1"

            android:layout_width="match_parent"

            app:tabIndicatorFullWidth="false"

            android:layout_height="0dp">

            <com.google.android.material.tabs.TabItem

                android:id="@+id/read_tabitem"

                android:text="@string/readingPage"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"/>

        </com.google.android.material.tabs.TabLayout>

```

这里还有一个重要属性，这个可以设置选中下滑线宽度，沾满还是跟随文字宽度

```

            app:tabIndicatorFullWidth="false"

```

### 2.接下来就是使用了

```

<com.google.android.material.tabs.TabLayout

            android:id="@+id/my_tab_layout"

            android:layout_weight="1"

            android:layout_width="match_parent"

            app:tabIndicatorFullWidth="false"

            android:layout_height="0dp"/>

        <androidx.viewpager2.widget.ViewPager2

            android:id="@+id/my_view_page2"

            android:layout_weight="9"

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:orientation="horizontal"/>

```

搭配viewpage2很香，

```

val viewpage=findViewById<ViewPager2>(R.id.my_view_page2)

        val tablayout=findViewById<TabLayout>(R.id.my_tab_layout)

        //设置page切换的动画特效，在google，Android官网上有示例

        viewpage.setPageTransformer(zoom())

        //创建包含fragment的list

        val listFragment=ArrayList<Fragment>()

        //添加fragment

        listFragment.add(BlankFragment())

        listFragment.add(ScrollingFragment())

        //创建adapter实例

        val myFragmentAdapter=MyFragmentAdapter(this,listFragment)

        //绑定adapter就可以使用了

        viewpage.adapter=myFragmentAdapter

        //ViewPager2与TabLayout的绑定类TabLayoutMediator实现,实现初始化

        TabLayoutMediator(tablayout,viewpage){ tab:TabLayout.Tab,persion:Int->

            when (persion) {

                0 -> {

                    Log.d(TAG, "onCreate: 0")

                    tab.text= resources.getText(R.string.mainPage)

                }

                1 -> {

                    Log.d(TAG, "onCreate: 1")

                    tab.text=resources.getText(R.string.readingPage)

                }

                else -> {

                    Log.d(TAG, "onCreate: else")

                }

            }

        }.attach()

        //设置监听，传中监听

        tablayout.addOnTabSelectedListener(object :TabLayout.OnTabSelectedListener{

            override fun onTabSelected(tab: TabLayout.Tab?) {

                if (tab != null) {

                    Log.d(TAG, "onTabSelected: ${tab.text}")

                }

            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {

            }

            override fun onTabReselected(tab: TabLayout.Tab?) {

            }

        })

```

这是官方文档说明，附上链接https://developer.android.google.cn/reference/com/google/android/material/tabs/TabLayoutMediator

```

A mediator to link a TabLayout with a ViewPager2. The mediator will synchronize the ViewPager2's position with the selected tab when a tab is selected, and the TabLayout's scroll position when the user drags the ViewPager2. TabLayoutMediator will listen to ViewPager2's OnPageChangeCallback to adjust tab when ViewPager2 moves. TabLayoutMediator listens to TabLayout's OnTabSelectedListener to adjust VP2 when tab moves. TabLayoutMediator listens to RecyclerView's AdapterDataObserver to recreate tab content when dataset changes.

Establish the link by creating an instance of this class, make sure the ViewPager2 has an adapter and then call attach() on it. Instantiating a TabLayoutMediator will only create the mediator object, attach() will link the TabLayout and the ViewPager2 together. When creating an instance of this class, you must supply an implementation of TabLayoutMediator.TabConfigurationStrategy in which you set the text of the tab, and/or perform any styling of the tabs that you require. Changing ViewPager2's adapter will require a detach() followed by attach() call. Changing the ViewPager2 or TabLayout will require a new instantiation of TabLayoutMediator.

```