1. 程式人生 > >Android ViewSwitcher 的功能與用法

Android ViewSwitcher 的功能與用法

ViewSwitcher 代表了檢視切換元件, 本身繼承了FrameLayout ,可以將多個View疊在一起 ,每次只顯示一個元件.當程式控制從一個View切換到另個View時,ViewSwitcher 支援指定動畫效果.

為了給ViewSwitcher 新增多個元件, 一般通過ViewSwitcher 的setFactory 方法為止設定ViewFactory ,並由ViewFactory為之建立View 即可. 

下面通過一個例項來介紹 ViewFactory的用法.(仿Android系統Launcher 介面 實現分屏 左右滑動效果)

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.ViewSwitcher;
import android.widget.ViewSwitcher.ViewFactory;


public class ViewSwitcherTest extends Activity
{
	// 定義一個常量,用於顯示每屏顯示的應用程式數
	public static final int NUMBER_PER_SCREEN = 12;

	// 代表應用程式的內部類,
	public static class DataItem
	{
		// 應用程式名稱
		public String dataName;
		// 應用程式圖示
		public Drawable drawable;
	}

	// 儲存系統所有應用程式的List集合
	private ArrayList<DataItem> items = new ArrayList<DataItem>();
	// 記錄當前正在顯示第幾屏的程式
	private int screenNo = -1;
	// 儲存程式所佔的總屏數
	private int screenCount;
	ViewSwitcher switcher;
	// 建立LayoutInflater物件
	LayoutInflater inflater;

	@Override
	public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		inflater = LayoutInflater.from(ViewSwitcherTest.this);
		// 建立一個包含40個元素的List集合,用於模擬包含40個應用程式
		for (int i = 0; i < 40; i++)
		{
			String label = "" + i;
			Drawable drawable = getResources().getDrawable(
					R.drawable.ic_launcher);
			DataItem item = new DataItem();
			item.dataName = label;
			item.drawable = drawable;
			items.add(item);
		}
		// 計算應用程式所佔的總屏數。
		// 如果應用程式的數量能整除NUMBER_PER_SCREEN,除法的結果就是總屏數。
		// 如果不能整除,總屏數應該是除法的結果再加1。
		screenCount = items.size() % NUMBER_PER_SCREEN == 0 ? 
				items.size()/ NUMBER_PER_SCREEN :
				items.size() / NUMBER_PER_SCREEN	+ 1;
		switcher = (ViewSwitcher) findViewById(R.id.viewSwitcher);
		switcher.setFactory(new ViewFactory()
		{
			// 實際上就是返回一個GridView元件
			@Override
			public View makeView()
			{
				// 載入R.layout.slidelistview元件,實際上就是一個GridView元件。
				return inflater.inflate(R.layout.slidelistview, null);
			}
		});
		// 頁面載入時先顯示第一屏。
		next(null);
	}

	public void next(View v)
	{
		if (screenNo < screenCount - 1)
		{
			screenNo++;
			// 為ViewSwitcher的元件顯示過程設定動畫
			switcher.setInAnimation(this, R.anim.slide_in_right);
			// 為ViewSwitcher的元件隱藏過程設定動畫
			switcher.setOutAnimation(this, R.anim.slide_out_left);
			// 控制下一屏將要顯示的GridView對應的 Adapter
			((GridView) switcher.getNextView()).setAdapter(adapter);
			// 點選右邊按鈕,顯示下一屏,也可通過手勢檢測實現顯示下一屏.
			switcher.showNext(); 
		}
	}

	public void prev(View v)
	{
		if (screenNo > 0)
		{
			screenNo--;
			// 為ViewSwitcher的元件顯示過程設定動畫
			switcher.setInAnimation(this, android.R.anim.slide_in_left);
			// 為ViewSwitcher的元件隱藏過程設定動畫
			switcher.setOutAnimation(this, android.R.anim.slide_out_right);
			// 控制下一屏將要顯示的GridView對應的 Adapter
			((GridView) switcher.getNextView()).setAdapter(adapter);
			// 點選左邊按鈕,顯示上一屏,也可通過手勢檢測實現顯示上一屏.
			switcher.showPrevious(); 
		}
	}

	// 該BaseAdapter負責為每屏顯示的GridView提供列表項
	private BaseAdapter adapter = new BaseAdapter()
	{
		@Override
		public int getCount()
		{
			// 如果已經到了最後一屏,且應用程式的數量不能整除NUMBER_PER_SCREEN
			if (screenNo == screenCount - 1
					&& items.size() % NUMBER_PER_SCREEN != 0)
			{
				// 最後一屏顯示的程式數為應用程式的數量對NUMBER_PER_SCREEN求餘
				return items.size() % NUMBER_PER_SCREEN;
			}
			// 否則每屏顯示的程式數量為NUMBER_PER_SCREEN
			return NUMBER_PER_SCREEN;
		}

		@Override
		public DataItem getItem(int position)
		{
			// 根據screenNo計算第position個列表項的資料
			return items.get(screenNo * NUMBER_PER_SCREEN + position);
		}

		@Override
		public long getItemId(int position)
		{
			return position;
		}

		@Override
		public View getView(int position
				, View convertView, ViewGroup parent)
		{
			View view = convertView;
			if (convertView == null)
			{
				// 載入R.layout.labelicon佈局檔案
				view = inflater.inflate(R.layout.labelicon, null);
			}
			// 獲取R.layout.labelicon佈局檔案中的ImageView元件,併為之設定圖示
			ImageView imageView = (ImageView)
					view.findViewById(R.id.imageview);
			imageView.setImageDrawable(getItem(position).drawable);
			// 獲取R.layout.labelicon佈局檔案中的TextView元件,併為之設定文字
			TextView textView = (TextView) 
					view.findViewById(R.id.textview);
			textView.setText(getItem(position).dataName);
			return view;
		}
	};
}

slide_in_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 設定從右邊拖進來的動畫
    android:duration指定動畫持續時間  -->
	<translate
		android:fromXDelta="100%p"
		android:toXDelta="0"
		android:duration="@android:integer/config_mediumAnimTime" />
</set>

slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 設定從左邊拖出去的動畫 
    android:duration指定動畫持續時間 -->
	<translate
		android:fromXDelta="0"
		android:toXDelta="-100%p"
		android:duration="@android:integer/config_mediumAnimTime" />
</set>


labelicon.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 定義一個垂直的LinearLayout,該容器中放置一個ImageView和一個TextView -->
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:gravity="center">
	<ImageView
	    android:id="@+id/imageview"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		 />
	<TextView
	    android:id="@+id/textview"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:gravity="center"
		 />	
</LinearLayout>

main.xml

<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<!-- 定義一個ViewSwitcher元件 -->
	<ViewSwitcher
		android:id="@+id/viewSwitcher"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent" />
	<!-- 定義滾動到上一屏的按鈕 -->
	<Button
		android:id="@+id/button_prev"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_alignParentBottom="true"
		android:layout_alignParentLeft="true"
		android:onClick="prev"
		android:text="<" />
	<!-- 定義滾動到下一屏的按鈕 -->
	<Button
		android:id="@+id/button_next"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_alignParentBottom="true"
		android:layout_alignParentRight="true"
		android:onClick="next"
		android:text=">" />
</RelativeLayout>

slidelistview.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:numColumns="4"
  android:layout_height="match_parent">
    
</GridView>