Android中运用ConvenientBanner实现轮播图效果

分享ConvenientBanner实现的轮播图的效果,我也学习一下,炒鸡简单的哦!
先上一张效果图:

想必大家都看到过电商之类的App都会用到这样的样式吧当然我这里比较简化,但是也同样实现了图片轮播的效果,别的就不说了马上开工~
1.添加依赖包

   //轮播图
    implementation 'com.bigkoo:convenientbanner:2.0.5'

2.轮播图的效果封装在SlideShowPicture.java文件中,想在哪里引用都可以

package com.example.slideshow;

import android.content.Context;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ImageView;
import android.widget.Toast;

import com.bigkoo.convenientbanner.ConvenientBanner;
import com.bigkoo.convenientbanner.holder.CBViewHolderCreator;
import com.bigkoo.convenientbanner.holder.Holder;
import com.bigkoo.convenientbanner.listener.OnItemClickListener;

import java.lang.reflect.Field;
import java.util.ArrayList;

public class SlideShowPicture implements AdapterView.OnItemClickListener, OnItemClickListener {

    Context context=null;
    public SlideShowPicture(Context context){
        this.context=context;
    }

    public void slideShow(ConvenientBanner convenientBanner){
        ArrayList<Integer> localImages = new ArrayList<Integer>();

        //获取本地的图片
        for (int position = 1; position <=4; position++) {
            localImages.add(getResId("icon_" + position, R.drawable.class));
        }

        //开始自动翻页
        convenientBanner.setPages(new CBViewHolderCreator() {
            @Override
            public Object createHolder() {
                return new LocalImageHolderView();
            }
        },localImages)
                //设置指示器是否可见
                .setPointViewVisible(true)
                //设置自动切换(同时设置了切换时间间隔)
                .startTurning(3000)
                //设置两个点图片作为翻页指示器,不设置则没有指示器,可以根据自己需求自行配合自己的指示器,不需要圆点指示器可用不设
                .setPageIndicator(new int[]{R.drawable.ic_page_indicator, R.drawable.ic_page_indicator_focused})
                //设置指示器的方向(左、中、右)
                .setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.ALIGN_PARENT_RIGHT)
                //设置点击监听事件
                .setOnItemClickListener(this)
                //设置手动影响(设置了该项无法手动切换)
                .setManualPageable(true);

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

    }

    //图片的点击事件
    @Override
    public void onItemClick(int position) {
        Toast.makeText(context, "点击图片" + position, Toast.LENGTH_SHORT).show();

    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

    }

    //为了方便改写,来实现复杂布局的切换
    private class LocalImageHolderView implements Holder<Integer> {
        private ImageView imageView;

        @Override
        public View createView(Context context) {
            //你可以通过layout文件来创建,不一定是Image,任何控件都可以进行翻页
            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);
        }
    }

    /**
     * 通过文件名获取资源id 例子:getResId("icon", R.drawable.class);
     *
     * @param variableName
     * @param c
     * @return
     */
    public static int getResId(String variableName, Class<?> c) {
        try {
            Field idField = c.getDeclaredField(variableName);
            return idField.getInt(idField);
        } catch (Exception e) {
            e.printStackTrace();
            return -1;
        }
    }

}

3.Mainactivity.java里来引用轮播样式

/**轮播图片
     * */
    private void initSlideShow(){
        SlideShowPicture slideShowPicture2=new SlideShowPicture(this);
        ConvenientBanner convenientBanner=(ConvenientBanner)findViewById(R.id.convenientBanner);
        slideShowPicture2.slideShow(convenientBanner);
    }

4.activity.xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2000"
    tools:context=".MainActivity">

    <com.bigkoo.convenientbanner.ConvenientBanner xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/convenientBanner"
        android:layout_width="0dp"
        android:layout_height="200dp"
        app:canLoop="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

</android.support.constraint.ConstraintLayout>

好了核心代码就是这样,GitHub源代码戳下面地址:

https://github.com/super611/Android-SlideShowPicture/tree/master

你可能感兴趣的:(Android)