This section

1. The third-party library is blurred

2. Add input boxes and buttons

3. Button status

4. Hide the keyboard

5. Listen for events that change focus

6. Arm rotation animation

7. Hand and arm animations

Introduction of the Demo
1. Make a cool login interface.

  • Owls cover their eyes when we type in the code. After clicking elsewhere, its arms will open again.

  • The login button will turn blue only when the user name and password are entered, otherwise it will turn gray.

1. The third-party library is virtual
1. First add a dependency library to Gradle and then synchronize it.
Implementation 'IO. Alterac. Blurkit: blurkit: 1.1.0'Copy the code
2. Add a dash box to code
<io.alterac.blurkit.BlurLayout
        android:id="@+id/blurLayout"
        android:layout_width="0dp"
        android:layout_height="270dp"
        android:layout_marginEnd="20dp"
        app:blk_blurRadius="20"
        app:blk_cornerRadius="10dp"
        app:blk_fps="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mHead">
    </io.alterac.blurkit.BlurLayout>

Copy the code
  • App :blk_blurRadius=”20″, indicating that the blurradius is 20.
  • App :blk_cornerRadius=”10dp”, which indicates the radius of the corner of the blurred box.
  • App :blk_fps=”1″, indicating the number of frames per second.
3. Make it begin to blur in the onStart() method.
Override fun onStart() {super.onstart () // Start blurlayout.startblur ()}Copy the code
4. Stop the blur after the startup is complete
Override fun onResume() {super.onresume () // Pause blurlayout.pauseblur ()}Copy the code
Add input boxes and buttons
1. Drag the two EditTexts into the imaginary box and set the ids to mName and mPassword.
2. Add a border to these two controls. Create a new resource file and create your own border
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp"/>
    <stroke android:color="#FFF "  android:width="1dp"/>
</shape>

Copy the code
And then in code, add this to the EditText
android:background="@drawable/edit_shape"

Copy the code
3. Add another picture to the left of the input box, and set the internal spacing, and set the spacing between the text and the picture, and the spacing between the text. Other attributes adjust themselves.
android:drawableStart="@drawable/iconfont_user" android:paddingStart="10dp" android:drawablePadding="10dp" Android: letterSpacing = "0.1"Copy the code
4. Add a button. In order to achieve the effect of displaying different colors in different states, we add a selector
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false"  android:drawable="@color/colorGrey"/>
    <item android:state_enabled="true"  android:drawable="@color/colorBlue"/>
</selector>

Copy the code
5. To have more colors to choose from, we can add a few more colors to colors.xml
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="colorBlue">#4496EF</color>
    <color name="colorGrey">#D6D7D7</color>
    <color name="colorBlackGrey">#666</color>
    <color name="colorWhite">#FFF</color>
</resources>

Copy the code
6. Find Button’s code and set background to the resource file we created
android:background="@drawable/loginbtn_state"

Copy the code
3. Button state
1. Set the listener for content change in the input box
        mName.addTextChangedListener(this)
        mPassword.addTextChangedListener(this)

Copy the code
2. Only need to realize the input finished event, only when the input box is not empty can click
override fun afterTextChanged(s: Editable?) {/ / when both input box have contents can click mLogin. IsEnabled = mName. Text. IsNotEmpty () && mPassword. Text. IsNotEmpty ()}Copy the code
Four, keyboard hidden (only when the user enters the name and password will pop up the keyboard, other times click anywhere else will need to hide the keyboard)
1. When an input box is clicked, the input box gets the focus focus. The system automatically pops up a keyboard and binds it to an input box with focus.
2. The keyboard is managed by a class (InputMethodManager), which is a system-provided service
3. Implement the onTouchEvent method, if clicked, then hide the keyboard.
override fun onTouchEvent(event: MotionEvent?) : Boolean { if(event? .action== motionevent.action_down){// hideKeyboard()} return super.ontouchevent (event)}Copy the code
4. Implement hidden keyboard method
Private fun hideKeyboard(){if(mname.hasfocus ()){mname.clearFocus ()} if(mpassword.hasfocus ()){ ClearFocus ()} Manager val inputMethodManager= getSystemService(context.input_method_service) as InputMethodManager inputMethodManager.hideSoftInputFromWindow(mPassword.windowToken,InputMethodManager.HIDE_NOT_ALWAYS) }Copy the code
5. Listen for events that change the focus
1. The main class must inherit a focus listener
class MainActivity : AppCompatActivity(),TextWatcher,View.OnFocusChangeListener {
}

Copy the code
2. Methods to implement focus change events
override fun onFocusChange(v: View? , hasFocus: Boolean) { if(v == mPassword){ if(hasFocus){ coverEye() }else{ openEye() } } }Copy the code
3. Enter a listening event for the focus change
        mName.onFocusChangeListener = this
        mPassword.onFocusChangeListener = this

Copy the code
4. When hiding the keyboard, you need to unfocus, so there is a method to unfocus in hideKeyboard().
6. Arm rotation animation
1. Start with half of your palm on the top and half on the back of the bubble box.

2. Then, as we type in the code, the palm of the hand goes down and the arm rotates up from below. So the arm is also hidden behind the bubble box at first.

  • When the arm is lowered, the palm is exposed again.
3. The configuration is almost as shown in the picture below. The arm is completely behind the imaginary box, and the palm is half inside and half outside.

4. Cover eyes: Move both palms down at the same time -> rotate both hands at the same time. Open your eyes: Rotate both hands simultaneously -> move both palms up at the same time.
There are two ways to create an implementation once: lazy loading. Define a variable Define a method in a method to determine if the variable has a value. Here we use lazy loading.
5. Use lazy loading to define the object of the animation. The animation of the arm includes not only rotation but also movement, and the arm moves up and to the right simultaneously.
  • Rotate your left arm up
val leftArmUpAnim:AnimatorSet by lazy { val rotate= ObjectAnimator.ofFloat(mLeftArm,"rotation",140f).apply { duration = 500} / / to the right arm. Val tx = PropertyValuesHolder ofFloat (" translationX dpToPx (48 f)) / / arms move up val ty = PropertyValuesHolder.ofFloat("translationY",-dpToPx(40f)) val translate= ObjectAnimator.ofPropertyValuesHolder(mLeftArm,tx,ty) AnimatorSet().apply { playTogether(rotate,translate) duration = 500}}Copy the code
  • Rotate your right arm up
val leftArmDownAnim:AnimatorSet by lazy { val rotate= ObjectAnimator.ofFloat(mLeftArm,"rotation",0f).apply { duration = 500} / / left arm moving val tx = PropertyValuesHolder ofFloat (" translationX ", 0 f) / / arm moves down val ty = PropertyValuesHolder.ofFloat("translationY",0f) val translate= ObjectAnimator.ofPropertyValuesHolder(mLeftArm,tx,ty) AnimatorSet().apply { playTogether(rotate,translate) duration = 500 } }Copy the code
  • Rotate your right arm down
val rightArmDownAnim:AnimatorSet by lazy { val rotate= ObjectAnimator.ofFloat(mRightArm,"rotation",0f).apply { duration = 500} / / to the right arm. Val tx = PropertyValuesHolder ofFloat (" translationX ", 0 f) / / arm moves down val ty = PropertyValuesHolder.ofFloat("translationY",0f) val translate= ObjectAnimator.ofPropertyValuesHolder(mRightArm,tx,ty) AnimatorSet().apply { playTogether(rotate,translate) duration = 500 } }Copy the code
6. Realize the animation function of covering eyes
private fun coverEye(){
           AnimatorSet().apply {
               play(leftHandDownAnim)
                   .with(rightHandDownAnim)
                   .before(leftArmUpAnim)
                   .before(rightArmUpAnim)
               start()
           }
    }

Copy the code
7. Animation of open eyes
private fun openEye(){
        AnimatorSet().apply {
            play(leftArmDownAnim)
                .with(rightArmDownAnim)
                .before(leftHandUpAnim)
                .before(rightHandUpAnim)
            start()
        }
    }

Copy the code
7. Hand and arm animation
1. Convert the DP value into pixels
private fun dpToPx(dp:Float):Float{
        val display= DisplayMetrics()
        windowManager.defaultDisplay.getMetrics(display)
        return display.density*dp
    }

Copy the code
2. Animation of palm movement
  • Move your left palm down
val leftHandDownAnim:ObjectAnimator by lazy { Function DFL (DFL," migrationy ", DFL * 0.7f). Apply {duration = 500}}Copy the code
  • Left palm shift
val leftHandUpAnim:ObjectAnimator by lazy {
        ObjectAnimator.ofFloat(mLeftHand,"translationY",0f).apply {
            duration = 500
        }
    }

Copy the code
  • Move your right palm down
val rightHandDownAnim:ObjectAnimator by lazy { Objectanimator.offloat (mRighrHand,"translationY", mrighrhand.height *0.5f). Apply {duration = 500}}Copy the code
  • Right palm shift
val rightHandUpAnim:ObjectAnimator by lazy { ObjectAnimator.ofFloat(mRighrHand,"translationY",0f).apply { duration = 500 }}Copy the code
All content is about right, can be combined with the previous article to eat. The main difficulty is monitoring the focus, as well as the animation analysis process and implementation process.