欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android Viewpager+Fragment 实现画廊式效果

程序员文章站 2022-06-22 21:22:08
先看一下效果图1.创建一个自定义类ZoomOutPageTransformer (实现放大缩小)public class ZoomOutPageTransformer implements ViewPager.PageTransformer { //*控制缩放比例 private static final float MAX_SCALE = 1f; private static final float MIN_SCALE = 0.8f;//0.85f @O....

先看一下效果图

Android  Viewpager+Fragment 实现画廊式效果

3 1  2  3 1

向左滑动到最后一个 显示出第一个

向右滑动到第一个 显示出最后一个

1.创建一个自定义类 ZoomOutPageTransformer (实现放大缩小)

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    //*控制缩放比例
    private static final float MAX_SCALE = 1f;
    private static final float MIN_SCALE = 0.8f;//0.85f

    @Override
    public void transformPage(View page, float position) {

        if (position <= 1) {

            float scaleFactor = MIN_SCALE + (1 - Math.abs(position)) * (MAX_SCALE - MIN_SCALE);

            page.setScaleX(scaleFactor);

            if (position > 0) {
                page.setTranslationX(-scaleFactor * 2);
            } else if (position < 0) {
                page.setTranslationX(scaleFactor * 2);
            }
            page.setScaleY(scaleFactor);
        } else {

            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);
        }
    }
}

2.activity_main布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="viewpager实现画廊效果"
        android:textColor="@color/colorPrimary"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="200dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:layout_marginBottom="30dp"
        android:clipChildren="false"
        android:layout_marginTop="30dp"/>
</LinearLayout>

3.Activity_main

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    private LinearLayout ll_layout;
    private List<Fragment> list;

    private boolean mIsChanged = false;
    private int mCurrentPagePosition = FIRST_ITEM_INDEX;
    private static final int POINT_LENGTH = 3;
    private static final int FIRST_ITEM_INDEX = 1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        ll_layout = (LinearLayout) findViewById(R.id.ll_layout);

        //添加到数组
        list =new ArrayList<>();
        list.add(new Fragment_three());
        list.add(new Fragment_one());
        list.add(new Fragment_two());
        list.add(new Fragment_three());
        list.add(new Fragment_one());

        //设置适配器
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

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

            @Override
            public int getCount() {
                return list.size();
            }
        });
        mViewPager.setCurrentItem(1);
        mViewPager.setPageMargin(20);
        mViewPager.setOffscreenPageLimit(list.size());
        mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());//设置画廊模式
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                mIsChanged = true;
                if (position > POINT_LENGTH) {
                    // 末位之后,跳转到首位(1)
                    mCurrentPagePosition = FIRST_ITEM_INDEX;
                } else if (position < FIRST_ITEM_INDEX) {
                    // 首位之前,跳转到末尾(N)
                    mCurrentPagePosition = POINT_LENGTH;
                } else {
                    mCurrentPagePosition = position;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                if (ViewPager.SCROLL_STATE_IDLE == state) {
                    if (mIsChanged) {
                        mIsChanged = false;
                        mViewPager.setCurrentItem(mCurrentPagePosition, false);
                    }
                }

            }
        });

//        //viewPager左右两边滑动无效的处理
//        ll_layout.setOnTouchListener(new View.OnTouchListener() {
//            @Override
//            public boolean onTouch(View view, MotionEvent motionEvent) {
//                return mViewPager.dispatchTouchEvent(motionEvent);
//            }
//        });
    }
}

 

本文地址:https://blog.csdn.net/weixin_42630638/article/details/107477698