Android零基礎入門第49節：AdapterViewFlipper圖片輪播

標籤：gen   布局   點擊事件   清單項目   ppc   public   item   main   選項   

   上一期學習了ExpandableListView的使用，你已經掌握了嗎？本期開始學習AdapterViewFilpper的使用。

 

 

 

一、認識AdapterViewFilpper

 

    AdapterViewFilpper 繼承 了AdapterViewAnimator，它也會顯示 Adapter 提供的多個 View 組件，但它每次只能顯示一個View組件，程式可通過showPrevious()和showNext()方法控制該組件顯示上一個、下一個組件。

    AdapterViewFilpper可以在多個View切換過程中使用漸隱漸顯的動畫效果。除此之外，還可以調用該組件的startFlipping()控制它“自動播放”下一個View組件。 

    AdapterViewAnimator支援的XML屬性如下：

• android:animateFirstView：設定顯示組件的第一個View時是否使用動畫。

• android:inAnimation：設定組件顯示時使用的動畫。

• android:loopViews：設定迴圈到最後一個組件時是否自動跳轉到第一個組件。

• android:outAnimation：設定組件隱藏時使用的動畫。

    AdapterViewFilpper額外支援的XML屬性及相關方法如下表所示。

 

 

二、AdapterViewFilpper樣本

 

    接下來通過一個簡單的樣本程式來學習AdapterViewFilpper的使用方法。

    繼續使用WidgetSample工程的listviewsample模組，在app/main/res/layout/目錄下建立adapterview_filpper_layout.xml檔案，在其中填充如下程式碼片段：

<?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">    <AdapterViewFlipper        android:id="@+id/flipper"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:flipInterval="5000"        android:layout_alignParentTop="true"/>    <Button        android:id="@+id/prev_btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentLeft="true"        android:text="上一個"/>    <Button        android:id="@+id/next_btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:text="下一個"/>    <Button        android:id="@+id/auto_btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:text="自動播放"/></RelativeLayout>

    建立一個MyFilpperAdapter類，繼承BaseAdapter類，重寫其4個主要方法，具體代碼如下：

package com.jinyu.cqkxzsxy.android.listviewsample.adapter;import android.content.Context;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;/** * @建立者 鑫鱻 * @描述 Android零基礎入門到精通系列教程，歡迎關注公眾號ShareExpert */public class MyFilpperAdapter extends BaseAdapter {    private Context mContext = null;    private int[] mImageIds = null;    public MyFilpperAdapter(Context context, int[] imageIds) {        this.mContext = context;        this.mImageIds = imageIds;    }    @Override    public int getCount() {        return mImageIds.length;    }    @Override    public Object getItem(int position) {        return position;    }    @Override    public long getItemId(int position) {        return position;    }    // 該方法返回的View代表了每個清單項目    @Override    public View getView(int position, View convertView, ViewGroup parent) {        ImageView imageView = null;        if(null == convertView) {            // 建立一個ImageView            imageView = new ImageView(mContext);            // 設定ImageView的縮放類型            imageView.setScaleType(ImageView.ScaleType.FIT_XY);            // 為imageView設定布局參數            imageView.setLayoutParams(new ViewGroup.LayoutParams(                    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));            convertView = imageView;        } else {            imageView = (ImageView) convertView;        }        // 給ImageView設定圖片資源        imageView.setImageResource(mImageIds[position]);        return imageView;    }}

    接下來為AdapterViewFilpper提供Adapter，使用自訂的BaseAdapter。建立AdapterViewFilperActivity.java檔案，載入上面建立的布局檔案，具體代碼如下：

package com.jinyu.cqkxzsxy.android.listviewsample;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.AdapterViewFlipper;import android.widget.Button;import com.jinyu.cqkxzsxy.android.listviewsample.adapter.MyFilpperAdapter;public class AdapterViewFilperActivity extends AppCompatActivity implements View.OnClickListener {    private AdapterViewFlipper mFlipper = null;    private Button mPrevBtn = null;    private Button mNextBtn = null;    private Button mAutoBtn = null;    private int[] mImageIds = {            R.drawable.image_01,R.drawable.image_02,R.drawable.image_03,            R.drawable.image_04,R.drawable.image_05,R.drawable.image_06,            R.drawable.image_07,R.drawable.image_08,R.drawable.image_09    };    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.adapterview_filpper_layout);        // 擷取介面組件        mFlipper = (AdapterViewFlipper) findViewById(R.id.flipper);        mPrevBtn = (Button) findViewById(R.id.prev_btn);        mNextBtn = (Button) findViewById(R.id.next_btn);        mAutoBtn = (Button) findViewById(R.id.auto_btn);        // 為AdapterViewFlipper設定Adapter        MyFilpperAdapter adapter = new MyFilpperAdapter(this, mImageIds);        mFlipper.setAdapter(adapter);        // 為三個按鈕設定點擊事件監聽器        mPrevBtn.setOnClickListener(this);        mNextBtn.setOnClickListener(this);        mAutoBtn.setOnClickListener(this);    }    @Override    public void onClick(View view) {        switch (view.getId()){            case R.id.prev_btn:                // 顯示上一個組件                mFlipper.showPrevious();                // 停止自動播放                mFlipper.stopFlipping();                break;            case R.id.next_btn:                // 顯示下一個組件。                mFlipper.showNext();                // 停止自動播放                mFlipper.stopFlipping();                break;            case R.id.auto_btn:                // 開始自動播放                mFlipper.startFlipping();                break;            default:                break;        }    }}

    上面程式碼調用了 AdapterViewFlipper 的 showPrevious()、 showNext()方法來控制該組件顯示上一個、下一個組件，並調用了 startFlipping()方法控制自動播放。

    修改程式啟動的Activity，運行程式，可以看到所示介面效果。

    單擊上一個或下一個按鈕可以切換顯示的組件，單擊自動播放按鈕，將可以看到AdapterViewFlipper每隔5秒更換一個圖片，切換圖片時會使用漸隱漸顯效果。 

    至此，關於AdapterViewFlipper的簡單使用學習完畢，更多屬性和方法建議多加練習並掌握。

 

 

 

    今天就先到這裡，如果有問題歡迎留言一起探討，也歡迎加入Android零基礎入門技術討論群，共同成長！

   此文章著作權為公眾號分享達人秀（ShareExpert）——鑫鱻所有，若需轉載請聯絡作者授權，特此聲明！

 

往期總結分享：

Android零基礎入門第1節：Android的前世今生

Android零基礎入門第2節：Android 系統架構和應用組件那些事

Android零基礎入門第3節：帶你一起來聊一聊Android開發環境

Android零基礎入門第4節：正確安裝和配置JDK, 高富帥養成第一招

Android零基礎入門第5節：善用ADT Bundle, 輕鬆邂逅女神

Android零基礎入門第6節：配置最佳化SDK Manager, 正式約會女神

Android零基礎入門第7節：搞定Android模擬器，開啟甜蜜之旅

Android零基礎入門第8節：HelloWorld，我的第一趟旅程出發點

Android零基礎入門第9節：Android應用實戰，不懂代碼也可以開發

Android零基礎入門第10節：開發IDE大升級，終於迎來了Android Studio

Android零基礎入門第11節：簡單幾步帶你飛，運行Android Studio工程

Android零基礎入門第12節：熟悉Android Studio介面，開始裝逼賣萌

Android零基礎入門第13節：Android Studio配置最佳化，打造開發利器

Android零基礎入門第14節：使用高速Genymotion，跨入火箭時代

Android零基礎入門第15節：掌握Android Studio項目結構，揚帆起航

Android零基礎入門第16節：Android使用者介面開發概述

Android零基礎入門第17節：TextView屬性和方法大全

Android零基礎入門第18節：EditText的屬性和使用方法

Android零基礎入門第19節：Button使用詳解

Android零基礎入門第20節：CheckBox和RadioButton使用大全

Android零基礎入門第21節：ToggleButton和Switch使用大全

Android零基礎入門第22節：ImageView的屬性和方法大全

Android零基礎入門第23節：ImageButton和ZoomButton使用大全

Android零基礎入門第24節：自訂View簡單使用，打造屬於你的控制項

Android零基礎入門第25節：簡單且最常用的LinearLayout線性布局

Android零基礎入門第26節：兩種對齊，layout_gravity和gravity大不同

Android零基礎入門第27節：正確使用padding和margin

Android零基礎入門第28節：輕鬆掌握RelativeLayout相對布局

Android零基礎入門第29節：善用TableLayout表格版面配置

Android零基礎入門第30節：兩分鐘掌握FrameLayout幀布局

Android零基礎入門第31節：少用的AbsoluteLayout絕對布局

Android零基礎入門第32節：新推出的GridLayout網格布局

Android零基礎入門第33節：Android事件處理概述

Android零基礎入門第34節：Android中基於監聽的事件處理

Android零基礎入門第35節：Android中基於回調的事件處理

Android零基礎入門第36節：Android系統事件的處理

Android零基礎入門第37節：初識ListView

Android零基礎入門第38節：初識Adapter

Android零基礎入門第39節：ListActivity和自訂欄表項

Android零基礎入門第40節：自訂ArrayAdapter

Android零基礎入門第41節：使用SimpleAdapter

Android零基礎入門第42節：自訂BaseAdapter

Android零基礎入門第43節：ListView最佳化和列表首尾使用

Android零基礎入門第44節：ListView資料動態更新

Android零基礎入門第45節：網格視圖GridView

Android零基礎入門第46節：列表選項框Spinner

Android零基礎入門第47節：自動完成文字框AutoCompleteTextView

Android零基礎入門第48節：可摺疊列表ExpandableListView

Android零基礎入門第49節：AdapterViewFlipper圖片輪播