当前位置:  编程技术>移动开发

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

    来源: 互联网  发布时间:2014-10-16

    本文导语:       用过多米音乐的都市知道, 这个UI可以上下滑动,作用嘛---无聊中可以划划解解闷,这被锤子公司老罗称谓为“情怀”,其实叫“情味”更合适。嘿嘿.如今挪动互联网开展这么迅速,市场上已不再是那早期随便敲个APP放...

  

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

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

    道理:RelativeLayout+自定义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() 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了。请看下图:

 

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

    首先,比如我们手势下拉了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() 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() initTop + 50 && turnListener != null)
   turnListener.onTurn();

 }

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

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

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

}

效果图:

 

    

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


    
 
 

您可能感兴趣的文章:

  • Android 按后退键退出Android程序的实现方法
  • android panellistview 圆角实现代码
  • Android实现弹出键盘的方法
  • Android实现信号强度监听的方法
  • Android设置桌面背景图片的实现方法
  • 请教如何在android平台下实现每个进程的流量监控?
  • Android平台的QT实现 Necessitas
  • Android实现关机重启的方法分享
  • android activity设置无标题实现全屏
  • android实现关闭或开启移动网络数据
  • android4.0屏蔽HOME键的简单实现
  • Android 实现永久保存数据的方法详解
  • Android手机获取root权限并实现关机重启功能的方法
  • android开发教程之实现toast工具类
  • Android判断屏幕是横屏或是竖屏的简单实现方法
  • Android中button实现onclicklistener事件的两种方式
  • Android实现动态显示或隐藏密码输入框的内容
  • Android实现Flip翻转动画效果
  • android实现背景平铺的三种方法
  • Android创建文件实现对文件监听示例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • Android进阶篇-自定义图片伸缩控件具体实例
  • 申请Android Map 的API Key(v2)的最新申请方式(SHA1密钥)
  • Android瀑布流实例 android_waterfall
  • Android开发需要的几点注意事项总结
  • Android系统自带样式 (android:theme)
  • android 4.0 托管进程介绍及优先级和回收机制
  • Android网络共享软件 Android Wifi Tether
  • Android访问与手机通讯相关类的介绍
  • Android 图标库 Android GraphView
  • Android及andriod无线网络Wifi开发的几点注意事项
  • 轻量级Android开发工具 Android Tools
  • Android 2.3 下StrictMode介绍
  • Android 开发环境 Android Studio
  • IDEA的Android开发插件 idea-android
  • Android手机事件提醒 Android Notifier
  • XBMC的Android客户端 android-xbmcremote
  • Android小游戏 Android Shapes
  • Android电池监控 Android Battery Dog
  • android开发:“android:WindowTitle”没有对应项no resource
  • Android 上类似IOS 的开关控件。 Android ToggleButton
  • Android系统自带样式 (android:theme) iis7站长之家
  • Android 2D游戏引擎 Android Angle


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3