炫酷登录

简介

今天为大家介绍的是登录界面的搭建，使用动画使得登录界面更有趣味，话不多说，先上效果图：

实现

1. 将需要的图片文件导入drawable中（此项目素材在本文末尾提供）

2.在下图路径下添加 implementation 'io.alterac.blurkit:blurkit:1.1.0'，导入虚化效果第三方库

3.创建布局需要的资源文件

1.在drawable下创建文件
editview_shape.xml

2.drawable路径下创建input_bg_shape.xml

3.drawable路径下创建login_selector.xml

4.在value路径下创建editview_style.xml

4.接着在activity_main.xml中进行布局

5.创建两个动画文件

res路径下创建anim目录（详情参考(https://www.jianshu.com/p/dcb6ae758410)）
translate_down.xml

translate_up.xml

6.创建第二个界面MainActivity2，并配置xml

xml中配置

7.最后，在MainActivity中使用

public class MainActivity extends AppCompatActivity implements TextWatcher {

    private EditText user;
    private EditText password;
    private Button login;
    private ImageView rightArm;
    private ImageView leftArm;
    private ImageView leftHand;
    private ImageView rightHand;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();
    }

    /**
     * 键盘
     * 当有控件获得焦点focus 自动弹出键盘
     * 1.点击软键盘的 return键 自动收回键盘
     * 2.代码控制  InputMethodManager
     *    showSoftInput  显示键盘 必须先让这个view成为焦点
     *
     * */

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN){
            //隐藏键盘
            // 1.获取系统输入输出的管理器
            InputMethodManager inputMethodManager = (InputMethodManager)getSystemService(INPUT_METHOD_SERVICE);
            // 2.隐藏键盘
            System.out.println(inputMethodManager.toString());
            inputMethodManager.hideSoftInputFromWindow(user.getWindowToken(), 0);
            // 3.取消焦点
            View focusView = getCurrentFocus();
            if (focusView != null){
                focusView.clearFocus();
            }
//            getCurrentFocus().requestFocus();  //请求焦点
        }
        return true;
    }


    private void initViews(){
        user = findViewById(R.id.et_user);
        password = findViewById(R.id.et_password);
        login = findViewById(R.id.login_btn);
        leftArm = findViewById(R.id.arm_left);
        rightArm = findViewById(R.id.arm_right);
        leftHand = findViewById(R.id.hand_left);
        rightHand = findViewById(R.id.hand_right);

        //监听内容改变
        user.addTextChangedListener(this);
        password.addTextChangedListener(this);

        //监听EditText的焦点变化
        password.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean b) {
                if (b == true){
                    // 捂住眼睛
                    close();
                }else {
                    //放开
                    open();
                }
            }
        });

        //登录按钮被点击
        login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //  登录需要完成操作的内容
                Intent intent = new Intent(MainActivity.this,Main2Activity.class);
                startActivity(intent);
            }
        });
    }

    @Override
    public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void afterTextChanged(Editable editable) {
        // 判断两个输入框是否有内容
        if ((user.getText().toString().length()>0) && (password.getText().toString().length()>0)){
            // 按钮可以点击了
            login.setEnabled(true);
        }else {
            login.setEnabled(false);
        }
    }


    private void close(){
        //旋转动画
        RotateAnimation rAnim = new RotateAnimation(0, 170, Animation.RELATIVE_TO_SELF,1.0f,Animation.RELATIVE_TO_SELF,0f);
        rAnim.setDuration(500);
        rAnim.setFillAfter(true);
        leftArm.startAnimation(rAnim);

        RotateAnimation rAnim1 = new RotateAnimation(0, -170, Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);
        rAnim1.setDuration(500);
        rAnim1.setFillAfter(true);
        rightArm.startAnimation(rAnim1);

        TranslateAnimation tAnim = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.translate_down );
        leftHand.startAnimation(tAnim);
        rightHand.startAnimation(tAnim);
    }

    private void open(){
        //旋转动画
        RotateAnimation rAnim = new RotateAnimation(170, 0, Animation.RELATIVE_TO_SELF,1.0f,Animation.RELATIVE_TO_SELF,0f);
        rAnim.setDuration(500);
        rAnim.setFillAfter(true);
        leftArm.startAnimation(rAnim);

        RotateAnimation rAnim1 = new RotateAnimation(-170, 0, Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);
        rAnim1.setDuration(500);
        rAnim1.setFillAfter(true);
        rightArm.startAnimation(rAnim1);

        TranslateAnimation tAnim = (TranslateAnimation) AnimationUtils.loadAnimation(this,R.anim.translate_up );
        leftHand.startAnimation(tAnim);
        rightHand.startAnimation(tAnim);
    }
}

本文素材：

arm_left.png

arm_right.png

bg.jpeg

bg_blure.png

icon_hand.png

iconfont_password.png

iconfont_user.png

owl_head.png

yans.jpg