使用FlaycoBanner实现图片轮播效果（加载网络图片）

FlaycoBanner是一个开源图片轮播框架，支持android2.2及以上；

git地址：https://github.com/H07000223/FlycoBanner_Master

在androidStudio中导入：

dependencies{
    compile 'com.android.support:support-v4:22.2.1'
    compile 'com.nineoldandroids:library:2.4.0'
    compile 'com.flyco.banner:FlycoBanner_Lib:2.0.2@aar'
}

需要注意module和app中库的版本统一；

以 在Fragment中使用为例:

先需要自定义banner继承BaseIndicatorBanner，设置数据:

package widget;

import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.bumptech.glide.Glide;
import com.flyco.banner.widget.Banner.BaseIndicatorBanner;

import enity.BannerItem;
import mj.zk.com.okhttpdemo.R;
import utils.ViewFindUtils;


public class SimpleImageBanner extends BaseIndicatorBanner<BannerItem, SimpleImageBanner> {
    private ColorDrawable colorDrawable;

    public SimpleImageBanner(Context context) {
        this(context, null, 0);
    }

    public SimpleImageBanner(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SimpleImageBanner(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        colorDrawable = new ColorDrawable(Color.parseColor("#555555"));
    }

    @Override
    public void onTitleSlect(TextView tv, int position) {
        final BannerItem item = mDatas.get(position);
        tv.setText(item.title);
    }

    @Override
    public View onCreateItemView(int position) {
        View inflate = View.inflate(mContext, R.layout.adapter_simple_image, null);
        ImageView iv = ViewFindUtils.find(inflate, R.id.iv);

        final BannerItem item = mDatas.get(position);
        int itemWidth = mDisplayMetrics.widthPixels;
        int itemHeight = (int) (itemWidth * 360 * 1.0f / 640);
        iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
        iv.setLayoutParams(new LinearLayout.LayoutParams(itemWidth, itemHeight));

        String imgUrl = item.imgUrl;

        if (!TextUtils.isEmpty(imgUrl)) {
            Glide.with(mContext)
                    .load(imgUrl)
                    .override(itemWidth, itemHeight)
                    .centerCrop()
                    .placeholder(colorDrawable)
                    .into(iv);
        } else {
            iv.setImageDrawable(colorDrawable);
        }

        return inflate;
    }
}

数据javabean实体类：

package enity;

public class BannerItem {
    public String imgUrl;
    public String title;
}

　　

数据url提供：

package utils;

import android.support.v4.view.ViewPager;

import com.flyco.banner.transform.DepthTransformer;
import com.flyco.banner.transform.FadeSlideTransformer;
import com.flyco.banner.transform.FlowTransformer;
import com.flyco.banner.transform.RotateDownTransformer;
import com.flyco.banner.transform.RotateUpTransformer;
import com.flyco.banner.transform.ZoomOutSlideTransformer;

import java.util.ArrayList;

import enity.BannerItem;
import mj.zk.com.okhttpdemo.R;

public class DataProvider {
    public static String[] titles = new String[]{
            "欢乐颂:五美破案总动员",
            "无心法师:生死离别!月牙遭虐杀",
            "花千骨:尊上沦为花千骨",
            "综艺饭:胖轩偷看夏天洗澡掀波澜",
            "碟中谍4:阿汤哥高塔命悬一线,超越不可能",
    };
    public static String[] urls = new String[]{//640*360 360/640=0.5625
            "http://r2.ykimg.com/050C0000571EB4F867BC3D14E908D907",//"欢乐颂:五美破案总动员"
            "http://photocdn.sohu.com/tvmobilemvms/20150907/144158380433341332.jpg",//无心法师:生死离别!月牙遭虐杀
            "http://photocdn.sohu.com/tvmobilemvms/20150907/144160286644953923.jpg",//花千骨:尊上沦为花千骨
            "http://photocdn.sohu.com/tvmobilemvms/20150902/144115156939164801.jpg",//综艺饭:胖轩偷看夏天洗澡掀波澜
            "http://photocdn.sohu.com/tvmobilemvms/20150907/144159406950245847.jpg",//碟中谍4:阿汤哥高塔命悬一线,超越不可能
    };

    public static ArrayList<BannerItem> getList() {
        ArrayList<BannerItem> list = new ArrayList<>();
        for (int i = 0; i < urls.length; i++) {
            BannerItem item = new BannerItem();
            item.imgUrl = urls[i];
            item.title = titles[i];

            list.add(item);
        }

        return list;
    }

    public static ArrayList<Integer> geUsertGuides() {
        ArrayList<Integer> list = new ArrayList<>();
        list.add(R.mipmap.guide_img_1);
        list.add(R.mipmap.guide_img_2);
        list.add(R.mipmap.guide_img_3);
        list.add(R.mipmap.guide_img_4);

        return list;
    }

    public static Class<? extends ViewPager.PageTransformer> transformers[] = new Class[]{
            DepthTransformer.class,
            FadeSlideTransformer.class,
            FlowTransformer.class,
            RotateDownTransformer.class,
            RotateUpTransformer.class,
            ZoomOutSlideTransformer.class,
    };
}

　　

 

在布局中使用此banner如下：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:banner="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="fragment.FragmentTest">

    <widget.SimpleImageBanner
        android:id="@+id/sib_simple_usage"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        banner:bb_indicatorGravity="RIGHT"
        banner:bb_scale="0.4"/>

</FrameLayout>

在Fragment中：

   @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_fragment_test,container,false);

        SimpleImageBanner sib = (SimpleImageBanner) view.findViewById(R.id.sib_simple_usage);
        sib.setSource(DataProvider.getList())
        .startScroll();                  //获取图片列表并滚动

        sib.setOnItemClickL(new SimpleImageBanner.OnItemClickL(){
            @Override
            public void onItemClick(int position) {
                Toast.makeText(getContext(),"position->"+position,Toast.LENGTH_SHORT).show();
            }
        });
        return view;
    }

出来的效果为：