#Android學習# 簡單的輪播圖的實現[上]
自己學習 Android 也有一段時間了, 從大二的開學之初開始寫 Android 程式,那時候自己真的什麼都是不會,除了自己有一些 Java 基礎之外,還好,感激當初堅持的自己,自己現在也可以獨自寫一些 Android 小程式了; 現在,哈哈,還有幾天,哦,三天吧,我就是一名大三的學生了,在大三的日子裡面,我會比較系統地學習 Android 知識,選擇用時間沉澱自己,當然,我會把我學到的知識,整理成部落格,畢竟,感覺自己比較喜歡寫東西,哈哈…
Android 輪播圖在很多的場景,都是可以遇見它們的身影,它們有挺多的特點的:
- 帶有指示器
- 每一張圖帶有標題
- 可以手動向左,或者向右滑動
- 自動滑動
效果如下圖
程式碼的實現邏輯
1. 在 .xml 檔案裡面添加布局
這個輪播框在 .xml 檔案裡面的佈局元件還算是挺簡單的,我就直接上程式碼吧,如果您有 Android 基礎,應該不難看懂的;
“`xml
2. 在 MainActivity 檔案中拿到相應的元件
我們需要拿到 ViewPager 以及灰色的 LieanerLayout 裡面的元件,以便於後面對元件填充內容;
這也是直接上程式碼吧:
/*
* 初始化元件
* */
public void initView(){
viewPager = (ViewPager) findViewById(R.id.viewPager);//用於填充圖片
title = (TextView) findViewById(R.id.content);//用於填充標題
point = (LinearLayout) findViewById(R.id.pointViews);//用於填充指示器原點
}
3. 往空的輪播框裡面填充資料
首先準備好三張以上的圖片,最好五張吧,數量多,有利於除錯得出實驗結論; 把準備好的圖片放在下面的包路徑下面:
現在首先需要做的事情,是需要把圖片填充並且在 ViewPager 展示出來。需要在 ViewPager 中展示資料,我們就需要繼承實現一個 PageAdapter 的抽象類, 在 PagerAdapter 的原始碼裡面介紹到,如果我們實現了這一個類,我們必須實現以下四個重要的方法;
private class MyAdapter extends PagerAdapter{ //返回需要顯示的 view 個數 @Override public int getCount() { return 0; } //返回 view 複用的規則 @Override public boolean isViewFromObject(View view, Object object) { return false; } //返回需要展示的 view @Override public Object instantiateItem(ViewGroup container, int position) { return super.instantiateItem(container, position); } //銷燬已經展示的 view @Override public void destroyItem(ViewGroup container, int position, Object object) { super.destroyItem(container, position, object); } }
- 第一個 getCount() 方法,在一般的 Adapter 類裡面都是可以找到的,它的作用主要是用來獲取需要展示在 ViewPager 的 View 的總數;
第二個方法 isViewFromObject(View view, Object object) 比較重要,因為它是返回 view 複用的規則; 要了解這個方法以怎樣的方式複用 ViewPager,需要回到它的原始碼裡面:
/** * Determines whether a page View is associated with a specific key object * as returned by {@link #instantiateItem(ViewGroup, int)}. This method is * required for a PagerAdapter to function properly. * * @param view Page View to check for association with <code>object</code> * @param object Object to check for association with <code>view</code> * @return true if <code>view</code> is associated with the key object <code>object</code> */ public abstract boolean isViewFromObject(View view, Object object);
原始碼介紹到,方法 isViewFromObject() 是用來確定當前輪播框顯示的 Page View 是否與方法 instantiateItem(ViewGroup, int) 返回來的 Object 相同,判斷 Page View 與 Object 相同是通過他們自身的一個特殊的 key,當各自的兩個 key 相同的時候,就可以在 viewPage 那裡顯示出對應的 page view了;
第三個方法 instantiateItem(ViewGroup container, int position) 主要的作用是往 ViewGroup 這個容器裡面新增 view (需要顯示的),以及返回含有 View 的 Object 物件;
第四個方法 destroyItem(ViewGroup container, int position, Object object) 也是比較重要的,它主要的作用是移除 ViewGroup 裡面的已經展示過的 View,如果沒有即時移除已經展示的 view 的話,會使程式崩潰的; 當 instantiateItem(ViewGroup container, int position) 這個方法放回一個 Object的時候,ViewPager 就是用這個作為 View 用來顯示的;
現在需要往 MyAdapter 裡面填充用來展示的資料。首先,我們應當拿到圖片的資源 ID ,而且把這些圖片資源 ID 用來建立用以展示的 ImageView 物件,再然後,把這些 ImageView 物件裝載到 List 裡面,方便填充到 MyAdapter 裡面;程式碼如下面:
/** * 初始化資料 */ public void initData() { //獲取圖片的id imageId = new int[]{R.mipmap.a, R.mipmap.b, R.mipmap.c, R.mipmap.d, R.mipmap.e}; //把 mImageView 裝在 mImageViewList列表裡面; for (int i = 0; i < imageId.length; i++) { mImageView = new ImageView(this); mImageView.setBackgroundResource(imageId[i]); mImageViewList.add(mImageView); } }
現在有了資料,就可以往 MyAdpter 裡面填充資料了,實現的邏輯如下:
private class MyAdapter extends PagerAdapter { //返回需要顯示的 view 個數 @Override public int getCount() { return mImageViewList.size(); } //返回 view 複用的規則 @Override public boolean isViewFromObject(View view, Object object) { return view == object; } //返回需要展示的 view @Override public Object instantiateItem(ViewGroup container, int position) { int newPosition = position % mImageViewList.size(); ImageView imageView = mImageViewList.get(newPosition); container.addView(imageView); return imageView; } //銷燬已經展示的 view @Override public void destroyItem(ViewGroup container, int position, Object object) { //Log.d("測試destroyItem裡面的 object", "destroyItem: " + object); container.removeView((View)object); } }
然後通過 viewPager 的 setAdapter() 方法把 上面的 MyAdapter 裝載在裡面:
/** * 配置 viewPager */ public void initMyAdapter(){ viewPager.setAdapter(new MyAdapter()); }
- 通過上面的程式碼邏輯,我們就可以得到下面的效果圖了:
總結
目前我們實現了往 ViewPager 裡面填充圖片了,然後我接下來的部落格文章將會帶入每一個 View 帶有指示器和標題,而且指示器、標題跟隨者圖片一起運動的效果,感謝謝各位的閱讀…