一个效果很棒的搜索框，跟srollview更配---从EMUI有感而写

最近换了荣耀的手机，感觉EMUI比以前进步非常大，里面的一个滑动布局嵌套的搜索效果做的非常棒，我就开始寻思自己也搞一个出来玩玩，纯属练手，废话少说，先上gif效果图

我绝对的Beyond迷，连配图都是想着用他们的，因为电脑只有他们的图。。。

好吧，看来已经成功的吸引你的注意了

其实效果相对比较简单，但出来感觉还行吧

原理来了

使用ValueAnimator控制来绘制RoundRect（圆角矩形）

那么，直接上代码吧

package com.xiaofu.mysearch;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AccelerateInterpolator;

/**
 * Created by XiaoFu on 2017-06-28 10:35.
 * 注释：
 */

public class MySearchView extends View {
    private Paint bgPaint, textPaint;
    private Paint.FontMetricsInt fontMetrics;
    private float left, top, right, bottom;
    private RectF mRectF;
    private ValueAnimator mAnimator;
    private boolean isOpen = true;//是否打开


    private int bgColor, textSize, textColor;
    private String text;

    private final static int MIN_ALPHA = 0;
    private final static int MAX_ALPHA = 200;
    private final static long ANIMATORE_TIME = 300L;
    private final static String TEXT = "搜索更多";
    private final static int TEXT_SIZE = 22;
    private final static int TEXT_COLOR = Color.WHITE;
    private final static int BG_COLOR = Color.RED;

    public MySearchView(Context context) {
        super(context);
        initView(context, null);
    }

    public MySearchView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView(context, attrs);
    }

    public MySearchView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {
        bgPaint = new Paint();
        bgPaint.setAntiAlias(true);
        bgPaint.setStyle(Paint.Style.FILL);
        bgPaint.setColor(BG_COLOR);

        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setColor(TEXT_COLOR);
        textPaint.setTextSize(TEXT_SIZE);
        fontMetrics = textPaint.getFontMetricsInt();

        mRectF = new RectF();

        initAnimator();
        getConfigValue(context, attrs);
    }

    private void getConfigValue(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MySearchView, 0, 0);
        try {
            bgColor = typedArray.getColor(R.styleable.MySearchView_backgroundColor, BG_COLOR);
            textColor = typedArray.getColor(R.styleable.MySearchView_textColor, TEXT_COLOR);
            textSize = typedArray.getDimensionPixelSize(R.styleable.MySearchView_textSize, TEXT_SIZE);
            text = typedArray.getString(R.styleable.MySearchView_text);

            setBackgroundColor(bgColor);
            setTextColor(textColor);
            setTextSize(textSize);
            setText(text);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            typedArray.recycle();
        }
    }

    private void initAnimator() {
        if (null == mAnimator) {
            mAnimator = ObjectAnimator.ofInt(MAX_ALPHA, MIN_ALPHA);
            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    int value = (Integer) animation.getAnimatedValue();
                    if (!isOpen) {
                        if (left < (right - bottom)) {
                            left = (right - bottom) * animation.getAnimatedFraction();//根据比例获取绘制view左边的值
                            if (null != bgPaint) {
                                bgPaint.setAlpha(value);
                            }
                        }
                    } else {
                        if (left > 0) {
                            left = (right - bottom) * (1 - animation.getAnimatedFraction());
                            if (null != bgPaint) {
                                bgPaint.setAlpha(MAX_ALPHA - value + MIN_ALPHA);
                            }
                        }
                    }

                    if (1f == animation.getAnimatedFraction()) {
                        if (left > 0) {
                            isOpen = false;
                        } else {
                            isOpen = true;
                        }
                        if (null != mOnAnimatorStateListener) {
                            mOnAnimatorStateListener.onAnimatorFinish(isOpen);
                        }
                    } else if (0f == animation.getAnimatedFraction()) {
                        if (null != mOnAnimatorStateListener) {
                            mOnAnimatorStateListener.onAnimatorStart(isOpen);
                        }
                    } else {
                        if (null != mOnAnimatorStateListener) {
                            mOnAnimatorStateListener.onAnimatorIng();
                        }
                    }
                    invalidate();
                }
            });
            mAnimator.setDuration(ANIMATORE_TIME);
            mAnimator.setInterpolator(new AccelerateInterpolator());//先慢后快加速
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        top = left = 0;
        right = w;
        bottom = h;
        bgPaint.setAlpha(MAX_ALPHA);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mRectF.set(left, top, right, bottom);
        canvas.drawRoundRect(mRectF, bottom, bottom, bgPaint);//画出圆角矩形

        int textWidth = getTextWidth(textPaint, text);
        float baseline = (mRectF.bottom + mRectF.top - fontMetrics.bottom - fontMetrics.top) / 2;//计算baseline用于文字居中
        if (mRectF.width() > (textWidth + 2 * bottom)) {
            canvas.drawText(text, left + (mRectF.width() - textWidth) / 2, baseline, textPaint);//写上文字
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                if (x + getLeft() < getRight() && y + getTop() < getBottom() && isOpen) {//添加点击监听
                    if (null != mOnClickListener) {
                        mOnClickListener.onClick();
                    }
                }
                break;
        }
        return true;
    }

    private int getTextWidth(Paint paint, String str) {
        int iRet = 0;
        if (str != null && str.length() > 0) {
            int len = str.length();
            float[] widths = new float[len];
            paint.getTextWidths(str, widths);
            for (int j = 0; j < len; j++) {
                iRet += (int) Math.ceil(widths[j]);
            }
        }
        return iRet;
    }

    public void setBackgroundColor(int color) {
        this.bgColor = color;
        if (null != bgPaint) {
            bgPaint.setColor(bgColor);
        }
    }

    public void setTextColor(int color) {
        this.textColor = color;
        if (null != textPaint) {
            textPaint.setColor(textColor);
        }
    }

    public void setTextSize(int size) {
        this.textSize = size;
        if (null != textPaint) {
            textPaint.setTextSize(textSize);
        }
    }

    public void setText(String s) {
        if (!TextUtils.isEmpty(s)) {
            this.text = s;
        } else {
            this.text = TEXT;
        }
    }

    public void setIsOpen(boolean isOpen) {
        this.isOpen = isOpen;
        if (null != mAnimator) {
            mAnimator.start();
        }
    }

    private OnAnimatorStateListener mOnAnimatorStateListener;

    public void setOnAnimatorStateListener(OnAnimatorStateListener onAnimatorStateListener) {
        this.mOnAnimatorStateListener = onAnimatorStateListener;
    }

    private OnClickListener mOnClickListener;

    public void setOnClickListener(OnClickListener onClickListener) {
        this.mOnClickListener = onClickListener;
    }

    public interface OnAnimatorStateListener {
        void onAnimatorStart(boolean isOpen);

        void onAnimatorFinish(boolean isOpen);

        void onAnimatorIng();
    }

    public interface OnClickListener {
        void onClick();
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if(null != mAnimator){
            mAnimator.removeAllUpdateListeners();
            mAnimator = null;
        }
    }
}

既然是在srcollview中拖动，所以srcollview也要适当改一下

package com.xiaofu.mysearch;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;

/**
 * Created by XiaoFu on 2017-06-28 14:14.
 * 注释：
 */

public class MyScrollView extends ScrollView {

    /**
     * ScrollView正在向上滑动
     */
    public static final int SCROLL_UP = 0x01;

    /**
     * ScrollView正在向下滑动
     */
    public static final int SCROLL_DOWN = 0x10;

    /**
     * 最小的滑动距离
     */
    private static final int SCROLLLIMIT = 1;

    private OnScrollListener listener;

    /**
     * 设置滑动距离监听器
     */
    public void setOnScrollListener(OnScrollListener listener) {
        this.listener = listener;
    }

    public MyScrollView(Context context) {
        super(context);
    }

    public MyScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    // 滑动距离监听器
    public interface OnScrollListener {

        /**
         * 在滑动的时候调用，scrollY为已滑动的距离
         */
        void onScroll(int scrollY, int oritention);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);

        if (oldt > t && oldt - t > SCROLLLIMIT) {// 向下
            if (listener != null) {
                listener.onScroll(t, SCROLL_DOWN);
            }
        } else if (oldt < t && t - oldt > SCROLLLIMIT) {// 向上
            if (listener != null) {
                listener.onScroll(t, SCROLL_UP);
            }
        }
    }
}

感谢你的阅读

我知道还有改进的空间，有空大家一起探讨一下？

具体代码请跳转（给star的都是大爷）

https://github.com/xiaofuchen/MySearch

有问题反馈

在使用中有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流

• QQ: 452714402

关于作者

我是小夫，一个屌丝程序员，喜欢交朋友。