画廊效果的ViewPager实现(附带无限自动轮播)

废话不多说,先上效果图

画廊效果的ViewPager

根据效果所示,第一步实现适配器,完成无限循环

首先做数据上的处理

  public static class LoopViewPagerAdapter extends PagerAdapter{
  	.....
    LoopViewPagerAdapter(Context context, ArrayList<Integer> imgIds){
      this.context = context;

      this.ids.add(imgIds.get(imgIds.size()-1)); 将原本的最后一页复制一份放到第一页
      this.ids.addAll(imgIds);
      this.ids.add(imgIds.get(0)); 将原本的第一页复制一份放到最后一页

      views = new View[ids.size()];
    }
    .....
 }

配合OnPageChangeListener 即可实现无限循环

 private OnPageChangeListener onPageChangeListener = new OnPageChangeListener() {

    @Override
    public void onPageSelected(int position) {
      LogUtils.d("LoopViewPager onPageSelected --> " + loopViewPagerAdapter.getCount() + " : " + position);
      if (position == 0){
      	// 滑动到第一页的时候直接跳到倒数第二页,因为两页内容完全一致,跳的过程不会被人眼捕捉到
        setCurrentItem(loopViewPagerAdapter.getCount() - 2, false);
      }
      if (position == loopViewPagerAdapter.getCount() - 1){
      	// 同理滑动到倒数第一页的时候直接跳到第二页
        setCurrentItem(1, false);
      }
    }
    ...
}
第二步 实现放大效果

借助OnPageChangeListener 的 onPageScrolled 滑动进度给指定的Item放大和缩小

private static final float BASE_SCALE = 0.9f; // 为方便调整放大幅度,设立的最小倍数
private static final float BASE_INCREMENT = 0.2f; // 最大放大倍数与最小放大倍数的差值
private OnPageChangeListener onPageChangeListener = new OnPageChangeListener() {
	...
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
      float zoom = BASE_SCALE + (BASE_INCREMENT - Math.abs(positionOffset * BASE_INCREMENT));
      loopViewPagerAdapter.getViews(position).setScaleX(zoom);
      loopViewPagerAdapter.getViews(position).setScaleY(zoom);

      if (positionOffset > 0) {
        // 左滑,右侧放大
        View leftView = loopViewPagerAdapter.getViews(position + 1);
        if (leftView != null){
          float zoomNext = BASE_SCALE + Math.abs(positionOffset * BASE_INCREMENT);
          leftView.setScaleX(zoomNext);
          leftView.setScaleY(zoomNext);
        }
      }
      if (positionOffset < 0) {
        // 右滑,左侧放大
    
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值