前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ViewPager2使用笔记

ViewPager2使用笔记

作者头像
项勇
发布2023-03-24 13:46:18
5760
发布2023-03-24 13:46:18
举报
文章被收录于专栏:项勇项勇

一.代码位置(阅读原文)

XTester-fragment+tab+viewpager2

二.引用

代码语言:javascript
复制
implementation 'com.google.android.material:material:1.2.1'
implementation "androidx.viewpager2:viewpager2:1.0.0"

三.实现

基本效果
代码语言:javascript
复制
  <?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/_vp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
</LinearLayout>

java

代码语言:javascript
复制
mViewPager = findViewById(R.id.viewpager2);
mAdapter = new ViewPager2Adapter(this);
mViewPager.setAdapter(mAdapter);
mViewPager.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL); //设置ViewPager2滑动方向  ORIENTATION_VERTICAL
fragments.add(new Fragment1(mViewPager));
fragments.add(new Fragment2(mViewPager));

FragmentStateAdapter

代码语言:javascript
复制
class ViewPager2Adapter extends FragmentStateAdapter {
    public ViewPager2Adapter(FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @Override
    public Fragment createFragment(int position) {
        return fragments.get(position);
    }

    @Override
    public int getItemCount() {
        return fragments.size();
    }
}

  • 纵向效果图
  • 根据PageTransformer做渐变效果
    • ViewPager2.PageTransformer
代码语言:javascript
复制
 public class MyPageTransformer implements ViewPager2.PageTransformer {

    private static final float ROT_MAX = 20.0f;
    private float mRot;
    private static float MIN_SCALE = 0.75f;
    private static float MIN_ALPHA = 0.5f;

    /**
     * @param view     滑动中的那个view
     * @param position
     */
    public void transformPage(View view, float position) {

        int pageWidth = view.getWidth();
        if (position < -1) { // [-Infinity,-1)//This page is way off-screen to the left.
            view.setAlpha(0);
        } else if (position <= 0) { // [-1,0]Use //the default slide transition when moving to the left page
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);
        } else if (position <= 1) { // (0,1]// Fade the page out.
            view.setAlpha(1 - position);
            // Counteract the default slide transition
            view.setTranslationX(pageWidth * -position);
            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE + (1 - MIN_SCALE)
                    * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

activity中设置

代码语言:javascript
复制
mViewPager.setPageTransformer(new MyPageTransformer());

  • 纵向效果图
  • 与Tab联动
    • xml
代码语言:javascript
复制
 <com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    app:tabGravity="fill"
    app:tabMode="fixed"
    android:id="@+id/_tab"
    android:layout_height="wrap_content">
</com.google.android.material.tabs.TabLayout>

abLayoutMediator

代码语言:javascript
复制
private TabLayoutMediator mediator;
private List<String> mTitle;
TabLayout mTabLayout;
    ...
        mTitle = new ArrayList<>();
        mTitle.add("播放界面");
        mTitle.add("歌曲界面");
    mTabLayout = (TabLayout)findViewById(R.id._tab);
       mediator = new TabLayoutMediator(mTabLayout, mViewPager, new TabLayoutMediator.TabConfigurationStrategy() {
        @Override
        public void onConfigureTab(TabLayout.Tab tab, int position) {
            TextView tabView = new TextView(Activity.this);
            tabView.setText(mTitle.get(position));
            tabView.setTextColor(getColor(R.color.design_default_color_primary));
            tab.setCustomView(tabView);
        }
    });
    mediator.attach();

效果图

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-09-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 项勇 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一.代码位置(阅读原文)
  • 二.引用
  • 三.实现
    • 基本效果
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档