仿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.看看效果;

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

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