欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-05 17:10:13
绪论 最近一直比较忙,也没抽出时间来写博客,也不得不说是自己犯了懒癌,人要是一懒就什么事都不想做了,如果不能坚持下来的话,那么估计就废了,��...

绪论

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

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

先上效果图:

这是淘宝的:

 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====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上的。

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