Android登陆页面仿拉钩动效,你总会需要它!

哈哈,看到这个标题是不是JH一紧,你可能会说我就没遇到过,但是现在没遇到不代表就遇不到,毕竟设计也是变幻莫测,只有你想不到的,没有你不能实现的,说的这么吊,到底是啥效果?没错就是一个小小的登录页面,大家都有拉勾app吧,看拉勾的登录页做的很是平滑动画,而且带动画效果,所以就有了类似拉勾登录效果,如图:

虽然是个简单的页面,但是涵盖的东西不算少啊,很纳闷为何谷歌一直不提供简单,方便,准确的键盘监听事件?惆怅啊,所以我们只能自己从侧面监听键盘事件了,我们可以监听最外层布局的变化来判断键盘是不是弹起了。闲话不多说,上车吧。

布局文件,大家都能看懂吧。

我们要想监听键盘事件,首先我们想得到的是键盘弹起的时候我们可以去搞点事情,键盘搜起的时候我们再去搞点事情,知道这些还不够,我们还要知道键盘弹起了多少,以及需要平移多少的距离。我们都知道我们的一个页面弹起键盘的时候这个页面的根布局会回调他的监听方法:addOnLayoutChangeListener( );当键盘弹起的时候,我们的布局是变化了,因此会执行这个回调方法,但是前提是必须设置我们的Activity的windowSoftInputMode属性为adjustResize。

我们想让布局整体平移的距离也就是弹起时候处于最底部的view距离顶部的高度减去我们键盘的高度。现在认为只要控件将Activity向上推的高度超过了1/3屏幕高,就认为软键盘弹起


  1.  scrollView.addOnLayoutChangeListener(new ViewGroup.OnLayoutChangeListener() { 
  2.             @Override 
  3.             public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) { 
  4.               /* old是改变前的左上右下坐标点值,没有old的是改变后的左上右下坐标点值 
  5.               现在认为只要控件将Activity向上推的高度超过了1/3屏幕高,就认为软键盘弹起*/ 
  6.                 if (oldBottom != 0 && bottom != 0 && (oldBottom - bottom > keyHeight)) { 
  7.                     Log.e("wenzhihao", "up------>"+(oldBottom - bottom)); 
  8.                     int dist = btn_login.getBottom() - bottom; 
  9.                     if (dist>0){ 
  10.                         ObjectAnimator mAnimatorTranslateY = ObjectAnimator.ofFloat(content, "translationY", 0.0f, -dist); 
  11.                         mAnimatorTranslateY.setDuration(300); 
  12.                         mAnimatorTranslateY.setInterpolator(new LinearInterpolator()); 
  13.                         mAnimatorTranslateY.start(); 
  14.                         zoomIn(logo, dist); 
  15.                     } 
  16.                     service.setVisibility(View.INVISIBLE); 
  17.  
  18.                 } else if (oldBottom != 0 && bottom != 0 && (bottom - oldBottom > keyHeight)) { 
  19.                     Log.e("wenzhihao", "down------>"+(bottom - oldBottom)); 
  20.                     if ((btn_login.getBottom() - oldBottom)>0){ 
  21.                         ObjectAnimator mAnimatorTranslateY = ObjectAnimator.ofFloat(content, "translationY", content.getTranslationY(), 0); 
  22.                         mAnimatorTranslateY.setDuration(300); 
  23.                         mAnimatorTranslateY.setInterpolator(new LinearInterpolator()); 
  24.                         mAnimatorTranslateY.start(); 
  25.                         //键盘收回后,logo恢复原来大小,位置同样回到初始位置 
  26.                         zoomOut(logo); 
  27.                     } 
  28.                     service.setVisibility(View.VISIBLE); 
  29.                 } 
  30.             } 
  31.         }); 
  32. /n_login是登录按钮   

这样我们发现是可以实现效果了,但是我想全屏显示,懵比了,发现全屏的时候不回调这个方法了,怎么办?又是查资料一看原来这个也是一个bug,但是有解决方案,AndroidBug5497Workaround。也是谷歌提供的?直接拷贝过来,会发现其实他的作用就是让Activity最外层的根布局,当有布局变化时去响应这个变化mChildOfContent.getViewTreeObserver().addOnGlobalLayoutListener();


  1. package com.wzh.study.login; 
  2.  
  3.  
  4. import android.app.Activity; 
  5.  
  6. import android.graphics.Rect; 
  7.  
  8. import android.view.View; 
  9.  
  10. import android.view.ViewTreeObserver; 
  11.  
  12. import android.widget.FrameLayout; 
  13.  
  14.  
  15. public class AndroidBug5497Workaround { 
  16.  
  17.  
  18.     // For more information, see https://code.google.com/p/android/issues/detail?id=5497 
  19.  
  20.     // To use this class, simply invoke assistActivity() on an Activity that already has its content view set. 
  21.  
  22.  
  23.     public static void assistActivity (Activity activity) { 
  24.  
  25.         new AndroidBug5497Workaround(activity); 
  26.  
  27.     } 
  28.  
  29.  
  30.     private View mChildOfContent; 
  31.  
  32.     private int usableHeightPrevious; 
  33.  
  34.     private FrameLayout.LayoutParams frameLayoutParams; 
  35.  
  36.  
  37.     private AndroidBug5497Workaround(Activity activity) { 
  38.  
  39.         FrameLayout content = (FrameLayout) activity.findViewById(android.R.id.content); 
  40.  
  41.         mChildOfContent = content.getChildAt(0); 
  42.  
  43.         mChildOfContent.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { 
  44.  
  45.             public void onGlobalLayout() { 
  46.  
  47.                 possiblyResizeChildOfContent(); 
  48.  
  49.             } 
  50.  
  51.         }); 
  52.  
  53.         frameLayoutParams = (FrameLayout.LayoutParams) mChildOfContent.getLayoutParams(); 
  54.  
  55.     } 
  56.  
  57.  
  58.     private void possiblyResizeChildOfContent() { 
  59.  
  60.         int usableHeightNow = computeUsableHeight(); 
  61.  
  62.         if (usableHeightNow != usableHeightPrevious) { 
  63.  
  64.             int usableHeightSansKeyboard = mChildOfContent.getRootView().getHeight(); 
  65.  
  66.             int heightDifference = usableHeightSansKeyboard - usableHeightNow; 
  67.  
  68.             if (heightDifference > (usableHeightSansKeyboard/4)) { 
  69.  
  70.                 // keyboard probably just became visible 
  71.  
  72.                 frameLayoutParams.height = usableHeightSansKeyboard - heightDifference; 
  73.  
  74.             } else { 
  75.  
  76.                 // keyboard probably just became hidden 
  77.  
  78.                 frameLayoutParams.height = usableHeightSansKeyboard; 
  79.  
  80.             } 
  81.  
  82.             mChildOfContent.requestLayout(); 
  83.  
  84.             usableHeightPrevious = usableHeightNow; 
  85.  
  86.         } 
  87.  
  88.     } 
  89.  
  90.  
  91.     private int computeUsableHeight() { 
  92.  
  93.         Rect r = new Rect(); 
  94.  
  95.         mChildOfContent.getWindowVisibleDisplayFrame(r); 
  96.  
  97.         return (r.bottom - r.top); 
  98.  
  99.     } 
  100.  
  101.  
  102. }  

使用方式,如果我们设置了全屏,就去加载它,不设置不管:


  1. if(isFullScreen(this)){ 
  2.  
  3.             AndroidBug5497Workaround.assistActivity(this); 
  4.  
  5.  
  6. ... 
  7.  
  8. public boolean isFullScreen(Activity activity) { 
  9.  
  10.     return (activity.getWindow().getAttributes().flags & 
  11.  
  12.             WindowManager.LayoutParams.FLAG_FULLSCREEN)==WindowManager.LayoutParams.FLAG_FULLSCREEN; 
  13.  
  14. }  

接下来就看具体动画事件了,键盘弹起来的时候整体向上平移,LOGO缩小,键盘收起的时候整体下移,并且LOGO恢复原来大小。这里用到的都是属性动画,只有属性动画我们才可以实现真正平移效果。

我看网上很多人使用addOnLayoutChangeListener()去监听键盘事件,但是这个方法回调的太频繁,比如本例特效,输入框后面有文字时候显示清除的图标,如果用这个方法那么也会执行一次,可能会影响你的动画,当然你也可以去记录第一次的高度让他不会走逻辑,但是我觉得也不是很靠谱,虽然我这个方法也不是很棒 ๑乛◡乛๑~。

最后贴上源码:

如果有什么问题欢迎指出,我将给出例子地址,包含另一种实现方式就是用scrollview滑动到最底部的方式来实现平移效果~

作者:wenzhihao123

来源:51CTO

时间: 2024-07-28 16:34:12

Android登陆页面仿拉钩动效,你总会需要它!的相关文章

动效设计让你的设计富有未来科技感

  影响用户对产品的体验与印象的因素有很多,交互在其中扮演着关键性角色.我们不能再简单的把用户界面当成一种静态界面而设计.我们应该顺应互联网动态的本质,打造更加动态的图形用户界面. 好了,废话不多说,我们来看看,什么叫做更智能的交互.更精致的动效.看看这些设计模式是怎样提高用户体验的. 动效滚动 超链接是互联网的双刃剑,当你点击链接时,你可以在互联网中任意遨游,随心所欲. 可是过度自由好吗?不见得,比方说你在浏览一款精美的产品页面,然后你点击了一下页面中的链接,突然导入了一款令人毛骨悚然的木偶商

H5应用从字体、排版、动效、适配型等讲述

  去年JDC出了不少优秀的武媚娘...不,H5呢,大家都很拼哒,同时当然也是累计了一些经验和教训啦.今天就从字体,排版,动效,音效,适配型,想法这几个方向结合咱们的例子朕就关上门只跟你来好好聊一聊关于H5的设计吧~ 字体 排版 在有限的手机屏幕空间内,我们积累的经验告诉我们最好的效果是简单集中,最好有一个核心元素,中心元素不宜过多,突出重点为最优.比如JDC的"拍拍十二星座实用手册"的项目,只用了最简单的图形和文字居中摆放. 还可以以可口可乐的这个"我们在这 我们在乎&qu

学学这些爱不释手的加载动效设计

  我们现在越来越注重细节,小到加载动画,大到界面配色.这些都会成为用户吐槽的地方,一个不小心,你设计的东西让用户反感了,他们说不定就要和你的产品说拜拜了.所以今天我们要重点说说那些你以前觉得"不那么重要"的加载设计. 等待和加载动效几乎是无处不在了.设计师和设计机构都很清楚,加载动效几乎是目前网站和APP设计中无法绕过且必须的组成部分,它们不仅是大势所趋而且是打造优秀用户体验 的必须组件. 虽然目前很多产品将加载/等待动效作为强化用户第一印象的组件,但是它的实际使用范畴远不止于这一部

那些令人爱不释手的加载动效设计

  等待和加载动效几乎是无处不在了.设计师和设计机构都很清楚,加载动效几乎是目前网站和APP设计中无法绕过且必须的组成部分,它们不仅是大势所趋而且是打造优秀用户体验 的必须组件. 虽然目前很多产品将加载/等待动效作为强化用户第一印象的组件,但是它的实际使用范畴远不止于这一部分,在许多设计项目中,加载动效几乎做到了无处不在.内页切换的时候可以用,组件加载的时候可以用,甚至幻灯片切换的时候也同样可以用上.不仅如此,它还可以用承载数据加载的过程,呈现状态改变的过程,填补崩溃或者出错的页面,它们承前启后

android动效开篇

大神博客:http://blog.csdn.net/tianjian4592/article/details/44155147 在现在的Android App开发中,动效越来越受到产品和设计师同学的重视,如此一来,也就增大了对开发同学的考验,虽说简单的动效:如移动,旋转,缩放,渐变或普通的界面跳转相对简单,但在目前日益激烈的竞争条件下,出彩复杂的动效也越来越多,并且很多效果已经无法直接用android提供的Animation或Animator框架进行实现,需要通过自定义View或ViewGrou

玩转HTML5移动页面(动效篇)

  (1) CSS3时序错开渐显动画 这是一种比较常用的动画,它的优点是节奏感强,做法就是先让每个元素隐藏,然后当页面呈现后每个元素错开时间出现. 例子(忽略兼容前缀和无关属性): 效果就是两个元素分别从上面掉下来,这里有个小细节(keyframes),为了让掉下来的动画生动点,应该是在90%的时候先掉下一点点,然后瞬间在100%时回跳5px. 还有个细节,安卓2.3.*不能良好支持-webkit-animation-fill-mode,也就是渐变动画不能停止在最后一帧.有这样一个解决方案: 1

六大奇招带你玩转HTML5移动页面动效

  四月份最有技术含量的干货!今天腾讯前端TQ同学来来谈谈一些动画设计的小技巧,能帮你在短时间没动画灵感时瞬间让页面增色,同时也会谈及移动端H5页面的优化细节与关键点 >>> 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些动画设计的小技巧,能在你时间不多又没有动画想法的时候瞬间让页面增色不少. 同时也会谈及移动端H5页面的优化

页面动效能否拯救扁平设计?

  动效现在是扁平化身边的大红人,哪里都有它的身影,动效能否为扁平化增光?设计师有什么利器可以绘制动效?昨天发现一篇好文,关于这两方面都有实在的干货分享,建议同学们当机立断,先转后赞,特别要记得看. 作为一个网页设计师,我们需要努力让我们的技术与技巧与时俱进.我们不用追随每一个时代潮流(比如长投影),但是我们的确需要随着网络的发展与成熟,不断学习并提高我们的技巧. 网页设计产业最近开始火热的新发展之一便是动效,越来越多的公司在他们的应用和网站中放入动效以取悦用户,从竞争对手中脱颖而出以及提升产品

Android 一个绚丽的loading动效分析与实现!

http://blog.csdn.net/tianjian4592/article/details/44538605 前两天我们这边的头儿给我说,有个 gif 动效很不错,可以考虑用来做项目里的loading,问我能不能实现,看了下效果确实不错,也还比较有新意,复杂度也不是非常高,所以就花时间给做了,我们先一起看下原gif图效果: 从效果上看,我们需要考虑以下几个问题: 1.叶子的随机产生: 2.叶子随着一条正余弦曲线移动: 3.叶子在移动的时候旋转,旋转方向随机,正时针或逆时针: 4.叶子遇到