前言:
ViewPager2,一看名称就知道是我们Android中常用的ViewPager功能相似的控件,算是ViewPager的升级版。目前已经到稳定的2.1.0.0版,我们可以直接引入来使用了:
我们先来看看有哪些功能和使用上的变化:
1.Api的变动:
-
FragmentStateAdapter
替换了原来的FragmentStatePagerAdapter
-
RecyclerView.Adapter
替换了原来的PagerAdapter
-
registerOnPageChangeCallback
替换了原来的addPageChangeListener
2.新功能:
-
支持RTL布局
-
支持竖向滚动
-
完整支持
notifyDataSetChanged
3.集成方式:本文用的是androidx
在App的build.gradle目录下导入: implementation 'androidx.viewpager2:viewpager2:1.0.0' implementation 'com.google.android.material:material:1.1.0'
4.使用:本文使用的kotlin方式实现.
MainActivity代码:
class MainActivity : AppCompatActivity() { //标题 private val titles = arrayOf("首页", "知识", "导航", "项目") private val fragmentList : MutableList<Fragment> = ArrayList() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) initViews(); } /** * 初始化控件 */ private fun initViews() { //初始化fragment fragmentList.add(HomeFragment()) fragmentList.add(KnowledgeFragment()) fragmentList.add(NavigationFragment()) fragmentList.add(ProjectFragment()) //初始化viewPage viewPager!!.adapter = object:FragmentStateAdapter(this){ override fun getItemCount(): Int { return fragmentList.size } override fun createFragment(position: Int): Fragment { return fragmentList[position] } } viewPager.offscreenPageLimit = 3 val tabLayoutMediator = TabLayoutMediator( tab_layout,viewPager, TabLayoutMediator.TabConfigurationStrategy { tab: TabLayout.Tab, position: Int -> tab.text = titles[position] }) tabLayoutMediator.attach() } }
5.activity_main布局代码:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:orientation="vertical" tools:context=".MainActivity" tools:ignore="MissingConstraints"> <include layout="@layout/toolbar" /> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/view_white" /> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="55dp" app:tabGravity="fill" app:tabIndicatorFullWidth="false" app:tabIndicatorGravity="center" app:tabIndicatorHeight="0dp" app:tabMaxWidth="0dp" app:tabMode="fixed" app:tabRippleColor="@android:color/transparent" app:tabSelectedTextColor="@color/colorPrimary" app:tabTextColor="@android:color/darker_gray" /> </LinearLayout>
6.Fragment代码:
6.1首页HomeFragment
/** *@author: njb *@date: 2020/3/4 0004 20:00 *@desc: 首页 */ class HomeFragment : Fragment(){ override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { val view = LayoutInflater.from(context).inflate(R.layout.fm_home, null) return view } }
6.2知识 KnowledgeFragment
/** *@author: njb *@date: 2020/3/4 0004 20:01 *@desc: 知识 */ class KnowledgeFragment :Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { val view = LayoutInflater.from(context).inflate(R.layout.fm_knowledge, null) return view } }
6.3导航 NavicationFragment
/** *@author: njb *@date: 2020/3/4 0004 20:01 *@desc: 导航 */ public class NavigationFragment :Fragment(){ override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { val view = LayoutInflater.from(context).inflate(R.layout.fm_navigation, null) return view } }
6.4项目 ProjectFragment
/** *@author: njb *@date: 2020/3/4 0004 20:01 *@desc: 项目 */ public class ProjectFragment :Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { val view = LayoutInflater.from(context).inflate(R.layout.fm_project, null) return view } }
7.这里四个界面都一样,写的是入门级的小例子,所以没有具体布局,写一个就可以了
7.1fm_home布局代码:
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="这是首页" android:textColor="@color/colorPrimary" android:textSize="24sp" app:layout_constraintLeft_toRightOf="parent" app:layout_constraintRight_toLeftOf="parent" app:layout_constraintTop_toBottomOf="parent" app:layout_constraintBottom_toTopOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout>
7.2 toolbar布局代码:
<?xml version="1.0" encoding="utf-8"?> <androidx.appcompat.widget.Toolbar 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:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" tools:ignore="PrivateResource"> <TextView android:id="@+id/toolbar_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:textColor="@color/white" android:textSize="16sp"/> <ImageView android:id="@+id/iv_search" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_marginRight="15dp"/> </androidx.appcompat.widget.Toolbar>
7.3 colors.xml代码:
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#6200EE</color> <color name="colorPrimaryDark">#3700B3</color> <color name="colorAccent">#03DAC5</color> <color name="white">#FFFFFF</color> <color name="view_white">#e8e8e8</color> </resources>
7.4 style代码:
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" /> <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" /> </resources>
8.完成的效果图如下:
9.最后给出例子的完整源码地址:
ViewPager2Demo: Android中使用ViewPager2+Tablayout实现底部导航切换.