热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

Android仿淘宝商品拖动查看详情及标题栏渐变功能

这篇文章主要介绍了Android仿淘宝商品拖动查看详情及标题栏渐变功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

绪论

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

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

先上效果图:

这是淘宝的:

 

我自己做的:

 

怎么样效果还差不多吧?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====mView+mViewHeight);
   System.out.println("======OnMeasure====mView+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上的。

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


推荐阅读
  • 详解 | 日志系统ViseLog的基本使用与功能
    本文详细介绍了日志系统ViseLog的使用方法及其核心功能,旨在帮助开发者更好地理解和利用这一工具,提高开发效率。 ... [详细]
  • 本文介绍了在Android项目中实现时间轴效果的方法,通过自定义ListView的Item布局和适配器逻辑,实现了动态显示和隐藏时间标签的功能。文中详细描述了布局文件、适配器代码以及时间格式化工具类的具体实现。 ... [详细]
  • ServletContext接口在Java Web开发中扮演着重要角色,它提供了一种方式来获取关于整个Web应用程序的信息。通过ServletContext,开发者可以访问初始化参数、共享数据以及应用资源。 ... [详细]
  • Spring Cloud Config 使用 Vault 作为配置存储
    本文探讨了如何在Spring Cloud Config中集成HashiCorp Vault作为配置存储解决方案,基于Spring Cloud Hoxton.RELEASE及Spring Boot 2.2.1.RELEASE版本。文章还提供了详细的配置示例和实践建议。 ... [详细]
  • 本文探讨了Web开发与游戏开发之间的主要区别,旨在帮助开发者更好地理解两种开发领域的特性和需求。文章基于作者的实际经验和网络资料整理而成。 ... [详细]
  • 本文将指导您如何在Docker环境中高效地搜索、下载Redis镜像,并通过指定或不指定配置文件的方式启动Redis容器。同时,还将介绍如何使用redis-cli工具连接到您的Redis实例。 ... [详细]
  • 本文详细介绍了如何在Android应用中使用GridView组件以网格形式展示数据(如文本和图像)。通过行列布局,实现类似矩阵的数据展示效果。 ... [详细]
  • 全能终端工具推荐:高效、免费、易用
    介绍一款备受好评的全能型终端工具——MobaXterm,它不仅功能强大,而且完全免费,适合各类用户使用。 ... [详细]
  • Android中实现复合旋转动画效果
    本文将探讨如何在Android应用中实现动态且吸引人的旋转动画。通过结合多种动画类型,如透明度变化、旋转、缩放和位移,可以创造出更为复杂的视觉效果。我们将从XML布局和Java代码两个方面进行详细介绍。 ... [详细]
  • Android商城应用开发指南(第二部分):创建启动欢迎页
    大多数商城应用程序在启动时会显示一个欢迎页面,以提升用户体验。本文将指导您如何实现一个基本的欢迎页,该页面会在用户打开应用后短暂展示,随后自动跳转至主界面。 ... [详细]
  • Microsoft即将发布WPF/E的CTP(Community Technology Preview)和SDK,标志着RIA(Rich Internet Application)技术的新里程碑。更多详情及下载链接请参见MSDN官方页面。 ... [详细]
  • 在Java开发中,使用BASE64编码通常可以直接利用JDK内置的库。然而,在Android平台上,由于安全性和兼容性的考虑,直接引用JDK中的`sun.misc.BASE64Decoder`会导致错误,因此需要引入第三方库来实现相同的功能。 ... [详细]
  • 本文探讨了使用Filter作为控制器的优势,以及Servlet与Filter之间的主要差异。同时,详细解析了Servlet的工作流程及其生命周期,以及ServletConfig与ServletContext的区别与应用场景。 ... [详细]
  • Android中解析XML文件的实践指南
    本文详细介绍了在Android应用开发中解析XML文件的方法,包括从本地文件和网络资源获取XML文件的不同途径,以及使用DOM、SAX和PULL三种解析方式的具体实现。 ... [详细]
  • 前言Git是目前最流行的版本控制系统,在它的基础之上,GitHub和GitLab成为当前最流行的代码托管平台,它们均提供的代码评审、项目管理、持续集成等功能,越来越多的互联网企业都 ... [详细]
author-avatar
ddcall
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有