Banner两边小中间大的动画

Android图片轮播控件 github地址

首先我是在这个基础上做的，自行引入。

compile 'com.youth.banner:banner:1.4.10'  //最新版本
复制代码

实现效果一

实现效果二

1、修改viewPager的margin属性

• 可以自行复制一份源码banner.xml放自己的layout之下，然后修改布局文件中的BannerViewPager，添加marginLeft和marginRight属性
• 也可以通过反射的方式获取到viewPager，进行属性设置，因为源码没有提供修改的方法

public void setPagerMargin(GalleryBanner banner, int margin, int leftMargin, int rightMargin) {
        try {
            Class clazz = Banner.class;
            Field field = clazz.getDeclaredField("viewPager");
            field.setAccessible(true);
            ViewPager viewPager = (ViewPager) field.get(banner);
            
            // viewPager.setPageMargin(margin);  这句即可实现效果一
            
            ViewGroup.MarginLayoutParams params = (MarginLayoutParams) viewPager.getLayoutParams();
            params.setMargins(leftMargin, 0, rightMargin, 0);
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }
复制代码

• 下载源码，进行修改 ViewPager实现的banner，只要新增一个动画效果就可以了

2、设置动画效果

即可实现效果二

 try {
            banner.setPageTransformer(false, ScalePagerTransformer.class.newInstance());
        } catch (java.lang.InstantiationException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
复制代码

public class ScalePagerTransformer implements ViewPager.PageTransformer {

    private static final float MIN_SCALE = 0.8f; //缩放因子
    private static final float MIN_ALPHA = 0.5f;

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

        if (position >= -1 || position <= 1) {
            final float height = view.getHeight();
            final float width = view.getWidth();
            final float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); //缩放在0.8-1之间
            final float vertMargin = height * (1 - scaleFactor) / 2;
            final float horzMargin = width * (1 - scaleFactor) / 2;
            view.setPivotY(0.5f * height); //设置缩放的中心点为view的中心，所以不需要设置setPageMargin()了
            view.setPivotX(0.5f * width);
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }
            view.setScaleX(scaleFactor); //缩放
            view.setScaleY(scaleFactor);
            //我不需要透明度，所以屏蔽了
//            view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
        }
    }
}
复制代码

3、banner滚动的图片带阴影

• 圆角图片可以通过glide来提供
• 阴影图片可以通过createImageView来提供，return new ShadowImageView()

自定义带阴影的ImageView ，自行复制

public class GlideImageLoader extends ImageLoader {

    @Override
    public ImageView createImageView(Context context) {
        return new ShadowImageView(context);
    }

    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {
        Glide.with(context).load(path).into(imageView);
    }
}
复制代码

参考

View 中 Pivot简单讲解

Android ViewPager切换之PageTransformer接口中transformPage方法解析

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