1. 程式人生 > >HorizontalScrollView實現多頁左右滑動

HorizontalScrollView實現多頁左右滑動

先上圖看看效果:

上程式碼:

PageView是封裝後的一個類,繼承了HorizontalScrollView。

package com.miquan;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

/**
 * 具體看部落格:http://blog.csdn.net/qiantujava/article/details/42392127
 */
public class PageView extends HorizontalScrollView {
	private int mBaseScrollX;//滑動基線。也就是點選並滑動之前的x值,以此值計算相對滑動距離。
	private int mScreenWidth;
	private int mScreenHeight;
	
	private LinearLayout mContainer;
	private boolean flag;
	private int mPageCount;//頁面數量
	
	private int mScrollX = 200;//滑動多長距離翻頁
	
	public PageView(Context context, AttributeSet attrs) {
		super(context, attrs);

		DisplayMetrics dm = context.getApplicationContext().getResources()
				.getDisplayMetrics();
		mScreenWidth = dm.widthPixels;
		mScreenHeight = dm.heightPixels;
	}
	
	/**
	 * 新增一個頁面到最後。
	 * @param page
	 */
	public void addPage(View page) {
		addPage(page, -1);
	}
	
	/**
	 * 新增一個頁面。
	 * @param page
	 */
	public void addPage(View page, int index) {
		if(!flag) {
			mContainer = (LinearLayout) getChildAt(0);
			flag = true;
		}
		LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(mScreenWidth, mScreenHeight);
		if(index == -1) {
			mContainer.addView(page, params);
		} else {
			mContainer.addView(page, index, params);
		}
		mPageCount++;
	}
	
	/**
	 * 移除一個頁面。
	 * @param index
	 */
	public void removePage(int index) {
		if(mPageCount < 1) {
			return;
		}
		if(index<0 || index>mPageCount-1) {
			return;
		}
		mContainer.removeViewAt(index);
		mPageCount--;
	}
	
	/**
	 * 移除所有的頁面
	 */
	public void removeAllPages() {
		if(mPageCount > 0) {
			mContainer.removeAllViews();
		}
	}
	
	/**
	 * 獲取頁面數量
	 * @return
	 */
	public int getPageCount() {
		return mPageCount;
	}
	
	/**
	 * 獲取相對滑動位置。由右向左滑動,返回正值;由左向右滑動,返回負值。
	 * @return
	 */
	private int getBaseScrollX() {
		return getScrollX() - mBaseScrollX;
	}
	
	/**
	 * 使相對於基線移動x距離。
	 * @param x x為正值時右移;為負值時左移。
	 */
	private void baseSmoothScrollTo(int x) {
		smoothScrollTo(x + mBaseScrollX, 0);
	}

	@Override
	public boolean onTouchEvent(MotionEvent ev) {
		int action = ev.getAction();
		switch (action) {
		case MotionEvent.ACTION_UP:
			int scrollX = getBaseScrollX();
			//左滑,大於一半,移到下一頁
			if (scrollX > mScrollX) {
				baseSmoothScrollTo(mScreenWidth);
				mBaseScrollX += mScreenWidth;
			} 
			//左滑,不到一半,返回原位
			else if (scrollX > 0) {
				baseSmoothScrollTo(0);
			} 
			//右滑,不到一半,返回原位
			else if(scrollX > -mScrollX) {
				baseSmoothScrollTo(0);
			} 
			//右滑,大於一半,移到下一頁
			else {
				baseSmoothScrollTo(-mScreenWidth);
				mBaseScrollX -= mScreenWidth;
			}
			return true;
		}
		return super.onTouchEvent(ev);
	}
}

接下來是佈局,fragment_main.xml:
<LinearLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    >
    <!-- pageview裡面必須有LinearLayout,這個寫死了。 -->
	<com.example.testandrid.PageView 
	    android:id="@+id/pageview"
	    android:layout_width="wrap_content"  
	    android:layout_height="fill_parent"  
	    android:scrollbars="none" >  
		    <LinearLayout
		        android:layout_width="wrap_content"  
		        android:layout_height="fill_parent"  
		        android:orientation="horizontal" >
		    </LinearLayout>
	</com.example.testandrid.PageView> 
</LinearLayout>

最後在Activity裡面呼叫就行。
package com.example.testandrid;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.LinearLayout;

public class MainActivity extends Activity {
	private LayoutInflater inflater;
	private PageView mPageView;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.fragment_main);
		
		inflater = LayoutInflater.from(this);
		mPageView = (PageView) findViewById(R.id.pageview);
		
		//增加幾個頁面
		LinearLayout layout = new LinearLayout(this);
		layout.setBackgroundColor(Color.BLUE);
		mPageView.addPage(layout);
		
		LinearLayout layout2 = new LinearLayout(this);
		layout2.setBackgroundColor(Color.YELLOW);
		mPageView.addPage(layout2);
		
		//這裡就是個普通的xml佈局檔案
		LinearLayout view = (LinearLayout) inflater.inflate(R.layout.page1, null);
		mPageView.addPage(view);
		
		//刪除一個頁面
//		mPageView.removePage(1);
	}
}

程式碼裡面的註釋基本上都很清楚了,不多說。