安卓图片轮播(banner)

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

效果图:


Step 1.依赖banner

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

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" />

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="高度自己设置" />

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

。。。

阅读更多

没有更多推荐了,返回首页