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