# 仿QQ底部导航栏的自定义view

仿QQ底部导航栏的自定义view

转载请注明出处：http://blog.csdn.net/zkjthinking/article/details/77043770

1.首先看看QQ的一个功能；

qq的这个交互效果还是蛮好的。所以自己尝试的撸一个；
绕着圆的圆周在转动；
来张图片吧；画图水平太low，将就看，我得确保我不被打死；

直接上代码；

@SuppressLint("AppCompatCustomView")
public class CustomView extends View {
    private Paint mPaint;
    private int mWidth = 200;
    private int mHeight = 200;
    float facex = 100;
    float facey = 100;
    private float centerX = 100;
    private float centerY = 100;


    float rawX;
    float rawY;


    //指定一个脸的圆心，其他的图形根据这个来绘制
    float FACE_CENTER = 100;


    private int color;

    public int getColor() {
        return color;
    }

    public void setColor(int color) {
        this.color = color;
    }

    public CustomView(Context context) {
        this(context, null);
    }

    public CustomView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }


    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        //这段设置自定义view的位置的；
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        int size = MeasureSpec.getSize(widthMeasureSpec);
        int mode1 = MeasureSpec.getMode(heightMeasureSpec);
        int size1 = MeasureSpec.getSize(heightMeasureSpec);

        if (mode == MeasureSpec.AT_MOST && mode1 == MeasureSpec.AT_MOST){
            setMeasuredDimension(mWidth,mHeight);
        }else if (mode == MeasureSpec.AT_MOST){
            setMeasuredDimension(mWidth,size1);
        } else if (mode1 == MeasureSpec.AT_MOST){
            setMeasuredDimension(size,mHeight);
        }

    }


    @SuppressLint("ResourceAsColor")
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //画脸
        mPaint.setColor(color);
        canvas.drawCircle(facex, facey, 50, mPaint);

        //画眼睛
        mPaint.setColor(Color.WHITE);
        canvas.drawCircle((centerX - 20), (centerY - 10), 10, mPaint);
        canvas.drawCircle(centerX + 20, centerY - 10, 10, mPaint);

        //画嘴
        mPaint.setStyle(Paint.Style.FILL); // 填充模式
        canvas.drawArc(centerX - 25, centerY + 5, centerX + 25, centerY + 35, 0, 180, true, mPaint);

        //画身子
        mPaint.setColor(color);
        canvas.drawArc(facex - 80, facey + 65, facex + 80, facey + 140, 0, -180, true, mPaint);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                rawX = event.getX();
                rawY = event.getY();

                break;
            case MotionEvent.ACTION_MOVE:
                rawX = event.getX();
                rawY = event.getY();

                //计算过程有更简单的算法。
                float sin = (float) ((Math.abs(rawY - FACE_CENTER) / Math.sqrt(Math.abs(rawX - FACE_CENTER) *Math.abs(rawX - FACE_CENTER)  + Math.abs(rawY - FACE_CENTER) * Math.abs(rawY - FACE_CENTER)) ));
                float cos = (float) ((Math.abs(rawX - FACE_CENTER) / Math.sqrt(Math.abs(rawX - FACE_CENTER) *Math.abs(rawX - FACE_CENTER)  + Math.abs(rawY - FACE_CENTER) * Math.abs(rawY - FACE_CENTER)) ));
                float x = 20 * cos;
                float y = 20 * sin;

                float fx = 10 * cos;
                float fy = 10 * sin;

                if (rawX > FACE_CENTER && rawY > FACE_CENTER) {
                    centerX = x + FACE_CENTER;
                    centerY = y + FACE_CENTER;
                    facex = FACE_CENTER + fx;
                    facey = FACE_CENTER + fy;
                } else if (rawX > FACE_CENTER && rawY < FACE_CENTER) {
                    centerX = x + FACE_CENTER;
                    centerY = FACE_CENTER - y;
                    facex = FACE_CENTER + fx;
                    facey = FACE_CENTER - fy;
                } else if (rawY < FACE_CENTER && rawX < FACE_CENTER) {
                    centerX = FACE_CENTER - x;
                    centerY = FACE_CENTER - y;

                    facex = FACE_CENTER - fx;
                    facey = FACE_CENTER - fy;
                } else if (rawX < FACE_CENTER && rawY > FACE_CENTER) {
                    centerX = FACE_CENTER - x;
                    centerY = FACE_CENTER + y;
                    facex = FACE_CENTER - fx;
                    facey = FACE_CENTER + fy;
                }
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                centerX = FACE_CENTER;
                centerY = FACE_CENTER;
                facex = FACE_CENTER;
                facey = FACE_CENTER;

                invalidate();
                break;
        }

        return true;
    }

}

2.看看效果;

好了这个效果出来了。可以用了。

第一次写博客，欢迎吐槽，不被打死就好；