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

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


推荐阅读
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • 本文介绍了Android 7的学习笔记总结,包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容,并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同,否则会出现问题。 ... [详细]
  • 本文介绍了使用kotlin实现动画效果的方法,包括上下移动、放大缩小、旋转等功能。通过代码示例演示了如何使用ObjectAnimator和AnimatorSet来实现动画效果,并提供了实现抖动效果的代码。同时还介绍了如何使用translationY和translationX来实现上下和左右移动的效果。最后还提供了一个anim_small.xml文件的代码示例,可以用来实现放大缩小的效果。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • 本文讲述了如何通过代码在Android中更改Recycler视图项的背景颜色。通过在onBindViewHolder方法中设置条件判断,可以实现根据条件改变背景颜色的效果。同时,还介绍了如何修改底部边框颜色以及提供了RecyclerView Fragment layout.xml和项目布局文件的示例代码。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • Google Play推出全新的应用内评价API,帮助开发者获取更多优质用户反馈。用户每天在Google Play上发表数百万条评论,这有助于开发者了解用户喜好和改进需求。开发者可以选择在适当的时间请求用户撰写评论,以获得全面而有用的反馈。全新应用内评价功能让用户无需返回应用详情页面即可发表评论,提升用户体验。 ... [详细]
  • 自动轮播,反转播放的ViewPagerAdapter的使用方法和效果展示
    本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter,并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ... [详细]
  • Android系统移植与调试之如何修改Android设备状态条上音量加减键在横竖屏切换的时候的显示于隐藏
    本文介绍了如何修改Android设备状态条上音量加减键在横竖屏切换时的显示与隐藏。通过修改系统文件system_bar.xml实现了该功能,并分享了解决思路和经验。 ... [详细]
  • 标题: ... [详细]
  • Android开发实现的计时器功能示例
    本文分享了Android开发实现的计时器功能示例,包括效果图、布局和按钮的使用。通过使用Chronometer控件,可以实现计时器功能。该示例适用于Android平台,供开发者参考。 ... [详细]
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社区 版权所有