使用loopviewpager打造banner圖輪播，帶圓點

實際項目中我們經常用到baner圖的輪播，那麼今天就給大家看下從我們項目裡抽離出來的這個輪播圖，供大家參考使用。

Demo位址：http://download.csdn.net/detail/wxk105/9728222

技術要點

loopviewpager的使用
使用Imagerloader加載網絡圖檔

效果圖

使用loopviewpager打造banner圖輪播，帶圓點

loopview包直接複制到項目中

使用loopviewpager打造banner圖輪播，帶圓點

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(, );//設定每個點容器大小
    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 = ; i < ; i++) {
            View view = new View(getApplicationContext());
            //設定點的間距
            paramsL.setMargins(dip2px(getApplicationContext(), ), , , );
            view.setLayoutParams(paramsL);//設定點的顔色，預設從第一個開始
            if (i == ) {
                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() !=  && views.get(position) != null) {
                    for (int i = ; 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 + f);
    }
}

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?: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 - )// 設定線程的優先級
                .denyCacheImageMultipleSizesInMemory()// 當同一個Uri擷取不同大小的圖檔，緩存到記憶體時，隻緩存一個。預設會緩存多個不同的大小的相同圖檔
                .discCacheFileNameGenerator(new Md5FileNameGenerator())// 設定緩存檔案的名字
                .discCacheFileCount()// 緩存檔案的最大個數
                .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,是不是很簡單，很友善，快速使用起來吧。

使用loopviewpager打造banner圖輪播，帶圓點

繼續閱讀

自定義對話框，使彈出的對話框變為Viewpager加tab顯示。

ViewPager底部圓點訓示器

用jquery實作輪播圖的效果

不是吧！這遊戲比王者還上頭……

實用的輪播圖插件slick.js

一個利用jquery寫的左右輪播圖

炒雞好用的自動輪播的ViewPager

設定viewpager（可以/不可以）滑動

廣告欄使用ViewPager無限滑動的問題

Android無限循環滾動ViewPager

【Android】ViewPager實作無限循環滑動思想

android 打造真正的無限循環viewpager

ViewPager onPageChangeListener參數詳解

仿微信滑動翻頁UI設計和實作

ViewPager的onPageChangeListener三個方法的執行順序及細節

Android使用ViewPager+Fragment的使用（一）