自定義ViewGroup實現垂直滾動

一般進入APP都有歡迎界面,基本都是水平滾動的,今天和大家分享一個垂直滾動的例子。

<com.example.verticallinearlayout.VerticalLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/id_main_ly"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#fff" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/w02" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hello" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/w03" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="#fff"
            android:text="hello" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/w04" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="hello" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/w05" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="hello" />
    </RelativeLayout>

</com.example.verticallinearlayout.VerticalLinearLayout>
在自定義的ViewGroup中放入了4個RelativeLayout,每個RelativeLayout都設置了背景圖片,背景圖片來自微信~

2、主要看自定義的Layout了

package com.example.verticallinearlayout;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.Scroller;

public class VerticalLinearLayout extends ViewGroup
{
	/**
	 * 屏幕的高度
	 */
	private int mScreenHeight;
	/**
	 * 手指按下時的getScrollY
	 */
	private int mScrollStart;
	/**
	 * 手指擡起時的getScrollY
	 */
	private int mScrollEnd;
	/**
	 * 記錄移動時的Y
	 */
	private int mLastY;
	/**
	 * 滾動的輔助類
	 */
	private Scroller mScroller;
	/**
	 * 是否正在滾動
	 */
	private boolean isScrolling;
	/**
	 * 加速度檢測
	 */
	private VelocityTracker mVelocityTracker;
	/**
	 * 記錄當前頁
	 */
	private int currentPage = 0;

	private OnPageChangeListener mOnPageChangeListener;

	public VerticalLinearLayout(Context context, AttributeSet attrs)
	{
		super(context, attrs);

		/**
		 * 獲得屏幕的高度
		 */
		WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
		DisplayMetrics outMetrics = new DisplayMetrics();
		wm.getDefaultDisplay().getMetrics(outMetrics);
		mScreenHeight = outMetrics.heightPixels;
		// 初始化
		mScroller = new Scroller(context);
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
	{
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		int count = getChildCount();
		for (int i = 0; i < count; ++i)
		{
			View childView = getChildAt(i);
			measureChild(childView, widthMeasureSpec,mScreenHeight);
		}
	}

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b)
	{
		if (changed)
		{
			int childCount = getChildCount();
			// 設置主佈局的高度
			MarginLayoutParams lp = (MarginLayoutParams) getLayoutParams();
			lp.height = mScreenHeight * childCount;
			setLayoutParams(lp);

			for (int i = 0; i < childCount; i++)
			{
				View child = getChildAt(i);
				if (child.getVisibility() != View.GONE)
				{
					child.layout(l, i * mScreenHeight, r, (i + 1) * mScreenHeight);// 調用每個自佈局的layout
				}
			}

		}

	}

	@Override
	public boolean onTouchEvent(MotionEvent event)
	{
		// 如果當前正在滾動,調用父類的onTouchEvent
		if (isScrolling)
			return super.onTouchEvent(event);

		int action = event.getAction();
		int y = (int) event.getY();

		obtainVelocity(event);
		switch (action)
		{
		case MotionEvent.ACTION_DOWN:

			mScrollStart = getScrollY();
			mLastY = y;
			break;
		case MotionEvent.ACTION_MOVE:

			if (!mScroller.isFinished())
			{
				mScroller.abortAnimation();
			}

			int dy = mLastY - y;
			// 邊界值檢查
			int scrollY = getScrollY();
			// 已經到達頂端,下拉多少,就往上滾動多少
			if (dy < 0 && scrollY + dy < 0)
			{
				dy = -scrollY;
			}
			// 已經到達底部,上拉多少,就往下滾動多少
			if (dy > 0 && scrollY + dy > getHeight() - mScreenHeight)
			{
				dy = getHeight() - mScreenHeight - scrollY;
			}

			scrollBy(0, dy);
			mLastY = y;
			break;
		case MotionEvent.ACTION_UP:

			mScrollEnd = getScrollY();

			int dScrollY = mScrollEnd - mScrollStart;

			if (wantScrollToNext())// 往上滑動
			{
				if (shouldScrollToNext())
				{
					mScroller.startScroll(0, getScrollY(), 0, mScreenHeight - dScrollY);

				} else
				{
					mScroller.startScroll(0, getScrollY(), 0, -dScrollY);
				}

			}

			if (wantScrollToPre())// 往下滑動
			{
				if (shouldScrollToPre())
				{
					mScroller.startScroll(0, getScrollY(), 0, -mScreenHeight - dScrollY);

				} else
				{
					mScroller.startScroll(0, getScrollY(), 0, -dScrollY);
				}
			}
			isScrolling = true;
			postInvalidate();
			recycleVelocity();
			break;
		}

		return true;
	}

	/**
	 * 根據滾動距離判斷是否能夠滾動到下一頁
	 * 
	 * @return
	 */
	private boolean shouldScrollToNext()
	{
		return mScrollEnd - mScrollStart > mScreenHeight / 2 || Math.abs(getVelocity()) > 600;
	}

	/**
	 * 根據用戶滑動,判斷用戶的意圖是否是滾動到下一頁
	 * 
	 * @return
	 */
	private boolean wantScrollToNext()
	{
		return mScrollEnd > mScrollStart;
	}

	/**
	 * 根據滾動距離判斷是否能夠滾動到上一頁
	 * 
	 * @return
	 */
	private boolean shouldScrollToPre()
	{
		return -mScrollEnd + mScrollStart > mScreenHeight / 2 || Math.abs(getVelocity()) > 600;
	}

	/**
	 * 根據用戶滑動,判斷用戶的意圖是否是滾動到上一頁
	 * 
	 * @return
	 */
	private boolean wantScrollToPre()
	{
		return mScrollEnd < mScrollStart;
	}

	@Override
	public void computeScroll()
	{
		super.computeScroll();
		if (mScroller.computeScrollOffset())
		{
			scrollTo(0, mScroller.getCurrY());
			postInvalidate();
		} else
		{

			int position = getScrollY() / mScreenHeight;

			Log.e("xxx", position + "," + currentPage);
			if (position != currentPage)
			{
				if (mOnPageChangeListener != null)
				{
					currentPage = position;
					mOnPageChangeListener.onPageChange(currentPage);
				}
			}

			isScrolling = false;
		}

	}

	/**
	 * 獲取y方向的加速度
	 * 
	 * @return
	 */
	private int getVelocity()
	{
		mVelocityTracker.computeCurrentVelocity(1000);
		return (int) mVelocityTracker.getYVelocity();
	}

	/**
	 * 釋放資源
	 */
	private void recycleVelocity()
	{
		if (mVelocityTracker != null)
		{
			mVelocityTracker.recycle();
			mVelocityTracker = null;
		}
	}

	/**
	 * 初始化加速度檢測器
	 * 
	 * @param event
	 */
	private void obtainVelocity(MotionEvent event)
	{
		if (mVelocityTracker == null)
		{
			mVelocityTracker = VelocityTracker.obtain();
		}
		mVelocityTracker.addMovement(event);
	}

	/**
	 * 設置回調接口
	 * 
	 * @param onPageChangeListener
	 */
	public void setOnPageChangeListener(OnPageChangeListener onPageChangeListener)
	{
		mOnPageChangeListener = onPageChangeListener;
	}

	/**
	 * 回調接口
	 * 
	 * @author zhy
	 * 
	 */
	public interface OnPageChangeListener
	{
		void onPageChange(int currentPage);
	}
}

註釋還是相當詳細的,我簡單描述一下,Action_down時獲得當前的scrollY,然後Action_move時,根據移動的距離不斷scrollby就行了,當前處理了一下邊界判斷,在Action_up中再次獲得scrollY,兩個的scrollY進行對比,然後根據移動的距離與方向決定最後的動作。

3、主Activity

package com.example.verticallinearlayout;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;

import com.example.verticallinearlayout.VerticalLinearLayout.OnPageChangeListener;

public class MainActivity extends Activity
{
	private VerticalLinearLayout mMianLayout;

	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		mMianLayout = (VerticalLinearLayout) findViewById(R.id.id_main_ly);
		mMianLayout.setOnPageChangeListener(new OnPageChangeListener()
		{
			@Override
			public void onPageChange(int currentPage)
			{
//				mMianLayout.getChildAt(currentPage);
				Toast.makeText(MainActivity.this, "第"+(currentPage+1)+"頁", Toast.LENGTH_SHORT).show();
			}
		});
	}

}

爲了提供可擴展性,還是定義了回調接口,完全可以把這個當成一個垂直的ViewPager使用。

總結下:

Scroller這個輔助類還是相當好用的,原理我簡單說一下:每次滾動時,讓Scroller進行滾動,然後調用postInvalidate方法,這個方法會引發調用onDraw方法,onDraw方法中會去調用computeScroll方法,然後我們在computScroll中判斷,Scroller的滾動是否結束,沒有的話,把當前的View滾動到現在Scroller的位置,然後繼續調用postInvalidate,這樣一個循環的過程。



發佈了66 篇原創文章 · 獲贊 13 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章