绪论

最近一直比较忙，也没抽出时间来写博客，也不得不说是自己犯了懒癌，人要是一懒就什么事都不想做了，如果不能坚持下来的话，那么估计就废了，��。最近自己攒了好多东西，接下来的时间我会慢慢都分享出来的。好了废话不多说了，下面我们开始正题：

今天要分享的是淘宝的详情页，之前在淘宝上买东西的时候看到淘宝的详情页效果比较不错，所以今天就来仿一下它的效果吧，可能没有淘宝的好，希望见谅啊。

先上效果图：

这是淘宝的：

我自己做的：

怎么样效果还差不多吧？GIF图效果看的不太清楚，见谅。

下面我们来看看怎么实现的吧

实现

首先我们分析淘宝布局的界面难点大致就下面3个部分：

*标题栏渐变，文字渐变隐藏

*透明通知栏（支持到4.4）

*继续拖动查看详情，Scrollview有一个弹性的效果

前两点我之前都已经实现过了，这里就不做过多介绍了，不清楚的小伙伴可以看我之前的文章：

Android带你解析ScrollView–仿QQ空间标题栏渐变

下面我们主要介绍一下Scrollview继续拖动查看详情有一个弹性动画的效果：

仔细分析这个效果我们知道上面的布局可以滑动，当滑动到下面的布局时候同时下面的布局依然可以滑动，所以我们自定义一个View来包含两个Scrollview，上面一个下面一个；然后监听Scrollview滑动到底部添加动画效果让其滑动到下面的Scrollview，当下面的Scrollview滑动到顶部的时候再添加一个向上的动画让其滑动到上面的Scrollview。

具体的可以看一下代码，注释已经很详细了：

import android.content.Context; import android.os.Handler; import android.os.Message; import android.util.AttributeSet; import android.util.Log; 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; /** * 包含两个ScrollView的容器 * */ 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 = 8.5f; 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; boolean isTuninginterface=true; 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(isTuninginterface){ isTuninginterface=false; } } } else if (state == AUTO_DOWN) { mMoveLen += SPEED; if (mMoveLen >= 0) { mMoveLen = 0; state = DONE; mCurrentViewIndex = 0; } } 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();//获得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; } @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); } } private OnTouchListener topViewTouchListener = new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { ScrollView sv = (ScrollView) v; Log.i("------getScrollY------", sv.getScrollY()+""); Log.i("------getMeasuredHeight---getChildAt---", sv.getChildAt(0).getMeasuredHeight()+""); Log.i("------getMeasuredHeight---sv---", sv.getMeasuredHeight()+""); 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(); } } } }

最后我们在xml布局里面最外层用这个ScrollviewContainer包裹着两个Scrollview分别为上面的布局和下面的布局就可以了，当然因为我们上面的布局还涉及到标题栏渐变，所以上面的Scrollview要自定义滑动监听，上面提到的文章里面有详细介绍。好了今天就到这里，有时间我会把代码整理出来放到我的Github上的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。