第一次學app就上手

使用 Android Studio

2016-10-08

[Android Studio] ViewPager 自動換頁、自動無限循環換頁 方法簡介( 可配合第三方函式庫 ViewPagerIndicator + CirclePageIndicator 或 ViewPagerIndicator + TabPageIndicator 一起使用 )

工作日誌 [ Day 6 ]

※ ViewPager 自動換頁、自動無限循環換頁 方法簡介 with Handle Runnable ( 可配合第三方函式庫 ViewPagerIndicator + CirclePageIndicator 一起使用 )

 

目錄

1. ViewPager 自動換頁、自動無限循環換頁 方法簡介 with Handle Runnable

 (可配合第三方函式庫 ViewPagerIndicator 跟 CirclePageIndicator 一起使用 )

 

2. 程式設定 ProgressBar 屬性方法 ( 讀取圖案等待時間秀出的 轉圈圈動畫 )

 

3. 如何取得手機螢幕解析度

 

4. Android-Universal-Image-Loader 另一種用法介紹

    (將下載好的圖片緩存到內存中，大幅提高運行速度)

 

ViewPager 自動換頁(無限循環) 方法簡介 with Handle Runnable ( 可配合第三方函式庫 ViewPagerIndicator 跟 CirclePageIndicator 一起使用 )

首先先介紹如何寫出一個可以重複執行的程式

我們先看這段程式碼

Handler handler = new Handler();
Runnable runnable = new Runnable() {
    @Override
    public void run() {

    }
};

該如何使用這段程式碼呢？

只要配合這行即可

handler.postDelayed(runnable, 2000);

這行程式的意思是，暫緩2000毫秒後執行 runnable 一次

所以只要把這行程式碼利用按鈕觸發 或是 任何你想得到的方式 觸發他 ， run() 內的程式就會被執行一次

也就是說，我們只要在 run() 裡面 再加上一條 

handler.postDelayed(runnable, 2000);

像這樣

Runnable runnable = new Runnable() {
    @Override
    public void run() {
        handler.postDelayed(runnable, 2000);
    }
};

我們就可以達成 每2000毫秒重複執行一次run()內程式的效果

整體程式碼大約像這樣

public class MainActivity extends AppCompatActivity {
    private int run_num=0;
    Handler handler = new Handler();
    Runnable runnable = new Runnable() {
        @Override
        public void run() {
            run_num++;
            Toast.makeText(MainActivity.this,"執行第"+run_num+"次", Toast.LENGTH_SHORT).show();
            handler.postDelayed(runnable, 2000);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        handler.postDelayed(runnable, 2000);
    }
}

執行結果如下圖，會每2000毫秒就Toast一次​

我們要利用這個重複執行的特色，達到自動換頁的效果

但還要先了解 ViewPager 換頁是怎麼運行的

其實很簡單

就這一行

myViewPager.setCurrentItem(0);

這行的意思是，不管目前在第幾頁，跳轉到第一頁

再來，我們可以把它改成這樣

myViewPager.setCurrentItem(myViewPager.getCurrentItem() + 1);

myViewPager.getCurrentItem() 的意思是 取得目前所在的頁數

如此，把他+1，就可以達成換到下一頁的功能

接著配合第一部份介紹的重複執行程式

把這行放在run()裡面，像這樣

Runnable runnable = new Runnable() {
    @Override
    public void run() {
        myViewPager.setCurrentItem(myViewPager.getCurrentItem() + 1);
    }
};

自動換頁就成功拉！

只是這樣還會有一個小問題

假設你只有10頁，他這樣一直+下去一定會超過最大頁數

所以

我們要再把它改成這樣

myViewPager.setCurrentItem((myViewPager.getCurrentItem() + 1) % myViewPager.getAdapter().getCount());

myViewPager.getAdapter().getCount() 是取得總頁數

把 (目前頁數+1) 對 總頁數 取餘數 

這樣就可以防止他超出總頁數，同時還可以順便達成 無限循環的效果！

接著有個大重點要注意

這次我們不把 handler.postDelayed(runnable, 2000); 放在run()裡面

我們要放在 circlePageIndicator 的監聽器內，每當頁面滑動結束時先刪除原本的計時器，然後重新建立一個新計時器

這樣才不發生原本已經計算到1秒時，突然"手動"滑動了頁面，原本的計時器沒有停止，就又馬上新增了一個計時器

這樣會出現連續換兩次頁的情形，所以 handler.removeCallbacks(runnable)是必須加的

circlePageIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageSelected(int position) {
        handler.removeCallbacks(runnable);
        handler.postDelayed(runnable, 2000);
    }
}

以上就是 自動換頁(無限循環) 的方法簡介

至於怎麼搭配 ViewPagerIndicator 跟 CirclePageIndicator 一起使用 詳細程式碼我沒有在此貼出，有興趣的可以在底下留言，我可以直接分享原始碼給您

 

程式設定 ProgressBar 屬性方法 (讀取圖案等待時間秀出的轉圈圈動畫)

ProgressBar最常用在讀取圖片時中間的這段等待時間，用來秀出那個讀取狀態條或是轉圈圈的圖案

其實可以很簡單的直接從xml拉出來即可

這邊只是記錄一下，如果你因為某些情況不能用拉的，該怎麼用程式實作，如下

// 程式設定 ProgressBar 屬性方法
ProgressBar pb = new ProgressBar(getActivity(),null,android.R.attr.progressBarStyleSmall);
pb.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
pb.setVisibility(VISIBLE);

→ android.R.attr.XXXX 用來設定ProgressBar顯示的樣式

→ getActivity() 可以改成 this

如何取得手機螢幕解析度

// 取得手機螢幕解析度 存入 ImageSize 
DisplayMetrics metrics = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);
ImageSize mImageSize = new ImageSize(metrics.widthPixels, metrics.heightPixels);

→ getActivity() 可以改成 this 或 不加

Android-Universal-Image-Loader 另一種用法介紹，將下載好的圖片緩存到內存中，大幅提高運行速度

// 指定圖片大小，圖片網址宣告
ImageSize mImageSize = new ImageSize(300, 300);
String imgURL = "http://xxx.xxx.xxx";

// Android-Universal-Image-Loader  必要初始設定
ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(getContext()).build();
ImageLoader.getInstance().init(config);
imageLoader = ImageLoader.getInstance();

// 將下載好的圖片緩存到內存中的設定
DisplayImageOptions options = new DisplayImageOptions.Builder()
       .cacheInMemory(true)
       .cacheOnDisk(true)
       .bitmapConfig(Bitmap.Config.RGB_565)
       .build();

// 指定下載好的圖片在哪裡顯示
img_display = new ImageView(getActivity());

// 秀圖 ( loadedImage 就是下載好的圖片)
imageLoader.loadImage(imgURL,mImageSize,options, new SimpleImageLoadingListener() {
   @Override
   public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
         img_display.setImageBitmap(loadedImage);}    
});

→ getContext() 可改成 this

→ loadedImage 就是下載好的圖片

→ 記得設定好上網權限、跟內部存取權限

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

 

資料來源

http://blog.csdn.net/xiaanming/article/details/26810303/

https://github.com/nostra13/Android-Universal-Image-Loader

http://style77125tech.pixnet.net/blog/post/16792883-%5Bandroid%5D-displaymetrics-%E5%8F%96%E5%BE%97%E6%89%8B%E6%A9%9F%E8%9E%A2%E5%B9%95%E5%A4%A7%E5%B0%8F

https://developer.android.com/reference/android/widget/ProgressBar.html

自己辛苦摸索...

 

本頁段落