自定義view畫漸變柱形圖

記錄一下畫柱形圖的過程,效果圖如下:



效果圖非常簡單,就不用第三方庫了,我們直接畫吧,這里主要用到LinearGradient線性漸變這個屬性。

1、新建RectView 繼承 View
    //柱形圖的分值,100分滿分
    private int data[] = {10, 20, 30, 50};
    public RectView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }
2、重寫onDraw方法
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //畫矩形
        Paint paint = new Paint();
        LinearGradient linearGradient = new LinearGradient(0, 0, 0, getHeight(), new int[]{Color.parseColor("#F9D423"), Color.parseColor("#FF4E50")}, null, LinearGradient.TileMode.MIRROR);
        paint.setShader(linearGradient);
        paint.setStyle(Paint.Style.FILL);

        //畫分割線
        Paint linePaint = new Paint();
        linePaint.setColor(Color.parseColor("#e9e9e9"));
        for (int i = 0; i < data.length; i++) {
            canvas.drawRect((getWidth() / data.length) * i, getHeight() - (getHeight() / 100 * data[i]), getWidth() / data.length * (i + 1), getHeight(), paint);
            canvas.drawLine((getWidth() / data.length) * i, 0, (getWidth() / data.length) * i, getHeight(), linePaint);
        }

        //畫最后一條線
        canvas.drawLine(getWidth() - 2, 0, getWidth() - 2, getHeight(), linePaint);
    }
3、設(shè)置數(shù)據(jù)源更新
    public void setData(int data[]) {
        this.data = data;
        invalidate();
    }
4、LinearGradient屬性

LinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[], TileMode tile)
注:Android中計算x,y坐標(biāo)都是以屏幕左上角為原點,向右為x+,向下為y+
第一個參數(shù)為線性起點的x坐標(biāo)
第二個參數(shù)為線性起點的y坐標(biāo)
第三個參數(shù)為線性終點的x坐標(biāo)
第四個參數(shù)為線性終點的y坐標(biāo)
第五個參數(shù)為實現(xiàn)漸變效果的顏色的組合
第六個參數(shù)為前面的顏色組合中的各顏色在漸變中占據(jù)的位置(比重),如果為空,則表示上述顏色的集合在漸變中均勻出現(xiàn)
第七個參數(shù)為渲染器平鋪的模式,一共有三種
1、CLAMP-----邊緣拉伸
2、REPEAT----在水平和垂直兩個方向上重復(fù),相鄰圖像沒有間隙
3、MIRROR---以鏡像的方式在水平和垂直兩個方向上重復(fù),相鄰圖像有間隙

簡單的柱形圖就出來啦。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容