Android开发之自定义HorizontalScrollView视图实现仿ViewPager效果

浏览数：997 / 时间：2015年06月11日

开发过程中，需要达到 HorizontalScrollView和ViewPager的效果，于是直接重写了HorizontalScrollView来达到实现ViewPager的效果。

实际效果图如下：

（1）自定义HorizontalScrollView类：AppHorizontalScrollView实现：

package com.czm.ui.view;

import java.util.ArrayList;

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

/***
 * 应用详情页截图 自定义HorizontalScrollView视图  （ 仿ViewPager效果）
 * @author caizhiming
 *
 */
public class AppHorizontalScrollView extends HorizontalScrollView {

    /**
     * 数据定义
     */
    private int subChildCount = 0;
    private ViewGroup firstChild = null;
    private int downX = 0;
    private int currentPage = 0;
    private ArrayList<Integer> viewList = new ArrayList<Integer>();

    /**
     * 构造方法
     * @author caizhiming
     */
    public AppHorizontalScrollView(Context context, AttributeSet attrs,
            int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

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

    public AppHorizontalScrollView(Context context) {
        super(context);
        init();
    }

    private void init() {
        setHorizontalScrollBarEnabled(false);//设置原有的滚动无效
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        getChildInfo();
    }

    /**
     * 获取子视图信息
     * @author caizhiming
     */
    public void getChildInfo() {

        firstChild = (ViewGroup) getChildAt(0);
        if (firstChild != null) {
            subChildCount = firstChild.getChildCount();
            for (int i = 0; i < subChildCount; i++) {
                if (((View) firstChild.getChildAt(i)).getWidth() > 0) {
                    viewList.add(((View) firstChild.getChildAt(i)).getLeft());
                }
            }
        }

    }

    /**
     * 触摸监听时间
     * @author caizhiming
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:
            downX = (int) ev.getX();
            break;
        case MotionEvent.ACTION_MOVE:
            break;
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL: {
            if (Math.abs((ev.getX() - downX)) > getWidth() / 4) {
                if (ev.getX() - downX > 0) {
                    smoothScrollToPrePage();
                } else {
                    smoothScrollToNextPage();
                }
            } else {
                smoothScrollToCurrent();
            }
            return true;
        }
        }
        return super.onTouchEvent(ev);
    }

    /**
     * 滑动到当前页
     * @author caizhiming
     */
    private void smoothScrollToCurrent() {
        smoothScrollTo(viewList.get(currentPage)-10, 0);
    }

    /**
     * 滑动到下一页
     * @author caizhiming
     */
    private void smoothScrollToNextPage() {
        if (currentPage < subChildCount - 1) {
            currentPage++;
            smoothScrollTo(viewList.get(currentPage)-10, 0);
        }
    }
    /**
     * 滑动到上一页
     * @author caizhiming
     */
    private void smoothScrollToPrePage() {
        if (currentPage > 0) {
            currentPage--;
            smoothScrollTo(viewList.get(currentPage)-10, 0);
        }
    }

    /**
     * 滑动到下一页
     * @author caizhiming
     */
    public void nextPage() {
        smoothScrollToNextPage();
    }

    /**
     * 滑动到上一页
     * @author caizhiming
     */
    public void prePage() {
        smoothScrollToPrePage();
    }

    /**
     * 跳转到指定的页面
     * 
     * @param page
     * @author caizhiming
     */
    public boolean gotoPage(int page) {
        if (page > 0 && page < subChildCount - 1) {
            smoothScrollTo(viewList.get(page), 0);
            currentPage = page;
            return true;
        }
        return false;
    }

}

（2）UI配置文件xml中使用方法如下：

<com.czm.ui.view.AppHorizontalScrollView
            android:id="@+id/horizontalScrollView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"
            android:scrollbars="none" >

            <LinearLayout
                android:id="@+id/llCoverList"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:background="#DDDDDD"
                android:orientation="horizontal" >
                
            </LinearLayout>
        </com.czm.ui.view.AppHorizontalScrollView>