安卓图片轮播(banner)

原创 2018年04月17日 15:58:18

github地址:https://github.com/youth5201314/banner

效果图:


Step 1.依赖banner

Gradle

dependencies{
    compile 'com.youth.banner:banner:1.4.10'  //最新版本
}
  • 1
  • 2
  • 3

Step 2.添加权限到你的 AndroidManifest.xml

<!-- if you want to load images from the internet -->
<uses-permission android:name="android.permission.INTERNET" /> 

<!-- if you want to load images from a file OR from the internet -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  • 1
  • 2
  • 3
  • 4
  • 5

Step 3.在布局文件中添加Banner,可以设置自定义属性

<com.youth.banner.Banner
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="高度自己设置" />
  • 1
  • 2
  • 3
  • 4
  • 5

Step 4.重写图片加载器

这里我选用的是glide依赖:

dependencies{ implementation 'com.github.bumptech.glide:glide:4.7.1'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.7.1' }

代码:

import android.content.Context;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.youth.banner.loader.ImageLoader;

/**
 * Created by agen on 2018/4/16.
 */

public class GlideImageLoader extends ImageLoader {
   
    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {
      
        //Glide 加载图片简单用法
        Glide.with(context).load(path).into(imageView);

    }
}

Step 5.在Activity或者Fragment中配置Banner

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;

import com.example.firehole.R;
import com.example.firehole.utils.ToastUtils;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;
import com.youth.banner.listener.OnBannerListener;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by agen on 2018/4/16.
 */

public class BannerOne extends AppCompatActivity {
    private Banner banner;
    private Banner banner_circle;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.banner_one);
        initView();
        setBanner();
        setBannerCircle();
    }

    @Override
    protected void onStart() {
        super.onStart();
        //开始轮播
        banner.startAutoPlay();
        banner_circle.startAutoPlay();
    }

    @Override
    protected void onStop() {
        super.onStop();
        //结束轮播
        banner.stopAutoPlay();
        banner_circle.stopAutoPlay();
    }

    private void initView() {
        banner = (Banner) findViewById(R.id.banner);
        banner_circle = (Banner) findViewById(R.id.banner_circle);
    }

    //圆形轮播图
    private void setBannerCircle() {
        //设置图片资源:url或本地资源
        String[] images = new String[]{
                "http://img.zcool.cn/community/01fda356640b706ac725b2c8b99b08.jpg",
                "http://img.zcool.cn/community/01fd2756e142716ac72531cbf8bbbf.jpg",
                "http://img.zcool.cn/community/0114a856640b6d32f87545731c076a.jpg"};
        List<String> imgs2 = new ArrayList<>();
        for (int i = 0; i < images.length; i++) {
            imgs2.add(images[i]);
        }
        //设置标题
        List<String> titles = new ArrayList<>();
        titles.add("教育图片1");
        titles.add("教育图片2");
        titles.add("教育图片3");

        //	显示圆形指示器
        banner_circle.setBannerStyle(BannerConfig.CIRCLE_INDICATOR)
                .setBannerTitles(titles)
                .setDelayTime(3000)
                .setBannerAnimation(Transformer.Tablet).setImageLoader(new GlideImageLoader());
        banner_circle.setImages(imgs2);
        banner_circle.start();

        //点击事件
        banner_circle.setOnBannerListener(new OnBannerListener() {
            @Override
            public void OnBannerClick(int position) {
                ToastUtils.show("点击事件=" + position);
            }
        });
    }

    //设置完颜色后变成了轮播图
    private void setBanner() {
        //设置图片资源:url或本地资源
        //设置图片集合
        List<Integer> imgs = new ArrayList<>();
        imgs.add(R.drawable.progress_1);
        imgs.add(R.drawable.progress_2);
        imgs.add(R.drawable.progress_3);

        String[] images = new String[]{
                "http://img.zcool.cn/community/01fda356640b706ac725b2c8b99b08.jpg",
                "http://img.zcool.cn/community/01fd2756e142716ac72531cbf8bbbf.jpg",
                "http://img.zcool.cn/community/0114a856640b6d32f87545731c076a.jpg"};
        List<String> imgs2 = new ArrayList<>();
        for (int i = 0; i < images.length; i++) {
            imgs2.add(images[i]);
        }
        //设置标题
        List<String> titles = new ArrayList<>();
        titles.add("教育图片1");
        titles.add("教育图片2");
        titles.add("教育图片3");

        //	显示圆形指示器
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR)
                .setBannerTitles(titles)
                .setDelayTime(3000)
                .setBannerAnimation(Transformer.Tablet).setImageLoader(new GlideImageLoader());

        banner.setBannerAnimation(Transformer.BackgroundToForeground);
        //本地资源
        //        banner.setImages(imgs);
        banner.setImages(imgs2);
        banner.start();

        //点击事件
        banner.setOnBannerListener(new OnBannerListener() {
            @Override
            public void OnBannerClick(int position) {
                ToastUtils.show("点击事件=" + position);
            }
        });
    }
}

。布局代码:colorAccent和colorWhite需要设置#0f0这样的颜色

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.youth.banner.Banner
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/banner_circle"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:indicator_height="10dp"
        app:indicator_width="10dp"/>
    <com.youth.banner.Banner
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="5dp"
        app:indicator_drawable_selected="@color/colorAccent"
        app:indicator_drawable_unselected="@color/colorWhite"
        app:indicator_height="4dp"
        app:indicator_margin="4dp"
        app:indicator_width="20dp"/>
</LinearLayout>

参考地址:https://blog.csdn.net/Li_peilun/article/details/78418053

https://blog.csdn.net/chaoyu168/article/details/79017172

。。。

Android--图片轮播(banner)

推荐第三方框架banner,地址:https://github.com/youth5201314/banner 使用步骤 Step 1.依赖banner Gradle de...
  • chaoyu168
  • chaoyu168
  • 2018-01-09 20:45:27
  • 1323

Android 图片轮播Banner的实现

图片轮播Banner现在算是比较常见的功能了,可以用来循环播放广告或者是热门内容在这里我利用ViewPager模拟实现了Banner的功能,效果图如下:可以看到,在刚打开应用时,显示的只有一张动漫黄昏...
  • new_one_object
  • new_one_object
  • 2016-07-30 01:05:54
  • 3012

安卓banner图片轮播

之前写过一篇关于首页图片广告轮播的demo:http://blog.csdn.net/baiyuliang2013/article/details/45740091,不过图片轮播的指示器(小白点)处操...
  • baiyuliang2013
  • baiyuliang2013
  • 2016-04-01 10:59:49
  • 1531

关于优先值的设置

  low_priority  只要是对insert update replace delete 等选项 high_priority  主要是针对  select  insert  选项    默认情...
  • z1988316
  • z1988316
  • 2011-04-20 21:03:00
  • 373

实现android轮播图的开源组件--Android-ConvenientBanner

今天给大家介绍个开源组件,无限循环的轮播图,Android-ConvenientBanner,在github上的地址为:https://github.com/saiwu-bigkoo/Android-...
  • lovexieyuan520
  • lovexieyuan520
  • 2016-06-24 17:00:28
  • 7442

Android 轮播插件 (banner1.4.4.jar)

1. 需要的jar包compile 'com.github.bumptech.glide:glide:3.7.0' compile 'com.youth.banner:banner:1.4.4'2....
  • onightfalls
  • onightfalls
  • 2017-08-01 13:27:47
  • 486

Android最便捷banner轮播图实现原理及代码

原理图: 代码实现public class CyclerViewPager extends ViewPager { public CyclerViewPager(Context cont...
  • codekxx
  • codekxx
  • 2016-09-22 11:05:17
  • 1789

android 图片轮播控件 Android-ConvenientBanner简单使用

ConvenientBanner 通用的图片轮播控件。支持无限循环,可以设置自动翻页和时间(而且非常智能,手指触碰则暂停翻页,离开自动开始翻页。你也可以设置在界面onPause的时候不进行自动翻页,...
  • duolaimila
  • duolaimila
  • 2016-03-31 13:56:36
  • 8553

Android (github开源项目1)首页轮播图控件----banner

前段时间因为公司原因再加上自己比较懒,已经很久没有更新博客了。最近闲置下来,为大家带来一些我在我项目中使用到的一些比较好用的github上面的开源控件。今天就为大家带来首页banner的控件。这个控件...
  • pengguichu
  • pengguichu
  • 2017-02-18 16:05:39
  • 2830

Android广告轮播图添加标题及点击事件

Android广告轮播图添加标题及点击事件前言:广告轮播图,网上的例子多如牛毛,但是,你想要找到满足自己项目需求的例子,还是需要花费一些时间寻找,可能还需要花费精力去修改。写这篇文章,主要是在项目中遇...
  • dgs960825
  • dgs960825
  • 2016-05-18 19:55:43
  • 4620
收藏助手
不良信息举报
您举报文章:安卓图片轮播(banner)
举报原因:
原因补充:

(最多只允许输入30个字)