ViewPager实现Gallery效果

最新推荐文章于 2022-03-04 18:02:28 发布

xingzhong128

最新推荐文章于 2022-03-04 18:02:28 发布

阅读量625

点赞数

分类专栏： Android学习文章标签： ViewPager Gallery

本文链接：https://blog.csdn.net/xingzhong128/article/details/79269324

版权

Android学习专栏收录该内容

79 篇文章 2 订阅

订阅专栏

前言

前面已经实现了ViewPager横向轮播功能，但轮播效果通常都只是针对顶部的条幅形状的图片，有时候希望能够展示大图片，就需要ViewPager能够像画廊依次展示大图，最好还能够为切换增加动画效果，提升用户体验，现在来探究一下如何实现这种效果。

实现效果

这里写图片描述

实现接口

ViewPager内部会对生成的界面对象做缓存处理，缓存默认情况下是当前展示界面和左右两个界面，设置的接口setOffscreenPageLimit实现可以看到最小默认DEFAULT_OFFSCREEN_PAGES也就是1，左右各保存一个界面。

public void setOffscreenPageLimit(int limit) {
    // 如果缓存的界限小于默认的1个缓存
    if (limit < DEFAULT_OFFSCREEN_PAGES) {
        Log.w(TAG, "Requested offscreen page limit " + limit + " too small; defaulting to "
                + DEFAULT_OFFSCREEN_PAGES);
        // 缓存默认1个界面
        limit = DEFAULT_OFFSCREEN_PAGES;
    }

    if (limit != mOffscreenPageLimit) {
        mOffscreenPageLimit = limit;
        populate();
    }
}

ViewPager还有一个专门的接口用来监听页面切换过程，用户可以在监听处理器里面增加各种动画效果来实现界面切换效果，监听处理器接口如下：

public interface PageTransformer {
    // 切换页面时回调，page代表展示的页面，postion代表当前页面的移动偏移值，
    // 屏幕最左侧为坐标原点
    void transformPage(View page, float position);
}

现在设置setOffscreenPageLimit值为默认值也就是1，同时为页面设置Tag为它们的索引值，查看切换页面是回调position和页面索引值。

D/TransformActivity: page = 1, position = -1.9944445
D/TransformActivity: page = 2, position = -0.99444443
D/TransformActivity: page = 3, position = 0.0055555557
D/TransformActivity: page = 1, position = -1.9962963
D/TransformActivity: page = 2, position = -0.9962963
D/TransformActivity: page = 3, position = 0.0037037036
D/TransformActivity: page = 1, position = -1.9981482
D/TransformActivity: page = 2, position = -0.99814814
D/TransformActivity: page = 3, position = 0.0018518518
D/TransformActivity: page = 1, position = -1.9990741
D/TransformActivity: page = 2, position = -0.9990741
D/TransformActivity: page = 3, position = 9.259259E-4
D/TransformActivity: page = 1, position = -2.0
D/TransformActivity: page = 2, position = -1.0
D/TransformActivity: page = 3, position = 0.0
D/TransformActivity: page = 2, position = -1.0351852
D/TransformActivity: page = 3, position = -0.035185184
D/TransformActivity: page = 4, position = 0.96481484
D/TransformActivity: page = 2, position = -1.0916667
D/TransformActivity: page = 3, position = -0.09166667
D/TransformActivity: page = 4, position = 0.90833336
D/TransformActivity: page = 2, position = -1.1787037
D/TransformActivity: page = 3, position = -0.17870371
D/TransformActivity: page = 4, position = 0.8212963
D/TransformActivity: page = 2, position = -1.2907407
D/TransformActivity: page = 3, position = -0.29074073
D/TransformActivity: page = 4, position = 0.7092593
D/TransformActivity: page = 2, position = -1.3851852
D/TransformActivity: page = 3, position = -0.38518518
D/TransformActivity: page = 4, position = 0.6148148
D/TransformActivity: page = 2, position = -1.4731481
D/TransformActivity: page = 3, position = -0.47314814
D/TransformActivity: page = 4, position = 0.52685183
D/TransformActivity: page = 2, position = -1.5388889
D/TransformActivity: page = 3, position = -0.5388889
D/TransformActivity: page = 4, position = 0.4611111
D/TransformActivity: page = 2, position = -1.6083333
D/TransformActivity: page = 3, position = -0.60833335
D/TransformActivity: page = 4, position = 0.39166668
D/TransformActivity: page = 2, position = -1.6703703
D/TransformActivity: page = 3, position = -0.6703704
D/TransformActivity: page = 4, position = 0.32962963
D/TransformActivity: page = 2, position = -1.7203704
D/TransformActivity: page = 3, position = -0.72037035
D/TransformActivity: page = 4, position = 0.27962962
D/TransformActivity: page = 2, position = -1.7675925
D/TransformActivity: page = 3, position = -0.7675926
D/TransformActivity: page = 4, position = 0.2324074
D/TransformActivity: page = 2, position = -1.8074074
D/TransformActivity: page = 3, position = -0.8074074
D/TransformActivity: page = 4, position = 0.19259259
D/TransformActivity: page = 2, position = -1.8398148
D/TransformActivity: page = 3, position = -0.83981484
D/TransformActivity: page = 4, position = 0.16018519
D/TransformActivity: page = 2, position = -1.8712963
D/TransformActivity: page = 3, position = -0.8712963
D/TransformActivity: page = 4, position = 0.1287037
D/TransformActivity: page = 2, position = -1.8944445
D/TransformActivity: page = 3, position = -0.89444447
D/TransformActivity: page = 4, position = 0.10555556
D/TransformActivity: page = 2, position = -1.9157407
D/TransformActivity: page = 3, position = -0.9157407
D/TransformActivity: page = 4, position = 0.08425926
D/TransformActivity: page = 2, position = -1.9324074
D/TransformActivity: page = 3, position = -0.9324074
D/TransformActivity: page = 4, position = 0.06759259
D/TransformActivity: page = 2, position = -1.9472222
D/TransformActivity: page = 3, position = -0.94722223
D/TransformActivity: page = 4, position = 0.05277778
D/TransformActivity: page = 2, position = -1.9592593
D/TransformActivity: page = 3, position = -0.9592593
D/TransformActivity: page = 4, position = 0.04074074
D/TransformActivity: page = 2, position = -1.9685185
D/TransformActivity: page = 3, position = -0.9685185
D/TransformActivity: page = 4, position = 0.031481482
D/TransformActivity: page = 2, position = -1.9759259
D/TransformActivity: page = 3, position = -0.9759259
D/TransformActivity: page = 4, position = 0.024074074
D/TransformActivity: page = 2, position = -1.9824075
D/TransformActivity: page = 3, position = -0.9824074
D/TransformActivity: page = 4, position = 0.017592592
D/TransformActivity: page = 2, position = -1.9870371
D/TransformActivity: page = 3, position = -0.98703706
D/TransformActivity: page = 4, position = 0.0129629625
D/TransformActivity: page = 2, position = -1.9907408
D/TransformActivity: page = 3, position = -0.9907407
D/TransformActivity: page = 4, position = 0.009259259
D/TransformActivity: page = 2, position = -1.9935185
D/TransformActivity: page = 3, position = -0.99351853
D/TransformActivity: page = 4, position = 0.0064814813
D/TransformActivity: page = 2, position = -1.9953704
D/TransformActivity: page = 3, position = -0.9953704
D/TransformActivity: page = 4, position = 0.0046296297
D/TransformActivity: page = 2, position = -1.9972222
D/TransformActivity: page = 3, position = -0.99722224
D/TransformActivity: page = 4, position = 0.0027777778

现在再把setOffscreenPageLimit设置为2，切换页面查看回调的position和页面索引值。

D/TransformActivity: page = 0, position = -2.588889
D/TransformActivity: page = 1, position = -1.5888889
D/TransformActivity: page = 2, position = -0.5888889
D/TransformActivity: page = 3, position = 0.41111112
D/TransformActivity: page = 4, position = 1.4111111
D/TransformActivity: page = 0, position = -2.7055554
D/TransformActivity: page = 1, position = -1.7055556
D/TransformActivity: page = 2, position = -0.70555556
D/TransformActivity: page = 3, position = 0.29444444
D/TransformActivity: page = 4, position = 1.2944444
D/TransformActivity: page = 0, position = -2.7842593
D/TransformActivity: page = 1, position = -1.7842592
D/TransformActivity: page = 2, position = -0.78425926
D/TransformActivity: page = 3, position = 0.21574074
D/TransformActivity: page = 4, position = 1.2157408
D/TransformActivity: page = 0, position = -2.8527777
D/TransformActivity: page = 1, position = -1.8527777
D/TransformActivity: page = 2, position = -0.8527778
D/TransformActivity: page = 3, position = 0.14722222
D/TransformActivity: page = 4, position = 1.1472223
D/TransformActivity: page = 0, position = -2.9027777
D/TransformActivity: page = 1, position = -1.9027778
D/TransformActivity: page = 2, position = -0.9027778
D/TransformActivity: page = 3, position = 0.097222224
D/TransformActivity: page = 4, position = 1.0972222
D/TransformActivity: page = 0, position = -2.937963
D/TransformActivity: page = 1, position = -1.937963
D/TransformActivity: page = 2, position = -0.93796295
D/TransformActivity: page = 3, position = 0.062037036
D/TransformActivity: page = 4, position = 1.062037
D/TransformActivity: page = 0, position = -2.961111
D/TransformActivity: page = 1, position = -1.9611111
D/TransformActivity: page = 2, position = -0.9611111
D/TransformActivity: page = 3, position = 0.03888889
D/TransformActivity: page = 4, position = 1.0388889
D/TransformActivity: page = 0, position = -2.976852
D/TransformActivity: page = 1, position = -1.9768518
D/TransformActivity: page = 2, position = -0.9768519
D/TransformActivity: page = 3, position = 0.023148147
D/TransformActivity: page = 4, position = 1.0231482
D/TransformActivity: page = 0, position = -2.987963
D/TransformActivity: page = 1, position = -1.987963
D/TransformActivity: page = 2, position = -0.98796296
D/TransformActivity: page = 3, position = 0.012037037
D/TransformActivity: page = 4, position = 1.012037
D/TransformActivity: page = 0, position = -2.9935186
D/TransformActivity: page = 1, position = -1.9935185
D/TransformActivity: page = 2, position = -0.99351853
D/TransformActivity: page = 3, position = 0.0064814813
D/TransformActivity: page = 4, position = 1.0064815
D/TransformActivity: page = 0, position = -2.9972222
D/TransformActivity: page = 1, position = -1.9972222
D/TransformActivity: page = 2, position = -0.99722224
D/TransformActivity: page = 3, position = 0.0027777778
D/TransformActivity: page = 4, position = 1.0027778
D/TransformActivity: page = 0, position = -2.999074
D/TransformActivity: page = 1, position = -1.9990741
D/TransformActivity: page = 2, position = -0.9990741
D/TransformActivity: page = 3, position = 9.259259E-4
D/TransformActivity: page = 4, position = 1.0009259
D/TransformActivity: page = 0, position = -3.0
D/TransformActivity: page = 1, position = -2.0
D/TransformActivity: page = 2, position = -1.0
D/TransformActivity: page = 3, position = 0.0
D/TransformActivity: page = 4, position = 1.0
D/TransformActivity: page = 1, position = -2.0731483
D/TransformActivity: page = 2, position = -1.0731481
D/TransformActivity: page = 3, position = -0.073148146
D/TransformActivity: page = 4, position = 0.92685187
D/TransformActivity: page = 5, position = 1.9268519
D/TransformActivity: page = 1, position = -2.1722221
D/TransformActivity: page = 2, position = -1.1722223
D/TransformActivity: page = 3, position = -0.17222223
D/TransformActivity: page = 4, position = 0.8277778
D/TransformActivity: page = 5, position = 1.8277777
D/TransformActivity: page = 1, position = -2.3111112
D/TransformActivity: page = 2, position = -1.3111111
D/TransformActivity: page = 3, position = -0.31111112
D/TransformActivity: page = 4, position = 0.6888889
D/TransformActivity: page = 5, position = 1.6888889
D/TransformActivity: page = 1, position = -2.4898148
D/TransformActivity: page = 2, position = -1.4898148
D/TransformActivity: page = 3, position = -0.48981482
D/TransformActivity: page = 4, position = 0.5101852
D/TransformActivity: page = 5, position = 1.5101852
D/TransformActivity: page = 1, position = -2.6287036
D/TransformActivity: page = 2, position = -1.6287037
D/TransformActivity: page = 3, position = -0.6287037
D/TransformActivity: page = 4, position = 0.3712963
D/TransformActivity: page = 5, position = 1.3712963
D/TransformActivity: page = 1, position = -2.7240741
D/TransformActivity: page = 2, position = -1.7240741
D/TransformActivity: page = 3, position = -0.72407407
D/TransformActivity: page = 4, position = 0.27592593
D/TransformActivity: page = 5, position = 1.2759259
D/TransformActivity: page = 1, position = -2.8074074
D/TransformActivity: page = 2, position = -1.8074074
D/TransformActivity: page = 3, position = -0.8074074
D/TransformActivity: page = 4, position = 0.19259259
D/TransformActivity: page = 5, position = 1.1925926
D/TransformActivity: page = 1, position = -2.8694444
D/TransformActivity: page = 2, position = -1.8694445
D/TransformActivity: page = 3, position = -0.86944443
D/TransformActivity: page = 4, position = 0.13055556
D/TransformActivity: page = 5, position = 1.1305555
D/TransformActivity: page = 1, position = -2.9148147
D/TransformActivity: page = 2, position = -1.9148148
D/TransformActivity: page = 3, position = -0.91481483
D/TransformActivity: page = 4, position = 0.085185185
D/TransformActivity: page = 5, position = 1.0851852
D/TransformActivity: page = 1, position = -2.9444444
D/TransformActivity: page = 2, position = -1.9444444
D/TransformActivity: page = 3, position = -0.9444444
D/TransformActivity: page = 4, position = 0.055555556
D/TransformActivity: page = 5, position = 1.0555556
D/TransformActivity: page = 1, position = -2.9666667
D/TransformActivity: page = 2, position = -1.9666667
D/TransformActivity: page = 3, position = -0.96666664
D/TransformActivity: page = 4, position = 0.033333335
D/TransformActivity: page = 5, position = 1.0333333
D/TransformActivity: page = 1, position = -2.9805555
D/TransformActivity: page = 2, position = -1.9805555
D/TransformActivity: page = 3, position = -0.98055553
D/TransformActivity: page = 4, position = 0.019444445
D/TransformActivity: page = 5, position = 1.0194445
D/TransformActivity: page = 1, position = -2.9898148
D/TransformActivity: page = 2, position = -1.9898148
D/TransformActivity: page = 3, position = -0.9898148
D/TransformActivity: page = 4, position = 0.010185185
D/TransformActivity: page = 5, position = 1.0101852
D/TransformActivity: page = 1, position = -2.9953704
D/TransformActivity: page = 2, position = -1.9953704
D/TransformActivity: page = 3, position = -0.9953704
D/TransformActivity: page = 4, position = 0.0046296297
D/TransformActivity: page = 5, position = 1.0046296
D/TransformActivity: page = 1, position = -2.9981482
D/TransformActivity: page = 2, position = -1.9981482
D/TransformActivity: page = 3, position = -0.99814814
D/TransformActivity: page = 4, position = 0.0018518518
D/TransformActivity: page = 5, position = 1.0018518
D/TransformActivity: page = 1, position = -2.999074
D/TransformActivity: page = 2, position = -1.9990741
D/TransformActivity: page = 3, position = -0.9990741
D/TransformActivity: page = 4, position = 9.259259E-4
D/TransformActivity: page = 5, position = 1.0009259

通过上面的测试可以发现：ViewPager缓存了几个页面就会为那些页面回调transformPage，同时每个页面的position回调值与页面当时处于屏幕的位置相对应，屏幕展示页面左边的坐标值为[-1， 0），右边坐标值为（0， 1]。对ViewPager的transformPage接口了解清楚之后就可以实现画廊效果展示图片。

实现过程

ViewPager因为会缓存已经以前展示的界面，为了能够让那些界面可以展示出来，需要设置setClipChildren(false)确保ViewPager不会将超出它的边界子控件部分裁剪掉，ViewPager的父控件元素同样要设置setClipChildren(false)确保不会裁剪ViewPager里面的控件展示内容。

这时能够看到在ViewPager边界外部的图片，但是页面切换的时候没有动画效果，可以在transformPage里为界面增加缩放效果，缩放随着position的改变而变化，实现代码如下：

public class MyGalleryView extends FrameLayout {
    private static final String TAG = "MyGalleryView";

    private ViewPager viewPager;
    public MyGalleryView(@NonNull Context context) {
        this(context, null);
    }

    public MyGalleryView(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyGalleryView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        // 初始化ViewPager，设置clipChildren属性
        viewPager = new ViewPager(getContext());
        viewPager.setClipChildren(false);
        viewPager.setClipToPadding(false);
        viewPager.setOffscreenPageLimit(3);
        viewPager.setPadding(CommonUtils.dp2px(50), 0, CommonUtils.dp2px(50), 0);
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT, Gravity.CENTER);
        addView(viewPager, params);

        // 设置动画转换效果
        viewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(View page, float position) {
                Log.d(TAG, "transformPage(): position = " + position);
                final float SCALE_MAX = 0.8f;
                float scale = (position < 0)
                        ? ((1 - SCALE_MAX) * position + 1)
                        : ((SCALE_MAX - 1) * position + 1);

                if(position < 0) {
                    page.setPivotX(page.getWidth());
                    page.setPivotY(page.getHeight() / 2);
                } else {
                    page.setPivotX(0);
                    page.setPivotY(page.getHeight() / 2);
                }
                page.setScaleX(scale);
                page.setScaleY(scale);
            }
        });
    }

    public void setAdapter(PagerAdapter adapter) {
        viewPager.setAdapter(adapter);
    }
}

xingzhong128

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ViewPager实现Gallery效果

前言前面已经实现了ViewPager横向轮播功能，但轮播效果通常都只是针对顶部的条幅形状的图片，有时候希望能够展示大图片，就需要ViewPager能够像画廊依次展示大图，最好还能够为切换增加动画效果，提升用户体验，现在来探究一下如何实现这种效果。实现效果实现接口ViewPager内部会对生成的界面对象做缓存处理，缓存默认情况下是当前展示界面和左右两个界面，设置的接口setO
复制链接

扫一扫