--- theme: fancy --- > # Demo简介 > ###### 1.做一个炫酷登录的界面。 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6325984b4f704b84a544a4ffdc378219~tplv-k3u1fbpfcp-zoom-1.image) > * ###### 当我们输入密码的时候，猫头鹰会捂住眼睛。点击其他地方后，它的手臂又会张开。 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f84d03c91a5f4915aeeb6dcdd468631c~tplv-k3u1fbpfcp-zoom-1.image) > * ###### 登录按钮只有当用户名和密码都输入了之后，才会变成蓝色，否则就是灰色。 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36a2d27e5acb4fc1bffbe995fc9c7964~tplv-k3u1fbpfcp-zoom-1.image) > ##### 一、第三方库实现虚化 > > ###### 1.首先在gradle中添加一个依赖库，然后同步一下。 ``` implementation 'io.alterac.blurkit:blurkit:1.1.0' ``` > ###### 2.在code中添加一个虚化框 ``` ``` > * ###### app:blk_blurRadius="20"，表示虚化半径为20. > > > * ###### app:blk_cornerRadius="10dp"，表示虚化框的圆角半径。 > > > * ###### app:blk_fps="1"，表示每秒帧数。 > > > > ###### 3.让它在onStart()方法里面就开始虚化。 ``` override fun onStart() { super.onStart() //开始虚化 blurLayout.startBlur() } ``` > ###### 4.启动完毕之后再停止虚化 ``` override fun onResume() { super.onResume() //暂停虚化 blurLayout.pauseBlur() } ``` > ##### 二、添加输入框和按钮 > > ###### 1.拖动两个EditText到虚化框里面，设置id为mName和mPassword。 > > ###### 2.给这两个控件添加一个边框，新建资源文件自己设计一个边框 ``` ``` > ###### 然后在code中把这个添加到EditText中去 ``` android:background="@drawable/edit_shape" ``` > ###### 3.在输入框左侧再添加一张图片，并设置一下内间距，再设置一下内部的文字与该图片的间距，还有文字间的间距。其他属性自行调整。 ``` android:drawableStart="@drawable/iconfont_user" android:paddingStart="10dp" android:drawablePadding="10dp" android:letterSpacing="0.1" ``` > ###### 4.添加一个按钮，为了实现不同状态下显示不同颜色的效果，我们添加一个选择器 ``` ``` > ###### 5.为了有更多的颜色可以选择，我们可以在colors.xml中多添加几个颜色 ``` #6200EE #3700B3 #03DAC5 #4496EF #D6D7D7 #666 #FFF ``` > ###### 6.找到button的code，将background设置为我们创建的资源文件 ``` android:background="@drawable/loginbtn_state" ``` > ##### 三、按钮状态 > > ###### 1.输入框设置内容改变的监听器 ``` mName.addTextChangedListener(this) mPassword.addTextChangedListener(this) ``` > ###### 2.只需要实现输入完了的事件，只有输入框都不为空时才能点击 ``` override fun afterTextChanged(s: Editable?) { //当两个输入框都有内容才能点击 mLogin.isEnabled = mName.text.isNotEmpty() &&mPassword.text.isNotEmpty() } ``` > ##### 四、键盘隐藏（只有用户输入名字和密码的时候才弹出键盘，其他时候点击任何其他地方就需要把键盘隐藏起来） > > ###### 1.当一个输入框被点击这个输入框就获取到焦点focus。系统自动弹出一个键盘和拥有焦点的输入框进行绑定。 > > ###### 2.键盘是由一个类来管理的（InputMethodManager），它是系统提供的服务service > > ###### 3.实现onTouchEvent方法，如果点下去了，那么就隐藏键盘。 ``` override fun onTouchEvent(event: MotionEvent?): Boolean { if(event?.action==MotionEvent.ACTION_DOWN){ //隐藏键盘 hideKeyboard() } return super.onTouchEvent(event) } ``` > ###### 4.实现隐藏键盘的方法 ``` private fun hideKeyboard(){ //取消焦点 if(mName.hasFocus()){ mName.clearFocus() } if(mPassword.hasFocus()){ mPassword.clearFocus() } //获取管理输入的Manager val inputMethodManager= getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager inputMethodManager.hideSoftInputFromWindow(mPassword.windowToken,InputMethodManager.HIDE_NOT_ALWAYS) } ``` > ##### 五、监听焦点改变的事件 > > ###### 1.主类必须继承一个焦点的监听器 ``` class MainActivity : AppCompatActivity(),TextWatcher,View.OnFocusChangeListener { } ``` > ###### 2.实现焦点改变的事件的方法 ``` override fun onFocusChange(v: View?, hasFocus: Boolean) { if(v == mPassword){ if(hasFocus){ coverEye() }else{ openEye() } } } ``` > ###### 3.输入焦点改变的监听事件 ``` mName.onFocusChangeListener = this mPassword.onFocusChangeListener = this ``` > ###### 4.在隐藏键盘的时候，要取消焦点，所以前面hideKeyboard()里有取消焦点的方法。 > ##### 六、手臂旋转动画 > > ###### 1.一开始手掌是一半在上，一半在虚化框背后的。 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d64b1c74e5143e899dfedb34a5d3df7~tplv-k3u1fbpfcp-zoom-1.image) > ###### 2.接着当我们输入密码时，手掌就要向下，然后手臂从下面旋转上来。所以手臂一开始也隐藏在虚化框背后。 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bbb13341a14643b8909ac4dba7806d2a~tplv-k3u1fbpfcp-zoom-1.image) > * ###### 当放下手臂时，手掌又会重新露出来。 > > > > ###### 3.配置的时候差不多如下图所示，手臂完全在虚化框后面，手掌一半在里面，一半在外面。 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/393fbdecf3d2477f9e4bd334c1fe0201~tplv-k3u1fbpfcp-zoom-1.image) > ###### 4\. 遮住眼睛：两只手掌同时向下移动 ->两只手同时旋转。打开眼睛：两只手同时旋转 ->两个手掌同时向上移动。 > > ###### 实现创建一次有两种方法：懒加载。定义一个变量定义一个方法在方法中判断这个变量是否有值。这里我们使用懒加载。 > > ###### 5.使用懒加载定义动画的对象。手臂的动画不仅包括旋转，还包括移动，而且手臂的向上和向右移动是同时进行的。 > > * ###### 左手臂向上旋转 ``` val leftArmUpAnim:AnimatorSet by lazy { val rotate= ObjectAnimator.ofFloat(mLeftArm,"rotation",140f).apply { duration = 500 } //手臂向右移动 val tx= PropertyValuesHolder.ofFloat("translationX",dpToPx(48f)) //手臂向上移动 val ty= PropertyValuesHolder.ofFloat("translationY",-dpToPx(40f)) val translate= ObjectAnimator.ofPropertyValuesHolder(mLeftArm,tx,ty) AnimatorSet().apply { playTogether(rotate,translate) duration = 500 } } ``` > * ###### 右手臂向上旋转 ``` val leftArmDownAnim:AnimatorSet by lazy { val rotate= ObjectAnimator.ofFloat(mLeftArm,"rotation",0f).apply { duration = 500 } //手臂向左移动 val tx= PropertyValuesHolder.ofFloat("translationX",0f) //手臂向下移动 val ty= PropertyValuesHolder.ofFloat("translationY",0f) val translate= ObjectAnimator.ofPropertyValuesHolder(mLeftArm,tx,ty) AnimatorSet().apply { playTogether(rotate,translate) duration = 500 } } ``` > * ###### 右手臂向下旋转 ``` val rightArmDownAnim:AnimatorSet by lazy { val rotate= ObjectAnimator.ofFloat(mRightArm,"rotation",0f).apply { duration = 500 } //手臂向右移动 val tx= PropertyValuesHolder.ofFloat("translationX",0f) //手臂向下移动 val ty= PropertyValuesHolder.ofFloat("translationY",0f) val translate= ObjectAnimator.ofPropertyValuesHolder(mRightArm,tx,ty) AnimatorSet().apply { playTogether(rotate,translate) duration = 500 } } ``` > ###### 6.实现捂眼睛动画函数 ``` private fun coverEye(){ AnimatorSet().apply { play(leftHandDownAnim) .with(rightHandDownAnim) .before(leftArmUpAnim) .before(rightArmUpAnim) start() } } ``` > ###### 7.实现打开眼睛的动画 ``` private fun openEye(){ AnimatorSet().apply { play(leftArmDownAnim) .with(rightArmDownAnim) .before(leftHandUpAnim) .before(rightHandUpAnim) start() } } ``` > ###### 七、手掌和手臂动画 > > ###### 1.将dp值转化为像素 ``` private fun dpToPx(dp:Float):Float{ val display= DisplayMetrics() windowManager.defaultDisplay.getMetrics(display) return display.density*dp } ``` > ###### 2.手掌移动动画 > > * ###### 左手掌下移 ``` val leftHandDownAnim:ObjectAnimator by lazy { ObjectAnimator.ofFloat(mLeftHand,"translationY",mLeftHand.height*0.5f).apply { duration = 500 } } ``` > * ###### 左手掌上移 ``` val leftHandUpAnim:ObjectAnimator by lazy { ObjectAnimator.ofFloat(mLeftHand,"translationY",0f).apply { duration = 500 } } ``` > * ###### 右手掌下移 ``` val rightHandDownAnim:ObjectAnimator by lazy { ObjectAnimator.ofFloat(mRighrHand,"translationY",mRighrHand.height*0.5f).apply { duration = 500 } } ``` > * ###### 右手掌上移 ``` val rightHandUpAnim:ObjectAnimator by lazy { ObjectAnimator.ofFloat(mRighrHand,"translationY",0f).apply { duration = 500 } } ``` > ###### 所有内容就差不多了，可以结合前面的文章食用。主要的重难点就是监听焦点，还有动画的分析过程以及实现过程。 ## 最后由于水平有限，**有错误的地方在所难免，未免误导他人，欢迎大佬指正！码字不易**，感谢大家的点赞关注！🙏有一起学习的小伙伴可以关注下我的公众号——【`❤️[程序猿养成中心](https://github.com/733gh/xiongfan/blob/master/%E5%85%AC%E4%BC%97%E5%8F%B7.md)❤️`】每周会定期做关于**Android的技术分享。**