进度展示VIP等级（带动画）

自定义View 实现如显示VIP等级等 带动画的等级显示。

 实现效果：

 

实现思路：

  1.根据屏幕宽度设置每一份等级之间的间隔          

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //获取屏幕的宽度
    WindowManager windowManager = (WindowManager) getContext().getSystemService(Context
            .WINDOW_SERVICE);
    DisplayMetrics dm = new DisplayMetrics();
    Display display = windowManager.getDefaultDisplay();
    display.getMetrics(dm);
    screen_w = dm.widthPixels;
    // 宽度大小;
    screenWidth = screen_w - DensityUtil.dip2px(getContext(), 30);
    qiShiWeiZhi = screenWidth / fenmu;
    Log.e(TAG, "screenWidth:" + screenWidth);
    radius_da = screenWidth / 25;
    radius_xiao = screenWidth / 25 - 5;
    // 高度大小;
    screenHeight = MeasureSpec.getSize(heightMeasureSpec);

    startX = screenWidth / fenmu;
    startY = screenHeight / 2;
    zongY = screenHeight / 2;
    zongX = screenWidth * (fenmu - 1) / fenmu;

    progressInterval = screenWidth / fenmu;
    head_radius = radius_tupian / 2;

}

2.画出全部进度

/**
 * 画全部进度
 *
 * @param canvas
 */
private void drawQuanBuJinDu(Canvas canvas) {
    canvas.drawRect(startX, startY - kuandu, zongX, zongY + kuandu, mPaint_qishi);
}

3.画出当前进度

/**
 * 画当前进度
 *
 * @param canvas
 */
private void drawJinDu(Canvas canvas) {
    Log.e(TAG, "getX_jindu() * percentage:" + getX_jindu() * percentage);
    canvas.drawRect(startX, startY - kuandu, getX_jindu(), zongY + kuandu, mPaint_jindu);
}

4.获取当前进度右下角X坐标

/**
 * 计算进度
 *
 * @return
 */
private int getX_jindu() {
    int x_jj = 0;
    if (jindu != dengji_gong && jindu != 0) {
        //最后一个进度圆的位置
        int jinduyuan = (int) (startX + ((jindu - 1) * progressInterval));
        //第一个起始圆的位置
        int quanbuyuan = (zongX - ((dengji_gong - (jindu + 2)) * progressInterval));
        x_jj = (int) (startX + (((quanbuyuan - jinduyuan) / 2) + (jindu - 1) *
                progressInterval) * percentage);
    } else if (jindu == dengji_gong) {
        x_jj = (int) (qiShiWeiZhi + (getZhi() * percentage));
    } else if (jindu == 0) {
        x_jj = (int) (qiShiWeiZhi + (getZhi()));
    }

    return x_jj;
}

/**
 * 平均每个等级的间隔
 *
 * @return
 */
private int getZhi() {
    return ((zongX - startY) / (dengji_gong - 1)) * jindu;

}

5.未达到等级的圆环和达到等级的圆环

/**
 * 进度圆
 *
 * @param canvas
 */
private void drawDangqianyuan(Canvas canvas) {
    if (jindu > 0) {
        for (int i = 0; i < jindu; i++) {
            canvas.drawCircle(startX + (i * progressInterval), screenHeight /
                    2, radius_da, mPaint_dangqian_da);
            canvas.drawCircle(qiShiWeiZhi + (i * progressInterval), screenHeight /
                    2, radius_xiao, mPaint_dangqian_xiao);
            canvas.drawText("" + i, qiShiWeiZhi + (i * progressInterval) -
                    zi_cuowei, screenHeight / 2 + zi_cuowei, mPaint_dangqian);
        }
    }
}

/**
 * 未达到等级的圆环
 *
 * @param canvas
 */
private void drawQuanyuan(Canvas canvas) {

    for (int i = 0; i < dengji_gong - (jindu + 1); i++) {
        canvas.drawCircle(zongX - (i * progressInterval),
                zongY, radius_da, mPaint_quan_da);
        canvas.drawCircle(zongX - (i * progressInterval),
                zongY, radius_xiao, mPaint_quan_xiao);
        canvas.drawText("" + (dengji_gong - i - 1), zongX - (i * progressInterval) -
                zi_cuowei, zongY + zi_cuowei, mPaint_quanbu);
    }
}

6.设置呢称 、当前等级文字

/**
 * 呢称 、当前等级文字  
 *
 * @param canvas
 */
private void drawQiTa(Canvas canvas) {
    //呢称
    canvas.drawText(nicheng, weiZhiDistance(nicheng),
            zongY - jvli, mPaint_zi);
    //当前等级文字
    canvas.drawText(dengjishu, weiZhiDistance(dengjishu),
            zongY + jvli + 30, mPaint_zi);
}

7.昵称 文字位置算法

/**
 * 昵称  等级  位置距离
 *
 * @param weizhi
 * @return
 */
private int weiZhiDistance(String weizhi) {
    int kuan = (int) mPaint_zi.measureText(weizhi, 0, weizhi.length());
    Log.e(TAG, "weizhi:" + kuan);
    if (nicheng.length() <= radius_tupian) {
        Log.e(TAG, "weizhi1:" + kuan);
        return qiShiWeiZhi + getZhi() - kuan / 2;
    } else {
        Log.e(TAG, "weizhi2:" + kuan);
        return qiShiWeiZhi + getZhi() - head_radius;
    }

}

8.设置头像

/**
 * 头像
 *
 * @param canvas
 */
public void getTouXiang(final Canvas canvas) {

    Drawable drawable = getContext().getResources().getDrawable(R.mipmap.ic_launcher);
    Bitmap bitmap1 = drawableToBitmap(drawable);
    canvas.drawBitmap(bitmap1, qiShiWeiZhi + getZhi() - radius_tupian / 2,
            zongY - radius_tupian / 2, mPaint_dangqian_da);
}

/**
 *  Drawable转Bitmap
 * @param drawable
 * @return
 */
public static Bitmap drawableToBitmap(Drawable drawable) {
    // 取 drawable 的长宽
    int tou_kuan = drawable.getIntrinsicWidth();
    int h = drawable.getIntrinsicHeight();

    // 取 drawable 的颜色格式
    Bitmap.Config config = drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888
            : Bitmap.Config.RGB_565;
    // 建立对应 bitmap
    Bitmap bitmap = Bitmap.createBitmap(tou_kuan, h, config);
    // 建立对应 bitmap 的画布
    Canvas canvas = new Canvas(bitmap);
    drawable.setBounds(0, 0, tou_kuan, h);
    // 把 drawable 内容画到画布中
    drawable.draw(canvas);
    return bitmap;
}

9.设置动画效果 

/**
 * 开始动画
 */
public void start() {
    ObjectAnimator animator = ObjectAnimator.ofFloat(this, "percentage", 0f, 1f);
    animator.setDuration(5000)
            .start();
}


public void setPercentage(float percentage) {
    Log.e(TAG, "percentage:" + percentage);
    this.percentage = percentage;
    invalidate();
}

 源代码：https://download.csdn.net/download/qq_17098509/10941117