仿智联招聘注册页面输入框

原图效果

实现效果

代码

首先来定义需要用到的自定义属性：

   <declare-styleable name="AnimatorLineEditText">
        <!--失去焦点底部横线的颜色-->
        <attr name="defaultColor" format="color"/>
        <!--获取焦点后 底部横线的颜色-->
        <attr name="focusColor" format="color"/>
        <!--失去焦点底部横线的 宽度-->
        <attr name="defaultStrokeWidth" format="dimension"/>
        <!--获取焦点底部横线的 宽度-->
        <attr name="focusStrokeWidth" format="dimension"/>
    </declare-styleable>

java代码

public class AnimatorLineEditText extends AppCompatEditText{

    private Paint mPaint;
    private int mWidth;
    private int mHeight;
    private float mProgress = 0;
    private int mFocusStrokeWidth = 5;
    private int mDefaultStrokeWidth = 2;
    private int mFocusColor = Color.parseColor("#FF4081");
    private int mDefaultColor = Color.parseColor("#999999");

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    public AnimatorLineEditText(Context context) {
        this(context, null);
    }

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    public AnimatorLineEditText(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.AnimatorLineEditText);
        mFocusStrokeWidth = (int) a.getDimension(R.styleable.AnimatorLineEditText_focusStrokeWidth, mFocusStrokeWidth);
        mDefaultStrokeWidth = (int) a.getDimension(R.styleable.AnimatorLineEditText_defaultStrokeWidth, mDefaultStrokeWidth);
        mDefaultColor = a.getColor(R.styleable.AnimatorLineEditText_defaultColor, mDefaultColor);
        mFocusColor = a.getColor(R.styleable.AnimatorLineEditText_focusColor, mFocusColor);
        a.recycle();

        setBackground(null);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(mDefaultStrokeWidth);
        mPaint.setColor(mDefaultColor);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec) + mFocusStrokeWidth;
        setMeasuredDimension(mWidth, mHeight);
        setOnFocusChangeListener(new OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean b) {
                if (b) {
                    setFocus();
                }else{
                    setUnFocus();
                }
            }
        });
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(mDefaultColor);
        mPaint.setStrokeWidth(mDefaultStrokeWidth);
        canvas.drawLine(0, mHeight - mDefaultStrokeWidth, mWidth, mHeight - mDefaultStrokeWidth, mPaint);
        mPaint.setColor(mFocusColor);
        mPaint.setStrokeWidth(mFocusStrokeWidth);
        canvas.drawLine(mWidth / 2, mHeight - mFocusStrokeWidth, mWidth / 2 - mProgress, mHeight - mFocusStrokeWidth, mPaint);
        canvas.drawLine(mWidth / 2, mHeight - mFocusStrokeWidth, mWidth / 2 + mProgress, mHeight - mFocusStrokeWidth, mPaint);
    }

    private void setFocus(){
        ValueAnimator animator = ValueAnimator.ofFloat(0, mWidth / 2);
        animator.setDuration(500);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                mProgress = (float) valueAnimator.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.start();
    }

    private void setUnFocus(){
        ValueAnimator animator = ValueAnimator.ofFloat(mWidth / 2, 0);
        animator.setDuration(500);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                mProgress = (float) valueAnimator.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.start();
    }
}

使用

 <com.lanbaoapp.keyboarddemo.AnimatorLineEditText
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:hint="请输入账号"
        android:textSize="14sp"
        app:focusColor="@color/colorPrimary"/>

项目有类似效果的可以直接拿去使用!!!