使用loopviewpager打造banner图轮播，带圆点

实际项目中我们经常用到baner图的轮播，那么今天就给大家看下从我们项目里抽离出来的这个轮播图，供大家参考使用。

Demo地址：http://download.youkuaiyun.com/detail/wxk105/9728222

技术要点

1. loopviewpager的使用
2. 使用Imagerloader加载网络图片

---

效果图

---

loopview包直接复制到项目中

---

mainactivity.xml布局中引用

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

        <com.example.xiaoke.loopviewpagerdemo.loopview.LoopViewPager
            android:id="@+id/vp_loop_act"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:cacheColorHint="@android:color/white"
            android:divider="@null"
            android:fadingEdge="none"
            android:listSelector="@android:color/transparent"
            android:scrollbars="none" />

        <LinearLayout
            android:id="@+id/ll_point"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="15dp"
            android:layout_marginRight="10dp"
            android:gravity="right"
            android:orientation="horizontal" />
    </RelativeLayout>
</LinearLayout>

---

mainactivity代码块

package com.example.xiaoke.loopviewpagerdemo;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

import com.example.xiaoke.loopviewpagerdemo.loopview.LoopViewPager;

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

public class MainActivity extends AppCompatActivity {

    private LoopViewPager viewPager;
    private LinearLayout ll_point;
    private List<ImageBean> list=new ArrayList<>();//图片集合
    private List<View> views = new ArrayList<View>();//点的集合
    private LinearLayout.LayoutParams paramsL = new LinearLayout.LayoutParams(20, 20);//设置每个点容器大小
    private MyPageAdapter pageAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化控件
        initview();
        //初始化数据
        initdata();
    }

    /**
     * 初始化控件
     */
    private void initview() {
        viewPager= (LoopViewPager) findViewById(R.id.vp_loop_act);
        ll_point= (LinearLayout) findViewById(R.id.ll_point);
    }

    /**
     * 初始化数据
     */
    private void initdata() {
        ImageBean image=new ImageBean();
        image.setUrl("http://news.cnhubei.com/xw/yl/201405/W020140530279662501386.jpg");
        ImageBean image2=new ImageBean();
        image2.setUrl("http://img0.imgtn.bdimg.com/it/u=3688010775,3049294081&fm=21&gp=0.jpg");
        ImageBean image3=new ImageBean();
        image3.setUrl("http://npic7.edushi.com/cn/zixun/zh-chs/2015-09/09/4f4842aa50924e2bb6cedff42d09ef4a.png");
        list.add(image);
        list.add(image2);
        list.add(image3);
        //图片集合，从后台直接返回，前端接收
        initMyPageAdapter(list);
        viewPager.setAuto(true);
        //设置监听
        viewPager.setOnPageChangeListener(getListener());
    }
    /***
     * 初始化viewpager适配器
     *
     * @param imageBeanList
     */

    private void initMyPageAdapter(List<ImageBean> imageBeanList) {
        initPoint(imageBeanList);
        if (pageAdapter == null) {
            pageAdapter = new MyPageAdapter(MainActivity.this, imageBeanList);
            if (viewPager != null) {
                viewPager.setAdapter(pageAdapter);
            }

        } else {
            pageAdapter.upData(imageBeanList);
        }
    }
    /***
     * 初始化点
     * 可以根据图片多少自动增加点
     */
    private void initPoint(List<ImageBean> list) {
        views.clear();
        ll_point.removeAllViews();
        for (int i = 0; i < 3; i++) {
            View view = new View(getApplicationContext());
            //设置点的间距
            paramsL.setMargins(dip2px(getApplicationContext(), 5), 0, 0, 0);
            view.setLayoutParams(paramsL);//设置点的颜色，默认从第一个开始
            if (i == 0) {
                view.setBackgroundResource(R.drawable.point_focus);
            } else {
                view.setBackgroundResource(R.drawable.point_normal);
            }

            views.add(view);
            ll_point.addView(view);
        }
    }
    /***
     * viewpager监听
     *
     * @return
     */
    @NonNull
    private ViewPager.OnPageChangeListener getListener() {
        return new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
            //相应图片被选中，相应点变成被选中色
                if (views.size() != 0 && views.get(position) != null) {
                    for (int i = 0; i < views.size(); i++) {
                        if (i == position) {
                            views.get(i).setBackgroundResource(R.drawable.point_focus);
                        } else {
                            views.get(i).setBackgroundResource(R.drawable.point_normal);
                        }
                    }

                }

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        };
    }
    /**
     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
     *
     * @param context 上下文
     * @param dpValue dp值
     * @return
     */
    private int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

---

ImageBean用于接收后台获取的图片集合
这里我直接使用的网络图片

package com.example.xiaoke.loopviewpagerdemo;

/**
 * 图片实体类
 * Q164454216
 * Created by xiaoke on 2017/1/3.
 */

public class ImageBean {
    //只需要一个地址即可
    private String url;

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
}

---

Mypageradapter viewpager适配器

package com.example.xiaoke.loopviewpagerdemo;

/**
 * Created by xiaoke on 2016/6/3.
 */

import android.content.Context;
import android.graphics.Bitmap;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;

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

/***
 * viewpageradapter
 */
public class MyPageAdapter extends PagerAdapter {
    private List<ImageBean> list=new ArrayList<>();
    private Context context;
    // 图片缓存 默认 等
    private DisplayImageOptions optionsImag = new DisplayImageOptions.Builder()
            .considerExifParams(true)
            .imageScaleType(ImageScaleType.EXACTLY)
            .cacheInMemory(true)
            .cacheOnDisk(true)
            .bitmapConfig(Bitmap.Config.RGB_565).build();
    public MyPageAdapter(Context context, List<ImageBean> list){
        this.list=list;
        this.context=context;
    }
    public void upData(List<ImageBean> list){
        this.list=list;
        notifyDataSetChanged();
    }
    @Override
    public int getCount() {
        //            return  bannerInfoList==null?0:bannerInfoList.size();
        return list==null?0:list.size();
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager) container).removeView((View) object);
    }

    @Override
    public Object instantiateItem(final ViewGroup container, final int position) {

        View view = View.inflate(context, R.layout.item_loop_viewpager_act, null);
        ImageView iv_iamge = (ImageView) view.findViewById(R.id.iv_item_image);
        //加载图片地址
            ImageLoader.getInstance().displayImage(list.get(position).getUrl(),iv_iamge,optionsImag);
        ((ViewPager) container).addView(view);

        return view;
    }

    @Override
    public boolean isViewFromObject(View view, Object obj) {
        return view == obj;
    }

}

---

Imagerloader初始化，关于图片加载框架Imagerloader使用，我会专门开一篇博客来讲，今天就简单把初始化，加载图片附上

初始化，需要在MyApplication中进行初始化

package com.example.xiaoke.loopviewpagerdemo;

import android.app.Application;

import com.nostra13.universalimageloader.cache.disc.naming.Md5FileNameGenerator;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.QueueProcessingType;

/**
 * Q164454216
 * Created by xiaoke on 2017/1/3.
 */

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        //初始化imageloader
        inistalImageLoader();
    }
    private void inistalImageLoader() {
        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
                getApplicationContext())
                .threadPriority(Thread.NORM_PRIORITY - 2)// 设置线程的优先级
                .denyCacheImageMultipleSizesInMemory()// 当同一个Uri获取不同大小的图片，缓存到内存时，只缓存一个。默认会缓存多个不同的大小的相同图片
                .discCacheFileNameGenerator(new Md5FileNameGenerator())// 设置缓存文件的名字
                .discCacheFileCount(60)// 缓存文件的最大个数
                .tasksProcessingOrder(QueueProcessingType.LIFO)// 设置图片下载和显示的工作队列排序
                .build();

        // Initialize ImageLoader with configuration
        ImageLoader.getInstance().init(config);
    }
}

---

最后要增加清单文件访问网络权限
引用自建的application

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.xiaoke.loopviewpagerdemo" >
<uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:name=".MyApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

---

OK,是不是很简单，很方便，快速使用起来吧。