无限滑动的banner图,中间显示大图两边显示一部分,无限滚动

banner图需求

  1. 中间图片要大
  2. 两边要显示一部分
  3. 无限滚动
首页代码 MainActivity
package com.m.live.myapplication;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private ViewPager vp;
    private List<Integer> images=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        vp = (ViewPager) findViewById(R.id.vp);
        //下面的abc是自己随弄的几张图片,同志们可以自己传随便定义图片来源
        images.add(R.drawable.a);
        images.add(R.drawable.b);
        images.add(R.drawable.c);
        vp.setOffscreenPageLimit(3);
        int pagerWidth = (int) (getResources().getDisplayMetrics().widthPixels * 3.0f / 5.0f);
        ViewGroup.LayoutParams lp = vp.getLayoutParams();
        if (lp == null) {
            lp = new ViewGroup.LayoutParams(pagerWidth, ViewGroup.LayoutParams.MATCH_PARENT);
        } else {
            lp.width = pagerWidth;
        }
        vp.setLayoutParams(lp);
        //setPageMargin表示设置图片之间的间距  activity_horizontal_margin 自己定义在dimen文件中即可
        vp.setPageMargin(getResources().getDimensionPixelSize(R.dimen.activity_horizontal_margin));
        vp.setPageTransformer(true,new MyGallyPageTransformer());
        vp.setAdapter(new MyViewpagerAdapter(images,this));
        vp.setCurrentItem(2000);
    }
}

复制代码
viewpager的adapter MyViewpagerAdapter
package com.m.live.myapplication;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.List;

public class MyViewpagerAdapter extends PagerAdapter {
    private List<Integer> images;
    private Context context;

    public MyViewpagerAdapter(List<Integer> images, Context context) {
        this.context=context;
        this.images=images;
    }

    @Override
    public int getCount() {
        return Integer.MAX_VALUE;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView vp_iv= new ImageView(context);
        vp_iv.setImageResource(images.get(position%images.size()));
        container.addView(vp_iv);
        return vp_iv;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }
}
复制代码
转换器 MyGallyPageTransformer
package com.m.live.myapplication;

import android.support.v4.view.ViewPager;
import android.view.View;

public class MyGallyPageTransformer implements ViewPager.PageTransformer {
    private static final float min_scale = 0.85f;
    @Override
    public void transformPage(View page, float position) {
        float scaleFactor = Math.max(min_scale, 1 - Math.abs(position));
        if (position < -1) {
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
        } else if (position < 0) {
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
        } else if (position >= 0 && position < 1) {
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
        } else if (position >= 1) {
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);
        }
    }
}
复制代码
xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_marginTop="10dp"
    android:clipChildren="false"
    android:layerType="software">
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="300dp"
        android:layout_height="220dp"
        android:layout_gravity="center"
        android:clipChildren="false"
        >
    </android.support.v4.view.ViewPager>
</LinearLayout>
复制代码

就是这么简单。

效果图

原文: blog.csdn.net/wywanwxn/ar…

注:

上面例子在实践过程中发现无法修复bug,是因为在MyGallyPageTransformer中缩放两边大小时,同时也对两边与中间之间的空间进行了加大,而且缩放值越小,则中间图片距离左右两边图片之间的空白越大。这样非常不利于自己设定view左右两边间距。对两边缩放大小也有局限性。
复制代码

新:

用RecyclerView实现无限轮播图,有普通版和3d版

github.com/renjianan/R…

这是后来发现的一个新的利用RecyclerView来实现的轮播效果,

靠谱的:

github.com/xiaohaibin/…

我最后决定使用的banner库!

转载于:https://juejin.im/post/5bc44c675188255c69782e0c

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值