2. 程式人生 > >ViewPager結合ImageView實現圖片輪播的例項

ViewPager結合ImageView實現圖片輪播的例項

阿新 • • 發佈：2019-01-29 
1、SlideShowView的佈局檔案：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"	
android:layout_width="match_parent"	
android:layout_height="match_parent" >	
<android.support.v4.view.ViewPager		
android:id="@+id/viewPager"		
android:layout_width="match_parent"		
android:layout_height="match_parent" />
<!--此LinearLayout用來小圓點-->	
<LinearLayout		
android:id="@+id/linearlayout"		
android:layout_width="match_parent"		
android:layout_height="wrap_content"		
android:layout_alignParentBottom="true"		
android:gravity="center"		
android:orientation="horizontal"		
android:padding="5dp" >	
</LinearLayout>
</RelativeLayout>
 
2、Drawble中繪製圓點：
<!-- 廣告圓點未選中 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <solid android:color="#33000000" />
   <corners android:radius="5dip" />
    <size android:width= "7dp"
        android:height= "7dp" />
</shape>
 

<!-- 廣告圓點選中 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel= "false" >
    <solid android:color="#aa3C3C3C" />
    <corners android:radius="5dip" />
    <size android:width= "7dp"
        android:height= "7dp" />
    />
3、SlideShowView類的具體實現程式碼： 
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.Intent;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Message;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.beidougd.bdg.activity.AdsActivity;
import com.beidougd.bdgc.R;
import com.nostra13.universalimageloader.cache.disc.naming.Md5FileNameGenerator;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

/**
 * Created by yr01 on 2015/12/15.
 */
public class SlideShowView extends FrameLayout{
    private final static boolean isAutoPlay = true;
    private List<String> imageUris;
    private List<String> imageAdsuris;
    private DisplayImageOptions options;
    private List<ImageView> imageViewsList;
    private List<ImageView> dotViewsList;
    private LinearLayout mLinearLayout;
    private ViewPager mViewPager;
    private int currentItem= 0;
    private ScheduledExecutorService scheduledExecutorService;
    private ImageView viewDot;
    @SuppressLint("HandlerLeak")
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            mViewPager.setCurrentItem(currentItem);
        }
    };
    public SlideShowView(Context context) {
        this(context,null);
    }
    public SlideShowView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public SlideShowView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
        initUI(context);
//        if(!(imageUris.size()<=0))
//        {
//            setImageUris(imageUris,imageAduris);
// }
        if(isAutoPlay){
            startPlay();
        }
    }
    private void initUI(Context context){
        options=new DisplayImageOptions.Builder()
                .showImageOnLoading(R.drawable.ad_01)
                .showImageOnFail(R.drawable.ad_01)
                .cacheInMemory(true)                        // 設定下載的圖片是否快取在記憶體中
                .cacheOnDisc(true)                          // 設定下載的圖片是否快取在SD卡中// 設定成圓角圖片
                .build();                                   // 建立配置過得DisplayImageOption物件
        imageViewsList = new ArrayList<ImageView>();
        dotViewsList = new ArrayList<ImageView>();
        imageUris=new ArrayList<String>();
        imageAdsuris=new ArrayList<String>();
       LayoutInflater.from(context).inflate(R.layout.layout_slideshow, this, true);
        mLinearLayout=(LinearLayout)findViewById(R.id.linearlayout_dot);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
    }
    public void setImageUris(List<String> imageuris,List<String> imageAduris){
        ImageLoaderConfiguration configuration = new ImageLoaderConfiguration
                .Builder(getContext())
                .threadPoolSize(4)
                .threadPriority(Thread.NORM_PRIORITY - 2)
                .denyCacheImageMultipleSizesInMemory()
                .discCacheFileNameGenerator(new Md5FileNameGenerator())// 將儲存的時候的URI名稱用MD5
                .writeDebugLogs() // Remove for release app
                .build();
        ImageLoader.getInstance().init(configuration);

        for(int i=0;i<imageuris.size();i++){
            imageUris.add(imageuris.get(i));
            imageAdsuris.add(imageAduris.get(i));
        }
        LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
        lp.setMargins(5, 0, 0, 0);
        for(int i=0;i<imageUris.size();i++){
            ImageView imageView=new ImageView(getContext());
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);//鋪滿螢幕
            System.out.println("ImageUrl:"+imageUris.get(i));
            ImageLoader.getInstance().displayImage(imageUris.get(i), imageView,options);
            imageViewsList.add(imageView);

            if(imageViewsList!=null){
                imageView=imageViewsList.get(i);
               final String Adurl=imageAdsuris.get(i);
                imageView.setOnClickListener(new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Intent intent=new Intent(getContext(), AdsActivity.class);
                        intent.putExtra("URL",Adurl);
                        getContext().startActivity(intent);
                    }
                });
            }

            viewDot =new ImageView(getContext());
            if(i == 0){
                viewDot.setBackgroundResource(R.drawable.dot_focused);
            }else{
                viewDot.setBackgroundResource(R.drawable.dot_normal);
            }
            viewDot.setLayoutParams(lp);
            dotViewsList.add(viewDot);
            mLinearLayout.addView(viewDot);
        }
        mViewPager.setFocusable(true);
        mViewPager.setAdapter(new MyPagerAdapter());
        mViewPager.setOnPageChangeListener(new MyPageChangeListener());	}
    private void startPlay(){
        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
        scheduledExecutorService.scheduleAtFixedRate(new SlideShowTask(), 1, 4, TimeUnit.SECONDS);
    }
    public  void removeView(){
        imageUris.clear();
        imageAdsuris.clear();
        imageViewsList.clear();
        dotViewsList.clear();
        mLinearLayout.removeAllViews();

        Log.i("imageViewsList", imageViewsList.size() + "");
        Log.i("imageUris", imageUris.size() + "");
        Log.i("imageAdsuris", imageAdsuris.size() + "");
        Log.i("dotViewsList",dotViewsList.size()+"");
        Log.i("mLinearLayout",mLinearLayout.getChildCount()+"");
       // mLinearLayout.removeAllViewsInLayout();
    }
    @SuppressWarnings("unused")
    private void stopPlay(){
        scheduledExecutorService.shutdown();
    }
    private void setImageBackground(int selectItems){

        for(int i=0; i<dotViewsList.size(); i++){

            if(i == selectItems){
                dotViewsList.get(i).setBackgroundResource(R.drawable.dot_focused);
            }else{
                dotViewsList.get(i).setBackgroundResource(R.drawable.dot_normal);
            }
        }
    }
    private class MyPagerAdapter extends PagerAdapter {
        @Override
        public void destroyItem(View container, int position, Object object) {
// TODO Auto-generated method stub
//((ViewPag.er)container).removeView((View)object);
            ((ViewPager)container).removeView(imageViewsList.get(position));
        }
        @Override
        public Object instantiateItem(View container, int position) {
// TODO Auto-generated method stub
            ((ViewPager)container).addView(imageViewsList.get(position));
            return imageViewsList.get(position);		}
        @Override
        public int getCount() {
// TODO Auto-generated method stub
            return imageViewsList.size();		}
        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;		}
        @Override
        public void restoreState(Parcelable arg0, ClassLoader arg1) {
        }
        @Override
        public Parcelable saveState() {
            return null;		}
        @Override
        public void startUpdate(View arg0) {
            // TODO Auto-generated method stub
        }
        @Override
        public void finishUpdate(View arg0) {
            // TODO Auto-generated method stub
        }
    }
    private class MyPageChangeListener implements ViewPager.OnPageChangeListener {
        boolean isAutoPlay = false;
        @Override
        public void onPageScrollStateChanged(int arg0) {
            // TODO Auto-generated method stub
            switch (arg0) {
                case 1:
                    isAutoPlay = false;
                    break;
                case 2:
                    isAutoPlay = true;
                    break;
                case 0:
                    if (mViewPager.getCurrentItem() == mViewPager.getAdapter().getCount() - 1 && !isAutoPlay) {
                        mViewPager.setCurrentItem(0);
                    }
                    else if (mViewPager.getCurrentItem() == 0 && !isAutoPlay) {
                        mViewPager.setCurrentItem(mViewPager.getAdapter().getCount() - 1);
                    }
                    break;
            }
        }
        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            // TODO Auto-generated method stub
        }
        @Override
        public void onPageSelected(int pos) {
            // TODO Auto-generated method stub
            setImageBackground(pos % imageUris.size());
        }
    }
    private class SlideShowTask implements Runnable{
        @Override
        public void run() {
// TODO Auto-generated method stub
            synchronized (mViewPager) {
                currentItem = (currentItem+1)%imageViewsList.size();
                handler.obtainMessage().sendToTarget();
            }
        }
    }
    @SuppressWarnings("unused")
    private void destoryBitmaps() {
        for (int i = 0; i < imageViewsList.size(); i++) {
            ImageView imageView = imageViewsList.get(i);
            Drawable drawable = imageView.getDrawable();
            if (drawable != null) {
                drawable.setCallback(null);
            }
        }
    }
}


4、MainActivity的佈局：
<example.com.myapplication.SlideShowView
    android:id="@+id/slideshowView"
    android:layout_height="160dp"
    android:layout_width="match_parent"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp" 
    />
5、MainActivity的具體實現程式碼： 
private List<String> imageurls;
    private List<String> imageAdUrl;
    private SlideShowView slideShowView;
    slideShowView= (SlideShowView) findViewById(R.id.slideshowView);
        imageurls=new ArrayList<>();
        imageAdUrl=new ArrayList<>();
   imageurls.clear();
   imageAdUrl.clear();
        imageurls.add("http://bdgctest.beidougd.com/Images/Advert/ad_01.png");
        imageurls.add("http://bdgctest.beidougd.com/Images/Advert/ad_02.png");
        imageurls.add("http://bdgctest.beidougd.com/Images/Advert/ad_03.png");
        imageurls.add("http://bdgctest.beidougd.com/Images/Advert/ad_04.png");
        imageAdUrl.add("www.baidu.com");
        imageAdUrl.add("www.sina.com");
        imageAdUrl.add("www.qq.com");
        imageAdUrl.add("www.360.com");
        slideShowView.setImageUris(imageurls,imageAdUrl);//imageurls為網路圖片地址，imageAdUrl為點選相應圖片進行網頁載入的地址


以上載入相應地址可以用迴圈代替，減少程式碼量。要實現下拉重新整理只需在PullToRefresh方法中對資料重新載入。

DisPlayImageOptions可以設定的屬性： 

private final int ShowimageResOnLoading;                正在載入時顯示的圖片資源        id  
private final int imageResForEmptyUri;              圖片uri為空時顯示的圖片       id  
private final int ShowimageResOnFail;                   圖片載入失敗顯示的圖片     id  
private final Drawable imageOnLoading;              正在載入時顯示的圖片資源        drawable  
private final Drawable imageForEmptyUri;            圖片uri為空時顯示的圖片       drawable  
private final Drawable imageOnFail;                 圖片載入失敗顯示的圖片     drawable  
private final boolean resetViewBeforeLoading;       載入前是否重置view  
private final boolean cacheInMemory;                是否啟用記憶體快取  
private final boolean cacheOnDisk;                  是否啟用磁碟快取  
private final ImageScaleType imageScaleType;        圖片縮放型別  
private final Options decodingOptions;              BitmapFactory用到的options  
private final int delayBeforeLoading;               延遲多久載入  
private final boolean considerExifParams;           exif引數是否可用  
private final Object extraForDownloader;            額外的下載物件  
private final BitmapProcessor preProcessor;         bitmap載入前的處理  
private final BitmapProcessor postProcessor;        bitmap載入時的處理  
private final BitmapDisplayer displayer;            bitmap顯示  
private final Handler handler;                        
private final boolean isSyncLoading;                是否同步載入圖片(一個接一個的載入)
從不同地址載入圖片的Url:
String imageUri = "http://site.com/image.png"; // from Web  
String imageUri = "file:///mnt/sdcard/image.png"; // from SD card  
String imageUri = "content://media/external/audio/albumart/13"; // from content provider  
String imageUri = "assets://image.png"; // from assets  
String imageUri = "drawable://" + R.drawable.image; // from drawables (only images, non-9patch)
ImageLoadingListener監聽中的四個方法：
void onLoadingStarted(String imageUri, View view);  載入開始  
   
void onLoadingFailed(String imageUri, View view, FailReason failReason);  載入失敗   
  
void onLoadingComplete(String imageUri, View view, Bitmap loadedImage); 載入完成   
  
void onLoadingCancelled(String imageUri, View view);  取消載入
載入進度監聽器ImageLoadingProgressListener：
void onProgressUpdate(String imageUri, View view, int current, int total);  
current：當前完成大小； total：檔案總大小。示例中算進度： 100.0f * current / total，這裡的progressBar的max在layout中設定為100。
滾動時的監聽PauseOnScrollListener：
listView.setOnScrollListener(new PauseOnScrollListener(ImageLoader.getInstance(), pauseOnScroll, pauseOnFling));
注意事項
  1.上述提到的2個許可權必須加入，否則會出錯<uses-permission android:name="android.permission.INTERNET" />  
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
  2.ImageLoaderConfiguration必須配置並且全域性化的初始化這個配置ImageLoader.getInstance().init(config);  否則也會出現錯誤提示
  3.ImageLoader是根據ImageView的height，width確定圖片的寬高。
  4.如果經常出現OOM（別人那邊看到的，覺得很有提的必要）
   ①減少配置之中執行緒池的大小，(.threadPoolSize).推薦1-5；
   ②使用.bitmapConfig(Bitmap.config.RGB_565)代替ARGB_8888;
   ③使用.imageScaleType(ImageScaleType.IN_SAMPLE_INT)或者        try.imageScaleType(ImageScaleType.EXACTLY)；
   ④避免使用RoundedBitmapDisplayer.他會建立新的ARGB_8888格式的Bitmap物件；
   ⑤使用.memoryCache(new WeakMemoryCache())，不要使用.cacheInMemory();

ImageLoaderConfiguration設定：
 ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
                context)
                // .memoryCacheExtraOptions(480, 800) // max width, max
                // height，即儲存的每個快取檔案的最大長寬
                // .discCacheExtraOptions(480, 800, CompressFormat.JPEG, 75,
                // null) // Can slow ImageLoader, use it carefully (Better don't
                // use it)設定快取的詳細資訊，最好不要設定這個
                .threadPoolSize(3)
                        // 執行緒池內載入的數量
                .discCacheFileNameGenerator(new Md5FileNameGenerator())// 將儲存的時候的URI名稱用MD5   .threadPriority(Thread.NORM_PRIORITY - 2)
                .denyCacheImageMultipleSizesInMemory()
                        // .memoryCache(new UsingFreqLimitedMemoryCache(2 * 1024 *
                        // 1024)) // You can pass your own memory cache
                        // implementation你可以通過自己的記憶體快取實現
                        // .memoryCacheSize(2 * 1024 * 1024)
                        // /.discCacheSize(50 * 1024 * 1024)
               
                        // 加密
                        // .discCacheFileNameGenerator(new
                        // HashCodeFileNameGenerator())//將儲存的時候的URI名稱用HASHCODE加密
                .tasksProcessingOrder(QueueProcessingType.LIFO)
                        // .discCacheFileCount(100) //快取的File數量
                .discCache(new UnlimitedDiscCache(cacheDir))// 自定義快取路徑
                        // .defaultDisplayImageOptions(DisplayImageOptions.createSimple())
                        // .imageDownloader(new BaseImageDownloader(context, 5 * 1000,
                        // 30 * 1000)) // connectTimeout (5 s), readTimeout (30 s)超時時間
                .writeDebugLogs() // Remove for release app
                .build();
上述
ImageLoaderConfiguration設定根據個人需求進行設定






相關推薦

ViewPager結合ImageView實現圖片輪播的例項

1、SlideShowView的佈局檔案： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/

viewPager+photoView實現圖片輪播和手勢縮放功能 支援手勢縮放的imageView 如何實現相簿左右滑動和手勢縮放 如何讓圖片自適應控制元件大小 photoView如何使用(上)

import uk.co.senab.photoview.IPhotoView; import uk.co.senab.photoview.PhotoViewAttacher; import uk.co.senab.photoview.PhotoViewAttacher.OnMatrixChangedList

Flexslider插件實現圖片輪播、文字圖片相結合滑動切換效果

remove 12px body 類型 ons art cal 選項 csharp 插件下載： 　　點擊下載 密碼: fbeg Flexslider具有以下特性： 支持滑動和淡入淡出效果。 支持水平、垂直方向滑動。 支持鍵盤方向鍵控制。 支持觸控滑動。 支

Android使用ViewPager實現圖片輪播(高度自適應，左右迴圈，自動輪播)

效果 前言 該效果實現是基於我的第一篇部落格 Android使用ViewPager實現引導頁（帶小點提示）進行改進的，因此部分相同的地方我不會再重複描述，有意全面瞭解的可以先看完該篇部落格。 實現 為實現自定義一個通用的控制元件，我們首先建立一個類繼承ViewPager

Android使用ViewPager實現圖片輪播和手勢滑動

ViewPager常用來實現圖片的輪播，比如淘寶首頁，會把一些促銷的商品的圖片和描述資訊來回的播放，這就是典型的使用ViewPager實現的。 ViewPager屬於佈局管理器，允許使用者通過頁面翻轉檢視左右的資料，下面通過一個例項來講解ViewPager實現圖片輪播和手

viewpager+timer實現圖片輪播 兩張圖片輪播時出現空白頁

  @SuppressLint("HandlerLeak") private final Handler viewHandler = new Handler() {         @Override         public void handleMessage(Me

iOS開發項目實戰——Swift實現圖片輪播與瀏覽

0.10 上網 timer類 開發項目 cas hub string obj tle 近期開始開發一個新的iOS應用，自己決定使用Swift。進行了幾天之後，發現了一個非常嚴峻的問題。那就是無論是書籍，還是網絡資源，關於Swift的實在是太少了，隨便一

CSS/HTML/JS實現圖片輪播

class fff 瀏覽器 tro back 全局 實現圖 func 原理 實現原理 將點擊的a標簽的href屬性值賦給img標簽的src屬性，這樣有個好處，就是如果瀏覽器不支持js的話，點擊a標簽也可跳轉到圖片地址看到圖片，不會影響內容的呈現 註：需要導入jquery

使用JQuery實現圖片輪播效果

left 簡述 flow href 集合 jpg -i round 輪播 【效果如圖】 【原理簡述】 這裏大概說一下整個流程： 1，將除了第一張以外的圖片全部隱藏， 2，獲取第一張圖片的alt信息顯示在信息欄，並添加點擊事件 3，為4個按鈕添加點擊偵聽，點擊相應的按鈕，用

原生JS實現圖片輪播

讓其 gin 偏移量 adding char 效率 lin doc 動畫效果 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

使用Ajax+jQuery來實現前端收到的數據在console上顯示+簡單的主頁設計與bootstrap插件實現圖片輪播

value size 靠譜 實現圖 active length oot function 想要 1.實現前端輸入的數據在console上顯示 上一篇是解決了在前端的輸入信息在cygwin上顯示，這次要給前臺們能看見的數據，因為數據庫裏插入的數據少，所以寫的語句翻來覆去就那幾

C# winform窗體實現圖片輪播

1、定義一個方法設定控制元件 和執行緒時間 /// <summary> /// 改變圖片 /// </summary> /// <param name="img">圖片</param>

微信小程式實現圖片輪播

wxml頁面程式碼： <!--圖片輪播 --> <view class='swipercontainer'> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" inte

[程式碼] 使用css3實現圖片輪播

使用css3實現圖片輪播 前言：實現圖片輪播的方式有很多種 ，例如js ，css 等等。 本文主要講述使用純css3實現輪播圖 工具介紹： 使用的編輯器： Hbuilder 進入正題 htm

html中使用JS實現圖片輪播效果

HTML 部分 <div id="bannner" class="main_center_bannar">

html+css+js簡單實現圖片輪播效果

<script>  index=0;function show_img(){             imgs=document.getElementById("shidian_img").children; //獲取所以圖片 並且儲存到陣列imgs數組裡             for(i =0

純css3實現圖片輪播

用css3的動畫可以實現圖片輪播 無非就是兩種型別： 　左右滾動型別，　漸變型別 １　左右滾動 定義一個大盒子 在一個小盒子裡面　裝３張圖片（這裡用３張圖片為例子） 三張圖片可以向左浮動，大盒子　overflow :hidden 小盒子增加css3

jquery實現圖片輪播圖效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; list-style:n

用原生JS實現 圖片輪播切換 功能

效果如圖：程式碼如下：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title

JavaScript實現圖片輪播和滑鼠懸停顯示

例： 提前放好了四張圖片，並編號。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www