官方 Viewpager 升级版 - ViewPager2 实战
目录
- 1. 前言
- 2. 正文
- 2.1 水平滚动
- 2.2 竖直滚动
- 2.3 FragmentStateAdapter 的使用
- 2.4 演示 notifyDataSetChanged 方法
- 3. 最后
- 参考
1. 前言
Google 在 androidx 组件包里增加了一个新的组件 ViewPager2，目前已经更新了两个 alpha 版本了。那么，和之前的 ViewPager 组件相比，有什么改进呢？查看官方文档，有下面一段话：
ViewPager2 replaces ViewPager, addressing most of its predecessor’s pain-points, including right-to-left layout support, vertical orientation, modifiable Fragment collections, etc.
ViewPager2 用来替换 ViewPager，解决 ViewPager 的多数痛点，包括 RTL 布局支持，垂直方向滚动，可修改的 Fragment 集合等等。
再查看一下 ViewPager2 的 Release Notes，可以看到：
- Version 1.0.0-alpha02
新特性：能够关闭用户输入（setUserInputEnabled,isUserInputEnabled）
API 变更：ViewPager2声明为final类 - Version 1.0.0-alpha01
新特性：支持 RTL 布局，支持竖直方向滚动，功能齐全的notifyDataSetChanged
API 变更：FragmentStateAdapter替代FragmentStatePagerAdapter；RecyclerView.Adapter替代PagerAdapter；registerOnPageChangeCallback替代addPageChangeListener。
好了，初步了解了 ViewPager2，下边开始代码演示。
2. 正文
引入 ViewPager2 组件：
dependencies {
implementation "androidx.viewpager2:viewpager2:1.0.0-alpha02"
}
2.1 水平滚动
把 ViewPager2 声明在 activity_horizontal_scrolling.xml 里面：
<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=".MainActivity">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewpager2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="0dp"
android:layout_height="0dp"/>
androidx.constraintlayout.widget.ConstraintLayout>
建立一个简单的 item 布局，item_page.xml：
<RelativeLayout
android:id="@+id/container"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/tvTitle"
tools:text="item"
android:layout_centerInParent="true"
android:textColor="@android:color/white"
android:textSize="32dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
RelativeLayout>
建立数据适配器 ViewPagerAdapter：
public class ViewPagerAdapter extends RecyclerView.Adapter<ViewPagerAdapter.ViewPagerViewHolder> {
private List<Integer> colors = new ArrayList<>();
{
colors.add(android.R.color.black);
colors.add(android.R.color.holo_purple);
colors.add(android.R.color.holo_blue_dark);
colors.add(android.R.color.holo_green_light);
}
@NonNull
@Override
public ViewPagerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
return new ViewPagerViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_page, parent,false));
}
@Override
public void onBindViewHolder(@NonNull ViewPagerViewHolder holder, int position) {
holder.mTvTitle.setText("item " + position);
holder.mContainer.setBackgroundResource(colors.get(position));
}
@Override
public int getItemCount() {
return colors.size();
}
class ViewPagerViewHolder extends RecyclerView.ViewHolder {
TextView mTvTitle;
RelativeLayout mContainer;
public ViewPagerViewHolder(@NonNull View itemView) {
super(itemView);
mContainer = itemView.findViewById(R.id.container);
mTvTitle = itemView.findViewById(R.id.tvTitle);
}
}
}
在 HorizontalScrollingActivity 的 onCreate 方法中，设置 ViewPager2：
public class HorizontalScrollingActivity extends AppCompatActivity {
public static void start(Context context) {
Intent starter = new Intent(context, HorizontalScrollingActivity.class);
context.startActivity(starter);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_horizontal_scrolling);
ViewPager2 viewPager2 = findViewById(R.id.viewpager2);
ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter();
viewPager2.setAdapter(viewPagerAdapter);
}
}
运行一下，效果如下：
2.2 竖直滚动
只需要在 Activity 里增加一行代码就可以了：
viewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);
运行效果如下：
是不是相当简洁，之前实现这种效果，难免要求助于第三方库或者自己实现。
2.3 FragmentStateAdapter 的使用
这里演示一个 TabLayout + ViewPager2 + Fragment 的例子。
PageFragment.java，构造里接收两个参数，展示内容为文本，以及背景颜色，代码如下：
public class PageFragment extends Fragment {
private static final String COLORS = "colors";
private static final String POSITION = "position";
public static PageFragment newInstance(List<Integer> colors, int position) {
Bundle args = new Bundle();
args.putSerializable(COLORS, ((ArrayList<Integer>) colors));
args.putInt(POSITION, position);
PageFragment fragment = new PageFragment();
fragment.setArguments(args);
return fragment;
}
private List<Integer> mColors;
private int mPosition;
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mColors = (List<Integer>) getArguments().getSerializable(COLORS);
mPosition = getArguments().getInt(POSITION);
}
}
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.item_page, container, false);
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
RelativeLayout container = view.findViewById(R.id.container);
TextView tvTitle = view.findViewById(R.id.tvTitle);
container.setBackgroundResource(mColors.get(mPosition));
tvTitle.setText("Item " + mPosition);
}
}
activity_fragment_state_adapter.xml 如下：
<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=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tablayout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewpager2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tablayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="0dp"
android:layout_height="0dp"/>
androidx.constraintlayout.widget.ConstraintLayout>
在 FragmentStateAdapterActivity 里面，设置继承自 FragmentStateAdapter 的类：
class ViewPagerFragmentStateAdapter extends FragmentStateAdapter {
public ViewPagerFragmentStateAdapter(@NonNull FragmentManager fragmentManager) {
super(fragmentManager);
}
@NonNull
@Override
public Fragment getItem(int position) {
return PageFragment.newInstance(colors, position);
}
@Override
public int getItemCount() {
return colors.size();
}
}
设置使用 ViewPager2 的代码：
public class FragmentStateAdapterActivity extends AppCompatActivity {
private ViewPager2 mViewPager2;
private TabLayout mTabLayout;
private List<Integer> colors = new ArrayList<>();
private ViewPagerFragmentStateAdapter mAdapter;
{
colors.add(android.R.color.black);
colors.add(android.R.color.holo_purple);
colors.add(android.R.color.holo_blue_dark);
colors.add(android.R.color.holo_green_light);
}
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragment_state_adapter);
mTabLayout = findViewById(R.id.tablayout);
mViewPager2 = findViewById(R.id.viewpager2);
mAdapter = new ViewPagerFragmentStateAdapter(getSupportFragmentManager());
mViewPager2.setAdapter(mAdapter);
mTabLayout.addTab(mTabLayout.newTab().setText("Tab0"));
mTabLayout.addTab(mTabLayout.newTab().setText("Tab1"));
mTabLayout.addTab(mTabLayout.newTab().setText("Tab2"));
mTabLayout.addTab(mTabLayout.newTab().setText("Tab3"));
// 添加页签选中监听
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager2.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {}
@Override
public void onTabReselected(TabLayout.Tab tab) {}
});
// 注册页面变化的回调接口
mViewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
mTabLayout.setScrollPosition(position,0,false);
}
});
}
}
可以看到与之前的 ViewPager 相比，代码有些繁琐了。因为，TabLayout 没有和 ViewPager2 直接设置的 API。
运行一下，看效果：
2.4 演示 notifyDataSetChanged 方法
在上面的例子上增加代码，通过点击右上角的 增加 与 删除 来演示。
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_fragment, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_add:
if (TextUtils.equals(item.getTitle(), getString(R.string.action_add))) {
colors.add(android.R.color.holo_red_light);
mTabLayout.addTab(mTabLayout.newTab().setText("Tab4"));
// 添加通知
mAdapter.notifyItemInserted(colors.size()-1);
item.setIcon(R.drawable.ic_action_remove);
item.setTitle(R.string.action_remove);
} else {
item.setIcon(R.drawable.ic_action_add);
item.setTitle(R.string.action_add);
int last = colors.size() - 1;
colors.remove(last);
mTabLayout.removeTabAt(last);
// 移除通知
mAdapter.notifyItemRemoved(last);
}
return true;
}
return super.onOptionsItemSelected(item);
}
运行一下，看效果：
3. 最后
看完了上面的介绍，是不是想立马把 ViewPager 替换为 ViewPager2？但是不要忘记 ViewPager2 还在 alpha 阶段，仍然有不少的问题存在。这里是代码传送门。
参考
1.An Introduction to ViewPager2；
2.Early Introduction of ViewPager2。