安卓自定義柱狀圖,第一個手擼自定義view

1.效果展示
在這裏插入圖片描述
2.具體實現

package com.iyuba.abilitytest.utils;

import android.content.res.Resources;
import android.util.TypedValue;


/**
 * Created by maoyujiao on 2019/9/24.
 */

public class Dp2PxUtil {
    public static float dp2px(int dp){
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, Resources.getSystem().getDisplayMetrics());
    }

}

package com.iyuba.abilitytest.widget;

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

import com.iyuba.abilitytest.R;
import com.iyuba.abilitytest.utils.Dp2PxUtil;

/**
 * Created by maoyujiao on 2019/11/13.
 */

public class BarView extends View {
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private float LINEWITH = Dp2PxUtil.dp2px(2);
    private float MARGIN = Dp2PxUtil.dp2px(40);
    private float TEXTSIZE = Dp2PxUtil.dp2px(12);
    float  mLeftBottomX,mLeftBottomY;
    float  mLeftTopX,mLeftTopY;
    private float mGapVertail;
    private float mGapHorizonal;
    private int mGapVertailNum = 5;
    private String[] indicates = {"100","80","60","40","20","0"};
    private String[] indicatesBottom = {"單詞","語法","聽力","閱讀","口語","寫作"};
    private String[] colors = {"#b2e6fe","#b5d2f4","#c4e8ee","#c1caf5","#b2e6fe","#c0e8ee"};
    private float[] progresses = {0.2f,0.4f,0.6f,0.8f,0.2f,1.0f};
    private Rect rect = new Rect();

    public BarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint.setTextSize(TEXTSIZE);
    }


    public void setIndicatesBottom(String[] indicatesBottom) {
        this.indicatesBottom = indicatesBottom;
        invalidate();
    }

    public void setProgresses(float[] progresses) {
        this.progresses = progresses;
        invalidate();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mLeftBottomX =  (int)MARGIN;
        mLeftBottomY = getHeight() - MARGIN;
        mLeftTopX = (int)MARGIN;
        mLeftTopY = (int)MARGIN;
        mGapVertail = (getHeight()- MARGIN * 2 ) / mGapVertailNum;
        mGapHorizonal = (getWidth() - MARGIN * 2 ) / (indicatesBottom.length * 3); //分爲3 *legth份,間隙爲1份,方框佔2份

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setStrokeWidth(LINEWITH);
        paint.setColor(getResources().getColor(R.color.colorPrimary));
        paint.setTextAlign(Paint.Align.LEFT);
        //畫左邊的豎線
        canvas.drawLine(mLeftBottomX,mLeftBottomY,mLeftTopX,mLeftTopY,paint);

        //畫矩形和寫文字
        for(int i = 0;i< indicatesBottom.length; i++){
            paint.setColor(Color.parseColor(colors[i]));
            paint.setStyle(Paint.Style.FILL);

            canvas.drawRect(MARGIN + mGapHorizonal + i * 3 * mGapHorizonal,
                    mLeftBottomY - progresses[i] * (getHeight() - MARGIN * 2),
                    MARGIN + mGapHorizonal + i * 3 * mGapHorizonal + 2 * mGapHorizonal,
                    mLeftBottomY ,paint);
            paint.setColor(Color.BLACK);
            paint.getTextBounds(indicatesBottom[i],0,indicatesBottom[i].length(),rect);
            paint.setTextAlign(Paint.Align.CENTER);

            canvas.drawText(indicatesBottom[i],
                    MARGIN + mGapHorizonal + i * 3 * mGapHorizonal + mGapHorizonal,
                    mLeftBottomY + (rect.bottom - rect.top) * 1.2f,paint);
        }

        //畫刻度線和水平線
        paint.setTextAlign(Paint.Align.LEFT);
        for(int i = 0;i< mGapVertailNum + 1;i++){
            paint.setColor(getResources().getColor(R.color.colorPrimary));
            if(i < indicatesBottom.length -1) {
                canvas.drawLine(mLeftBottomX, mLeftTopY + i * mGapVertail,
                        mLeftBottomX + Dp2PxUtil.dp2px(5),
                        mLeftTopY + i * mGapVertail, paint);
            } else {
                canvas.drawLine(mLeftBottomX, mLeftTopY + i * mGapVertail,
                        getWidth() - MARGIN/2,
                        mLeftTopY + i * mGapVertail, paint);
            }
            paint.getTextBounds(indicates[i],0,indicates[i].length(),rect);
            paint.setColor(getResources().getColor(R.color.ability_bar_text));
            canvas.drawText(indicates[i],MARGIN - (rect.right + rect.left)* 1.2f,
                    mLeftTopY + i * mGapVertail - (rect.top + rect.bottom)/2,paint);
        }
    }
}

 <com.iyuba.abilitytest.widget.BarView
        android:id="@+id/barView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        />
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章