前言

前面在介绍控件TabLayout控件和CoordinatorLayout使用的时候说了下实现京东、天猫详情页面的效果，今天要说的是优化版，是我们线上实现的效果，首先看一张效果：

项目结构分析

首先我们来分析一下要实现上面的效果，我们需要怎么做。顶部是一个可以滑动切换Tab，可以用ViewPager+Fragment实现，也可以使用系统的TabLayout控件实现；而下面的 View是一个可以滑动拖动效果的View，可以采用网上一个叫做DragLayout的控件，我这里是自己实现了一个，主要是通过对View的事件分发的一些处理；然后滑动到下面就是一个图文详情的View（Fragment），本页面包含两个界面：详情页面和参数页面；最后是评价的View（Fragment）。经过上面的分析，我们的界面至少需要4个Fragement，首先来看一下项目结构：

代码讲解

代码比较多，这里只讲解几个核心的方法类。首先我们来看一下我们自己是的这个具有阻尼效果的View，我们知道要实现的效果，我们需要对View的事件做一个全面的实现。这里首先说一下View的事件分发的流程：

onInterceptTouchEvent()–>dispatchTouchEvent()–>onTouchEvent();

首先我们需要对View传过来的事件做一个拦截：

ensureTarget();
  if (null == mTarget) {
   return false;
  }
  if (!isEnabled()) {
   return false;
  }
  final int aciton = MotionEventCompat.getActionMasked(ev);
  boolean shouldIntercept = false;
  switch (aciton) {
   case MotionEvent.ACTION_DOWN: {
    mInitMotionX = ev.getX();
    mInitMotionY = ev.getY();
    shouldIntercept = false;
    break;
   }
   case MotionEvent.ACTION_MOVE: {
    final float x = ev.getX();
    final float y = ev.getY();

    final float xDiff = x - mInitMotionX;
    final float yDiff = y - mInitMotionY;

    if (canChildScrollVertically((int) yDiff)) {
     shouldIntercept = false;
    } else {
     final float xDiffabs = Math.abs(xDiff);
     final float yDiffabs = Math.abs(yDiff);

     if (yDiffabs > mTouchSlop && yDiffabs >= xDiffabs
       && !(mStatus == Status.CLOSE && yDiff > 0
       || mStatus == Status.OPEN && yDiff < 0)) {
      shouldIntercept = true;
     }
    }
    break;
   }
   case MotionEvent.ACTION_UP:
   case MotionEvent.ACTION_CANCEL: {
    shouldIntercept = false;
    break;
   }
  }
  return shouldIntercept;

最后转发给onTouchEvent

ensureTarget();
  if (null == mTarget) {
   return false;
  }
  if (!isEnabled()) {
   return false;
  }
  boolean wantTouch = true;
  final int action = MotionEventCompat.getActionMasked(ev);
  switch (action) {
   case MotionEvent.ACTION_DOWN: {
    if (mTarget instanceof View) {
     wantTouch = true;
    }
    break;
   }

   case MotionEvent.ACTION_MOVE: {
    final float y = ev.getY();
    final float yDiff = y - mInitMotionY;
    if (canChildScrollVertically(((int) yDiff))) {
     wantTouch = false;
    } else {
     processTouchEvent(yDiff);
     wantTouch = true;
    }
    break;
   }
   case MotionEvent.ACTION_UP:
   case MotionEvent.ACTION_CANCEL: {
    finishTouchEvent();
    wantTouch = false;
    break;
   }
  }
  return wantTouch;

滑动事件完了之后我们需要调用request方法对View做一个重绘：

final int left = l;
  final int right = r;
  int top;
  int bottom;
  final int offset = (int) mSlideOffset;
  View child;
  for (int i = 0; i < getChildCount(); i++) {
   child = getChildAt(i);
   if (child.getVisibility() == GONE) {
    continue;
   }
   if (child == mBehindView) {
    top = b + offset;
    bottom = top + b - t;
   } else {
    top = t + offset;
    bottom = b + offset;
   }
   child.layout(left, top, right, bottom);
  }

上下滑动也是涉及到两个界面：mFrontView和mBehindView，然后通过判断滑动事件来显示哪一个View。具体看代码：

package com.xzh.gooddetail.view;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Parcel;
import android.os.Parcelable;
import android.support.v4.view.MotionEventCompat;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import com.xzh.gooddetail.R;

public class SlideDetailsLayout extends ViewGroup {

 public interface OnSlideDetailsListener {
  void onStatusChanged(Status status);
 }

 public enum Status {
  CLOSE,
  OPEN;

  public static Status valueOf(int stats) {
   if (0 == stats) {
    return CLOSE;
   } else if (1 == stats) {
    return OPEN;
   } else {
    return CLOSE;
   }
  }
 }

 private static final float DEFAULT_PERCENT = 0.2f;
 private static final int DEFAULT_DURATION = 300;

 private View mFrontView;
 private View mBehindView;

 private float mTouchSlop;
 private float mInitMotionY;
 private float mInitMotionX;

 private View mTarget;
 private float mSlideOffset;
 private Status mStatus = Status.CLOSE;
 private boolean isFirstShowBehindView = true;
 private float mPercent = DEFAULT_PERCENT;
 private long mDuration = DEFAULT_DURATION;
 private int mDefaultPanel = 0;

 private OnSlideDetailsListener mOnSlideDetailsListener;

 public SlideDetailsLayout(Context context) {
  this(context, null);
 }

 public SlideDetailsLayout(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public SlideDetailsLayout(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);

  TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SlideDetailsLayout, defStyleAttr, 0);
  mPercent = a.getFloat(R.styleable.SlideDetailsLayout_percent, DEFAULT_PERCENT);
  mDuration = a.getInt(R.styleable.SlideDetailsLayout_duration, DEFAULT_DURATION);
  mDefaultPanel = a.getInt(R.styleable.SlideDetailsLayout_default_panel, 0);
  a.recycle();

  mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
 }

 public void setOnSlideDetailsListener(OnSlideDetailsListener listener) {
  this.mOnSlideDetailsListener = listener;
 }

 public void smoothOpen(boolean smooth) {
  if (mStatus != Status.OPEN) {
   mStatus = Status.OPEN;
   final float height = -getMeasuredHeight();
   animatorSwitch(0, height, true, smooth ? mDuration : 0);
  }
 }

 public void smoothClose(boolean smooth) {
  if (mStatus != Status.CLOSE) {
   mStatus = Status.CLOSE;
   final float height = -getMeasuredHeight();
   animatorSwitch(height, 0, true, smooth ? mDuration : 0);
  }
 }


 @Override
 protected LayoutParams generateDefaultLayoutParams() {
  return new MarginLayoutParams(MarginLayoutParams.WRAP_CONTENT, MarginLayoutParams.WRAP_CONTENT);
 }

 @Override
 public LayoutParams generateLayoutParams(AttributeSet attrs) {
  return new MarginLayoutParams(getContext(), attrs);
 }

 @Override
 protected LayoutParams generateLayoutParams(LayoutParams p) {
  return new MarginLayoutParams(p);
 }

 @Override
 protected void onFinishInflate() {
  final int childCount = getChildCount();
  if (1 >= childCount) {
   throw new RuntimeException("SlideDetailsLayout only accept childs more than 1!!");
  }
  mFrontView = getChildAt(0);
  mBehindView = getChildAt(1);
  if (mDefaultPanel == 1) {
   post(new Runnable() {
    @Override
    public void run() {
     smoothOpen(false);
    }
   });
  }
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  final int pWidth = MeasureSpec.getSize(widthMeasureSpec);
  final int pHeight = MeasureSpec.getSize(heightMeasureSpec);

  final int childWidthMeasureSpec =
    MeasureSpec.makeMeasureSpec(pWidth, MeasureSpec.EXACTLY);
  final int childHeightMeasureSpec =
    MeasureSpec.makeMeasureSpec(pHeight, MeasureSpec.EXACTLY);

  View child;
  for (int i = 0; i < getChildCount(); i++) {
   child = getChildAt(i);
   if (child.getVisibility() == GONE) {
    continue;
   }
   measureChild(child, childWidthMeasureSpec, childHeightMeasureSpec);
  }
  setMeasuredDimension(pWidth, pHeight);
 }

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
  final int left = l;
  final int right = r;
  int top;
  int bottom;
  final int offset = (int) mSlideOffset;
  View child;
  for (int i = 0; i < getChildCount(); i++) {
   child = getChildAt(i);
   if (child.getVisibility() == GONE) {
    continue;
   }
   if (child == mBehindView) {
    top = b + offset;
    bottom = top + b - t;
   } else {
    top = t + offset;
    bottom = b + offset;
   }
   child.layout(left, top, right, bottom);
  }
 }

 @Override
 public boolean onInterceptTouchEvent(MotionEvent ev) {
  ensureTarget();
  if (null == mTarget) {
   return false;
  }
  if (!isEnabled()) {
   return false;
  }
  final int aciton = MotionEventCompat.getActionMasked(ev);
  boolean shouldIntercept = false;
  switch (aciton) {
   case MotionEvent.ACTION_DOWN: {
    mInitMotionX = ev.getX();
    mInitMotionY = ev.getY();
    shouldIntercept = false;
    break;
   }
   case MotionEvent.ACTION_MOVE: {
    final float x = ev.getX();
    final float y = ev.getY();

    final float xDiff = x - mInitMotionX;
    final float yDiff = y - mInitMotionY;

    if (canChildScrollVertically((int) yDiff)) {
     shouldIntercept = false;
    } else {
     final float xDiffabs = Math.abs(xDiff);
     final float yDiffabs = Math.abs(yDiff);

     if (yDiffabs > mTouchSlop && yDiffabs >= xDiffabs
       && !(mStatus == Status.CLOSE && yDiff > 0
       || mStatus == Status.OPEN && yDiff < 0)) {
      shouldIntercept = true;
     }
    }
    break;
   }
   case MotionEvent.ACTION_UP:
   case MotionEvent.ACTION_CANCEL: {
    shouldIntercept = false;
    break;
   }
  }
  return shouldIntercept;
 }

 @Override
 public boolean onTouchEvent(MotionEvent ev) {
  ensureTarget();
  if (null == mTarget) {
   return false;
  }
  if (!isEnabled()) {
   return false;
  }
  boolean wantTouch = true;
  final int action = MotionEventCompat.getActionMasked(ev);
  switch (action) {
   case MotionEvent.ACTION_DOWN: {
    if (mTarget instanceof View) {
     wantTouch = true;
    }
    break;
   }

   case MotionEvent.ACTION_MOVE: {
    final float y = ev.getY();
    final float yDiff = y - mInitMotionY;
    if (canChildScrollVertically(((int) yDiff))) {
     wantTouch = false;
    } else {
     processTouchEvent(yDiff);
     wantTouch = true;
    }
    break;
   }
   case MotionEvent.ACTION_UP:
   case MotionEvent.ACTION_CANCEL: {
    finishTouchEvent();
    wantTouch = false;
    break;
   }
  }
  return wantTouch;
 }

 private void processTouchEvent(final float offset) {
  if (Math.abs(offset) < mTouchSlop) {
   return;
  }

  final float oldOffset = mSlideOffset;
  if (mStatus == Status.CLOSE) {
   // reset if pull down
   if (offset >= 0) {
    mSlideOffset = 0;
   } else {
    mSlideOffset = offset;
   }

   if (mSlideOffset == oldOffset) {
    return;
   }

  } else if (mStatus == Status.OPEN) {
   final float pHeight = -getMeasuredHeight();
   if (offset <= 0) {
    mSlideOffset = pHeight;
   } else {
    final float newOffset = pHeight + offset;
    mSlideOffset = newOffset;
   }

   if (mSlideOffset == oldOffset) {
    return;
   }
  }
  requestLayout();
 }

 private void finishTouchEvent() {
  final int pHeight = getMeasuredHeight();
  final int percent = (int) (pHeight * mPercent);
  final float offset = mSlideOffset;

  boolean changed = false;

  if (Status.CLOSE == mStatus) {
   if (offset <= -percent) {
    mSlideOffset = -pHeight;
    mStatus = Status.OPEN;
    changed = true;
   } else {
    mSlideOffset = 0;
   }
  } else if (Status.OPEN == mStatus) {
   if ((offset + pHeight) >= percent) {
    mSlideOffset = 0;
    mStatus = Status.CLOSE;
    changed = true;
   } else {
    mSlideOffset = -pHeight;
   }
  }

  animatorSwitch(offset, mSlideOffset, changed);
 }

 private void animatorSwitch(final float start, final float end) {
  animatorSwitch(start, end, true, mDuration);
 }

 private void animatorSwitch(final float start, final float end, final long duration) {
  animatorSwitch(start, end, true, duration);
 }

 private void animatorSwitch(final float start, final float end, final boolean changed) {
  animatorSwitch(start, end, changed, mDuration);
 }

 private void animatorSwitch(final float start,
        final float end,
        final boolean changed,
        final long duration) {
  ValueAnimator animator = ValueAnimator.ofFloat(start, end);
  animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
   @Override
   public void onAnimationUpdate(ValueAnimator animation) {
    mSlideOffset = (float) animation.getAnimatedValue();
    requestLayout();
   }
  });
  animator.addListener(new AnimatorListenerAdapter() {
   @Override
   public void onAnimationEnd(Animator animation) {
    super.onAnimationEnd(animation);
    if (changed) {
     if (mStatus == Status.OPEN) {
      checkAndFirstOpenPanel();
     }

     if (null != mOnSlideDetailsListener) {
      mOnSlideDetailsListener.onStatusChanged(mStatus);
     }
    }
   }
  });
  animator.setDuration(duration);
  animator.start();
 }

 private void checkAndFirstOpenPanel() {
  if (isFirstShowBehindView) {
   isFirstShowBehindView = false;
   mBehindView.setVisibility(VISIBLE);
  }
 }

 private void ensureTarget() {
  if (mStatus == Status.CLOSE) {
   mTarget = mFrontView;
  } else {
   mTarget = mBehindView;
  }
 }

 protected boolean canChildScrollVertically(int direction) {
  if (mTarget instanceof AbsListView) {
   return canListViewSroll((AbsListView) mTarget);
  } else if (mTarget instanceof FrameLayout ||
    mTarget instanceof RelativeLayout ||
    mTarget instanceof LinearLayout) {
   View child;
   for (int i = 0; i < ((ViewGroup) mTarget).getChildCount(); i++) {
    child = ((ViewGroup) mTarget).getChildAt(i);
    if (child instanceof AbsListView) {
     return canListViewSroll((AbsListView) child);
    }
   }
  }

  if (android.os.Build.VERSION.SDK_INT < 14) {
   return ViewCompat.canScrollVertically(mTarget, -direction) || mTarget.getScrollY() > 0;
  } else {
   return ViewCompat.canScrollVertically(mTarget, -direction);
  }
 }

 protected boolean canListViewSroll(AbsListView absListView) {
  if (mStatus == Status.OPEN) {
   return absListView.getChildCount() > 0
     && (absListView.getFirstVisiblePosition() > 0 || absListView.getChildAt(0)
     .getTop() <
     absListView.getPaddingTop());
  } else {
   final int count = absListView.getChildCount();
   return count > 0
     && (absListView.getLastVisiblePosition() < count - 1
     || absListView.getChildAt(count - 1)
     .getBottom() > absListView.getMeasuredHeight());
  }
 }

 @Override
 protected Parcelable onSaveInstanceState() {
  SavedState ss = new SavedState(super.onSaveInstanceState());
  ss.offset = mSlideOffset;
  ss.status = mStatus.ordinal();
  return ss;
 }

 @Override
 protected void onRestoreInstanceState(Parcelable state) {
  SavedState ss = (SavedState) state;
  super.onRestoreInstanceState(ss.getSuperState());
  mSlideOffset = ss.offset;
  mStatus = Status.valueOf(ss.status);

  if (mStatus == Status.OPEN) {
   mBehindView.setVisibility(VISIBLE);
  }

  requestLayout();
 }

 static class SavedState extends BaseSavedState {

  private float offset;
  private int status;

  public SavedState(Parcel source) {
   super(source);
   offset = source.readFloat();
   status = source.readInt();
  }

  public SavedState(Parcelable superState) {
   super(superState);
  }

  @Override
  public void writeToParcel(Parcel out, int flags) {
   super.writeToParcel(out, flags);
   out.writeFloat(offset);
   out.writeInt(status);
  }

  public static final Creator<SavedState> CREATOR =
    new Creator<SavedState>() {
     public SavedState createFromParcel(Parcel in) {
      return new SavedState(in);
     }

     public SavedState[] newArray(int size) {
      return new SavedState[size];
     }
    };
 }
}

接下来就是一些Fragment等的页面填充，也没啥好讲的，代码又很多可以优化的地方，在优化的地方，笔者也列出了优化的方案，大家可以根据自己的实际情况做页面级的优化。

源码下载：http://xiazai./201701/yuanma/AndriodGoodDetail().rar

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

# Android仿京东商品详情页  # Android仿天猫商品详情页  # Android商品详情页  # Android 仿京东秒杀倒计时代码  # Android 仿淘宝、京东商品详情页向上拖动查看图文详情控件DEMO详解  # Android中使用TextView实现高仿京东淘宝各种倒计时效果  # Android 仿京东、拼多多商品分类页的示例代码  # Android高仿京东垂直循环滚动新闻栏  # Android 仿京东侧滑筛选实例代码  # Android仿支付宝、京东的密码键盘和输入框  # Android仿京东、天猫下拉刷新效果  # android仿京东商品属性筛选功能  # Android实现京东秒杀界面  # 做一个  # 是一个  # 自己的  # 的是  # 几个  # 出了  # 说了  # 可以用  # 线上  # 实际情况  # 可以使用  # 怎么做  # 拖动  # 涉及到  # 可以根据  # 比较多  # 本页面  # 没啥  # 大家多多  # 源码下载 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 在Oracle关闭情况下如何修改spfile的参数  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】  打造顶配客厅影院，这份100寸电视推荐名单请查收  Laravel如何编写单元测试和功能测试？（PHPUnit示例）  什么是javascript作用域_全局和局部作用域有什么区别？  PHP正则匹配日期和时间(时间戳转换)的实例代码  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  Windows10如何更改计算机工作组_Win10系统属性修改Workgroup  Laravel如何实现本地化和多语言支持？（i18n教程）  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  javascript基本数据类型及类型检测常用方法小结  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  BootStrap整体框架之基础布局组件  网站制作公司哪里好做,成都网站制作公司哪家做得比较好，更正规？  canvas 画布在主流浏览器中的尺寸限制详细介绍  大同网页,大同瑞慈医院官网？  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  Android Socket接口实现即时通讯实例代码  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  Laravel怎么返回JSON格式数据_Laravel API资源Response响应格式化【技巧】  Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践  如何快速登录WAP自助建站平台？  如何基于PHP生成高效IDC网络公司建站源码？  Laravel怎么防止CSRF攻击_Laravel CSRF保护中间件原理与实践  网站图片在线制作软件,怎么在图片上做链接？  Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】  Laravel如何使用Contracts（契约）进行编程_Laravel契约接口与依赖反转  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  微博html5版本怎么弄发超话_超话进入入口及发帖格式要求【教程】  bing浏览器学术搜索入口_bing学术文献检索地址  JavaScript如何实现类型判断_typeof和instanceof有什么区别  如何在 Python 中将列表项按字母顺序编号（a.、b.、c. …）  专业商城网站制作公司有哪些,pi商城官网是哪个？  如何快速搭建高效可靠的建站解决方案？  如何在IIS中新建站点并配置端口与物理路径？  Linux系统命令中screen命令详解  Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  Android中Textview和图片同行显示(文字超出用省略号，图片自动靠右边)  IOS倒计时设置UIButton标题title的抖动问题  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  黑客入侵网站服务器的常见手法有哪些？  如何用虚拟主机快速搭建网站？详细步骤解析  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  实例解析angularjs的filter过滤器  Laravel如何使用Collections进行数据处理？（实用方法示例）  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  Laravel如何处理异常和错误？（Handler示例）