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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用ViewPager实现轮播图效果,可以按照以下步骤操作: 1. 在布局文件添加ViewPager控件,这里可以使用ViewPager和Indicator联合使用,Indicator可以是自定义的或者第三方库的。 2. 创建一个PagerAdapter类,该类继承自FragmentPagerAdapter或者FragmentStatePagerAdapter。这里需要重写getItem()和getCount()方法,以及实现对应的Fragment。 3. 在Activity或者Fragment获取ViewPager控件,设置Adapter,并开启轮播轮播可以使用Handler和Runnable组合实现,每隔一定时间切换ViewPager的Item。 下面是一个示例代码: 1. 布局文件添加ViewPager和Indicator控件 ``` <RelativeLayout android:layout_width="match_parent" android:layout_height="200dp"> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> <com.viewpagerindicator.CirclePageIndicator android:id="@+id/indicator" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:padding="10dp" app:fillColor="@color/colorAccent" app:pageColor="@color/colorPrimary" app:radius="5dp" /> </RelativeLayout> ``` 2. 创建PagerAdapter类 ``` public class MyPagerAdapter extends FragmentPagerAdapter { private List<Fragment> mFragments; public MyPagerAdapter(FragmentManager fm, List<Fragment> fragments) { super(fm); mFragments = fragments; } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } } ``` 3. 在Activity或者Fragment设置Adapter,并开启轮播 ``` private void initViewPager() { List<Fragment> fragments = new ArrayList<>(); fragments.add(new ImageFragment(R.drawable.image1)); fragments.add(new ImageFragment(R.drawable.image2)); fragments.add(new ImageFragment(R.drawable.image3)); MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager(), fragments); viewPager.setAdapter(adapter); indicator.setViewPager(viewPager); handler.postDelayed(runnable, 3000); } private Handler handler = new Handler(); private Runnable runnable = new Runnable() { @Override public void run() { int currentItem = viewPager.getCurrentItem(); int count = viewPager.getAdapter().getCount(); currentItem = (currentItem + 1) % count; viewPager.setCurrentItem(currentItem); handler.postDelayed(runnable, 3000); } }; ``` 其,ImageFragment为自定义Fragment,用于显示图片。 ``` public class ImageFragment extends Fragment { private int mResId; public ImageFragment(int resId) { mResId = resId; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { ImageView imageView = new ImageView(getActivity()); imageView.setImageResource(mResId); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); return imageView; } } ``` 这样就可以实现ViewPager轮播图效果了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值