自定义view(三)之滴滴loading

公司有个福利,就是每天晚上加班之后可以打车,然后每个月报销一次,感觉生活的幸福感都提升了,有木有,加班之后那么累正好打车,但是我住的比较偏呀,有时候看着滴滴那个转啊转就是没有车,老烦了,你就不能给我多通知几个车吗。正好学了自定义view那么自己手撸一个,嘿嘿。
先上个图看看效果怎么样

滴滴的图

看看是不是特别像滴滴的呢,除了车通知的太多了[捂脸],到了上大餐的时候了,先说一下思路:

  • 大概分成四部分:
    1. 不动的字比如:正在为您叫车,为您优先叫车,这个是可以用textView直接写的
    2. 需要在画布上写的,比如:已通知出租车,通知多少辆,“辆”,这些虽然可以用textView写然后套framelayout,但是这样需要调的地方比较多,所以还是自定义
    3. 基础的灰色的圆,转的橙色的圆
    4. 在圆上边一直转的那个圆

开始上代码了
mCirclePaint = new Paint();
mCirclePaint.setStrokeWidth(5);
mCirclePaint.setColor(Color.parseColor("#E3E4E7"));
mCirclePaint.setAntiAlias(true);
mCirclePaint.setStyle(Paint.Style.STROKE);

    mTextPaint = new Paint();
    mTextPaint.setStrokeWidth(1);
    mTextPaint.setColor(Color.parseColor("#8B8C8F"));
    mTextPaint.setAntiAlias(true);
    mTextPaint.setTextSize(20);
    mTextPaint.setStyle(Paint.Style.FILL);


    mTextCountPaint = new Paint();
    mTextCountPaint.setStrokeWidth(1);
    mTextCountPaint.setColor(Color.parseColor("#EC9B70"));
    mTextCountPaint.setAntiAlias(true);
    mTextCountPaint.setTextSize(40);
    mTextCountPaint.setStyle(Paint.Style.FILL);


    mTextUnitPaint = new Paint();
    mTextUnitPaint.setStrokeWidth(1);
    mTextUnitPaint.setColor(Color.parseColor("#EC9B70"));
    mTextUnitPaint.setAntiAlias(true);
    mTextUnitPaint.setTextSize(20);
    mTextUnitPaint.setStyle(Paint.Style.FILL);

    mDrawArcPaint = new Paint();
    mDrawArcPaint.setStrokeWidth(5);
    mDrawArcPaint.setAntiAlias(true);
    mDrawArcPaint.setStyle(Paint.Style.STROKE);

    pos = new float[2];
    tan = new float[2];
    BitmapFactory.Options options = new BitmapFactory.Options();//通过bitmapFactory获取图片资源
    mBitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.point,options);//获取资源
    mMatrix = new Matrix();

这次我先设置了多个画笔,这样就不用每次绘制不同的宽度或颜色的图形就要重新设置画笔了,但是这样就有一个问题,成员变量太多了,会占用比较大的内存(这里我要吐槽一下我,我有一个A同事,还有一个B同事,A同事说你为啥方法里用局部变量不用成员变量,B同事说我这个只是在方法中调用,所以用局部变量,A同事说你这个写的不对,真是不知道怎么说这个A同事了),如果项目中还是尽量少写成员变量,而选择的用局部变量。

现在就是开始画了圆了

@Override
protected void onDraw(Canvas canvas) {
    canvas.translate(mWidth/2,mHeight/2);//把画布移到屏幕的中心
    rectF = new RectF(-mWidth/2+50,-mWidth/2+50,mWidth/2-50,mWidth/2-50);

    Path path = new Path();
    path.addCircle(0,0,(mWidth-100)/2, Path.Direction.CW);//cw是顺时针
    canvas.drawPath(path,mCirclePaint);//顺时针的画一个圆


    PathMeasure measure = new PathMeasure(path, false);     // 创建 PathMeasure,这是测试path的

    BigDecimal bigDecimal1 = BigDecimal.valueOf(sweepAngle);
    BigDecimal b2 = BigDecimal.valueOf(360);
    float rad = bigDecimal1.divide(b2,MathContext.DECIMAL32).floatValue();//通过bigdecimal来获取黄线在灰色圆上的位置,在放黄色的小球
    measure.getPosTan(measure.getLength() * rad +10, pos, tan);// 获取当前位置的坐标以及趋势

    mMatrix.reset();                                                        // 重置Matrix
    float degrees = (float) (Math.atan2(tan[1], tan[0]) * 180.0 / Math.PI); // 计算图片旋转角度

    mMatrix.postRotate(degrees, mBitmap.getWidth() / 2, mBitmap.getHeight() / 2);   // 旋转图片
    mMatrix.postTranslate(pos[0] - mBitmap.getWidth() / 2, pos[1] - mBitmap.getHeight() / 2);   // 将图片绘制中心调整到与当前点重合

    Rect rect = new Rect();
    mTextPaint.getTextBounds(notification,0,notification.length(),rect);
    canvas.drawText(notification,-(rect.left+rect.right)/2,rect.bottom,mTextPaint);//写通知的字

    Rect rectCount = new Rect();
    mTextCountPaint.getTextBounds(String.valueOf(sweepAngle),0,String.valueOf(sweepAngle).length(),rectCount);
    canvas.drawText(String.valueOf(sweepAngle),-(rect.left+rect.right)/2,rect.bottom-rect.top-rect.bottom-rectCount.top/*-rectCount.bottom*/,mTextCountPaint);//写车的数量

    canvas.drawText(unit,(rect.left-rect.right)/2+100,rect.bottom-rect.top-rect.bottom-rectCount.top/*-rectCount.bottom*/,mTextUnitPaint);//写车的单位
//  Log.d(TAG, "onDraw: y=  "+(-rect.top-rectCount.top-rectCount.bottom));
//  Log.d(TAG, "onDraw: rect.top "+rect.top);
//  Log.d(TAG, "onDraw: rectCount.top "+rectCount.top);
//  Log.d(TAG, "onDraw: rectCount.bottom "+rectCount.bottom);

    mMatrix.postRotate(-90);
    canvas.drawBitmap(mBitmap, mMatrix, mDrawArcPaint);
    canvas.drawArc(rectF,-90,sweepAngle,false, mDrawArcPaint);
}

思路也写到注释里边了,哈哈,注意看代码就可以了,然后这时候还不能动哩,要设置动怎么办呢,就是刷新,上次用了pos,这次用Timer+handler。

    final Timer timer = new Timer();
    TimerTask timeTask = new TimerTask() {
        @Override
        public void run() {
            if (i>=360) {
                i = 0;
            }
            Message message = new Message();
            message.what = 1;
            handler.sendMessage(message);
        }
    };
    timer.schedule(timeTask,1000,100);//每100毫秒时候刷新一下,第三个参数

}

Handler handler = new Handler(){
    @Override
    public void handleMessage(Message msg) {
        if (msg.what == 1) {
            diDiView.setData(i+=1);
        }
        super.handleMessage(msg);
    }
};

这就搞定了,然后你就看到通知了好多车就是没人来接[尴尬]。代码已经上传到我的git欢迎大家star和fork,也可以关注我的简书

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,165评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,720评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,849评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,245评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,596评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,747评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,977评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,708评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,448评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,657评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,141评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,493评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,153评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,890评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,799评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,685评论 2 272

推荐阅读更多精彩内容