自定义HorizontalScrollView视图实现仿ViewPager效果

来源：互联网发布：龙门镖局知乎编辑：程序博客网时间：2024/05/20 04:13

先展示效果图:
这里写图片描述

自定义HorizontalScrollView类：AppHorizontalScrollView

package com.eg.lyx.demo;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效果） * */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>();    /**     * 构造方法     */    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();    }    /**     * 获取子视图信息     */    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());                }            }        }    }    /**     * 触摸监听时间     */    @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);    }    /**     * 滑动到当前页     */    private void smoothScrollToCurrent() {        smoothScrollTo(viewList.get(currentPage)-10, 0);    }    /**     * 滑动到下一页     */    private void smoothScrollToNextPage() {        if (currentPage < subChildCount - 1) {            currentPage++;            smoothScrollTo(viewList.get(currentPage)-10, 0);        }    }    /**     * 滑动到上一页     */    private void smoothScrollToPrePage() {        if (currentPage > 0) {            currentPage--;            smoothScrollTo(viewList.get(currentPage)-10, 0);        }    }    /**     * 滑动到下一页     * @author caizhiming     */    public void nextPage() {        smoothScrollToNextPage();    }    /**     * 滑动到上一页     */    public void prePage() {        smoothScrollToPrePage();    }    /**     * 跳转到指定的页面     */    public boolean gotoPage(int page) {        if (page > 0 && page < subChildCount - 1) {            smoothScrollTo(viewList.get(page), 0);            currentPage = page;            return true;        }        return false;    }}

布局:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.eg.lyx.demo.MainActivity">    <com.eg.lyx.demo.AppHorizontalScrollView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:scrollbars="none"        >        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="horizontal">            <include layout="@layout/item_one"/>            <include layout="@layout/item_one"/>            <include layout="@layout/item_one"/>            <include layout="@layout/item_one"/>        </LinearLayout>    </com.eg.lyx.demo.AppHorizontalScrollView></RelativeLayout>

item_one:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:layout_width="360dp"              android:layout_height="wrap_content"              android:layout_marginRight="20dp"              android:layout_marginTop="20dp"              android:background="@drawable/bg"              android:orientation="vertical"              android:paddingLeft="10dp">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:text="景点玩乐"        android:textColor="#99000000"        android:textStyle="bold"/>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="50dp"        android:layout_marginBottom="20dp"        android:layout_marginTop="20dp"        android:gravity="center_vertical"        android:orientation="horizontal">        <ImageView            android:layout_width="50dp"            android:layout_height="50dp"            android:scaleType="fitXY"            android:src="@drawable/aa"/>        <LinearLayout            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_marginLeft="6dp"            android:layout_weight="1"            android:gravity="center_vertical"            android:orientation="vertical">            <TextView                android:layout_width="wrap_content"                android:layout_height="0dp"                android:layout_weight="1"                android:gravity="center_vertical"                android:text="POI名称"                android:textSize="13sp"/>            <LinearLayout                android:layout_width="wrap_content"                android:layout_height="0dp"                android:layout_marginBottom="4dp"                android:layout_marginTop="4dp"                android:layout_weight="1"                android:gravity="center_vertical"                android:orientation="horizontal"                android:visibility="visible">                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:text="4.9分"                    android:textColor="#e69e0e"                    android:textSize="11sp"/>                <View                    android:layout_width="1px"                    android:layout_height="match_parent"                    android:layout_marginBottom="2dp"                    android:layout_marginLeft="3dp"                    android:layout_marginRight="3dp"                    android:layout_marginTop="2dp"                    android:background="#000000"                    />                <TextView                    android:layout_width="wrap_content"                    android:layout_height="match_parent"                    android:text="距离市中心10.2km"                    android:textSize="11sp"/>            </LinearLayout>            <TextView                android:layout_width="wrap_content"                android:layout_height="0dp"                android:layout_weight="1"                android:gravity="center_vertical"                android:text="234起"                android:textColor="#e69e0e"                android:textSize="11sp"/>        </LinearLayout>        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="right|center_vertical"            android:layout_marginRight="20dp">            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:background="#1c57c4"                android:text="预订"                android:textColor="#ffffff"/>        </LinearLayout>    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="50dp"        android:layout_marginBottom="20dp"        android:gravity="center_vertical"        android:orientation="horizontal">        <ImageView            android:layout_width="50dp"            android:layout_height="50dp"            android:scaleType="fitXY"            android:src="@drawable/aa"/>        <LinearLayout            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_marginLeft="6dp"            android:layout_weight="1"            android:gravity="center_vertical"            android:orientation="vertical">            <TextView                android:layout_width="wrap_content"                android:layout_height="0dp"                android:layout_weight="1"                android:gravity="center_vertical"                android:text="POI名称"                android:textSize="13sp"/>            <LinearLayout                android:layout_width="wrap_content"                android:layout_height="0dp"                android:layout_marginBottom="4dp"                android:layout_marginTop="4dp"                android:layout_weight="1"                android:gravity="center_vertical"                android:orientation="horizontal"                android:visibility="visible">                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:text="4.9分"                    android:textColor="#e69e0e"                    android:textSize="11sp"/>                <View                    android:layout_width="1px"                    android:layout_height="match_parent"                    android:layout_marginBottom="2dp"                    android:layout_marginLeft="3dp"                    android:layout_marginRight="3dp"                    android:layout_marginTop="2dp"                    android:background="#000000"                    />                <TextView                    android:layout_width="wrap_content"                    android:layout_height="match_parent"                    android:text="距离市中心10.2km"                    android:textSize="11sp"/>            </LinearLayout>            <TextView                android:layout_width="wrap_content"                android:layout_height="0dp"                android:layout_weight="1"                android:gravity="center_vertical"                android:text="234起"                android:textColor="#e69e0e"                android:textSize="11sp"/>        </LinearLayout>        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="right|center_vertical"            android:layout_marginRight="20dp">            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:background="#1c57c4"                android:text="预订"                android:textColor="#ffffff"/>        </LinearLayout>    </LinearLayout></LinearLayout>

阅读全文

1 0