android ScrollView水平滑动回弹

在研究了View的一些属性之后做了个Scroll的水平滑动回弹。

效果图：

主要代码：

 

import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.HorizontalScrollView;

/**
 * ScrollView水平滑动回弹
 * 
 * @author qhg
 * @date 2014年3月12日
 * 
 */
public class MHorizontalScrollView extends HorizontalScrollView {

	private View view;
	/**
	 * 移动时的增量
	 */
	private static final int deltaX = 1;
	private Rect normalRt = new Rect();

	public MHorizontalScrollView(Context context) {
		super(context);
	}

	public MHorizontalScrollView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	/**
	 * 在xml布局执行完后执行此方法
	 */
	protected void onFinishInflate() {
		if (getChildCount() > 0) {
			view = getChildAt(0);
		}
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		if (view != null) {
			onTouchEventImpl(event);
		}
		return super.onTouchEvent(event);
	}

	private void onTouchEventImpl(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_MOVE:
			// 在当前视图内容继续偏移(x , y)个单位，显示(可视)区域也跟着偏移(x,y)个单位
			scrollBy(deltaX, 0);
			// 当滚动到最左或最右时就不会再滚动，这时移动布局达到回弹效果
			if (isLayoutMove()) {
				if (normalRt.isEmpty()) {
					// 保存当前正常的布局位置，拉过头才能回弹到正常位置
					normalRt.set(view.getLeft(), view.getTop(),
							view.getRight(), view.getBottom());

				}
				// 移动布局
				view.layout(view.getLeft() - deltaX, view.getTop(),
						view.getRight() - deltaX, view.getBottom());
			}
			break;
		case MotionEvent.ACTION_UP:
			if (isNeedAnimation()) {
				animationImpl();
			}
			break;
		default:
			break;
		}
	}

	/**
	 * 动画移动
	 */
	private void animationImpl() {
		// 移动动画
		TranslateAnimation ta = new TranslateAnimation(view.getLeft(),
				normalRt.left, 0, 0);
		// 动画持续时间
		ta.setDuration(50);
		view.startAnimation(ta);
		// 设置回到当前正常的布局位置
		view.layout(normalRt.left, normalRt.top, normalRt.right,
				normalRt.bottom);
		normalRt.setEmpty();
	}

	/**
	 * 是否需要开启动画
	 * 
	 * @return
	 */
	private boolean isNeedAnimation() {
		return !normalRt.isEmpty();
	}

	/**
	 * 是否需要移动布局
	 * 
	 * @return
	 */
	private boolean isLayoutMove() {
		int offset = view.getMeasuredWidth() - getWidth();
		if (offset <= 0) {
			return false;
		}
		// 上面已固定deltaX=1，scrollX永远等于1所以向右拉不动
		// 但当向左拉动到内容布局的最右端时scrollX == offset时还可以继续拉动
		int scrollX = getScrollX();
		if (scrollX == 0 || scrollX == offset) {
			return true;
		}
		return false;
	}

}

在xml布局文件里直接使用：

 

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:background="@drawable/background"
    >

    <cn.qhg.MHorizontalScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scrollbars="none" 
        >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal" 
            android:paddingTop="100dp"
            android:id="@+id/ll_test"
            android:onClick="test"
            >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/house_1" 
                android:layout_marginRight="40dp"
                />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/house_4" 
                android:layout_marginRight="40dp"
                />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/house_2"
                android:layout_marginRight="40dp"
                 />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/house_3"
                android:layout_marginRight="40dp"
                 />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/house_1" 
                android:layout_marginRight="40dp"
                />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/house_4" 
                android:layout_marginRight="40dp"
                />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/house_2"
                android:layout_marginRight="40dp"
                 />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/house_3"
                android:layout_marginRight="40dp"
                 />
            <!-- 使右边多空一点 -->
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="20dp"
                 />
        </LinearLayout>
    </cn.qhg.MHorizontalScrollView>

</LinearLayout>