TextInputLayout实现登录注册动画效果

TextInputLayout开发文档
——与代码实现动画两种实现方式
第一种方式：类库

一、配置依赖包：

1.在app的build.gradle中，操作如下

 


2.dependencies {

compile'com.android.support.constraint:constraint-layout:1.0.2'

compile 'com.android.support:design:22.2.0'

compile 'com.android.support:appcompat-v7:22.2.0'

}



3.RebuildProject一下项目

 


 

二、代码开发

布局：

<?xml version="1.0"encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:focusable="true"
              android:focusableInTouchMode="true"
              android:orientation="vertical"
    >

    <android.support.design.widget.TextInputLayout
        android:id="@+id/usernameWrapper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <EditText
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/passwordWrapper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/usernameWrapper"
        android:layout_marginTop="4dp"
        >

        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:maxLength="6"/>

    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#666666"
        android:text="登录"
        android:textAllCaps="false"
        android:textColor="#ffffff"/>

</LinearLayout>
 

类：

public classMainActivity
extendsAppCompatActivity
implementsView.OnClickListener {
    privateTextInputLayout
usernameWrapper;
    private TextInputLayoutpasswordWrapper;
    private ButtonmBtn;
    private EditTextmEditPwd;
    private EditTextmEditNum;
    private float mTime=
0.5f;
    private float offset= -10;

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

    private voidinitView() {
        usernameWrapper= (TextInputLayout) findViewById(R.id.usernameWrapper);
        passwordWrapper= (TextInputLayout) findViewById(R.id.passwordWrapper);
        mEditPwd= (EditText) findViewById(R.id.password);
        mEditNum= (EditText) findViewById(R.id.username);
        mBtn= (Button) findViewById(R.id.btn);
        usernameWrapper.setHint("Username");
        passwordWrapper.setHint("Password");
        mEditPwd.addTextChangedListener(newTextWatcher()
{
            @Override
            public voidbeforeTextChanged(CharSequence charSequence,
inti, inti1, inti2) {

            }

            @Override
            public voidonTextChanged(CharSequence charSequence,
inti, inti1, inti2) {

            }

            @Override
            public voidafterTextChanged(Editable editable) {
                if(!validatePassword(mEditPwd.getText().toString()))
{
                    passwordWrapper.setError("请输入6位数有效的密码哦!");
                    mBtn.setBackgroundColor(Color.parseColor("#666666"));
                }else
{
                    mBtn.setBackgroundColor(Color.parseColor("#000000"));
                    passwordWrapper.setErrorEnabled(false);
                    hideKeyboard();
                }
            }
        });
        setListener();
    }

    private voidsetListener() {
        mBtn.setOnClickListener(this);
        usernameWrapper.setOnClickListener(this);
        passwordWrapper.setOnClickListener(this);
    }

    @Override
    public voidonClick(View view) {
        switch(view.getId()) {
            caseR.id.btn:
                Toast.makeText(this,"登陆成功",Toast.LENGTH_SHORT).show();
                break;
        }
    }

    /***
     * 隐藏键盘
     */
    private voidhideKeyboard() {
        View view = getCurrentFocus();
        if (view !=null) {
            ((InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)).
                    hideSoftInputFromWindow(view.getWindowToken(),InputMethodManager.HIDE_NOT_ALWAYS);
        }
    }

    /**
     * 自动弹出软键盘
     */
    public static voidshowSoftkeyboard(finalEditText
etID,
                                        finalContext mContext) {
        etID.post(newRunnable() {
            @Override
            public voidrun() {
                etID.requestFocus(etID.getText().length());
                InputMethodManager imm = (InputMethodManager)mContext
                        .getSystemService(Context.INPUT_METHOD_SERVICE);
                imm.showSoftInput(etID,0);
//                imm.toggleSoftInput(InputMethodManager.SHOW_FORCED,
//                        InputMethodManager.HIDE_IMPLICIT_ONLY);
            }
        });
    }

    /***
     * 校验密码
     *@param
password
     *@return
     */
    public booleanvalidatePassword(String password) {
        returnpassword.length() >
5;
    }
}
 

 

第二种方式：代码实现动画效果

/***
 * 通过代码实现动画效果
 */
/*
 * mLlytNum：包裹登录textview与输入框edittext的线性布局
 * mLlytPwd：包裹密码textview与输入框edittext的线性布局
 * mEditPwd：密码的输入框edittext
 * mTVPassword：密码textview
 * mEditNum 登录的输入框edittext
 * mTVMove ：登录textview
 *
        mLlytNum.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mLlytNum.setClickable(false);
        showPhoneAndHidePass();
    }
} );

    mLlytPwd.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mLlytPwd.setClickable(false);
        showPassAndHidePhone();
    }
});
private void showPassAndHidePhone() {
    if (mEditPwd.getVisibility() == View.GONE) {
        AnimationSet set = new AnimationSet(true);
        TranslateAnimation translateAnimation = new TranslateAnimation(0, 0, 0, offset);
        ScaleAnimation scale = new ScaleAnimation(1, 0.8f, 1, 0.8f,
                Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,
                0);
        set.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                mEditPwd.setVisibility(View.VISIBLE);//可见
                mLlytNum.setClickable(true);
                showSoftkeyboard(mEditPwd, MainActivity.this);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        set.setDuration((long) (mTime * 1000));
        set.setInterpolator(new LinearInterpolator());
        set.setFillAfter(true);
        set.addAnimation(translateAnimation);
        set.addAnimation(scale);
        mTVPassword.startAnimation(set);
        hidePhone();
    } else {
        showSoftkeyboard(mEditPwd, MainActivity.this);
        hidePhone();
    }
}

private void hidePhone() {
    if (mEditNum.getVisibility() == View.VISIBLE && TextUtils.isEmpty(mEditNum.getText().toString().trim())) {
        AnimationSet set2 = new AnimationSet(true);
        TranslateAnimation translateAnimation2 = new TranslateAnimation(0, 0, offset, 0);
        ScaleAnimation scale2 = new ScaleAnimation(0.8f, 1, 0.8f, 1,
                Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,
                0);
        set2.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                mEditNum.setVisibility(View.GONE);//不可见
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        set2.setDuration((long) (mTime * 1000));
        set2.setInterpolator(new LinearInterpolator());
        set2.setFillAfter(true);
        set2.addAnimation(translateAnimation2);
        set2.addAnimation(scale2);
        mTVMove.startAnimation(set2);
    }
}

private void showPhoneAndHidePass() {
    if (mEditNum.getVisibility() == View.GONE) {
        AnimationSet set = new AnimationSet(true);
        TranslateAnimation translateAnimation = new TranslateAnimation(0, 0, 0, offset);
        ScaleAnimation scale = new ScaleAnimation(1, 0.8f, 1, 0.8f,
                Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF,
                0);
        set.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                mEditNum.setVisibility(View.VISIBLE);//可见
                mLlytPwd.setClickable(true);
                showSoftkeyboard(mEditNum, MainActivity.this);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        set.setDuration((long) (mTime * 1000));
        set.setInterpolator(new LinearInterpolator());
        set.setFillAfter(true);
        set.addAnimation(translateAnimation);
        set.addAnimation(scale);
        mTVMove.startAnimation(set);
        hidePassword();
    } else {
        showSoftkeyboard(mEditNum, MainActivity.this);
        hidePassword();
    }
}

private void hidePassword() {
    if (mEditPwd.getVisibility() == View.VISIBLE && TextUtils.isEmpty(mEditPwd.getText().toString().trim())) {
        AnimationSet set2 = new AnimationSet(true);
        TranslateAnimation translateAnimation2 = new TranslateAnimation(0, 0, offset, 0);
        ScaleAnimation scale2 = new ScaleAnimation(0.8f, 1, 0.8f, 1,
                Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0);
        set2.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                mEditPwd.setVisibility(View.GONE);
            }

            @Override
            protected Object clone() throws CloneNotSupportedException {
                return super.clone();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        set2.setDuration((long) (mTime * 1000));
        set2.setInterpolator(new LinearInterpolator());
        set2.setFillAfter(true);
        set2.addAnimation(translateAnimation2);
        set2.addAnimation(scale2);
        mTVPassword.startAnimation(set2);
    }
}
 

链接: https://pan.baidu.com/s/1mhYEwCo 密码: v52s