热门标签 | 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上的。

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


推荐阅读
  • 解决基于XML配置的MyBatis在Spring整合中出现“无效绑定语句(未找到):com.music.dao.MusicDao.findAll”问题的方法
    在将Spring与MyBatis进行整合时,作者遇到了“无效绑定语句(未找到):com.music.dao.MusicDao.findAll”的问题。该问题主要出现在使用XML文件配置DAO层的情况下,而注解方式配置则未出现类似问题。作者详细分析了两个配置文件之间的差异,并最终找到了解决方案。本文将详细介绍问题的原因及解决方法,帮助读者避免类似问题的发生。 ... [详细]
  • 在尝试对从复杂 XSD 生成的类进行序列化时,遇到了 `NullReferenceException` 错误。尽管已经花费了数小时进行调试和搜索相关资料,但仍然无法找到问题的根源。希望社区能够提供一些指导和建议,帮助解决这一难题。 ... [详细]
  • 深入解析 Android 选择器与形状绘制技术
    本文深入探讨了 Android 中选择器(Selector)与形状绘制(Shape Drawing)技术的应用与实现。重点分析了 `Selector` 的 `item` 元素,其中包括 `android:drawable` 属性的使用方法及其在不同状态下的表现。此外,还详细介绍了如何通过 XML 定义复杂的形状和渐变效果,以提升 UI 设计的灵活性和美观性。 ... [详细]
  • 在基于.NET框架的分层架构实践中,为了实现各层之间的松散耦合,本文详细探讨了依赖注入(DI)和控制反转(IoC)容器的设计与实现。通过合理的依赖管理和对象创建,确保了各层之间的单向调用关系,从而提高了系统的可维护性和扩展性。此外,文章还介绍了几种常见的IoC容器实现方式及其应用场景,为开发者提供了实用的参考。 ... [详细]
  • ASP11:深入解析与应用展望本文详细探讨了 ASP11 中的 `AppRelativeTemplateSourceDirectory` 属性,该属性用于获取或设置包含控件的 Page 或 UserControl 对象的应用程序相对虚拟目录。此外,文章还介绍了 1.0 版本中的 Binding 机制,分析了其在实际开发中的应用和优化方法,为开发者提供了全面的技术指导。 ... [详细]
  • 使用CardView实现圆角和圆形效果:边角与半径的精准控制 ... [详细]
  • 本文深入探讨了 Android DrawingView 的优化技巧与实现方法,重点介绍了如何实现平滑绘制效果。通过支持常见的绘图工具和形状,以及图层变换功能,提升了用户体验。文章详细解析了绘制过程中的性能优化策略,包括减少重绘次数、使用硬件加速和优化内存管理等技术,为开发者提供了实用的参考。 ... [详细]
  • Git基础操作指南:掌握必备技能
    掌握 Git 基础操作是每个开发者必备的技能。本文详细介绍了 Git 的基本命令和使用方法,包括初始化仓库、配置用户信息、添加文件、提交更改以及查看版本历史等关键步骤。通过这些操作,读者可以快速上手并高效管理代码版本。例如,使用 `git config --global user.name` 和 `git config --global user.email` 来设置全局用户名和邮箱,确保每次提交时都能正确标识提交者信息。 ... [详细]
  • 本文介绍了Android动画的基本概念及其主要类型。Android动画主要包括三种形式:视图动画(也称为补间动画或Tween动画),主要通过改变视图的属性来实现动态效果;帧动画,通过顺序播放一系列预定义的图像来模拟动画效果;以及属性动画,通过对对象的属性进行平滑过渡来创建更加复杂的动画效果。每种类型的动画都有其独特的应用场景和实现方式,开发者可以根据具体需求选择合适的动画类型。 ... [详细]
  • 通过自定义 `TextView`,实现了在用户点击或焦点变化时动态调整字体颜色的效果。该方法利用了 `ColorStateList` 和 `Selector` 资源文件,确保了界面交互的流畅性和视觉效果的提升。具体实现中,通过重写 `onTouchEvent` 和 `onFocusChanged` 方法,精确控制了颜色变化的时机和状态。此外,还对性能进行了优化,确保在高频率操作下依然保持高效响应。 ... [详细]
  • 从零起步:使用IntelliJ IDEA搭建Spring Boot应用的详细指南
    从零起步:使用IntelliJ IDEA搭建Spring Boot应用的详细指南 ... [详细]
  • 本文详细探讨了Java集合框架的使用方法及其性能特点。首先,通过关系图展示了集合接口之间的层次结构,如`Collection`接口作为对象集合的基础,其下分为`List`、`Set`和`Queue`等子接口。其中,`List`接口支持按插入顺序保存元素且允许重复,而`Set`接口则确保元素唯一性。此外,文章还深入分析了不同集合类在实际应用中的性能表现,为开发者选择合适的集合类型提供了参考依据。 ... [详细]
  • 本项目在Java Maven框架下,利用POI库实现了Excel数据的高效导入与导出功能。通过优化数据处理流程,提升了数据操作的性能和稳定性。项目已发布至GitHub,当前最新版本为0.0.5。该项目不仅适用于小型应用,也可扩展用于大型企业级系统,提供了灵活的数据管理解决方案。GitHub地址:https://github.com/83945105/holygrail,Maven坐标:`com.github.83945105:holygrail:0.0.5`。 ... [详细]
  • 本文介绍了如何通过掌握 IScroll 技巧来实现流畅的上拉加载和下拉刷新功能。首先,需要按正确的顺序引入相关文件:1. Zepto;2. iScroll.js;3. scroll-probe.js。此外,还提供了完整的代码示例,可在 GitHub 仓库中查看。通过这些步骤,开发者可以轻松实现高效、流畅的滚动效果,提升用户体验。 ... [详细]
  • Spring框架入门指南:专为新手打造的详细学习笔记
    Spring框架是Java Web开发中广泛应用的轻量级应用框架,以其卓越的功能和出色的性能赢得了广大开发者的青睐。本文为初学者提供了详尽的学习指南,涵盖基础概念、核心组件及实际应用案例,帮助新手快速掌握Spring框架的核心技术与实践技巧。 ... [详细]
author-avatar
寒江大哥_599
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有