2019-04-04 16:23:00 qq_35900989 阅读数 333
  • Android组件难点精讲

    Android组件开发视频培训教程,Android开发者可以使用Android组件来实现一些特定的功能,比如,可以通过组件来实现进度条功能、选项卡功能等,同样,也可以使用组件来实现拖动条或者星级评分条等功能。实战讲解图片切换器、GridView网格视图、Gallery画廊视图等高级组件的使用技巧。

    4184 人正在学习 去看看 CSDN讲师

最近看见有个博主写的等级进度条不从,自己改进下 ,希望提提意见

1.自定义LeveIDemo 继承RelativeLayout

package com.leveldemo;


import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.util.SparseArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;

public class LeveIDemo extends RelativeLayout {
    //横向seekbar的容器
    public HorizontalScrollView horizontalScrollView;
    public LinearLayout contentLl;
    //经验值悬浮窗
    public TextView expTv;
    //当前等级的百分比
    public double percent;
    private String string;
    //横向seekbar的宽度

    public double getPercent() {
        return percent;
    }

    public void setPercent(double percent) {
        this.percent = percent;
    }

    public int width;
    //底色白线
    public View whiteLine;
    //经验红线
    private View redLine;
    private SparseArray<ImageView> imageViews;
    private SparseArray<TextView> textviews;
    private List<SimpleLevelModel> simpleLevelModelList;

    private int myLevel = 0;
    private Context context1;
    public int MDR = 9;


    public LeveIDemo(Context context) {

        super(context);
        this.context1 = context;
    }

    public LeveIDemo(Context context, AttributeSet attrs) {

        super(context, attrs);
        this.context1 = context;

        initView(context, attrs);
        initData();
    }

    public int getMyLevel() {
        return myLevel;
    }

    public void setMyLevel(int myLevel) {
        this.myLevel = myLevel;
    }

    public int getMDR() {
        return MDR;
    }

    public void setMDR(int MDR) {
        this.MDR = MDR;
    }

    private void initView(Context context, AttributeSet attrs) {
        // 加载布局
        LayoutInflater.from(context).inflate(R.layout.leve_id_view, this);

        horizontalScrollView = findViewById(R.id.scrollview_level);
        contentLl = findViewById(R.id.ll_content_img);
        expTv = findViewById(R.id.tv_exp);
        redLine = findViewById(R.id.red_line);
        whiteLine = findViewById(R.id.white_line);




        simpleLevelModelList = new ArrayList<>();
        for (int i = 0; i < MDR; i++) {
            SimpleLevelModel moel = new SimpleLevelModel();
            moel.setLevelId(i + 1);
            simpleLevelModelList.add(moel);
        }

    }


    private void initData() {
        if (imageViews == null) {
            imageViews = new SparseArray<>();
        }
        if (textviews == null) {
            textviews = new SparseArray<>();
        }
        for (int i = 0; i < simpleLevelModelList.size(); i++) {
            if (i != simpleLevelModelList.size() - 1) {
                contentLl.addView(getRadioView(i, false), i);
            } else {
                contentLl.addView(getRadioView(i, true), i);
            }
        }
        contentLl.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
            @Override
            public void onGlobalLayout() {
                width = contentLl.getWidth();
                contentLl.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                setDefault(myLevel);
            }
        });

    }


    private View getRadioView(final int i, boolean isLast) {
        View view = null;
        if (!isLast) {
            view = LayoutInflater.from(context1).inflate(R.layout.item_lv_tagpoint, contentLl, false);
            ImageView imageview = (ImageView) view.findViewById(R.id.image);
            TextView textview = (TextView) view.findViewById(R.id.tv_level_seekbar);
            textview.setText("LV" + simpleLevelModelList.get(i).getLevelId());
            imageViews.put(i, imageview);
            textviews.put(i, textview);
        } else {
            view = LayoutInflater.from(context1).inflate(R.layout.item_lv_lastpoint, contentLl, false);
            ImageView imageview = (ImageView) view.findViewById(R.id.image);
            TextView textview = (TextView) view.findViewById(R.id.tv_level_seekbar);
            textview.setText("LV" + simpleLevelModelList.get(i).getLevelId());
            imageViews.put(i, imageview);
            textviews.put(i, textview);

        }
        return view;
    }

    public void setDefault(int level) {
        for (int i = 0; i < imageViews.size(); i++) {
            if (i < level) {
                imageViews.get(i).setImageResource(R.drawable.level_red_point);
            } else {
                imageViews.get(i).setImageResource(R.drawable.level_white_point);
            }
        }

//
        //进度底色
        RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) whiteLine.getLayoutParams();
        lp.width = (simpleLevelModelList.size() - 1) * DensityUtils.dp2px(context1.getApplicationContext(), 100F);
        lp.setMargins(DensityUtils.dp2px(context1.getApplicationContext(), 50F), 0, 0, 0);
//
        whiteLine.setLayoutParams(lp);

        RelativeLayout.LayoutParams lp1 = (RelativeLayout.LayoutParams) redLine.getLayoutParams();
        lp1.width = (myLevel - 1) * DensityUtils.dp2px(context1.getApplicationContext(), 100F) + (int)
                (percent * DensityUtils.dp2px(context1.getApplicationContext(), 100F));
        lp1.setMargins(DensityUtils.dp2px(context1.getApplicationContext(), 50F), 0, 0, 0);
        redLine.setLayoutParams(lp1);
        horizontalScrollView.scrollTo(lp1.width, 0);

        RelativeLayout.LayoutParams lp2 = (RelativeLayout.LayoutParams) expTv.getLayoutParams();
        //偏移时需要加悬浮窗宽度+point的宽度
        lp2.setMargins(lp1.width + DensityUtils.dp2px(context1.getApplicationContext(), 50F) - expTv.getWidth() / 2, 0, 0, DensityUtils.dp2px(context1.getApplicationContext(), 10F));
        expTv.setLayoutParams(lp2);

    }
}

2新建实体类

package com.leveldemo;

/**
 * Created by clear on 2017/5/10.
 */
public class SimpleLevelModel {

    private int levelId;
    private int minExp;

    public int getLevelId() {
        return levelId;
    }

    public void setLevelId(int levelId) {
        this.levelId = levelId;
    }

    public int getMinExp() {
        return minExp;
    }

    public void setMinExp(int minExp) {
        this.minExp = minExp;
    }
}

3.工具类

package com.leveldemo;

import android.content.Context;
import android.util.TypedValue;

/**
 * Created by Administrator on 2017/5/9 0009.
 */

public class DensityUtils {

     private DensityUtils(){
          /* cannot be instantiated */
         throw new UnsupportedOperationException("cannot be instantiated");
     }
     /**
       * dp 转 px
       *
       * @param context
       * @param
       * @return
       */
     public static int dp2px(Context context, float dpVal) {
         return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                    dpVal, context.getResources().getDisplayMetrics());
     }

    /**
     * sp转px
     * @param context
     * @param spVal
     * @return
     */
         public static int sp2px(Context context, float spVal) {
             return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
                  spVal, context.getResources().getDisplayMetrics());
         }

    /**
     * px转dp
     * @param context
     * @param pxVal
     * @return
     */
    public static float px2dp(Context context, float pxVal) {
         final float scale = context.getResources().getDisplayMetrics().density;
         return (pxVal / scale);
    }

    /**
     * px转sp
     * @param context
     * @param pxVal
     * @return
     */
     public static float px2sp(Context context, float pxVal) {
         return (pxVal / context.getResources().getDisplayMetrics().scaledDensity);
     }
}

3.在activity_main,的布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    android:background="#356485"
    android:gravity="center_vertical"
    android:orientation="vertical">

    <com.leveldemo.LeveIDemo

        android:id="@+id/id_le"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
  

</FrameLayout>

4.在MainActivity的设置

package com.leveldemo;

import android.annotation.TargetApi;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.SparseArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LeveIDemo leveIDemo = (LeveIDemo) findViewById(R.id.id_le);
//
        leveIDemo.setMyLevel(2);//等级

        leveIDemo.expTv.setText("22289万元");//目前等级的数据
        leveIDemo.setPercent(0.23);//目前等级的百分比
    }


}

5.效果图;


 

2018-11-28 13:47:50 qq_15023815 阅读数 1133
  • Android组件难点精讲

    Android组件开发视频培训教程,Android开发者可以使用Android组件来实现一些特定的功能,比如,可以通过组件来实现进度条功能、选项卡功能等,同样,也可以使用组件来实现拖动条或者星级评分条等功能。实战讲解图片切换器、GridView网格视图、Gallery画廊视图等高级组件的使用技巧。

    4184 人正在学习 去看看 CSDN讲师

现在很多APP的会员进度条、等级、积分进度条都是按分段显示的,由于最近自己的项目也用到类似的控件,如下图所示,于是就自己撸了一个!

package progressandanimation.wtt.com.myapplication;


import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * Date:2018/11/27
 * Author:WangTingting
 * 说明:自定义信用等级
 */
public class MyProgressView extends View {

    private Paint mCircleOutPaint;
    private Paint mCircleInPaint;
    private Paint mLinePaint;

    private Paint mDefaltCircleOutPaint;
    private Paint mDefaltCircleInPaint;
    private Paint mDefaltLinePaint;

    private Paint mTvPaint;
    private int circleOutRadius = 16;
    private int circleInRadius = 8;
    private int margin = 60; //左右margin

    private float mProgress;
    private ValueAnimator animation;

    public MyProgressView(Context context) {
        super(context);
        initView();
    }

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

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

    public void initView() {
        mCircleOutPaint = new Paint();
        mCircleOutPaint.setStyle(Paint.Style.FILL);
        mCircleOutPaint.setColor(Color.parseColor("#40A5FF"));
        mCircleOutPaint.setAntiAlias(true);

        mCircleInPaint = new Paint();
        mCircleInPaint.setStyle(Paint.Style.FILL);
        mCircleInPaint.setColor(Color.WHITE);
        mCircleInPaint.setAntiAlias(true);

        mLinePaint = new Paint();
        mLinePaint.setColor(Color.parseColor("#40A5FF"));
        mLinePaint.setStrokeWidth(8);

        mDefaltCircleOutPaint = new Paint();
        mDefaltCircleOutPaint.setStyle(Paint.Style.FILL);
        mDefaltCircleOutPaint.setColor(Color.parseColor("#858585"));
        mDefaltCircleOutPaint.setAntiAlias(true);

        mDefaltCircleInPaint = new Paint();
        mDefaltCircleInPaint.setStyle(Paint.Style.FILL);
        mDefaltCircleInPaint.setColor(Color.WHITE);
        mDefaltCircleInPaint.setAntiAlias(true);

        mDefaltLinePaint = new Paint();
        mDefaltLinePaint.setColor(Color.parseColor("#858585"));
        mDefaltLinePaint.setStrokeWidth(8);

        mTvPaint = new Paint();
        mTvPaint.setColor(Color.parseColor("#858585"));
        mTvPaint.setTextSize(sp2px(getContext(), 12));
    }

    public void setProgress(float progress) {
        if (animation == null) {
            animation = ValueAnimator.ofFloat(0f, Float.valueOf(progress));
        }

        if (progress > 0 && progress <= 400) {
            mLinePaint.setColor(getResources().getColor(R.color.ring1));
            mCircleOutPaint.setColor(getResources().getColor(R.color.ring1));
        } else if (progress > 400 && progress <= 700) {
            mLinePaint.setColor(getResources().getColor(R.color.ring2));
            mCircleOutPaint.setColor(getResources().getColor(R.color.ring2));
        } else if (progress > 700 && progress <= 900) {
            mLinePaint.setColor(getResources().getColor(R.color.ring3));
            mCircleOutPaint.setColor(getResources().getColor(R.color.ring3));
        } else if (progress > 900) {
            mLinePaint.setColor(getResources().getColor(R.color.ring4));
            mCircleOutPaint.setColor(getResources().getColor(R.color.ring4));
        }

        animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mProgress = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        animation.setDuration(3000);
        animation.start();
    }

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int height = getHeight();
        int width = getWidth();
        int realWidth = (width - 2 * margin - 8 * circleOutRadius) / 3;

        canvas.drawLine(margin + circleOutRadius * 2, height / 2, width - margin - circleOutRadius * 2, height / 2, mDefaltLinePaint);

        for (int i = 0; i < 4; i++) {
            canvas.drawCircle(margin + circleOutRadius * (i * 2 + 1) + realWidth * i, height / 2, circleOutRadius, mDefaltCircleOutPaint);
            canvas.drawCircle(margin + circleOutRadius * (i * 2 + 1) + realWidth * i, height / 2, circleInRadius, mDefaltCircleInPaint);
        }

        canvas.drawText("0", margin + circleOutRadius - getTextWidth("0"), height / 2 - 30, mTvPaint);
        canvas.drawText("400", margin + circleOutRadius * 3 + realWidth - getTextWidth("400"), height / 2 - 30, mTvPaint);
        canvas.drawText("700", margin + circleOutRadius * 5 + realWidth * 2 - getTextWidth("700"), height / 2 - 30, mTvPaint);
        canvas.drawText("900+", margin + circleOutRadius * 7 + realWidth * 3 - getTextWidth("900+"), height / 2 - 30, mTvPaint);

        canvas.drawText("低信用", margin + circleOutRadius - getTextWidth("低信用"), height / 2 + 50, mTvPaint);
        canvas.drawText("中信用", margin + circleOutRadius * 3 + realWidth - getTextWidth("中信用"), height / 2 + 50, mTvPaint);
        canvas.drawText("高信用", margin + circleOutRadius * 5 + realWidth * 2 - getTextWidth("高信用"), height / 2 + 50, mTvPaint);
        canvas.drawText("极高信用", margin + circleOutRadius * 7 + realWidth * 3 - getTextWidth("极高信用"), height / 2 + 50, mTvPaint);

        float ratio;
        float result = 0;

        if (mProgress > 0 && mProgress <= 400) {
            ratio = mProgress / 400;
            result = margin + circleOutRadius * 2 + (ratio * realWidth);
        } else if (mProgress > 400 && mProgress <= 700) {
            ratio = (mProgress - 400) / 300;
            result = margin + circleOutRadius * 4 + (ratio * realWidth) + realWidth;
        } else if (mProgress > 700 && mProgress <= 900) {
            ratio = (mProgress - 700) / 200;
            result = margin + circleOutRadius * 6 + realWidth * 2 + (ratio * realWidth);
        } else if (mProgress > 900) {
            result = margin + circleOutRadius * 8 + 3 * realWidth;
        }
        canvas.drawLine(margin + circleOutRadius, height / 2, result, height / 2, mLinePaint);

        if (mProgress <= 0) {
            return;
        }
        canvas.drawCircle(margin + circleOutRadius, height / 2, circleOutRadius, mCircleOutPaint);
        canvas.drawCircle(margin + circleOutRadius, height / 2, circleInRadius, mCircleInPaint);
        if (mProgress <= 400) {
            return;
        }
        canvas.drawCircle(margin + circleOutRadius * 3 + realWidth, height / 2, circleOutRadius, mCircleOutPaint);
        canvas.drawCircle(margin + circleOutRadius * 3 + realWidth, height / 2, circleInRadius, mCircleInPaint);
        if (mProgress <= 700) {
            return;
        }
        canvas.drawCircle(margin + circleOutRadius * 5 + realWidth * 2, height / 2, circleOutRadius, mCircleOutPaint);
        canvas.drawCircle(margin + circleOutRadius * 5 + realWidth * 2, height / 2, circleInRadius, mCircleInPaint);
        if (mProgress <= 900) {
            return;
        }
        canvas.drawCircle(margin + circleOutRadius * 7 + realWidth * 3, height / 2, circleOutRadius, mCircleOutPaint);
        canvas.drawCircle(margin + circleOutRadius * 7 + realWidth * 3, height / 2, circleInRadius, mCircleInPaint);
    }

    public float getTextWidth(String text) {
        return mTvPaint.measureText(text) / 2;
    }

    public static int sp2px(Context context, float spValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (spValue * fontScale + 0.5f);
    }
}

然后在Activity中这样写就实现了

2019-02-26 10:56:32 qq_20451879 阅读数 261
  • Android组件难点精讲

    Android组件开发视频培训教程,Android开发者可以使用Android组件来实现一些特定的功能,比如,可以通过组件来实现进度条功能、选项卡功能等,同样,也可以使用组件来实现拖动条或者星级评分条等功能。实战讲解图片切换器、GridView网格视图、Gallery画廊视图等高级组件的使用技巧。

    4184 人正在学习 去看看 CSDN讲师
此篇应该算一个基础的自定义控件入门,内部没有去写自定义属性 ~

目录

  • 实现效果
  • 了解部分
  • 核心部分
  • 使用部分

实现效果

在这里插入图片描述

了解部分

  1. 创建画笔
	Paint  paint = new Paint();
  1. 画笔颜色
    paint.setColor(Color.parseColor("#FFFFFF"));
  1. 设置画笔样式,如果不设置,默认是全部填充(FILL)
   paint.setStyle(Paint.Style.FILL);
画笔样式分三种
  • Paint.Style.STROKE:描边

  • Paint.Style.FILL_AND_STROKE:描边并填充

  • Paint.Style.FILL:填充

4.打开抗锯齿;抗锯齿是依赖于算法的,算法决定抗锯齿的效率,在我们绘制棱角分明的图像时,比如一个矩形、一张位图,我们不需要打开抗锯齿

 paint.setAntiAlias(true);

5.设置笔刷的粗细度

   int linePaintStroke = dp2px(context, 3);
   paint.setStrokeWidth(linePaintStroke);

核心部分

ProgressLineView
package com.advance.yongliu.customlineview;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * @author YongLiu
 *         date  2019/1/6.
 *         desc:
 */

public class ProgressLineView extends View {
    private Paint paint;
    private int viewWidth;
    private int viewHeight;
    private Paint behindPaint;
    private Paint textPaint;
    private float mPresent;
    private String growthValue = "成长值";
    private String current = "目前";

    public ProgressLineView(Context context) {
        super(context);
        init(context);
    }

    public ProgressLineView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

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

    private void init(Context context) {
        /**
         * 顶部画笔配置
         * */
        paint = new Paint();
        paint.setColor(Color.parseColor("#FFFFFF"));
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);
        int linePaintStroke = dp2px(context, 3);
        paint.setStrokeWidth(linePaintStroke);

        /**
         * 底部画笔配置
         * */
        behindPaint = new Paint();
        behindPaint.setColor(Color.parseColor("#33000000"));
        behindPaint.setStyle(Paint.Style.FILL);
        behindPaint.setAntiAlias(true);
        int linePaintStroke1 = dp2px(context, 3);
        behindPaint.setStrokeWidth(linePaintStroke1);

        /**
         * 控件文字画笔配置
         * */
        textPaint = new Paint();
        textPaint.setColor(Color.parseColor("#FFFFFF"));
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setTextSize(16);
        textPaint.setAntiAlias(true);
        int linePaintStroke2 = dp2px(context, 50);
        textPaint.setStrokeWidth(linePaintStroke2);
    }

    /**
     * 设值 - 绘制
     * */
    public void setPresent(float present, String growthValue) {
        this.growthValue = growthValue;
        //动画效果,不适合此处控件
    /*    ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, present).setDuration(2000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mPresent = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.start();*/
        mPresent = present;
        //绘制
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        /**
         * 获取我们控件的宽、高
         * */
        viewWidth = MeasureSpec.getSize(widthMeasureSpec);
        viewHeight = MeasureSpec.getSize(heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        /**
		 * 设置图片,并获取图片宽高  (俩图自行找UI获取)
		 * @params bigBitmap  进度大圆点
		 * @params smallBitmap 首尾小圆点
		 */
        Bitmap bigBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_big_whirte_dot);
        int bitmapWidth = bigBitmap.getWidth();
        int bitmapHeight = bigBitmap.getHeight();
        Bitmap smallBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_small_white_dot);
        int smallWidth = bigBitmap.getWidth();
        int smallHeight = bigBitmap.getHeight();

        //字体宽高
        float text1Width = textPaint.measureText(current);
        float text2Width = textPaint.measureText(growthValue);
        Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
        float textHeight = fontMetrics.bottom - fontMetrics.top;

       /**
        * @params mPresent 进度百分比
        * @params stopLine 上层线条展示的区域长度
        * */
        float stopLine = viewWidth * mPresent;
        if (stopLine == 0) {
            stopLine = smallWidth / 2;
        }
        if (mPresent >= 0.95) {
            stopLine = viewWidth - (smallWidth + 20);
        }

        /**
         * 文字间距配置
         * */
        float text1Start = stopLine - text1Width / 2 > 0 ? stopLine - text1Width : 0;
        float text2Start = stopLine - text2Width / 2 > 0 ? stopLine - text2Width : 0;
        if (text1Start <= 0) {
            text1Start = 15;
        }
        if (text2Start <= 0) {
            text2Start = 15;
        }

        if (mPresent != 1) {
            if (text1Start == 15 || text2Start == 15) {
                canvas.drawText(current, text1Start, viewHeight / 2 - textHeight, textPaint);
                canvas.drawText(growthValue, text2Start, viewHeight / 2, textPaint);
            } else {
                canvas.drawText(current, text1Start + smallWidth / 2 + 10, viewHeight / 2 - textHeight, textPaint);
                canvas.drawText(growthValue, text2Start + smallWidth + 10, viewHeight / 2, textPaint);
            }
        } else {
            canvas.drawText(current, viewWidth - text1Width, viewHeight / 2 - textHeight, textPaint);
            canvas.drawText(growthValue, viewWidth - text2Width, viewHeight / 2, textPaint);
        }

        /**
         * 进行绘制!!!   俩条线、首位俩个圆点、一个进度点
         * */
        canvas.drawLine(10, viewHeight / 2 + 40, viewWidth - 10, viewHeight / 2 + 40, behindPaint);
        canvas.drawLine(10 , viewHeight / 2 + 40, stopLine, viewHeight / 2 + 40, paint);
        canvas.drawBitmap(bigBitmap, stopLine, viewHeight / 2 - bitmapHeight / 2 + 40, null);
        canvas.drawBitmap(smallBitmap, 0, viewHeight / 2 - smallHeight / 2 + 42, null);
        canvas.drawBitmap(smallBitmap, viewWidth - smallWidth, viewHeight / 2 - smallHeight / 2 + 42, null);
    }


    private int dp2px(Context context, float dpValue) {
        float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}


使用部分

MainActivity
package com.advance.yongliu.customlineview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ProgressLineView mLineView = findViewById(R.id.line_progress_view);
        TextView mCurrent = findViewById(R.id.tv_current);
        TextView mLast = findViewById(R.id.tv_last);

        /**
         * 传入自定义控件的数据,此处先行设置模拟值(这里一般都是接口返回处理我们进行组装)
         * @params currentData 当前成长值  用于文字显示区域
         * @params newCurrent  此处有公式 newCurrent =  currentData - 上一等级值 ; 因此处上一等级值为0 故直接设置
         * @params newNestData 下一等级值
         * */
        float currentData = Float.parseFloat("20");
        float newCurrent = 20;
        float newNestData = 100;
        mLineView.setPresent(newCurrent / newNestData, "成长值" + Float.valueOf(currentData).intValue());

        mCurrent.setText(String.format("青铜等级:%d", 0));
        mLast.setText(String.format("白银等级:%s", 100));

        /**
         * 参考代码 :目前项目中使用的
         * @params lastLevelValue 上个等级
         * @params nextLevelValue 下个个等级
         *
         * float lastData = Float.parseFloat(lastLevelValue);
         * float nestData = Float.parseFloat(nextLevelValue);
         *
         * float newCurrent = currentData - lastData;
         * float newNestData = nestData - lastData;
         * */
    }
}

MainActivity xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f00"
    android:orientation="vertical"
    tools:context="com.advance.yongliu.customlineview.MainActivity">

    <com.advance.yongliu.customlineview.ProgressLineView
        android:id="@+id/line_progress_view"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/tv_current"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="5dp"
            android:text="当前等级"
            android:textColor="#fff"
            android:textSize="11sp"
            />

        <TextView
            android:id="@+id/tv_last"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:text="下一等级"
            android:textColor="#fff"
            android:textSize="11sp"
            />
    </RelativeLayout>
</LinearLayout>
2018-07-09 23:15:34 CQ173 阅读数 593
  • Android组件难点精讲

    Android组件开发视频培训教程,Android开发者可以使用Android组件来实现一些特定的功能,比如,可以通过组件来实现进度条功能、选项卡功能等,同样,也可以使用组件来实现拖动条或者星级评分条等功能。实战讲解图片切换器、GridView网格视图、Gallery画廊视图等高级组件的使用技巧。

    4184 人正在学习 去看看 CSDN讲师

会员等级进度条的做法:先上一张图片


效果图就是这样 ,VIP的圆柱是红色,SVP的效果是黄色

先看xml代码:

activity_member_center :
  <LinearLayout
      android:background="@color/colorAccent"
      android:layout_width="match_parent"
      android:layout_height="240dp"
      android:orientation="vertical">

 <FrameLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content">

       <RelativeLayout
           android:id="@+id/rl_Upperleft"
           android:layout_marginLeft="40dp"
           android:layout_marginTop="19dp"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           >

           <TextView
               android:id="@+id/a"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="1.2"
               android:textSize="15dp"
               android:textColor="@color/home_vip_color"
               />
           <TextView
               android:layout_marginLeft="6dp"
               android:id="@+id/b"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="倍"
               android:textSize="15dp"
               android:textColor="@color/home_title_color"
               android:layout_toRightOf="@+id/a"
               />
           <ImageView
               android:layout_marginLeft="6dp"
               android:id="@+id/c"
               android:layout_width="wrap_content"
               android:layout_height="18dp"
               android:src="@drawable/icon_arrow"
               android:layout_toRightOf="@+id/b"
               />

           <TextView
               android:id="@+id/d"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginTop="5dp"
               android:text="成长速度"
               android:layout_below="@+id/c"
               android:textSize="8dp"
               android:textColor="@color/font_color_gray"
               />

           <TextView
               android:id="@+id/e"
               android:layout_marginTop="8dp"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="总成长值"
               android:textSize="8dp"
               android:layout_below="@+id/d"
               />

           <TextView
               android:layout_marginTop="5dp"
               android:layout_marginLeft="5dp"
               android:id="@+id/f"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="0"
               android:textSize="12dp"
               android:textColor="@color/home_vip_color"
               android:layout_toRightOf="@+id/e"
               android:layout_below="@+id/d"
               />

       </RelativeLayout>

     <LinearLayout
         android:layout_marginLeft="30dp"
         android:layout_marginRight="40dp"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         >

     <LinearLayout
        android:layout_marginTop="19dp"
        android:layout_width="match_parent"
        android:layout_height="160dp">

         <LinearLayout
             android:id="@+id/ll_a"
             android:layout_weight="1"
             android:gravity="center"
             android:layout_gravity="bottom"
             android:orientation="vertical"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             >
             <ImageView
                 android:id="@+id/iv_vip_Headportraita"
                 android:layout_width="20dp"
                 android:layout_height="20dp"
                 android:src="@drawable/ic_group"
                 android:scaleType="fitXY"
                 />

             <TextView
                 android:layout_marginTop="5dp"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="1"
                 android:textSize="8dp"
                 android:textColor="@color/home_title_color"/>

             <TextView
                 android:id="@+id/tv_Cylindera"
                 android:layout_marginTop="3dp"
                 android:layout_width="10dp"
                 android:layout_height="15dp"
                 android:background="@drawable/vip_cylindera_shape"
                 />

         </LinearLayout>

         <LinearLayout
             android:id="@+id/ll_b"
             android:layout_weight="1"
             android:gravity="center"
             android:layout_marginRight="7dp"
             android:layout_gravity="bottom"
             android:orientation="vertical"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content">

             <ImageView
                 android:id="@+id/iv_vip_Headportraitb"
                 android:layout_width="20dp"
                 android:layout_height="20dp"
                 android:src="@drawable/ic_group"
                 android:scaleType="fitXY"
                 />

             <TextView
                 android:layout_marginTop="5dp"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="300"
                 android:textSize="8dp"
                 android:textColor="@color/home_title_color"/>

             <TextView
                 android:id="@+id/tv_Cylinderb"
                 android:layout_marginTop="3dp"
                 android:layout_width="10dp"
                 android:layout_height="25dp"
                 android:background="@drawable/vip_cylindera_shape"
                 />

         </LinearLayout>

         <LinearLayout
                     android:id="@+id/ll_c"
                     android:layout_weight="1"
                     android:gravity="center"
                     android:layout_marginRight="8dp"
                     android:layout_gravity="bottom"
                     android:orientation="vertical"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content">

                     <ImageView
                         android:id="@+id/iv_vip_Headportraitc"
                         android:layout_width="20dp"
                         android:layout_height="20dp"
                         android:src="@drawable/ic_group"
                         android:scaleType="fitXY"
                         />

                     <TextView
                         android:layout_marginTop="5dp"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:text="900"
                         android:textSize="8dp"
                         android:textColor="@color/home_title_color"/>

                     <TextView
                         android:id="@+id/tv_Cylinderc"
                         android:layout_marginTop="3dp"
                         android:layout_width="10dp"
                         android:layout_height="35dp"
                         android:background="@drawable/vip_cylindera_shape"
                         />

         </LinearLayout>

         <LinearLayout
             android:id="@+id/ll_d"
             android:layout_weight="1"
             android:layout_gravity="bottom"
             android:layout_marginRight="6dp"
             android:gravity="center"
             android:orientation="vertical"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content">

             <ImageView
                 android:id="@+id/iv_vip_Headportraitd"
                 android:layout_width="20dp"
                 android:layout_height="20dp"
                 android:src="@drawable/ic_group"
                 android:scaleType="fitXY"
                 />

             <TextView
                 android:layout_marginTop="5dp"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="1800"
                 android:textSize="8dp"
                 android:textColor="@color/home_title_color"/>

             <TextView
                 android:id="@+id/tv_Cylinderd"
                 android:layout_marginTop="3dp"
                 android:layout_width="10dp"
                 android:layout_height="50dp"
                 android:background="@drawable/vip_cylindera_shape"
                 />

         </LinearLayout>

         <LinearLayout
             android:id="@+id/ll_e"
             android:layout_weight="1"
             android:layout_gravity="bottom"
             android:layout_marginRight="5dp"
             android:gravity="center"
             android:orientation="vertical"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content">

             <ImageView
                 android:id="@+id/iv_vip_Headportraite"
                 android:layout_width="20dp"
                 android:layout_height="20dp"
                 android:src="@drawable/ic_group"
                 android:scaleType="fitXY"
                 />

             <TextView
                 android:layout_marginTop="5dp"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="3600"
                 android:textSize="8dp"
                 android:textColor="@color/home_title_color"/>

             <TextView
                 android:id="@+id/tv_Cylindere"
                 android:layout_marginTop="3dp"
                 android:layout_width="10dp"
                 android:layout_height="65dp"
                 android:background="@drawable/vip_cylindera_shape"
                 />

         </LinearLayout>

         <LinearLayout
             android:id="@+id/ll_f"
             android:layout_weight="1"
             android:layout_gravity="bottom"
             android:layout_marginRight="5dp"
             android:gravity="center"
             android:orientation="vertical"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content">

             <ImageView
                 android:id="@+id/iv_vip_Headportraitf"
                 android:layout_width="20dp"
                 android:layout_height="20dp"
                 android:src="@drawable/ic_group"
                 android:scaleType="fitXY"
                 />

             <TextView
                 android:layout_marginTop="5dp"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="7200"
                 android:textSize="8dp"
                 android:textColor="@color/home_title_color"/>

             <TextView
                 android:id="@+id/tv_Cylinderf"
                 android:layout_marginTop="3dp"
                 android:layout_width="10dp"
                 android:layout_height="80dp"
                 android:background="@drawable/vip_cylindera_shape"
                 />

         </LinearLayout>

         <LinearLayout
             android:id="@+id/ll_g"
             android:layout_weight="1"
             android:layout_gravity="bottom"
             android:layout_marginRight="5dp"
             android:gravity="center"
             android:orientation="vertical"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content">

             <ImageView
                 android:id="@+id/iv_vip_Headportraitg"
                 android:layout_width="20dp"
                 android:layout_height="20dp"
                 android:src="@drawable/ic_group"
                 android:scaleType="fitXY"
                 />

             <TextView
                 android:layout_marginTop="5dp"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="14400"
                 android:textSize="8dp"
                 android:textColor="@color/home_title_color"/>

             <TextView
                 android:id="@+id/tv_Cylinderg"
                 android:layout_marginTop="3dp"
                 android:layout_width="10dp"
                 android:layout_height="100dp"
                 android:background="@drawable/vip_cylindera_shape"
                 />

         </LinearLayout>

         <LinearLayout
             android:id="@+id/ll_h"
             android:layout_weight="1"
             android:layout_marginRight="3dp"
             android:layout_gravity="bottom"
             android:gravity="center"
             android:orientation="vertical"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content">

             <ImageView
                 android:id="@+id/iv_vip_Headportraith"
                 android:layout_width="20dp"
                 android:layout_height="20dp"
                 android:src="@drawable/ic_group"
                 android:scaleType="fitXY"
                 />

             <TextView
                 android:layout_marginTop="5dp"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="28800"
                 android:textSize="8dp"
                 android:textColor="@color/home_title_color"/>

             <TextView
                 android:id="@+id/tv_Cylinderh"
                 android:layout_marginTop="3dp"
                 android:layout_width="10dp"
                 android:layout_height="120dp"
                 android:background="@drawable/vip_cylindera_shape"
                 />

         </LinearLayout>

        </LinearLayout>

     <com.yapin.shanduo.widget.GrowthValueProgress
         android:id="@+id/progress"
         android:layout_marginTop="18dp"
         android:layout_marginRight="18dp"
         android:layout_marginLeft="15dp"
         android:layout_width="match_parent"
         android:layout_height="15dp" />

     </LinearLayout>
 </FrameLayout>

      <TextView
          android:layout_marginTop="15dp"
          android:layout_gravity="center"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="查看详细特权>"
          android:textColor="@color/font_color_gray"
          android:textSize="8dp" />

</LinearLayout>

还有就是shape的xml(红色):

vip_cylindera_shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp" />
    <solid android:color="@color/home_vip_color" />
</shape>

还有就是shape的xml(黄色):

svip_cylindera_shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp" />
    <solid android:color="@color/home_svip_color" />
</shape>

好 ,现在界面上的代码差不多上完了,接下来就是那个自定义的进度条了

GrowthValueProgress

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

import com.yapin.shanduo.R;

import java.util.ArrayList;
import java.util.List;

/**
 * 成长值进度条
 */

public class GrowthValueProgress extends View {

    private MyCallback callback;

    private Context context;

    private int currentValues = 0;//当前成长值

    private int v0Values = 1;//v0会员成长值

    private int v1Values = 300;//v1会员成长值

    private int v2Values = 900;//v2会员成长值

    private int v3Values = 1800;//v3会员成长值

    private int v4Values = 3600;//v4会员成长值

    private int v5Values = 7200;//v5会员成长值

    private int v6Values = 14400;//v6会员成长值

    private int v7Values = 28799;//v7会员成长值

    private Paint paint;//会员画笔

    private Paint grayPaint;

    private Paint pointPaint0;

    private Paint pointPaint1;

    private Paint pointPaint2;

    private Paint pointPaint3;

    private Paint pointPaint4;

    private Paint pointPaint5;

    private Paint pointPaint6;

    private Paint pointPaint7;

    private int lineHeight = 6;//线的高度

    private int pointSize = 6;//圆心的半径

    private int offsetX = 0;//x的坐标;

    private int width = 0;

    private int hight = 8;

    private List<Paint> paintList;

    public GrowthValueProgress(Context context) {
        super(context);
        this.context = context;
        initPaint();
    }

    public GrowthValueProgress(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        initPaint();
    }

    public GrowthValueProgress(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        initPaint();
    }

    public int getCurrentValues() {
        return currentValues;
    }

    public void setCurrentValues(int currentValues) {
        this.currentValues = currentValues;
    }

    private void initPaint() {

        lineHeight=hight;//线的高度设置为布局的一半高度
        pointSize=hight;//圆点的半径设置为布局的一半高度

        grayPaint = new Paint();
        grayPaint.setColor(0x7060090);
        grayPaint.setStrokeWidth(lineHeight);
        grayPaint.setAntiAlias(true);
        grayPaint.setTextAlign(Paint.Align.CENTER);
        grayPaint.setStyle(Paint.Style.STROKE);

        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(lineHeight);
        paint.setAntiAlias(true);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setStyle(Paint.Style.STROKE);

        pointPaint0 = new Paint();
        pointPaint1 = new Paint();
        pointPaint2 = new Paint();
        pointPaint3 = new Paint();
        pointPaint4 = new Paint();
        pointPaint5 = new Paint();
        pointPaint6 = new Paint();
        pointPaint7 = new Paint();

        paintList=new ArrayList<>();
        paintList.add(pointPaint0);
        paintList.add(pointPaint1);
        paintList.add(pointPaint2);
        paintList.add(pointPaint3);
        paintList.add(pointPaint4);
        paintList.add(pointPaint5);
        paintList.add(pointPaint6);
        paintList.add(pointPaint7);
        for (int i = 0; i < paintList.size(); i++) {
            Paint mPaint = paintList.get(i);
            mPaint.setStrokeWidth(10);
            mPaint.setAntiAlias(true);
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setTextAlign(Paint.Align.CENTER);
        }
    }

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

        int lineLength = width / 7;

        //绘制底部长灰线
        canvas.drawLine(0, lineHeight, width, lineHeight, grayPaint);

        drawProgress(canvas, lineLength);
    }


    /**
     * 画进度
     *
     * @param canvas
     * @param lineLength 每个区间的平均长度
     */
    private void drawProgress(Canvas canvas, int lineLength) {

        //在V0~V1区间内
        if (currentValues >= v0Values  && currentValues < v1Values) {
            int stopX = (currentValues - v0Values) * lineLength / (v1Values - v0Values);
            //x起始位置,y起始位置,x停止位置,y停止位置
            offsetX = lineLength * 0 + stopX;
            pointPaint0.setColor(Color.RED);
            pointPaint1.setColor(0x7060090);
            pointPaint2.setColor(0x7060090);
            pointPaint3.setColor(0x7060090);
            pointPaint4.setColor(0x7060090);
            pointPaint5.setColor(0x7060090);
            pointPaint6.setColor(0x7060090);
            pointPaint7.setColor(0x7060090);
        } else if (currentValues >= v1Values && currentValues < v2Values) {
            //在V1~V2区间内
            int stopX = (currentValues - v1Values) * lineLength / (v2Values - v1Values);
            offsetX = lineLength * 1 + stopX;
            pointPaint0.setColor(Color.RED);
            pointPaint1.setColor(Color.RED);
            pointPaint2.setColor(0x7060090);
            pointPaint3.setColor(0x7060090);
            pointPaint4.setColor(0x7060090);
            pointPaint5.setColor(0x7060090);
            pointPaint6.setColor(0x7060090);
            pointPaint7.setColor(0x7060090);
        } else if (currentValues >= v2Values && currentValues < v3Values) {
            //在V2~V3区间内
            int stopX = (currentValues - v2Values) * lineLength / (v3Values - v2Values);
            offsetX = lineLength * 2 + stopX;
            pointPaint0.setColor(Color.RED);
            pointPaint1.setColor(Color.RED);
            pointPaint2.setColor(Color.RED);
            pointPaint3.setColor(0x7060090);
            pointPaint4.setColor(0x7060090);
            pointPaint5.setColor(0x7060090);
            pointPaint6.setColor(0x7060090);
            pointPaint7.setColor(0x7060090);
        } else if (currentValues >= v3Values && currentValues <= v4Values) {
            //在V3~V4区间内
            int stopX = (currentValues - v3Values) * lineLength / (v4Values - v3Values);
            offsetX = lineLength * 3 + stopX;
            pointPaint0.setColor(Color.RED);
            pointPaint1.setColor(Color.RED);
            pointPaint2.setColor(Color.RED);
            pointPaint3.setColor(Color.RED);
            pointPaint4.setColor(0x7060090);
            pointPaint5.setColor(0x7060090);
            pointPaint6.setColor(0x7060090);
            pointPaint7.setColor(0x7060090);
        } else if (currentValues >= v4Values && currentValues <= v5Values) {
            //在V4~V5区间内
            int stopX = (currentValues - v4Values) * lineLength / (v5Values - v4Values);
            offsetX = lineLength * 4 + stopX;
            pointPaint0.setColor(Color.RED);
            pointPaint1.setColor(Color.RED);
            pointPaint2.setColor(Color.RED);
            pointPaint3.setColor(Color.RED);
            pointPaint4.setColor(Color.RED);
            pointPaint5.setColor(0x7060090);
            pointPaint6.setColor(0x7060090);
            pointPaint7.setColor(0x7060090);
        }else if (currentValues >= v5Values && currentValues <= v6Values) {
            //在V5~V6区间内
            int stopX = (currentValues - v5Values) * lineLength / (v6Values - v5Values);
            offsetX = lineLength * 5 + stopX;
            pointPaint0.setColor(Color.RED);
            pointPaint1.setColor(Color.RED);
            pointPaint2.setColor(Color.RED);
            pointPaint3.setColor(Color.RED);
            pointPaint4.setColor(Color.RED);
            pointPaint5.setColor(Color.RED);
            pointPaint6.setColor(0x7060090);
            pointPaint7.setColor(0x7060090);
        } else if (currentValues >= v6Values && currentValues <= v7Values) {
            //在V6~V7区间内
            int stopX = (currentValues - v6Values) * lineLength / (v7Values - v6Values);
            offsetX = lineLength * 6 + stopX;
            pointPaint0.setColor(Color.RED);
            pointPaint1.setColor(Color.RED);
            pointPaint2.setColor(Color.RED);
            pointPaint3.setColor(Color.RED);
            pointPaint4.setColor(Color.RED);
            pointPaint5.setColor(Color.RED);
            pointPaint6.setColor(Color.RED);
            pointPaint7.setColor(0x7060090);
        }else if (currentValues > v7Values) {
            int stopX = 0;//超过8使用固定值
            offsetX = lineLength * 7 + stopX;
            pointPaint0.setColor(Color.RED);
            pointPaint1.setColor(Color.RED);
            pointPaint2.setColor(Color.RED);
            pointPaint3.setColor(Color.RED);
            pointPaint4.setColor(Color.RED);
            pointPaint5.setColor(Color.RED);
            pointPaint6.setColor(Color.RED);
            pointPaint7.setColor(Color.RED);
        }

        canvas.drawLine(0, lineHeight, offsetX, lineHeight, paint);


        //圆心的XY坐标,圆心半径
        canvas.drawCircle((0 * lineLength)+7 , pointSize, pointSize, pointPaint0);
        canvas.drawCircle(1 * lineLength - pointSize, pointSize, pointSize, pointPaint1);
        canvas.drawCircle(2 * lineLength - pointSize, pointSize, pointSize, pointPaint2);
        canvas.drawCircle(3 * lineLength - pointSize, pointSize, pointSize, pointPaint3);
        canvas.drawCircle(4 * lineLength - pointSize, pointSize, pointSize, pointPaint4);
        canvas.drawCircle(5 * lineLength - pointSize, pointSize, pointSize, pointPaint5);
        canvas.drawCircle(6 * lineLength - pointSize, pointSize, pointSize, pointPaint6);
        canvas.drawCircle((7 * lineLength)+3 - pointSize, pointSize, pointSize, pointPaint7);

        if (callback != null) {
            callback.callBack(offsetX,currentValues);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = this.getMeasuredWidth();
        hight = this.getMeasuredHeight();
    }

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

    public void getOffsetX(MyCallback callback){
        this.callback=callback;
    }

    public interface MyCallback {
        void callBack(int offsetX, int currentValues);
    }

}
到了这里,大家的activity会写了吗?其实activity里面的代码非常简单无非就是判断拿到的VIP等级显示圆柱的个数和颜色,
VIP的积分进行设置进度条的长度,是不是很简单,开始做的时候我也想了很久,不知道该怎么下手,好了,直接看activity的代码吧
MembercenterActivity

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.res.Resources;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.text.TextUtils;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.WindowManager;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.yapin.shanduo.R;
import com.yapin.shanduo.app.ShanDuoPartyApplication;
import com.yapin.shanduo.model.entity.GetVipLevelInfo;
import com.yapin.shanduo.presenter.GetVipLevelPresenter;
import com.yapin.shanduo.ui.adapter.ChargeTabAdapter;
import com.yapin.shanduo.ui.contract.GetVipLevelContract;
import com.yapin.shanduo.ui.fragment.ChargeVipDialogFragment;
import com.yapin.shanduo.utils.ApiUtil;
import com.yapin.shanduo.utils.GlideUtil;
import com.yapin.shanduo.utils.PrefJsonUtil;
import com.yapin.shanduo.utils.PrefUtil;
import com.yapin.shanduo.utils.ToastUtil;
import com.yapin.shanduo.utils.Utils;
import com.yapin.shanduo.widget.GrowthValueProgress;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;



public class MembercenterActivity extends BaseActivity {

    @BindView(R.id.rl_Upperleft)
    RelativeLayout rl_Upperleft;
    @BindView(R.id.a)
    TextView Speedmultiplier;
    @BindView(R.id.f)
    TextView Thesum;

    @BindView(R.id.ll_a)
    LinearLayout ll_a;
    @BindView(R.id.iv_vip_Headportraita)
    ImageView iv_vip_Headportraita;
    @BindView(R.id.tv_Cylindera)
    TextView tv_Cylindera;

    @BindView(R.id.ll_b)
    LinearLayout ll_b;
    @BindView(R.id.iv_vip_Headportraitb)
    ImageView iv_vip_Headportraitb;
    @BindView(R.id.tv_Cylinderb)
    TextView tv_Cylinderb;

    @BindView(R.id.ll_c)
    LinearLayout ll_c;
    @BindView(R.id.iv_vip_Headportraitc)
    ImageView iv_vip_Headportraitc;
    @BindView(R.id.tv_Cylinderc)
    TextView tv_Cylinderc;

    @BindView(R.id.ll_d)
    LinearLayout ll_d;
    @BindView(R.id.iv_vip_Headportraitd)
    ImageView iv_vip_Headportraitd;
    @BindView(R.id.tv_Cylinderd)
    TextView tv_Cylinderd;

    @BindView(R.id.ll_e)
    LinearLayout ll_e;
    @BindView(R.id.iv_vip_Headportraite)
    ImageView iv_vip_Headportraite;
    @BindView(R.id.tv_Cylindere)
    TextView tv_Cylindere;

    @BindView(R.id.ll_f)
    LinearLayout ll_f;
    @BindView(R.id.iv_vip_Headportraitf)
    ImageView iv_vip_Headportraitf;
    @BindView(R.id.tv_Cylinderf)
    TextView tv_Cylinderf;

    @BindView(R.id.ll_g)
    LinearLayout ll_g;
    @BindView(R.id.iv_vip_Headportraitg)
    ImageView iv_vip_Headportraitg;
    @BindView(R.id.tv_Cylinderg)
    TextView tv_Cylinderg;

    @BindView(R.id.ll_h)
    LinearLayout ll_h;
    @BindView(R.id.iv_vip_Headportraith)
    ImageView iv_vip_Headportraith;
    @BindView(R.id.tv_Cylinderh)
    TextView tv_Cylinderh;

    @BindView(R.id.progress)
    GrowthValueProgress progress;
    //这是从后台获取到的VIP等级和VIP积分
    private GetVipLevelInfo getVipLevelInfo = new GetVipLevelInfo();

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_member_center);
        activity = this;
        ButterKnife.bind(this);

    }

    //根据拿到的数据进行判断
    public void getvipleve(){

        int values=0;

        progress.setCurrentValues(values);

        if (getVipLevelInfo.getExperience() == 0){
            rl_Upperleft.setVisibility(View.GONE);
        }else {
            Thesum.setText(getVipLevelInfo.getExperience() + "");
            progress.setCurrentValues(Integer.parseInt(getVipLevelInfo.getExperience()+"")); //获取拿到的数据
            progress.invalidate();
        }

        if (getVipLevelInfo.getLevel() == 0){
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 1){
            Speedmultiplier.setText("1.1");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraita);
            iv_vip_Headportraita.setVisibility(View.VISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 2){
            Speedmultiplier.setText("1.2");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraitb);
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.VISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 3){
            Speedmultiplier.setText("1.3");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraitc);
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.VISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 4){
            Speedmultiplier.setText("1.4");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraitd);
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.VISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 5){
            Speedmultiplier.setText("1.5");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraite);
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.VISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 6){
            Speedmultiplier.setText("1.6");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraitf);
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.VISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 7){
            Speedmultiplier.setText("1.7");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraitg);
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.VISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 8){
            Speedmultiplier.setText("1.8");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraith);
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.VISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylindera_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylindera_shape);
        }else if (getVipLevelInfo.getLevel() == 11){
            Speedmultiplier.setText("1.2");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraita);
            iv_vip_Headportraita.setVisibility(View.VISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 12){
            Speedmultiplier.setText("1.3");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraitb);
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.VISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 13){
            Speedmultiplier.setText("1.4");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraitc);
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.VISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 14){
            Speedmultiplier.setText("1.5");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraitd);
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.VISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 15){
            Speedmultiplier.setText("1.6");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraite);
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.VISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 16){
            Speedmultiplier.setText("1.7");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraitf);
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.VISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.vip_cylinderb_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 17){
            Speedmultiplier.setText("1.8");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraitg);
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.VISIBLE);
            iv_vip_Headportraith.setVisibility(View.INVISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.vip_cylinderb_shape);
        }else if (getVipLevelInfo.getLevel() == 18){
            Speedmultiplier.setText("1.9");
            GlideUtil.load(context ,activity , ApiUtil.IMG_URL + PrefJsonUtil.getProfile(context).getPicture() , iv_vip_Headportraith);
            iv_vip_Headportraita.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitb.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitc.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitd.setVisibility(View.INVISIBLE);
            iv_vip_Headportraite.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitf.setVisibility(View.INVISIBLE);
            iv_vip_Headportraitg.setVisibility(View.INVISIBLE);
            iv_vip_Headportraith.setVisibility(View.VISIBLE);
            tv_Cylindera.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderb.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderc.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderd.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylindere.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderf.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderg.setBackgroundResource(R.drawable.svip_cylinder_shape);
            tv_Cylinderh.setBackgroundResource(R.drawable.svip_cylinder_shape);
        }
    }

}

到这里就全部写完了,是不是感觉很简单了

2014-11-04 17:08:06 oFanJunBin 阅读数 2268
  • Android组件难点精讲

    Android组件开发视频培训教程,Android开发者可以使用Android组件来实现一些特定的功能,比如,可以通过组件来实现进度条功能、选项卡功能等,同样,也可以使用组件来实现拖动条或者星级评分条等功能。实战讲解图片切换器、GridView网格视图、Gallery画廊视图等高级组件的使用技巧。

    4184 人正在学习 去看看 CSDN讲师

一、测试截图

二、实现原理

 

 

package com.freedomanlib;

import java.util.Timer;
import java.util.TimerTask;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * @name GradeProgressBar
 * @Descripation 自定义等级评分圆形进度条,用于设备数据统计页面一键评分<br>
 *               1、初始化边界宽度、中心坐标和外环、内环半径,各种画笔。<br>
 *               2、默认最大进度为100,目标进度由用户来指定。<br>
 *               3、锁定一个内圆环为可点击区域。 <br>
 *               4、点击组件时,调用start()方法启动计时器,重绘界面。<br>
 * @author Freedoman
 * @date 2014-10-29
 * @version 1.0
 */
public class GradeProgressBar extends View {

	private static final String TAG = "CircleProgressBar";

	/**
	 * 边界宽度、中心坐标和外环、内环半径
	 */
	private float boundsWidth;
	private float centerPoint;
	private float overRadius;
	private float radius;

	/**
	 * 最大进度、当前进度、是否显示进度文本
	 */
	private float maxProgress = 100;
	private float targetProgress;
	private int curProgress;

	/**
	 * 几种画笔
	 */
	private Paint overRoundPaint;
	private Paint roundPaint;
	private Paint progressRoundPaint;
	private Paint progressTextPaint;
	private Paint textPaint;

	/**
	 * 可点击区域的边界
	 */
	private float clickBoundsLow;
	private float clickBoundsHigh;

	private onProgressChangedListener listener;

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

	public GradeProgressBar(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public GradeProgressBar(Context context, AttributeSet attrs,
			int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		this.initialize();
	}

	/**
	 * 初始化
	 */
	private void initialize() {

		curProgress = 0;
		int whiteColor = Color.rgb(0xF0, 0xF0, 0xF0);

		// 外环画笔
		overRoundPaint = new Paint();
		overRoundPaint.setColor(whiteColor);
		overRoundPaint.setStyle(Paint.Style.STROKE);
		overRoundPaint.setStrokeWidth(8);
		overRoundPaint.setAntiAlias(true);

		// 内环画笔
		roundPaint = new Paint();
		roundPaint.setColor(Color.GRAY);
		roundPaint.setStrokeWidth(30);
		roundPaint.setStyle(Paint.Style.STROKE);
		roundPaint.setAntiAlias(true);

		// 进度环画笔(除颜色外同于内环)
		progressRoundPaint = new Paint();
		progressRoundPaint.setColor(Color.rgb(0xFF, 0x92, 0x24));
		progressRoundPaint.setStrokeWidth(20);
		progressRoundPaint.setStyle(Paint.Style.STROKE);
		roundPaint.setAntiAlias(true);

		// 进度文本画笔
		progressTextPaint = new Paint();
		progressTextPaint.setColor(whiteColor);
		progressTextPaint.setStyle(Paint.Style.STROKE);
		progressTextPaint.setStrokeWidth(0);
		progressTextPaint.setTextSize(80);
		progressTextPaint.setTypeface(Typeface.DEFAULT_BOLD);

		// 文本画笔
		textPaint = new Paint();
		textPaint.setColor(whiteColor);
		textPaint.setStyle(Paint.Style.STROKE);
		textPaint.setStrokeWidth(0);
		textPaint.setTextSize(40);
		textPaint.setTypeface(Typeface.DEFAULT_BOLD);
	}

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

		// 取当前布局的最短边作为边框的长度
		float width = getWidth();
		float heigh = getHeight();
		boundsWidth = width <= heigh ? width : heigh;

		// 中心点
		centerPoint = boundsWidth / 2;
		// 外环半径
		overRadius = centerPoint - 20;
		// 内环半径
		radius = overRadius - 25;

		// 内环所在区域(正方形)锁定为可点击区域
		clickBoundsLow = centerPoint - radius;
		clickBoundsHigh = centerPoint + radius;
	}

	/**
	 * 启动进度动画
	 */
	public void start() {
		curProgress = 0;
		if (targetProgress == 0) {
			targetProgress = 66;
		}
		final Timer timer = new Timer();
		TimerTask timerTask = new TimerTask() {
			@Override
			public void run() {
				curProgress++;
				if (curProgress == targetProgress) {
					timer.cancel();
				}
				postInvalidate();
			}
		};
		timer.schedule(timerTask, 0, 20);
	}

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

		// 外环
		canvas.drawCircle(centerPoint, centerPoint, overRadius, overRoundPaint);
		// 内环
		canvas.drawCircle(centerPoint, centerPoint, radius, roundPaint);

		// 进度环
		RectF oval = new RectF(centerPoint - radius, centerPoint - radius,
				centerPoint + radius, centerPoint + radius);
		float curArc = 360 * curProgress / maxProgress;
		canvas.drawArc(oval, 0, curArc, false, progressRoundPaint);

		// 环中心进度文本
		int curPercent = (int) ((curProgress / maxProgress) * 100);
		float textWidth = progressTextPaint.measureText(curPercent + "%");
		canvas.drawText(curPercent + "%", centerPoint - textWidth / 2,
				centerPoint, progressTextPaint);

		if (curPercent == 0) {
			// 暂未评级
			float w = textPaint.measureText("暂未评级");
			canvas.drawText("暂未评级", centerPoint - w / 2, centerPoint + 40,
					textPaint);
		} else if (curPercent < targetProgress) {
			// 评级中...
			float w = textPaint.measureText("评级中...");
			canvas.drawText("评级中...", centerPoint - w / 2, centerPoint + 40,
					textPaint);
		} else if (curPercent == targetProgress) {
			// 评级完成
			float w = textPaint.measureText("评级完成");
			canvas.drawText("评级完成", centerPoint - w / 2, centerPoint + 40,
					textPaint);
		}

		// 对外传递数据
		if (listener != null) {
			listener.progressChanged(GradeProgressBar.this, curProgress);
		}
	}

	public synchronized float getMaxProgress() {
		return maxProgress;
	}

	/**
	 * 设置进度的最大值
	 * 
	 * @param max
	 */
	public synchronized void setMaxProgress(float max) {
		if (max < 0) {
			throw new IllegalArgumentException("max not less than 0");
		}
		this.maxProgress = max;
	}

	/**
	 * 获取进度.需要同步
	 * 
	 * @return
	 */
	public synchronized float getProgress() {
		return targetProgress;
	}

	/**
	 * 设置进度,此为线程安全控件,由于考虑多线的问题,需要同步 刷新界面调用postInvalidate()能在非UI线程刷新
	 * 
	 * @param progress
	 */
	public synchronized void setProgress(float progress) {
		if (progress < 0) {
			throw new IllegalArgumentException("progress not less than 0");
		}
		if (progress > maxProgress) {
			progress = maxProgress;
		}
		if (progress <= maxProgress) {
			this.targetProgress = progress;
		}
	}

	public void setOnProgressChangedListener(onProgressChangedListener listener) {
		if (listener == null) {
			this.listener = listener;
		}
	}

	/**
	 * 点击评分区域,进行评分
	 * 
	 * @param event
	 * @return
	 */
	@Override
	public boolean onTouchEvent(MotionEvent event) {

		float x = event.getX();
		float y = event.getY();

		if (x > clickBoundsLow && x < clickBoundsHigh && y > clickBoundsLow
				&& y < clickBoundsHigh) {
			start();
		}
		return super.onTouchEvent(event);
	}

	/**
	 * @name onProgressChangedListener
	 * @Descripation 对外接口,提供当前旋转进度<br>
	 *               1、<br>
	 *               2、<br>
	 * @author Freedoman
	 * @date 2014-10-29
	 * @version 1.0
	 */
	public interface onProgressChangedListener {
		public void progressChanged(GradeProgressBar circleProgressBar,
				int curProgress);
	}
}

 

 

 

 

 

没有更多推荐了,返回首页