当前位置: 首页 > 科技观察

Android登陆页仿拉钩动画效果,你永远需要!

时间:2023-03-16 22:04:47 科技观察

哈哈,看到这个标题JH紧,你可能会说我没遇到过,但现在没遇到,不代表我不会。毕竟,设计也是不可预测的。只有想不到的,没有做不到的。效果如何?没错,就是一个小小的登录页面。每个人都有一个拉勾APP。挂钩的登录页面非常流畅动画,并且有动画效果,所以有类似拉钩的登录效果,如图:虽然是一个简单的页面,但是涵盖了很多东西。我想知道为什么谷歌没有提供简单、方便、准确的键盘监控事件?很遗憾,所以我们只能从侧面监听键盘事件。我们可以通过监听最外层布局的变化来判断键盘是否弹出。不说闲话,我们上车吧。布局文件,大家看得懂。如果我们要监听键盘事件,首先我们要的是键盘弹起的时候我们可以做点什么,键盘弹起的时候我们可以做点什么。知道这些还不够,我们还需要知道键盘向上移动了多少,平移了多少距离。我们都知道,当我们的某个页面弹出键盘时,这个页面的根布局会回调它的监听方法:addOnLayoutChangeListener();当键盘弹出时,我们的布局发生了变化,所以这个回调方法会被执行,但是前提是我们的Activity的windowSoftInputMode属性必须设置为adjustResize。我们希望布局作为一个整体平移的距离是弹出时顶部视图的高度减去我们键盘的高度。现在我觉得只要控件把Activity推到屏幕高度的1/3以上,我觉得软键盘就会弹出intright,intbottom,intoldLeft,intoldTop,intoldRight,intoldBottom){/*old为变化前的左上、右下、下坐标点的值,不带old的值为左上、下、右、下坐标点的值更改后较低的坐标点值,现在认为只要控件将Activity上推高度超过屏幕高度的1/3,就认为软键盘弹出*/if(oldBottom!=0&&bottom!=0&&(oldBottom-bottom>keyHeight)){Log.e("wenzhihao","up------>"+(oldBottom-bottom));intdist=btn_login.getBottom()-bottom;if(dist>0){ObjectAnimatormAnimatorTranslateY=ObjectAnimator.ofFloat(content,"translationY",0.0f,-dist);mAnimatorTranslateY.setDuration(300);mAnimatorTranslateY.setInterpolator(newLinearInterpolator());mAnimatorTranslateY.start();zoomIn(logo,dist);}service.setVisibility(View.INVISIBLE);}elseif(oldBottom!=0&&bottom!=0&&(bottom-oldBottom>keyHeight)){Log.e("wenzhihao","down------>"+(bottom-oldBottom));if((btn??_login.getBottom()-oldBottom)>0){ObjectAnimatormAnimatorTranslateY=ObjectAnimator.ofFloat(content,"translationY",content.getTranslationY(),0);mAnimatorTranslateY.setDuration(300);mAnimatorTranslateY.setInterpolator(newLinearInterpolator());mAnimatorTranslateY.start();//键盘收回后,logo恢复到原来的大小,位置也回到初始位置zoomOut(logo);}service.setVisibility(View.VISIBLE);}}});/n_login是登录我们发现按下按钮可以达到效果,但是我想全屏显示,一头雾水。我发现这个方法在全屏时不会回调。AndroidBug5497解决方法也是谷歌提供的?直接复制,你会发现它的作用是做Activity最外层的根布局,当有布局变化时响应这个变化mChildOfContent.getViewTreeObserver().addOnGlobalLayoutListener();packagecom.wzh。学习。login;importandroid.app.Activity;importandroid.graphics.Rect;importandroid.view.View;importandroid.view.ViewTreeObserver;importandroid.widget.FrameLayout;publicclassAndroidBug5497Workaround{//有关更多信息,请参阅https://code.google.com/p/android/issues/detail?id=5497//Tousethisclass,simplyinvokeassistActivity()onanActivitythatalreadyhasitscontentviewset.publicstaticvoidassistActivity(Activityactivity){newAndroidBug5497Workaround(activity);}privateViewmChildOfContent;privateintusableHeightPrevious;privateFrameLayout.LayoutParamsframeLayoutParams;privateAndroidBug5497Workaround(Activityactivity){FrameLayoutcontent=(FrameLayout)activity.findViewById(android.R.id.content);mChildOfContent=content.getChildAt(0);mChildOfContent.getViewTreeObserver().addOnGlobalLayoutListener(newViewTreeObserver.OnGlobalLayoutListener(){publicvoidonGlobalLayout(){possiblyResizeChildOfContent();}});frameLayoutParams=(FrameLayout.LayoutParams)mChildOfContent.getLayoutParams();}privatevoidpossiblyResizeChildOfContent(){intusableHeightNow=computeUsableHeight();if(usableHeightNow!=usableHeightPrevious){intusableHeightSansKeyboard=mChildOfContent.getRootView().getHeight();intheightDifference=usableHeightSansKeyboard-usableHeightNow;if(heightDifference>(usableHeightSansKeyboard/4)){//keyboardprobablyjustbecamevisibleframeLayoutParams.height=usableHeightSansKeyboard-heightDifference;}else{//keyboardprobablyjustbecamehiddenframeLayoutHeftentParams.Height=高度.requestLayout();usableHeightPrevious=usableHeightNow;}}privateintcomputeUsableHeight(){Rectr=newRect();mChildOfContent.getWindowVisibleDisplayFrame(r);return(r.bottom-r.top);}}使用方式,如果我们设置了全屏,就去加载它,不设置不管理:if(isFullScreen(this)){AndroidBug5497Workaround.assistActivity(this);}...publicbooleanisFullScreen(Activityactivity){return(activity.getWindow().getAttributes().flags&WindowManager.LayoutParams.FLAG_FULLSCREEN)==WindowManager.LayoutParams.FLAG_FULLSCREEN;}接下来要看具体的动画事件了。LOGO缩小,收起键盘后整体下移,LOGO恢复原状。这里使用了所有的属性动画。只有属性动画才能达到真正的翻译效果。看到网上很多人用addOnLayoutChangeListener()监听键盘事件,但是这个方法回调太频繁了,比如这个例子中的特效,当输入框后面有文字的时候,显示一个清晰的图标。如果用这个方法,会执行一次,可能会影响你的动画,当然你也可以把第一次的高度记录下来,让他不按逻辑来,但是我觉得不太靠谱,虽然我的方法不是很好?乛?乛?~。***贴上源码:如有问题请指出,我给出示例地址,包括另一种实现方法是利用scrollview滑动到***底部实现平移效果~