ConvenientBanner的使用

先上效果图:
ConvenientBanner的使用_第1张图片

Android-ConvenientBanner通用的广告栏控件,让你轻松实现广告头效果。支持无限循环,可以设置自动翻页和时间(而且非常智能,手指触碰则暂停翻页,离开自动开始翻页。你也可以设置在界面onPause的时候不进行自动翻页,onResume之后继续自动翻页)。
并且有多种翻页特效,相比于ViewPager做广告头的话会简单很多

给大家说的是上面的广告头效果

先说一下各种翻页特效吧,特效很多,想要什么特效可以自己试:

//实现Viewpager多种切换动画的开源库ViewPagerTransforms
        //compile 'com.ToxicBakery.viewpager.transforms:view-pager-transforms:1.2.32@aar'
        //各种翻页效果
        transformerList.add(DefaultTransformer.class.getSimpleName());
        transformerList.add(AccordionTransformer.class.getSimpleName());
        transformerList.add(BackgroundToForegroundTransformer.class.getSimpleName());
        transformerList.add(CubeInTransformer.class.getSimpleName());
        transformerList.add(CubeOutTransformer.class.getSimpleName());
        transformerList.add(DepthPageTransformer.class.getSimpleName());
        transformerList.add(FlipHorizontalTransformer.class.getSimpleName());
        transformerList.add(FlipVerticalTransformer.class.getSimpleName());
        transformerList.add(ForegroundToBackgroundTransformer.class.getSimpleName());
        transformerList.add(RotateDownTransformer.class.getSimpleName());
        transformerList.add(RotateUpTransformer.class.getSimpleName());
        transformerList.add(StackTransformer.class.getSimpleName());
        transformerList.add(ZoomInTransformer.class.getSimpleName());
        transformerList.add(ZoomOutTranformer.class.getSimpleName());

设置特效:

        //设置特效
        String transforemerName = transformerList.get(4);
        try {
            Class cls = Class.forName("com.ToxicBakery.viewpager.transforms." + transforemerName);
            ABaseTransformer transformer = null;
            try {
                transformer = (ABaseTransformer) cls.newInstance();
            } catch (java.lang.InstantiationException e) {
                e.printStackTrace();
            }
            banner.getViewPager().setPageTransformer(true, transformer);

            //部分3D特效需要调整滑动速度
            if (transforemerName.equals("StackTransformer")) {
                banner.setScrollDuration(1200);
            }

        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (InstantiationException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }

布局文件,这里博主是加载在ListView头布局上的:


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.bigkoo.convenientbanner.ConvenientBanner
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:canLoop="true">
    com.bigkoo.convenientbanner.ConvenientBanner>
    <ImageView
        android:scaleType="fitXY"
        android:id="@+id/iv_banner"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <LinearLayout
        android:id="@+id/ll_banner"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:background="#000"
        >
        <TextView
            android:id="@+id/tv_banner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:textColor="#fff"
            />

    LinearLayout>
RelativeLayout>

添加头布局:

 View headView = LayoutInflater.from(context).inflate(R.layout.head_view, lv, false);
        lv.addHeaderView(headView);

用头布局找到ConvenientBanner控件:

ll_head = (LinearLayout) headView.findViewById(R.id.ll_banner);
        //设置透明度为50%
        ll_head.getBackground().setAlpha(100);
        banner = (ConvenientBanner) headView.findViewById(R.id.banner);

定义一个类,用来找到ConvenientBanner上的控件并且更新UI:

public class LocalImageHolderView implements Holder<Info> {
    private ImageView imageView;
    private TextView tv;

    @Override
    public View createView(Context context) {

        //找到布局填充器
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        //找到整个xml布局
        RelativeLayout rl = (RelativeLayout) inflater.inflate(R.layout.head_view, null);
        //通过找到xml布局来找控件
        imageView = (ImageView) rl.findViewById(R.id.iv_banner);
        tv = (TextView) rl.findViewById(R.id.tv_banner);
        //结果返回布局
        return rl;
    }

    @Override
    public void UpdateUI(Context context, int position, Info data) {
        //Picasso框架,用来下载图片
        //导入依赖:compile 'co.roverlabs:picasso:2.5.2'
        Picasso.with(context)
                .load(data.getImage())
                .placeholder(R.mipmap.ic_launcher)
                .error(R.mipmap.ic_launcher)
                .into(imageView);
        tv.setText(data.getTitle());

    }
}

接下来设置ConvenientBanner的效果:

//自定义你的Holder,实现更多复杂的界面,不一定是图片翻页,其他任何控件翻页亦可。
        banner.setPages(
                new CBViewHolderCreator() {
                    @Override
                    public LocalImageHolderView createHolder() {
                        return new LocalImageHolderView();
                    }
                }, "数据参数")
                //设置两个点图片作为翻页指示器,不设置则没有指示器,可以根据自己需求自行配合自己的指示器,不需要圆点指示器可用不设
                .setPageIndicator(new int[]{R.drawable.page, R.drawable.page_now})
                //设置指示器的方向
                .setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.ALIGN_PARENT_RIGHT);
        //设置两秒延时自动轮播
        banner.startTurning(2000);

        //设置翻页的效果,不需要翻页效果可用不设
        //.setPageTransformer(Transformer.DefaultTransformer);    集成特效之后会有白屏现象,新版已经分离,如果要集成特效的例子可以看Demo的点击响应。
//        convenientBanner.setManualPageable(false);//设置不能手动影响

你可能感兴趣的:(ConvenientBanner的使用)