仿淘宝商品浏览界面, 向上拉查看详情

最新项目中有展示类似淘宝商品详情的功能,主要实现  向上拉查看详情,百度一搜,发现有大神已经实现这个效果了

http://blog.csdn.net/zhongkejingwang/article/details/38656929

写的很棒。用2个ScrollView 实现上拉查看详情的功能

可是发如今用在我的项目有点问题,有些小的需求没有实现,所以就在这位大神的基础上加入了简单的功能

1. 事件回调。   第二页全然显示出来的回调,能够用来载入数据

2. 事件回调。   当用户滑到第一个ScrollView底部的时候,继续上拉的时候,跟用户提 -------  继续上拉。载入很多其它

3. 事件回调,   当用户滑到第一个ScrollView底部的时候,继续上拉之后,在放开屏幕。第一个ScrollView回滚回原先的位置,这是须要改动提示-----   上拉,能够载入很多其它

4.  需改之前代码可能出现错误的地方

5.  添加简单的凝视

改动后的代码例如以下:

import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.ScrollView;

import java.util.Timer;
import java.util.TimerTask;

public class ScrollViewContainer extends RelativeLayout {

    /**
     * 自己主动上滑
     */
    public static final int AUTO_UP = 0;
    /**
     * 自己主动下滑
     */
    public static final int AUTO_DOWN = 1;
    /**
     * 动画完毕
     */
    public static final int DONE = 2;
    /**
     * 动画速度
     */
    public static final float SPEED = 10.0f;

    private boolean isMeasured = false;

    /**
     * 用于计算手滑动的速度
     */
    private VelocityTracker vt;

    private int mViewHeight;
    private int mViewWidth;

    private View topView;
    private View bottomView;

    private boolean canPullDown;
    private boolean canPullUp;
    private int state = DONE;

    /**
     * 记录当前展示的是哪个view,0是topView。1是bottomView
     */
    private int mCurrentViewIndex = 0;
    /**
     * 手滑动距离。这个是控制布局的主要变量
     */
    private float mMoveLen;
    private MyTimer mTimer;
    private float mLastY;
    /**
     * 用于控制是否变动布局的还有一个条件。mEvents==0时布局能够拖拽了,mEvents==-1时能够舍弃将要到来的第一个move事件,
     * 这点是去除多点拖动剧变的关键
     */
    private int mEvents;

    //处理手指离开屏幕后的自己主动滚动,棒棒的写法
    private Handler handler = new Handler() {

        @Override
        public void handleMessage(Message msg) {
            if (mMoveLen != 0) {
                if (state == AUTO_UP) {
                    mMoveLen -= SPEED;
                    if (mMoveLen <= -mViewHeight) {
                        mMoveLen = -mViewHeight;
                        state = DONE;
                        mCurrentViewIndex = 1;
                        if (l != null) {
                            l.onSecondViewShow();
                        }
                    }
                } else if (state == AUTO_DOWN) {
                    mMoveLen += SPEED;
                    if (mMoveLen >= 0) {
                        mMoveLen = 0;
                        state = DONE;
                        mCurrentViewIndex = 0;
                        if (upl != null) {
                            upl.onUpPullHintListener(upl.STATE_DWON);
                        }
                    }
                } else {
                    mTimer.cancel();
                }
            }
            //计算组件显示位置
            requestLayout();
        }

    };

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

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

    public ScrollViewContainer(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        mTimer = new MyTimer(handler);
    }

    /**
     * 重点
     * 处理滑动事件
     * 重点
     */
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        switch (ev.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                if (vt == null)
                    vt = VelocityTracker.obtain();
                else
                    vt.clear();
                mLastY = ev.getY();
                vt.addMovement(ev);
                mEvents = 0;
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
            case MotionEvent.ACTION_POINTER_UP:
                // 多一仅仅手指按下或抬起时舍弃将要到来的第一个事件move,防止多点拖拽的bug
                mEvents = -1;
                break;
            case MotionEvent.ACTION_MOVE:
                vt.addMovement(ev);
                if (canPullUp && mCurrentViewIndex == 0 && mEvents > 0) {
                    mMoveLen += (ev.getY() - mLastY);
                    // 防止上下越界
                    if (mMoveLen > 0) {
                        mMoveLen = 0;
                        mCurrentViewIndex = 0;
                    } else if (mMoveLen < -mViewHeight / 5) {
                        mMoveLen = -mViewHeight / 5;
                        mCurrentViewIndex = 1;
                        if (upl != null) {
                            upl.onUpPullHintListener(upl.STATE_UP);
                        }
                    }
                    if (mMoveLen < -8) {
                        // 防止事件冲突
                        ev.setAction(MotionEvent.ACTION_CANCEL);
                    }
                } else if (canPullDown && mCurrentViewIndex == 1 && mEvents == 0) {
                    mMoveLen += (ev.getY() - mLastY);
                    // 防止上下越界
                    if (mMoveLen < -mViewHeight) {
                        mMoveLen = -mViewHeight;
                        mCurrentViewIndex = 1;
                    } else if (mMoveLen > 0) {
                        mMoveLen = 0;
                        mCurrentViewIndex = 0;
                    }
                    if (mMoveLen > 8 - mViewHeight) {
                        // 防止事件冲突
                        ev.setAction(MotionEvent.ACTION_CANCEL);
                    }
                } else
                    mEvents++;
                mLastY = ev.getY();
                requestLayout();
                break;
            case MotionEvent.ACTION_UP:
                mLastY = ev.getY();
                vt.addMovement(ev);
                vt.computeCurrentVelocity(700);
                // 获取Y方向的速度
                float mYV = vt.getYVelocity();
                if (mMoveLen == 0 || mMoveLen == -mViewHeight)
                    break;
                if (Math.abs(mYV) < 500) {
                    // 速度小于一定值的时候当作精巧释放,这时候两个View往哪移动取决于滑动的距离
                    if (mMoveLen <= -mViewHeight / 2) {
                        state = AUTO_UP;
                    } else if (mMoveLen > -mViewHeight / 2) {
                        state = AUTO_DOWN;
                    }
                } else {
                    // 抬起手指时速度方向决定两个View往哪移动
                    if (mYV < 0)
                        state = AUTO_UP;
                    else
                        state = AUTO_DOWN;
                }
                mTimer.schedule(2);

                break;

        }
        try {
            super.dispatchTouchEvent(ev);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return true;
    }

    //计算组件显示的位置   mMoveLen为关键
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        topView.layout(0, (int) mMoveLen, mViewWidth,
                topView.getMeasuredHeight() + (int) mMoveLen);
        bottomView.layout(0, topView.getMeasuredHeight() + (int) mMoveLen,
                mViewWidth, topView.getMeasuredHeight() + (int) mMoveLen
                        + bottomView.getMeasuredHeight());
    }

    //得到组件的宽高
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (!isMeasured) {
            isMeasured = true;

            mViewHeight = getMeasuredHeight();
            mViewWidth = getMeasuredWidth();

            topView = getChildAt(0);
            bottomView = getChildAt(1);

            bottomView.setOnTouchListener(bottomViewTouchListener);
            topView.setOnTouchListener(topViewTouchListener);
        }
    }

    private OnTouchListener topViewTouchListener = new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            ScrollView sv = (ScrollView) v;
            //滑动到第一页的底部 处理事件
            if (sv.getScrollY() == (sv.getChildAt(0).getMeasuredHeight() - sv
                    .getMeasuredHeight()) && mCurrentViewIndex == 0)
                canPullUp = true;
            else
                canPullUp = false;
            return false;
        }
    };
    private OnTouchListener bottomViewTouchListener = new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            ScrollView sv = (ScrollView) v;
            //滑动到第二页的顶部 处理事件
            if (sv.getScrollY() == 0 && mCurrentViewIndex == 1)
                canPullDown = true;
            else
                canPullDown = false;
            return false;
        }
    };

    class MyTimer {
        private Handler handler;
        private Timer timer;
        private MyTask mTask;

        public MyTimer(Handler handler) {
            this.handler = handler;
            timer = new Timer();
        }

        public void schedule(long period) {
            if (mTask != null) {
                mTask.cancel();
                mTask = null;
            }
            mTask = new MyTask(handler);
            timer.schedule(mTask, 0, period);
        }

        public void cancel() {
            if (mTask != null) {
                mTask.cancel();
                mTask = null;
            }
        }

        class MyTask extends TimerTask {
            private Handler handler;

            public MyTask(Handler handler) {
                this.handler = handler;
            }

            @Override
            public void run() {
                handler.obtainMessage().sendToTarget();
            }

        }
    }

    private OnUpPullHintListener upl;
    private OnSecondViewShowListener l;

    public void setOnSecondViewShowListener(OnSecondViewShowListener l) {
        this.l = l;
    }

    public void setOnUpPullHintListener(OnUpPullHintListener upl) {
        this.upl = upl;
    }

    /**
     * 上拉提示
     */
    public interface OnUpPullHintListener {

        public static final int STATE_UP = 1;  //上拉提示
        public static final int STATE_DWON = 2; //滚回提示

        public void onUpPullHintListener(int state);
    }

    /**
     * 显示第二页的回调
     */
    public interface OnSecondViewShowListener {
        public void onSecondViewShow();
    }

}

使用案例

http://download.csdn.net/detail/mr_wanggang/8770745

时间: 2024-11-05 15:51:24

仿淘宝商品浏览界面, 向上拉查看详情的相关文章

Android自定义控件实战——仿淘宝商品浏览界面

转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38656929 用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个ScrollView滚动到最底下时会有提示,继续拖动才能浏览图片.仿照这个效果写一个出来并不难,只要定义一个Layout管理两个ScrollView就行了,当第一个ScrollView滑到底部时,再次向上滑动进入第二个ScrollView.效果如下: 需要注意的地方是: 1.如果是手动滑到底部需要再次按下

Vue实现仿淘宝商品详情属性选择的功能

Vue实现仿淘宝商品详情属性选择的功能 2018年09月07日 17:13:35 yx_cos 阅读数:278 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrAndValuees: [   {   'attrId': 1,   'attrName': '味道',   'valuees': [   {   'attrId': 1,   'value': '橘子味'   },   {   'a

转::iOS 仿淘宝,上拉进入详情页面

今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的 1 // 2 // ViewController.m 3 // 仿淘宝,上拉进入详情 4 // 5 // Created by Amydom on 16/11/22. 6 // Copyright ? 2016年 Amydom. All rights reserved. 7 // 8 9 #import "ViewCont

Listview嵌套Viewpager实现仿淘宝搜狐广告主页,并实现listview的下拉刷新

Android实现功能:Listview嵌套viewpager仿淘宝搜狐视频主页面,和listview的下拉刷新. 什么都不说了:直接上图说效果 listview嵌套viewpager实现仿淘宝的广告滑动主页面 源码连接:(http://download.csdn.net/detail/qq_30000411/9528977) APK下载连接:(http://download.csdn.net/detail/qq_30000411/9528973) 下面给出我源码的主要文件构成: MyListV

一款仿淘宝购物的商品列表页面多条件查询(含有单选和全部)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

Ecshop 商品页配送方式添加 实现仿淘宝按地区显示运费

Ecshop实现仿淘宝按地区显示运费 淘宝网(Taobao)购物的宝贝详情页面,可以针对不同地区显示不同运费,运费由后台设定:结算时间,按重量.件数计算运费.Ecshop本身有配送方式插件,已有多家物流公司插件,例如:顺丰快递.申通快递.圆通快递等.本文介绍如何实现按地区显示运费,并且让每个商品绑定运费模板. 1.Ecshop后台配送方式创建 进入Ecshop后台"系统设置-->配送方式",将“顺丰快递”改名称为“粮食快递”,配送ID号为6. 2.商品绑定配送方式的运费模板 2.

高仿淘宝客户端

高仿淘宝客户端 仿淘宝安卓客户端的demo源码,主要实现了:商品的基本展示.宝贝详情,图片展示的放大缩小功能.界面之间切换的动画.购物车多项删除.弹窗的动画效果.首页广告的轮播效果.获得本机具有传感器的列表.listView的上拉刷新,下拉加载功能.二维码扫描.刮刮乐等功能和效果. 下载地址:http://www.devstore.cn/code/info/925.html 运行截图:    

Android--仿淘宝商品详情(继续拖动查看详情)及标题栏渐变

绪论 最近一直比较忙,也没抽出时间来写博客,也不得不说是自己犯了懒癌,人要是一懒就什么事都不想做了,如果不能坚持下来的话,那么估计就废了,??.最近自己攒了好多东西,接下来的时间我会慢慢都分享出来的.好了废话不多说了,下面我们开始正题: 今天要分享的是淘宝的详情页,之前在淘宝上买东西的时候看到淘宝的详情页效果比较不错,所以今天就来仿一下它的效果吧,可能没有淘宝的好,希望见谅啊. 效果图 先上效果图: 这是淘宝的: ? 我自己做的: ? 怎么样效果还差不多吧?GIF图效果看的不太清楚,见谅. 下面

高仿淘宝和聚美优品商城详情页实现《IT蓝豹》

android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页.使用ViewDragHelper,滑动比较流畅. scrollView滑动到底部的时候,再行向上拖动时,添加了一些阻力.本项目来源:https://github.com/xmuSistone/android-vertical-slide-view主要代码如下:首先先看一下布局:  <com.stone.verticalslide.DragLayout        a