Android实现水平带刻度的进度条

Olivia ·

更新时间:2024-09-20

· 231 次阅读

本文实例为大家分享了Android实现水平带刻度进度条的具体代码，供大家参考，具体内容如下

效果

1、attrsl.xml

<!-- 带刻度的 进度条 -->
    <declare-styleable name="HorizontalProgressSeekBar">
        <attr name="progressColor" />
        <attr name="max" />
        <attr name="progressContentIcon" format="reference" />
        <attr name="progressGoalIcon" format="reference" />
        <attr name="progressGoalIconWidthHeight" format="dimension" />
        <attr name="progressContentIconHeight" format="dimension" />
        <attr name="progressContentIconWidth" format="dimension" />
        <attr name="progressDistance" format="dimension" />
</declare-styleable>

2、HorizontalProgressSeekBar.class

public class HorizontalProgressSeekBar extends View {
    private int viewWidth;
    private int viewHeight;
    private Paint strokePain;
    private List<Integer> goalTimes;
    private int maxData = 80;
    private Bitmap progressGoalBitmap;
    private Bitmap progressContentBitmap;
    private float proceedTime;
    private int PROGRESS_COLOR = Color.parseColor("#FE78A6");
    private float goalProportion;
    private Paint backgroundPaint;
    private int distance = 10;
    private int distancePxMax;
    private int distancePxMin;
    private int distancePx;
    private RectF rectF;
    private List<Integer> bitmapType;
    private Bitmap bitmapHomeCornerKick;
    private Bitmap bitmapHomeTeamRedCard;
    private Bitmap bitmapHomeTeamScored;
    private Bitmap bitmapVisitingCornerKick;
    private Bitmap bitmapVisitingTeamScored;
    private List<BollProgressDataBean> homeTeamIncidentList;
    private List<BollProgressDataBean> visitingTeamIncidentList;
    private BollProgressDataBean homeTeamIncidentListBean;
    private BollProgressDataBean visitingTeamIncidentListBean;
    private RectF rectFStrokePain;
    private int bitmapHomeCornerKickWidth;
    private int bitmapHomeTeamScoredWidth;
    /**
     * 绘制进球 时刻上主队
     *
     * @param canvas
     */
    private float incidentTimeNumber;
    public HorizontalProgressSeekBar(Context context) {
        this(context, null);
    }
    public HorizontalProgressSeekBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public HorizontalProgressSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.HorizontalProgressSeekBar);
        try {
            PROGRESS_COLOR = a.getColor(R.styleable.HorizontalProgressSeekBar_progressColor, PROGRESS_COLOR);
            maxData = a.getInt(R.styleable.HorizontalProgressSeekBar_max, maxData);
            int progressContentIconWidth = (int) a.getDimension(R.styleable.HorizontalProgressSeekBar_progressContentIconWidth, dipToPx(22));
            int progressContentIconHeight = (int) a.getDimension(R.styleable.HorizontalProgressSeekBar_progressContentIconHeight, dipToPx(25));
            progressContentBitmap = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getContext().getResources(),
                    a.getResourceId(R.styleable.HorizontalProgressSeekBar_progressContentIcon, R.mipmap.rest)), progressContentIconWidth, progressContentIconHeight, true);
            int progressGoalIconWidthHeight = (int) a.getDimension(R.styleable.HorizontalProgressSeekBar_progressGoalIconWidthHeight, dipToPx(22));
            progressGoalBitmap = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getContext().getResources(),
                    a.getResourceId(R.styleable.HorizontalProgressSeekBar_progressGoalIcon, R.drawable.share)), progressGoalIconWidthHeight, progressGoalIconWidthHeight, true);
            bitmapHomeCornerKick = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getContext().getResources(),
                    R.mipmap.home_corner_kick_xiao), progressGoalIconWidthHeight, progressGoalIconWidthHeight, true);
            bitmapHomeTeamRedCard = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getContext().getResources(),
                    R.mipmap.home_team_red_card_xiao), progressGoalIconWidthHeight, progressGoalIconWidthHeight, true);
            bitmapHomeTeamScored = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getContext().getResources(),
                    R.mipmap.home_team_scored_xiao), progressGoalIconWidthHeight, progressGoalIconWidthHeight, true);
            bitmapVisitingCornerKick = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getContext().getResources(),
                    R.mipmap.visiting_corner_kick_xiao), progressGoalIconWidthHeight, progressGoalIconWidthHeight, true);
            bitmapVisitingTeamScored = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getContext().getResources(),
                    R.mipmap.visiting_team_scored_xiao), progressGoalIconWidthHeight, progressGoalIconWidthHeight, true);
            distancePx =  a.getDimensionPixelOffset(R.styleable.HorizontalProgressSeekBar_progressDistance,dipToPx(distance));
            if (bitmapHomeCornerKick != null){
                bitmapHomeCornerKickWidth = bitmapHomeCornerKick.getWidth();
            }
            if (bitmapHomeTeamScored != null){
                bitmapHomeTeamScoredWidth = bitmapHomeTeamScored.getWidth();
            }
        } finally {
            a.recycle();
        }
        distancePxMax = dipToPx(distance + 2);
        distancePxMin = dipToPx(distance - 2);
        strokePain = new Paint();
        backgroundPaint = new Paint();
    }
    /**
     * 设置进球时间状态
     *
     * @param goalTimes
     */
    public void setGoalTime(int max, float proceedTime, List<Integer> goalTimes) {
        this.maxData = max;
        this.proceedTime = proceedTime;
        this.goalTimes = goalTimes;
        invalidateView();
    }
    /**
     * 设置进球时间状态
     * max 计算90由于中间遮挡效果，所以传递按照100 
     * homeTeamIncidentList 主队时间和事件
     * visitingTeamIncidentList  客队时间和事件
     */
    public void setGoalTimeBitmap(int max, float proceedTime, List<BollProgressDataBean> homeTeamIncidentList, List<BollProgressDataBean> visitingTeamIncidentList) {
        this.maxData = max;
        this.proceedTime = proceedTime;
        this.homeTeamIncidentList = homeTeamIncidentList;
        this.visitingTeamIncidentList = visitingTeamIncidentList;
        invalidateView();
    }
    public void setBitmapType(List<Integer> bitmapType) {
        this.bitmapType = bitmapType;
        invalidateView();
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        viewWidth = w;
        viewHeight = h;
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawProgress(canvas);
        drawBorder(canvas);
        drawMeasureBorder(canvas);
        drawImage(canvas);
        drawGoalTime(canvas);
        drawGoalTimeButton(canvas);
    }
    /**
     * 绘制空心 长方形
     *
     * @param canvas
     */
    private void drawBorder(Canvas canvas) {
        strokePain.reset();
        strokePain.setStyle(Paint.Style.STROKE);
        strokePain.setAntiAlias(true);
        strokePain.setStrokeWidth(2);
        strokePain.setColor(Color.parseColor("#151515"));
        rectFStrokePain = new RectF(distancePx, viewHeight * 0.35f, viewWidth - distancePx, viewHeight * 0.65f);
        canvas.drawRect(rectFStrokePain, strokePain);
    }
    private void drawProgress(Canvas canvas) {
        strokePain.reset();
        strokePain.setStyle(Paint.Style.FILL);
        strokePain.setAntiAlias(true);
        strokePain.setStrokeWidth(2);
        strokePain.setColor(Color.parseColor("#258940"));
        if (proceedTime <= 45) {
            rectF = new RectF(distancePx, viewHeight * 0.35f, ((float) viewWidth - 2 * distancePx) * (proceedTime / maxData) + distancePx, viewHeight * 0.65f);
        } else {
            if (proceedTime >= 90) {
                rectF = new RectF(distancePx, viewHeight * 0.35f, ((float) viewWidth - 2 * distancePx) * ((proceedTime + distance) / maxData) + distancePx, viewHeight * 0.65f);
            } else {
                rectF = new RectF(distancePx, viewHeight * 0.35f, ((float) viewWidth - 2 * distancePx) * ((proceedTime + distance) / maxData) + distancePx, viewHeight * 0.65f);
            }
        }
        canvas.drawRect(rectF, strokePain);
    }
    /**
     * 绘制刻度
     *
     * @param canvas
     */
    private void drawMeasureBorder(Canvas canvas) {
        strokePain.setStyle(Paint.Style.STROKE);
        float eachWidth = (viewWidth - 2 * distancePx) / 20;
        strokePain.setStrokeWidth(2);
        int drawNoNumber = 20 / 2;
        strokePain.setColor(Color.parseColor("#FF424242"));
        for (int i = 1; i <= 19; i++) {
            //长短线条
            if (drawNoNumber != i && i != 9 && i != 11) {
                if (i % 2 == 0) {
                    canvas.drawLine(eachWidth * i + distancePx, viewHeight * 0.66f, eachWidth * i + distancePx, viewHeight * 0.45f, strokePain);
                } else {
                    canvas.drawLine(eachWidth * i + distancePx, viewHeight * 0.66f, eachWidth * i + distancePx, viewHeight * 0.55f, strokePain);
                }
            }
        }
    }
    /**
     * 绘制H 图片
     *
     * @param canvas
     */
    private void drawImage(Canvas canvas) {
        if (progressContentBitmap != null) {
            canvas.drawBitmap(progressContentBitmap,  (int) (viewWidth / 2.0 - progressContentBitmap.getWidth() / 2.0 ), (int) (viewHeight / 2.0 - (progressContentBitmap.getHeight()) / 2.0f), strokePain);
        }
    }
    private void drawGoalTime(Canvas canvas) {
        //主队比赛中的事件  14角球 2红牌 1进球
        if (homeTeamIncidentList != null && homeTeamIncidentList.size() > 0) {
            for (int i = 0; i < homeTeamIncidentList.size(); i++) {
                homeTeamIncidentListBean = homeTeamIncidentList.get(i);
                String incidentTime = homeTeamIncidentListBean.getIncidentTime();
                String incidentType = homeTeamIncidentListBean.getIncidentType();
                if (incidentTime != null) {
                    try {
                        incidentTimeNumber = Float.parseFloat(incidentTime);
                    } catch (Exception e) {
                    }
                }
                if (incidentTimeNumber == 0) {
                    if (incidentType != null) {
                        if ("14".equals(incidentType)) {
                            homeIncidentZero(canvas, bitmapHomeCornerKick, incidentTimeNumber, 0.15f, incidentType);
                        } else if ("2".equals(incidentType)) {
                            homeIncidentZero(canvas, bitmapHomeTeamRedCard, incidentTimeNumber, 0.25f, incidentType);
                        } else if ("1".equals(incidentType)) {
                            homeIncidentZero(canvas, bitmapHomeTeamScored, incidentTimeNumber, 0.25f, incidentType);
                        }
                    }
                } else if (incidentTimeNumber <= 45 && incidentTimeNumber > 0) {
                    if (incidentType != null) {
                        if ("14".equals(incidentType)) {
                            homeTeamIncident(canvas, bitmapHomeCornerKick, incidentTimeNumber, 0.15f, incidentType);
                        } else if ("2".equals(incidentType)) {
                            homeTeamIncident(canvas, bitmapHomeTeamRedCard, incidentTimeNumber, 0.25f, incidentType);
                        } else if ("1".equals(incidentType)) {
                            homeTeamIncident(canvas, bitmapHomeTeamScored, incidentTimeNumber, 0.25f, incidentType);
                        }
                    }
                } else if (incidentTimeNumber > 45 && incidentTimeNumber < 90) {
                    if (incidentType != null) {
                        if ("14".equals(incidentType)) {
                            homeIncident(canvas, bitmapHomeCornerKick, incidentTimeNumber, 0.15f, incidentType);
                        } else if ("2".equals(incidentType)) {
                            homeIncident(canvas, bitmapHomeTeamRedCard, incidentTimeNumber, 0.25f, incidentType);
                        } else if ("1".equals(incidentType)) {
                            homeIncident(canvas, bitmapHomeTeamScored, incidentTimeNumber, 0.25f, incidentType);
                        }
                    }
                } else if (incidentTimeNumber >= 90) {
                    if (incidentType != null) {
                        incidentTimeNumber=90;
                        if ("14".equals(incidentType)) {
                            homeIncidentNinety(canvas, bitmapHomeCornerKick, incidentTimeNumber, 0.15f, incidentType);
                        } else if ("2".equals(incidentType)) {
                            homeIncidentNinety(canvas, bitmapHomeTeamRedCard, incidentTimeNumber, 0.25f, incidentType);
                        } else if ("1".equals(incidentType)) {
                            homeIncidentNinety(canvas, bitmapHomeTeamScored, incidentTimeNumber, 0.25f, incidentType);
                        }
                    }
                }
            }
        }
    }
    /**
     * 绘制进球 时刻下客队
     *
     * @param canvas
     */
    private void drawGoalTimeButton(Canvas canvas) {
        if (visitingTeamIncidentList != null && visitingTeamIncidentList.size() > 0) {
            for (int i = 0; i < visitingTeamIncidentList.size(); i++) {
                visitingTeamIncidentListBean = visitingTeamIncidentList.get(i);
                String incidentTime = visitingTeamIncidentListBean.getIncidentTime();
                String incidentType = visitingTeamIncidentListBean.getIncidentType();
                if (incidentTime != null) {
                    try {
                        incidentTimeNumber = Float.parseFloat(incidentTime);
                    } catch (Exception e) {
                    }
                }
                if (incidentTimeNumber == 0) {
                    if (incidentType != null) {
                        if ("14".equals(incidentType)) {
                            homeIncidentZero(canvas, bitmapVisitingCornerKick, incidentTimeNumber, 0.56f, incidentType);
                        } else if ("2".equals(incidentType)) {
                            homeIncidentZero(canvas, bitmapHomeTeamRedCard, incidentTimeNumber, 0.45f, incidentType);
                        } else if ("1".equals(incidentType)) {
                            homeIncidentZero(canvas, bitmapVisitingTeamScored, incidentTimeNumber, 0.45f, incidentType);
                        }
                    }
                } else if (incidentTimeNumber <= 45 && incidentTimeNumber > 0) {
                    if (incidentType != null) {
                        if ("14".equals(incidentType)) {
                            homeTeamIncident(canvas, bitmapVisitingCornerKick, incidentTimeNumber, 0.56f, incidentType);
                        } else if ("2".equals(incidentType)) {
                            homeTeamIncident(canvas, bitmapHomeTeamRedCard, incidentTimeNumber, 0.45f, incidentType);
                        } else if ("1".equals(incidentType)) {
                            homeTeamIncident(canvas, bitmapVisitingTeamScored, incidentTimeNumber, 0.45f, incidentType);
                        }
                    }
                } else if (incidentTimeNumber > 45 && incidentTimeNumber < 90) {
                    if (incidentType != null) {
                        if ("14".equals(incidentType)) {
                            homeIncident(canvas, bitmapVisitingCornerKick, incidentTimeNumber, 0.56f, incidentType);
                        } else if ("2".equals(incidentType)) {
                            homeIncident(canvas, bitmapHomeTeamRedCard, incidentTimeNumber, 0.45f, incidentType);
                        } else if ("1".equals(incidentType)) {
                            homeIncident(canvas, bitmapVisitingTeamScored, incidentTimeNumber, 0.45f, incidentType);
                        }
                    }
                } else if (incidentTimeNumber >= 90) {
                    if (incidentType != null) {
                        incidentTimeNumber=90;
                        if ("14".equals(incidentType)) {
                            homeIncidentNinety(canvas, bitmapVisitingCornerKick, incidentTimeNumber, 0.56f, incidentType);
                        } else if ("2".equals(incidentType)) {
                            homeIncidentNinety(canvas, bitmapHomeTeamRedCard, incidentTimeNumber, 0.45f, incidentType);
                        } else if ("1".equals(incidentType)) {
                            homeIncidentNinety(canvas, bitmapVisitingTeamScored, incidentTimeNumber, 0.45f, incidentType);
                        }
                    }
                }
            }
        }
    }
    private void homeIncidentZero(Canvas canvas, Bitmap bitmapHomeCornerKick, float incidentTimeNumber, float v, String incidentType) {
        if ("14".equals(incidentType)) {
            canvas.drawBitmap(bitmapHomeCornerKick, (int) ((viewWidth - 2 * distancePx) * incidentTimeNumber / maxData - bitmapHomeCornerKickWidth / 2 + distancePxMax), viewHeight * v, strokePain);
        } else {
            canvas.drawBitmap(bitmapHomeCornerKick, (int) ((viewWidth - 2 * distancePx) * incidentTimeNumber / maxData - bitmapHomeCornerKickWidth / 2 + distancePx), viewHeight * v, strokePain);
        }
    }
    private void homeIncidentNinety(Canvas canvas, Bitmap bitmapHomeTeamScored, float incidentTimeNumber, float v, String incidentType) {
        if ("14".equals(incidentType)) {
            canvas.drawBitmap(bitmapHomeTeamScored, (int) ((viewWidth) * (incidentTimeNumber + 10) / maxData - bitmapHomeTeamScoredWidth / 2) - distancePxMin, viewHeight * v, strokePain);
        } else {
            canvas.drawBitmap(bitmapHomeTeamScored, (int) ((viewWidth) * (incidentTimeNumber + 10) / maxData - bitmapHomeTeamScoredWidth / 2) - distancePx, viewHeight * v, strokePain);
        }
    }
    private void homeIncident(Canvas canvas, Bitmap bitmapHomeTeamScored, float incidentTimeNumber, float v, String incidentType) {
        if ("14".equals(incidentType)) {
            canvas.drawBitmap(bitmapHomeTeamScored, (int) ((viewWidth - 2 * distancePx) * (incidentTimeNumber + 10) / maxData - bitmapHomeTeamScoredWidth / 2) + distancePxMax, viewHeight * v, strokePain);
        } else {
            canvas.drawBitmap(bitmapHomeTeamScored, (int) ((viewWidth - 2 * distancePx) * (incidentTimeNumber + 10) / maxData - bitmapHomeTeamScoredWidth / 2) + distancePx, viewHeight * v, strokePain);
        }
    }
    private void homeTeamIncident(Canvas canvas, Bitmap bitmapHomeCornerKick, float incidentTimeNumber, float v, String incidentType) {
        if ("14".equals(incidentType)) {
            canvas.drawBitmap(bitmapHomeCornerKick, (int) ((viewWidth - 2 * distancePx) * (incidentTimeNumber) / maxData - bitmapHomeCornerKickWidth / 2) + distancePxMax, viewHeight * v, strokePain);
        } else {
            canvas.drawBitmap(bitmapHomeCornerKick, (int) ((viewWidth - 2 * distancePx) * (incidentTimeNumber) / maxData - bitmapHomeCornerKickWidth / 2) + distancePx, viewHeight * v, strokePain);
        }
    }
    private void invalidateView() {
        if (Looper.getMainLooper() == Looper.myLooper()) {
            invalidate();
        } else {
            postInvalidate();
        }
    }
    private int dipToPx(float dip) {
        float density = getResources().getDisplayMetrics().density;
        return (int) (dip * density + 0.5f * (dip >= 0 ? 1 : -1));
    }
}

BollProgressDataBean.class

public class BollProgressDataBean {
    private String incidentType;  //主队比赛中的事件  0 角球 1红牌 2进球
    private String incidentTime;  //主队比赛中发生事件的时间
    public String getIncidentType() {
        return incidentType;
    }
    public void setIncidentType(String incidentType) {
        this.incidentType = incidentType;
    }
    public String getIncidentTime() {
        return incidentTime;
    }
    public void setIncidentTime(String incidentTime) {
        this.incidentTime = incidentTime;
    }
}

进度条 Android

1024 个赞