强大的第三方-轮播图

强大的第三方-轮播图

• 先附上别人的一个GtiHub地址: https://github.com/youth5201314/banner
• 在项目中添加依赖: compile ‘com.youth.banner:banner:1.4.9’

简单使用

• 布局代码,控件高度自定义

<com.youth.banner.Banner
        android:id="@+id/main_banner"
        android:layout_width="match_parent"
        android:layout_height="250dp"/>

• 定义一个;类,去继承ImageLoader类,用来定义我们需要用什么加载框架来加载图片

public class GlideImageLoader extends ImageLoader {
    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {
        /**
          注意：
          1.图片加载器由自己选择，这里不限制，只是提供几种使用方法
          2.返回的图片路径为Object类型，由于不能确定你到底使用的那种图片加载器，
          传输的到的是什么格式，那么这种就使用Object接收和返回，你只需要强转成你传输的类型就行，
          切记不要胡乱强转！
         */
        eg：

        //Glide 加载图片简单用法
        Glide.with(context).load(path).into(imageView);

        //Picasso 加载图片简单用法
        Picasso.with(context).load(path).into(imageView);

        //用fresco加载图片简单用法，记得要写下面的createImageView方法
        Uri uri = Uri.parse((String) path);
        imageView.setImageURI(uri);
    }
}

• 在Activity或者Fragment初始化

//一句代码搞定,就是这么6
//mMainBanner是在布局中轮播图控件
//images:是一个集合,用来放我们图片地址的
mMainBanner.setImages(images).setImageLoader(new GlideImageLoader()).start();

• 详细的配置

    //设置banner样式
    banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);
    //设置图片加载器
    banner.setImageLoader(new GlideImageLoader());
    //设置图片集合
    banner.setImages(images);
    //设置banner动画效果
    banner.setBannerAnimation(Transformer.DepthPage);
    //设置标题集合（当banner样式有显示title时）
    banner.setBannerTitles(titles);
    //设置自动轮播，默认为true
    banner.isAutoPlay(true);
    //设置轮播时间
    banner.setDelayTime(1500);
    //设置指示器位置（当banner模式中有指示器时）
    banner.setIndicatorGravity(BannerConfig.CENTER);
    //banner设置方法全部调用完毕时最后调用
    banner.start();

指示器的样式

• 有5种样式
  
  • 指示器模式
  • 数字模式
  • 数字加标题模式
  • 指示器加标题模式垂直显示
  • 指示器加标题模式水平显示

BannerConfig.NOT_INDICATOR                  不显示指示器和标题                 setBannerStyle
BannerConfig.CIRCLE_INDICATOR               显示圆形指示器                     setBannerStyle
BannerConfig.NUM_INDICATOR                  显示数字指示器                     setBannerStyle
BannerConfig.NUM_INDICATOR_TITLE            显示数字指示器和标题                setBannerStyle
BannerConfig.CIRCLE_INDICATOR_TITLE         显示圆形指示器和标题（垂直显示）     setBannerStyle
BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE  显示圆形指示器和标题（水平显示）     setBannerStyle
BannerConfig.LEFT                           指示器居左                       setIndicatorGravity
BannerConfig.CENTER                         指示器居中                       setIndicatorGravity
BannerConfig.RIGHT                          指示器居右                       setIndicatorGravity

动画

• 这里介绍google的两个动画效果
• 设置动画效果

mMainBanner.setPageTransformer(true, new ZoomOutPageTransformer());

public class DepthPageTransformer implements ViewPager.PageTransformer {
    private static float MIN_SCALE = 0.75f;

    @SuppressLint("NewApi")
    @Override
    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);
        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when
            // moving to the left page
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);
        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            view.setAlpha(1 - position);
            // Counteract the default slide transition
            view.setTranslationX(pageWidth * -position);
            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE + (1 - MIN_SCALE)
                    * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);

        }
    }

}

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static float MIN_SCALE = 0.85f;

    private static float MIN_ALPHA = 0.5f;

    @Override
    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);
        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to
            // shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }
            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)
                    / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}