服务器之家

服务器之家 > 正文

android 自定义ScrollView实现背景图片伸缩的实现代码及思路

时间:2021-01-18 11:03     来源/作者:Android开发网

android 自定义ScrollView实现背景图片伸缩的实现代码及思路   android 自定义ScrollView实现背景图片伸缩的实现代码及思路

  用过多米音乐的都市知道, 这个ui可以上下滑动,作用嘛---无聊中可以划划解解闷,这被锤子公司老罗称谓为“情怀”,其实叫“情味”更合适。嘿嘿.如今挪动互联网开展这么迅速,市场上已不再是那早期随便敲个app放上架就能具有几十万用户的阶段了.近来苹果公司,为了怕android下载量赶超苹果商店,大势宣称:(第 500 亿个下载应用的用户就能够获得 10,000 美元的 itunes 礼品卡,除此之外,紧随第 500 亿以后的前 50 名用户也可以获得 500 美元的礼品卡.至于挪动开展趋势,我想搞挪动it的人心里都比拟清楚,扯远了).其实应用ui殊效是应用中很大的一部分,如果同样功能的两款软件,一个功能好点如“网易新闻”,另外一个略微差点如“新浪新闻”,用户的你毫无疑难确定会选择网易客户端.总结就是“操作性”对于产品起着至关重要的因素.

    接下来我们看下如何实现,首先声明,这个实现的方式不是很好,我这里只是提出一个解决方案,大家可以根据自己的想法进行创新.

    道理:relativelayout+自定义scrollview.

    我们大致看下布局结构如图:

android 自定义ScrollView实现背景图片伸缩的实现代码及思路   android 自定义ScrollView实现背景图片伸缩的实现代码及思路

其实也没什么技术含量,我简单介绍下:红色代表的是背景照片,绿色的代表自定义scrollview,粉色是代表你要编辑的透明区域.也不过多解释,想必大家都明确,我们还是来看代码吧。

由于属于情怀殊效(没有具体的回调事件要求),那么就没有必要自定义监听,回调处理,我直接把要处理的ui注入到自定义控件中,这样她方便我也方便.

在此说明一下,前面部分实现中有误,但是也希望您仔细品读,相信您必定可以学到一些知识的。

首先我们将背景图片和顶部线条注入到该控件中。接着我们看ontouchevent事件,因为至始至终都是她在起作用.

   

复制代码 代码如下:


    /***
  * 触摸事件
  *
  * @param ev
  */
 public void commontouchevent(motionevent ev) {
  int action = ev.getaction();
  switch (action) {
  case motionevent.action_down:
   inittouchy = ev.gety();

 

   current_top = inittop = imageview.gettop();
   current_bottom = initbottom = imageview.getbottom();
   lineup_current_top = line_up_top = line_up.gettop();
   lineup_current_bottom = line_up_bottom = line_up.getbottom();
   break;
  case motionevent.action_up:
   /** 回缩动画 **/
   if (isneedanimation()) {
    animation();
   }

   ismoveing = false;
   touchy = 0;// 手指松开要归0.

   break;

  /***
   * 消除出第一次挪动计算,因为第一次无法得知deltay的高度, 然而我们也要进行初始化,就是第一次挪动的时候让滑动距离归0.
   * 以后记载精确了就正常执行.
   */
  case motionevent.action_move:

   log.e(tag, "ismoveing=" + ismoveing);

   touchy = ev.gety();

   float deltay = touchy - inittouchy;// 滑动距离

   log.e(tag, "deltay=" + deltay);

   /** 过滤: **/
   if (deltay < 0 && inner.gettop() <= 0) {
    return;
   }

   // 当滚动到最上或者最下时就不会再滚动,这时挪动布局
   isneedmove();

   if (ismoveing) {
    // 初始化头部矩形
    if (normal.isempty()) {
     // 保存正常的布局位置
     normal.set(inner.getleft(), inner.gettop(),
       inner.getright(), inner.getbottom());
    }
    // 挪动布局(手势挪动的1/3)
    float inner_move_h = deltay / 5;
    inner.layout(normal.left, (int) (normal.top + inner_move_h),
      normal.right, (int) (normal.bottom + inner_move_h));

    /** image_bg **/
    float image_move_h = deltay / 10;
    current_top = (int) (inittop + image_move_h);
    current_bottom = (int) (initbottom + image_move_h);
    imageview.layout(imageview.getleft(), current_top,
      imageview.getright(), current_bottom);

    /** line_up **/
    float line_up_h = inner_move_h;
    lineup_current_top = (int) (line_up_top + inner_move_h);
    lineup_current_bottom = (int) (line_up_bottom + inner_move_h);
    line_up.layout(line_up.getleft(), lineup_current_top,
      line_up.getright(), lineup_current_bottom);
   }
   break;

  default:
   break;

  }
 }


简单说明:

 

motionevent.action_down:触摸摁下获得相应的坐标.

motionevent.action_move:

里面有个方法isneedmove。作用:我们滑动的是scrollview自身呢,还是我们自己模拟的那种滑动.

复制代码 代码如下:

/***
  * 是不是须要挪动布局 inner.getmeasuredheight():获得的是控件的总高度
  *
  * getheight():获得的是屏幕的高度
  *
  * @return
  */
 public void isneedmove() {
  int offset = inner.getmeasuredheight() - getheight();
  int scrolly = getscrolly();
  // 如果scrollview的子view们没有超越一屏幕则scrolly == 0,直接返回true,
  //如果scrollview的子view们超越了一屏幕则 getscrolly()==offset说明滑到了scrollview的低端.这时候才返回true.
  if (scrolly == 0 || scrolly == offset) {
   ismoveing = true;
  }
 }

 

这里面用到最多的就是:view.layout(l, t, r, b);作用很简单不解释。详情请参看源码.

motionevent.action_up:就是做些善后操作,主要看animation方法.

复制代码 代码如下:


/***
  * 回缩动画
  */
 public void animation() {

 

  translateanimation image_anim = new translateanimation(0, 0,
    math.abs(inittop - current_top), 0);
  image_anim.setduration(200);
  imageview.startanimation(image_anim);

  imageview.layout(imageview.getleft(), (int) inittop,
    imageview.getright(), (int) initbottom);

  // 开启挪动动画
  translateanimation inner_anim = new translateanimation(0, 0,
    inner.gettop(), normal.top);
  inner_anim.setduration(200);
  inner.startanimation(inner_anim);
  inner.layout(normal.left, normal.top, normal.right, normal.bottom);

  /** line_up **/
  translateanimation line_up_anim = new translateanimation(0, 0,
    math.abs(line_up_top - lineup_current_top), 0);
  line_up_anim.setduration(200);
  line_up.startanimation(line_up_anim);
  line_up.layout(line_up.getleft(), line_up_top, line_up.getright(),
    line_up_bottom);

  normal.setempty();

  /** 动画执行 **/
  if (current_top > inittop + 50 && turnlistener != null)
   turnlistener.onturn();

 }

 

    这里我要简单说明一下,因为我在这里栽了有些时光.

    比如:我们的背景图片本来坐标为:(0,-190,800,300),随着手势挪动到(0,-100,800,390)挪动了90像素,那么我们的translateanimation应当如何写呢?我之前总以为不就是末尾坐标指向初始坐标不就完了,结果你会发明,动画基本不起作用而是一闪而过。原因呢,动画参数弗成以为正数.或许因为动画是以(0,0)为参照物吧.因此要把动画写成translateanimation line_up_anim = new translateanimation(0, 0,math.abs(-190- (-100)), 0);这样我们所须要的动画效果就实现了.

    但是新的问题又出现了:

    当你下拉到必定状态后然后渐渐向上挪动,会发明挪动的很快(没有回缩的反响),而挪动到最顶部的时候突然又出现反弹效果。这个效果固然不是我们所须要的那种。我们所须要的效果是:下拉到必定水平,然后反过来上拉的时候要渐渐的挪动回到原点(中央位置)停止。如果是上拉的话,不要出现反弹效果,如果是下拉松开的话,出现反弹效果。

    描述的有点乱,如果想知道具体效果的话,我提议你应用下papa,其实海内这些比拟优秀的应用ui都是抄袭国外的,如果你用facebook的话,就会发明,怎么啪啪的个人页面长的也忒像facebook了。请看下图:

android 自定义ScrollView实现背景图片伸缩的实现代码及思路  android 自定义ScrollView实现背景图片伸缩的实现代码及思路

    嘿嘿,不好意思,跑题了,针对上面出现的问题,我简单说明一下.

    首先,比如我们手势下拉了50像素,其实是使得自定义scrollview的孩子也就是linearlayout这个控件的top为50,而这个时候的getscrolly()的值仍为0,但是如果此时你停止下拉反而向上拉取的话,那么此时的getscrolly()会从0开始逐步增大,当我们挪动到顶部也就是将scrollview挪动到最底部,此时的ismoveing为true,所以你继承上拉的话会出现反弹效果。

    这个问题要如何解决呢,其实也不难,但是我纠结了好长时光,也走了很多多少弯路。在这里说明一下我的瞎跑路段以及疑难:当时我就想,getscrolly()这么不听话,我何必非要对scrollview的孩子进行操作呢,为何直接不对本控件执行layout(l,t,r,b)呢,后来就照着这个逻辑进行update,终于更改了差不多了,纠结了问题再次出现,在你下拉的时候对scrollview本身执行layout(l,t,r,b)这个方法可以实现反弹效果,但是此时你确无法进行滑动了,就是scrollview本身的滑动无缘无故的被禁止掉了.我怀疑是layout的时候参数弄错了。,后来仔细修改了下发明还是弗成以滑动,然后google了半天也杳无音讯,最后固然放弃,又回到了原点。接着揣摩。。。算是功夫不负有心人吧,最终想到了解决方案,希望对您有帮助。

    还拿上面说到的那短话,比如我们手势下拉了50像素,那么此时touch的距离也就是50像素,如果此时我们反向上拉的话,同样是须要50像素回到最初的位置。说到这里我想大家都明确了。(首先我们要将操作离开,分为up,down,如果是down的话,那么在下拉后执行上拉的时候我们禁用掉自定义控件的滑动,而是通过手势执行layout执行这50像素.)

    上面我们看部分代码:

   

复制代码 代码如下:


    /**对于初次touch操作要判断方位:up or down**/
   if (deltay < 0 && state == state.nomal) {
    state = state.up;
   } else if (deltay > 0 && state == state.nomal) {
    state = state.down;
   }

 


   if (state == state.up) {
    deltay = deltay < 0 ? deltay : 0;
    ismoveing = false;
    shuttouch = false;
   } else if (state == state.down) {
    if (getscrolly() <= deltay) {
     shuttouch = true;
     ismoveing = true;
    }
    deltay = deltay < 0 ? 0 : deltay;
   }
   

 

代码很简单,不过多解释了,不明确的话,仔细看下源码确定就明确了。

   

touch 事件处理:

 

复制代码 代码如下:


/** touch 事件处理 **/
 @override
 public boolean ontouchevent(motionevent ev) {
  if (inner != null) {
   commontouchevent(ev);
  }
  // ture:禁止控件本身的滑动.
  if (shuttouch)
   return true;
  else
   return super.ontouchevent(ev);

 

 }

 

说明:如果返回值为true,作用:禁止scrollview的滑动,此时的touch事件还存哦!!!如果对touch事件比拟熟悉的同窗,相信以为我有点空话了,哈哈,我也是个小菜鸟,也卡在这里过。

最后呢,还有个小bug,也就是那个顶部拉线,如果你让scrollview惯性滑动的话,那么你会发明,顶部线条没有追随挪动,其实就是因为惯性滑动的时候我们是获得不到getscrolly()的值得造成的,查了半天也没有找到相关资料,这个问题就临时就留在这里,有时光了在续。

这里我将源码贴出来:

复制代码 代码如下:


package com.example.scrollviewdemo;

 

import android.content.context;
import android.graphics.rect;
import android.util.attributeset;
import android.util.log;
import android.view.motionevent;
import android.view.view;
import android.view.animation.translateanimation;
import android.widget.imageview;
import android.widget.scrollview;

/**
 * 自定义scrollview
 *
 * @author jia
 *
 */
public class personalscrollview extends scrollview {

 private final string tag = personalscrollview.class.getsimplename();

 private view inner;// 孩子view

 private float touchy;// 点击时y坐标

 private float deltay;// y轴滑动的距离

 private float inittouchy;// 初次点击的y坐标

 private boolean shuttouch = false;// 是不是关闭scrollview的滑动.

 private rect normal = new rect();// 矩形(这里只是个形式,只是用于判断是不是须要动画.)

 private boolean ismoveing = false;// 是不是开始挪动.

 private imageview imageview;// 背景图控件.
 private view line_up;// 上线
 private int line_up_top;// 上线的top
 private int line_up_bottom;// 上线的bottom

 private int inittop, initbottom;// 初始高度

 private int current_top, current_bottom;// 拖动时时高度。

 private int lineup_current_top, lineup_current_bottom;// 上线

 private onturnlistener turnlistener;

 private imageview imageheader;

 public void setimageheader(imageview imageheader) {
  this.imageheader = imageheader;
 }

 // 状态:上部,下部,默认
 private enum state {
  up, down, nomal
 };

 // 默认状态
 private state state = state.nomal;

 public void setturnlistener(onturnlistener turnlistener) {
  this.turnlistener = turnlistener;
 }

 public void setline_up(view line_up) {
  this.line_up = line_up;
 }

 // 注入背景图
 public void setimageview(imageview imageview) {
  this.imageview = imageview;
 }

 /***
  * 构造方法
  *
  * @param context
  * @param attrs
  */
 public personalscrollview(context context, attributeset attrs) {
  super(context, attrs);
 }

 /***
  * 根据 xml 生成视图工作实现.该函数在生成视图的最后调用,在所有子视图添加完以后. 即使子类覆盖了 onfinishinflate
  * 方法,也应当调用父类的方法,使该方法得以执行.
  */
 @override
 protected void onfinishinflate() {
  if (getchildcount() > 0) {
   inner = getchildat(0);
  }
 }

 /** touch 事件处理 **/
 @override
 public boolean ontouchevent(motionevent ev) {
  if (inner != null) {
   commontouchevent(ev);
  }
  // ture:禁止控件本身的滑动.
  if (shuttouch)
   return true;
  else
   return super.ontouchevent(ev);

 }

 /***
  * 触摸事件
  *
  * @param ev
  */
 public void commontouchevent(motionevent ev) {
  int action = ev.getaction();
  switch (action) {
  case motionevent.action_down:
   inittouchy = ev.gety();
   current_top = inittop = imageview.gettop();
   current_bottom = initbottom = imageview.getbottom();
   if (line_up_top == 0) {
    lineup_current_top = line_up_top = line_up.gettop();
    lineup_current_bottom = line_up_bottom = line_up.getbottom();
   }
   break;
  case motionevent.action_up:
   /** 回缩动画 **/
   if (isneedanimation()) {
    animation();
   }

   if (getscrolly() == 0) {
    state = state.nomal;
   }

   ismoveing = false;
   touchy = 0;
   shuttouch = false;
   break;

  /***
   * 消除出第一次挪动计算,因为第一次无法得知deltay的高度, 然而我们也要进行初始化,就是第一次挪动的时候让滑动距离归0.
   * 以后记载精确了就正常执行.
   */
  case motionevent.action_move:

   touchy = ev.gety();
   deltay = touchy - inittouchy;// 滑动距离

   /** 对于初次touch操作要判断方位:up or down **/
   if (deltay < 0 && state == state.nomal) {
    state = state.up;
   } else if (deltay > 0 && state == state.nomal) {
    state = state.down;
   }

   if (state == state.up) {
    deltay = deltay < 0 ? deltay : 0;
    ismoveing = false;
    shuttouch = false;

    /** line_up **/
    lineup_current_top = (int) (line_up_top - getscrolly());
    lineup_current_bottom = (int) (line_up_bottom - getscrolly());

    log.e(tag, "top=" + getscrolly());

    line_up.layout(line_up.getleft(), lineup_current_top,
      line_up.getright(), lineup_current_bottom);

   } else if (state == state.down) {
    if (getscrolly() <= deltay) {
     shuttouch = true;
     ismoveing = true;
    }
    deltay = deltay < 0 ? 0 : deltay;
   }

   if (ismoveing) {
    // 初始化头部矩形
    if (normal.isempty()) {
     // 保存正常的布局位置
     normal.set(inner.getleft(), inner.gettop(),
       inner.getright(), inner.getbottom());
    }
    // 挪动布局(手势挪动的1/3)
    float inner_move_h = deltay / 5;

    inner.layout(normal.left, (int) (normal.top + inner_move_h),
      normal.right, (int) (normal.bottom + inner_move_h));

    /** image_bg **/
    float image_move_h = deltay / 10;
    current_top = (int) (inittop + image_move_h);
    current_bottom = (int) (initbottom + image_move_h);
    imageview.layout(imageview.getleft(), current_top,
      imageview.getright(), current_bottom);

    /** line_up **/
    lineup_current_top = (int) (line_up_top + inner_move_h);
    lineup_current_bottom = (int) (line_up_bottom + inner_move_h);
    line_up.layout(line_up.getleft(), lineup_current_top,
      line_up.getright(), lineup_current_bottom);
   }
   break;

  default:
   break;

  }
 }

 /***
  * 回缩动画
  */
 public void animation() {

  translateanimation image_anim = new translateanimation(0, 0,
    math.abs(inittop - current_top), 0);
  image_anim.setduration(200);
  imageview.startanimation(image_anim);

  imageview.layout(imageview.getleft(), (int) inittop,
    imageview.getright(), (int) initbottom);

  // 开启挪动动画
  translateanimation inner_anim = new translateanimation(0, 0,
    inner.gettop(), normal.top);
  inner_anim.setduration(200);
  inner.startanimation(inner_anim);
  inner.layout(normal.left, normal.top, normal.right, normal.bottom);

  /** line_up **/
  translateanimation line_up_anim = new translateanimation(0, 0,
    math.abs(line_up_top - lineup_current_top), 0);
  line_up_anim.setduration(200);
  line_up.startanimation(line_up_anim);
  line_up.layout(line_up.getleft(), line_up_top, line_up.getright(),
    line_up_bottom);

  normal.setempty();

  /** 动画执行 **/
  if (current_top > inittop + 50 && turnlistener != null)
   turnlistener.onturn();

 }

 /** 是不是须要开启动画 **/
 public boolean isneedanimation() {
  return !normal.isempty();
 }

 /***
  * 执行翻转
  *
  * @author jia
  *
  */
 public interface onturnlistener {

  /** 必须到达必定水平才执行 **/
  void onturn();
 }

}

 

效果图:

 

android 自定义ScrollView实现背景图片伸缩的实现代码及思路  android 自定义ScrollView实现背景图片伸缩的实现代码及思路  android 自定义ScrollView实现背景图片伸缩的实现代码及思路

 界面有点丑陋,不过ui可以自己根据需求进行调整.

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
返回顶部