Android弹性滑动的HorizontalScrollView

android, HorizontalScrollView, 弹性滑动,ElasticHScrollView,自定义控件

作者：安林——eilin（http://www.cnblogs.com/yzyeilin）

很久没写了，最近由于工作需要，用到大量的自定义控件，模仿了几个好的UI，奇异影视的水平方向弹性滑动做的挺不错，用的是水平方向的自定义ListView.

这里我要用到的是水平方向的ScrollView。

大体上借鉴与这篇文章：http://gundumw100.iteye.com/blog/1075286

原理请看这里：http://dev.10086.cn/cmdn/bbs/thread-40685-1-1.html

1.主要是代码部分：ElasticHScrollView.java

　　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 eilin
*
*/
public class ElasticHScrollView extends HorizontalScrollView {

private View inner;
private float x;
private Rect normal = new Rect();

public ElasticHScrollView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}

public ElasticHScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}

@Override
protected void onFinishInflate() {
if (getChildCount() > 0) {
inner = getChildAt(0);
}
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
if (inner == null) {
return super.onTouchEvent(ev);
} else {
commOnTouchEvent(ev);
}
return super.onTouchEvent(ev);
}

public void commOnTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
x = ev.getX();
break;
case MotionEvent.ACTION_UP:
if (isNeedAnimation()) {
animation();
}
break;
case MotionEvent.ACTION_MOVE:
final float preX = x;
float nowX = ev.getX();
int deltaX = (int) (preX - nowX);
// 滚动
scrollBy(deltaX, 0);
x = nowX;
// 当滚动到最上或最下时就不会再滚动，这是移动布局
if (isNeedMove()) {
if (normal.isEmpty()) {
// 保存正常的布局位置
normal.set(inner.getLeft(), inner.getTop(), inner
.getRight(), inner.getBottom());

}
// 移动布局
inner.layout(inner.getLeft() - deltaX, inner.getTop(), inner
.getRight() - deltaX, inner.getBottom());
}
break;
default:
break;
}
}

// 开启动画移动

public void animation() {
// 开启移动动画
TranslateAnimation ta=new TranslateAnimation(inner.getLeft(), normal.left, 0, 0);
ta.setDuration(50);
inner.startAnimation(ta);
//设置回到正常的布局位置
inner.layout(normal.left, normal.top, normal.right, normal.bottom);
normal.setEmpty();
}

//是否需要开启动画
public boolean isNeedAnimation() {
return !normal.isEmpty();
}

// 是否需要移动布局
public boolean isNeedMove() {
int offset = inner.getMeasuredWidth() - getWidth();
int scrollX = getScrollX();
if (scrollX == 0 || scrollX == offset) {
return true;
}
return false;
}

}

2.布局测试：main.xml

<?xml version="1.0" encoding="utf-8"?>
<com.yzy.customview.ElasticHScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="none"
android:background="#D1EEEE"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F5F5F5"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/t02"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/t02"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/t02"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/t02"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/t02"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/t02"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/t02"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/t02"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/t02"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/t02"
/>

</LinearLayout>

</com.yzy.customview.ElasticHScrollView>

t02.jpg