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

标签: 标题渐变 仿淘宝 继续拖动 scrollview 透明状态栏
12493人阅读 评论(17) 收藏 举报
分类:

本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发。

源码已经上传到我的Github上了,希望小伙伴们Follow,star,fork
(https://github.com/Hankkin/TaoBaoDetailDemo)

二维码下载预览:

这里写图片描述

绪论

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

效果图

先上效果图:
这是淘宝的:

淘宝

我自己做的:

My

怎么样效果还差不多吧?GIF图效果看的不太清楚,见谅。
下面我们来看看怎么实现的吧

实现

首先我们分析淘宝布局的界面难点大致就下面3个部分:
*标题栏渐变,文字渐变隐藏
*透明通知栏(支持到4.4)
*继续拖动查看详情,Scrollview有一个弹性的效果
前两点我之前都已经实现过了,这里就不做过多介绍了,不清楚的小伙伴可以看我之前的文章:
Android带你解析ScrollView–仿QQ空间标题栏渐变
下面我们主要介绍一下Scrollview继续拖动查看详情有一个弹性动画的效果:
仔细分析这个效果我们知道上面的布局可以滑动,当滑动到下面的布局时候同时下面的布局依然可以滑动,所以我们自定义一个View来包含两个Scrollview,上面一个下面一个;然后监听Scrollview滑动到底部添加动画效果让其滑动到下面的Scrollview,当下面的Scrollview滑动到顶部的时候再添加一个向上的动画让其滑动到上面的Scrollview。
下面我们来看一下代码实现:
1.首先我们重写拦截事件:

在DOWN行为时获取跟踪触摸屏事件的速率也就是VelocityTracker,设置mEvents=0,可以拖拽;当触发ACTION_POINTER_UP事件时防止多点拖拽。

当触发MOVE事件时,我们记录下拖拽的距离并且处理事件冲突。
并且当view确定自身已经不再适合现有的区域时,该view本身调用这个方法要求parent view重新调用他的onMeasure onLayout来对重新设置自己位置。

当手指抬起触发UP事件时,通过判断y轴滑动速度以及手指滑动方向利用计时器实现上下View的滚动事件,这里详细介绍一下requestLayout()这个方法

我们可以理解为重新布局了一下view;
用途:有时我们在改变一个view 的内容之后 可能会造成显示出现错误,比如写ListView的时候 重用convertview中的某个TextView 可能因为前后填入的text长度不同而造成显示出错,此时我们可以在改变内容之后调用requestLayout方法加以解决。
Invalidate和postInvalidate和requestLayout都是用来刷新view控件的:
主线程可以直接调用Invalidate()方法刷新。
子线程可以直接调用postInvalidate()方法刷新。
API的描述是这样的 : Invalidatethe whole view. If the view is visible, onDraw(Canvas) will be called at somepoint in the future. This must be called from a UI thread. To call from anon-UI thread, call postInvalidate().。当Invalidate()被调用的时候,View的OnDraw()就会被调用,Invalidate()必须是在UI线程中被调用,如果在新线程中更新视图的就调用postInvalidate()。

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        switch (ev.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                if (vt == null)
                    vt = VelocityTracker.obtain();//获得VelocityTracker类实例
                else
                    vt.clear();
                mLastY = ev.getY();
                System.out.println("---ACTION_DOWN-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);//将事件加入到VelocityTracker类实例中
                if (canPullUp && mCurrentViewIndex == 0 && mEvents == 0) {
                    mMoveLen += (ev.getY() - mLastY);
                    // 防止上下越界
                    if (mMoveLen > 0) {
                        mMoveLen = 0;
                        mCurrentViewIndex = 0;
                    } else if (mMoveLen < -mViewHeight) {
                        mMoveLen = -mViewHeight;
                        mCurrentViewIndex = 1;
                        if(isTuninginterface){
                            isTuninginterface=false;
                        }
                    }
                    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:当view确定自身已经不再适合现有的区域时,该view本身调用这个方法要求parent view重新调用他的onMeasure onLayout来对重新设置自己位置。
                requestLayout();
                break;
            case MotionEvent.ACTION_UP:
                mLastY = ev.getY();
                vt.addMovement(ev);
                //参数:units  你想要指定的得到的速度单位,如果值为1,代表1毫秒运动了多少像素。如果值为1000,代表 1秒内运动了多少像素
                vt.computeCurrentVelocity(700);
                // 获取Y方向的速度 可以通过getXVelocity()和getYVelocity()获得横向和竖向的速率
                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);
                try {
                    vt.recycle();
                    vt=null;
                } catch (Exception e) {
                    e.printStackTrace();
                }
                break;

        }
        super.dispatchTouchEvent(ev);
        return true;
    }

2.接下来我们重写onLayout,onMeasure方法重新测量绘制上下两个Scrollview的视图

@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();
            System.out.println("======onMeasure====mViewHeight======"+mViewHeight);
            System.out.println("======onMeasure====mViewWidth======"+mViewWidth);
            topView = getChildAt(0);
            bottomView = getChildAt(1);
            bottomView.setOnTouchListener(bottomViewTouchListener);
            topView.setOnTouchListener(topViewTouchListener);
        }
    }

3.最后重写上下两个Scrollview的touch时间监听,主要通过判是否滑动到顶、底控制是否可以上拉下拉

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;
        }
    };

最后我们在xml布局里面最外层用这个ScrollviewContainer包裹着两个Scrollview分别为上面的布局和下面的布局就可以了,当然因为我们上面的布局还涉及到标题栏渐变,所以上面的Scrollview要自定义滑动监听,上面提到的文章里面有详细介绍。
参考文章:
[猴子的沉浸状态栏]
(https://github.com/laobie/StatusBarUtil)

查看评论

上拉查看详情和下拉隐藏详情

项目商品详情页的需求,实现上拉显示和下拉隐藏详情的功能,最终效果图。核心代码 //上拉组件 @Bind(R.id.xscrollview) XScrollView mXscro...
  • liuzonrze
  • liuzonrze
  • 2017-05-08 14:05:03
  • 936

Android上拉查看详情实现

京东淘宝有那么一种效果就是,上拉可以查看宝贝的详情,这里我也实现了一个类似的效果,也可以移植到商业项目上:先看看简单的效果图 实现原理其实是利用了ScrollView的滚动和view的tou...
  • ywl5320
  • ywl5320
  • 2015-08-01 13:02:00
  • 4831

android 仿淘宝、京东商品详情页 向上拖动查看图文详情控件

一些购物类app的商品详情页面因为要展示的内容较多,一般都把商品的详情分两屏展示,第一屏展示基本信息,接着往上拖动展示更多的商品介绍信息,本文介绍通过自定义控件实现类似淘宝、京东商品详情页面的向上拖动...
  • qifengdeqingchen
  • qifengdeqingchen
  • 2016-06-13 18:18:04
  • 16278

Android上拉查看详情

  • 2015年08月01日 11:52
  • 2.23MB
  • 下载

仿淘宝商品详情页,上拉查看更多详情demo(Activity和Fragment)。2种应用场景

仿淘宝商品详情页,上拉查看更多详情demo(Activity和Fragment)。2种应用场景
  • u014620028
  • u014620028
  • 2016-12-19 10:52:31
  • 1421

Android实现上拉查看图文详情的一种想法

在京东和淘宝的商品详情页都有这样一个上拉查看图文详情的操作,感觉很有意思,就用一种简单粗暴的方式简单实现了一下其实,第一次在手机上尝试这个功能的时候,想着这不就是一个类似于列表的上拉加载更多吗?于是就...
  • TOYOTA11
  • TOYOTA11
  • 2016-03-07 23:05:04
  • 2250

android 仿京东上拉加载图文详情

仿京东上拉商品详情界面 布局
  • zx501244363xz
  • zx501244363xz
  • 2017-03-02 14:23:00
  • 571

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

最新项目中有展示类似淘宝商品详情的功能,主要实现  向上拉查看详情,百度一搜,发现有大神已经实现这个效果了 http://blog.csdn.net/zhongkejingwang/article/...
  • Mr_WangGang
  • Mr_WangGang
  • 2015-06-04 09:54:21
  • 5985

Android之scrollview底部继续拖动查看图文详情

Android之scrollview底部继续拖动查看图文详情。。
  • Android_Cll
  • Android_Cll
  • 2017-02-07 13:21:41
  • 13519

android向上拖动查看图文详情控件

摘自:http://blog.csdn.net/qifengdeqingchen/article/details/51659735   一、淘宝商品详情页效果 先看一下淘宝详情页的效果 ...
  • aiguoguo000
  • aiguoguo000
  • 2016-10-22 10:20:53
  • 1318
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 40万+
    积分: 4104
    排名: 9367
    我的微博
    博客专栏