【自定义View】4.ViewPager卡片滑动效果

【难度★☆☆☆☆】前面我们学过了ViewPager的原理,那么接下来我们实现一个带缩放卡片式的ViewPager,它可以用来展示图片,展示卡片式的UI。

  许多时候我们闲原生的ViewPager的效果太过单调,于是我们想做一些更好的UI效果,比如下面的ViewPager卡片滑动效果。
cardviewpager

  这个效果我已经封装好成一个自定义控件,只要在原有的ViewPager改一行xml代码即可,Java代码一点都不用动。下面是布局文件中的定义:

<com.liyafeng.view.SimpleViewPager.CardViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

  代码部分和ViewPager一样使用即可:

        ViewPager viewpager = (ViewPager) findViewById(R.id.viewpager);
        viewpager.setAdapter(new PagerAdapter());

  是的,就是那么简单,自定义View代码和Demo已经上传github:
  https://github.com/pop1234o/CustomViewApp

  下面我们简单说一下原理,首先要想让每个Pager之间有间隙,我们可以给ViewPager加Padding属性。但是这样相邻的Pager还是不能显示到一个屏幕中,我们通过分析ViewPager的源码(ViewPager的实现原理和源码分析),得知ViewPager在onLayout()的时候有一个PageMargin属性,这个是用来设置Pager之间的间距的,那么我们把这个值设为负值,Pager之间的间距就缩小了,那么相邻的Pager就可以在一个屏幕中显示了。
  但是我们发现ViewGroup默认不会绘制Padding的部分,所以我们调用ViewGroup的setClipToPadding(false)方法来让ViewGroup不把Padding部分“剪掉”即可。
  通过上面设置,我们初步得到了一个卡片式的ViewPager,那么如何在滑动的时候让卡片有缩放效果呢?通过前面的学习我们知道可以利用View的setScaleX()、setScaleY()方法,监听ViewPager的OnPageChangedListener方法,这样我们就能根据滑动的距离来设置当前Pager的大小了。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页