ViewPager图片循环播放控件（手动可控制）-----ConvenientBanner

最新推荐文章于 2024-08-09 08:35:12 发布

符。

最新推荐文章于 2024-08-09 08:35:12 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/w_l_s/article/details/52728447

版权

ViewPager是项目开发中经常遇到的一种控件，通过各种不同的设置可是很好的展现出客户需要的内容，这里通过一个第三方控件ConvenientBanner实现了ViewPage的无限循环轮播效果，并且可以通过手动控制来影响轮播的过程，是一个非常方便的控件。

ConvenientBanner（https://github.com/saiwu-bigkoo/Android-ConvenientBanne）

通用的广告栏控件，让你轻松实现广告头效果。支持无限循环，可以设置自动翻页和时间(而且非常智能，手指触碰则暂停翻页，离开自动开始翻页。你也可以设置在界面onPause的时候不进行自动翻页，onResume之后继续自动翻页)，并且提供多种翻页特效。对比其他广告栏控件，大多都需要对源码进行改动才能加载网络图片，或者帮你集成不是你所需要的图片缓存库。而这个库能让有代码洁癖的你欢喜，不需要对库源码进行修改你就可以使用任何你喜欢的网络图片库进行配合。

ConvenientBanner是通过import Module添加依赖的

（注意：Android Studio导入convenientbanner是可能会出现错误提示：Error:(2, 0) Plugin with id ‘com.github.dcendents.Android-maven’ not found

解决办法：向该project的build.gradle(是整个项目的不是app中的)中添加：

   <span style="font-size:14px;"> classpath："com.github.dcendents:android-maven-gradle-plugin:1.3"
    classpath： "com.jfrog.bintray.gradle:gradle-bintray-plugin:1.0"
最后运行try again或者Sync now即可</span></span>

）

友情提示：此过程比较漫长，耐心等耐

至此，就可以开心的使用该控件了：

1、主函数的xml文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.wls.viewpagerview.MainActivity">

    <com.bigkoo.convenientbanner.ConvenientBanner
        android:id="@+id/vp_convenient"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:canLoop="true"/>
    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

2、主函数MainActivtity：

public class MainActivity extends AppCompatActivity {

    private ConvenientBanner mConvenientBanner;
    private List<Integer> localImage = new ArrayList<>();
    private Integer image[]={R.drawable.ic_test_0,R.drawable.ic_test_1,
                             R.drawable.ic_test_2,R.drawable.ic_test_3,
                             R.drawable.ic_test_4, R.drawable.ic_test_5,
                             R.drawable.ic_test_6};
    private ListView mListView;
    private ArrayAdapter<String> adapter;
    private List<String> content = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        initView();
    }

    public void init(){
        for(int i = 0;i<20;i++){
            content.add("这 是 第 "+ i +" 条 item 数 据");
        }
        mListView = (ListView) findViewById(R.id.listview);
        adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,content);
        mListView.setAdapter(adapter);
    }
    public void initView(){
        mConvenientBanner = (ConvenientBanner) findViewById(R.id.vp_convenient);
        LoageImage();
        Log.d("print", "init: "+localImage.get(0));
        mConvenientBanner.setPages(new CBViewHolderCreator<LocalImageView>() {
            @Override
            public LocalImageView createHolder() {
                return new LocalImageView();
            }
        },localImage)
                .setPageIndicator(new int[]{R.drawable.ic_page_indicator,R.drawable.ic_page_indicator_focused})//设置指示器圆点
                .setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.ALIGN_PARENT_LEFT)//设置指示器的位置
                .setPointViewVisible(true)//设置指示器是否可见
                .startTurning(2000)//设置自动切换（同时设置了切换时间间隔）
                .setManualPageable(true);//设置手动影响
        /**
         * 每个item的点击事件
         */
        mConvenientBanner.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(int position) {
                Toast.makeText(MainActivity.this,"点击了第"+position+"张图片",Toast.LENGTH_LONG).show();
            }
        });
    }


    /**
     * 加载本地图片
     */
    private void LoageImage(){
        for(int i = 0;i<7;i++){
          localImage.add(image[i]);
        }
    }

}

3、本地图片加载类LocakImageView：

public class LocalImageView implements Holder<Integer> {

    private ImageView imageView;


    @Override
    public View createView(Context context) {
        imageView = new ImageView(context);
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        return imageView;
    }

    @Override
    public void UpdateUI(Context context, int position, Integer data) {
        imageView.setImageResource(data);
        /**
         * 加载网络图片
         */
        //imageView.setImageURI(Uri.parse("http://..."));
    }
}

4、效果展示图：

5、查看源码可知ConvenientBanner集成了ViewPager的方法，其中有一个方法：

/**
 * 自定义翻页动画效果
 *
 * @param transformer
 * @return
 */
public ConvenientBanner setPageTransformer(PageTransformer transformer) {
    viewPager.setPageTransformer(true, transformer);
    return this;
}

是ViewPager的自定义翻页效果，通过自定义ViewPager的PageTransformer可根据自己的需求更改ViewPager的翻页效果，下面是一个立方体翻页效果的自定义PageTransFormer

public class MyPagerTransformer implements ViewPager.PageTransformer{
    @Override
    public void transformPage(View page, float position) {
        //左边0~-90度,右边90~0度,
        //左边x 0~-width，右边x width~0；
        if(position < -1){

        }else if(position <= 1){//a页滑动至b页；a页从 0.0 ~ -1 ；b页从1 ~ 0.0
          //  [-1,1];
            if(position < 0){//滑动中左边页面
                page.setPivotX(page.getMeasuredWidth());
                page.setRotationY(position*90);
            }else {//滑动中右边页面
                page.setPivotX(0);
                page.setRotationY(position*90);
            }
        }else{

        }
    }
}

再在MainActivty中调用这一方法：

/**
 * 每个item的点击事件
 */
mConvenientBanner.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(int position) {
        Toast.makeText(MainActivity.this,"点击了第"+position+"张图片",Toast.LENGTH_LONG).show();
    }
});
mConvenientBanner.setPageTransformer(new MyPagerTransformer());