1. 程式人生 > >Android自己定義控件實戰——仿多看閱讀平移翻頁

Android自己定義控件實戰——仿多看閱讀平移翻頁

mar pos sim androi 調用 andro return getview pan

轉載請聲明出處http://blog.csdn.net/zhongkejingwang/article/details/38728119

之前自己做的一個APP須要用到翻頁閱讀,網上看過立體翻頁效果,只是bug太多了還不兼容。看了一下多看閱讀翻頁是採用平移翻頁的,於是就仿寫了一個平移翻頁的控件。效果例如以下:

技術分享

在翻頁時頁面右邊緣繪制了陰影。效果還不錯。要實現這樣的平移翻頁控件並不難,僅僅須要定義一個布局管理頁面就能夠了。

詳細實現上有下面難點:

1、循環翻頁,頁面的反復利用。

2、在翻頁時過濾掉多點觸碰。

3、採用setAdapter的方式設置頁面布局和數據。

以下就來一一解決這幾個難點。首先看循環翻頁問題,怎麽樣能採用較少的頁面實現這樣的翻頁呢?因為屏幕上每次僅僅能顯示一張完整的頁面。翻過去的頁面也看不到。所以能夠把翻過去的頁面拿來反復利用,不必每次都new一個頁面,所以,我僅僅用了三張頁面實現循環翻頁。

要想反復利用頁面。首先要知道頁面在布局中序號和相應的層次關系。比方一個父控件的子view的序號越大就位於越上層。

循環利用頁面的原理圖例如以下:

向右翻頁時狀態圖是這種,僅僅用了0、1、2三張頁面,頁面序號為2的位於最上層。我把它隱藏在左邊,所以看到的僅僅有頁面1,頁面0在1以下擋著也看不到,向右翻頁時,頁面2被滑到屏幕中,這時候把頁面0的內容替換成頁面2的前一頁內容。把它放到之前頁面2的位置,這時。狀態又回到了初始狀態,又能夠繼續向右翻頁了!

技術分享

向左翻頁時是這種,初始狀態還是一樣,當頁面1被往左翻過時,看到的是頁面0,這時候頁面0以下已經沒有頁面了,而頁面2已經用不到了,這時候把頁面2放到頁面0以下。這時候狀態又回到了初始狀態,就能夠繼續往左翻頁了。

技術分享

類似於這樣的循環效果的實現我一直用的解決方式都是將選中的置於最中間,比方原理圖中的頁面1。每次翻頁完畢後可見的都是頁面1。在滾動選擇器PickerView中也是相同的方案。這就攻克了頁面的反復利用問題了。

解決難點2 翻頁時過濾多點觸碰這個問題在仿淘寶商品瀏覽界面中已經解決過了,就是用一個控制變量mEvents過濾掉pointer down或up後到來的第一個move事件。

解決難點3 採用adapter方式設置頁面的布局和數據。

這個在Android的AdapterView裏用到的。可是我沒有看它的adapter機制,太復雜了,我就搞了個簡單的adapter,例如以下:

PageAdapter.java:

package com.jingchen.pagerdemo;

import android.view.View;

public abstract class PageAdapter
{
	/**
	 * @return 頁面view
	 */
	public abstract View getView();

	public abstract int getCount();

	/**
	 * 將內容加入到view中
	 * 
	 * @param view
	 *            包括內容的view
	 * @param position
	 *            第position頁
	 */
	public abstract void addContent(View view, int position);
}
這是一個抽象類,getView()用於返回頁面的布局,getCount()返回數據總共須要多少頁。addContent(View view, int position)這個是每翻過一頁後將會被調用來請求頁面數據的,參數view就是頁面,position是表明第幾頁。

待會兒會在自己定義布局中定義setAdapter方法設置設配器。

OK,難點都攻克了,自己定義一個布局叫ScanView繼承自RelativeLayout:

ScanView.java:

Android自己定義控件實戰——仿多看閱讀平移翻頁