文字也帶進(jìn)度的進(jìn)度條

實在不知道起什么名字好了,哈哈瘦材》禄看看效果先朗和。

ezgif-4-8120c9098c.gif

其實時很簡單的一個效果,但是我剛看到的時候抢蚀,哇镰禾!好神奇,怎么實現(xiàn)的啊屋休。經(jīng)過了一番思考和對自定義控件的了解劫樟,然后給他搞了出來织堂。下面我們來看看到底如何實現(xiàn)易阳。

首先你要了解自定義View的繪制的api方法,了解了這些方法就很容易實現(xiàn)了拒课。

  • Canvas(畫布)

當(dāng)你調(diào)用View#onDraw()中的canvas的時候你會發(fā)現(xiàn)真的好多方法早像,功能很強(qiáng)大肖爵。它可以完成弧線(arcs)、填充顏色(argb和color)冀自、 Bitmap凡纳、圓(circle和oval)帝蒿、點(point)、線(line)延塑、矩形(Rect)答渔、圖片(Picture)、圓角矩形 (RoundRect)沼撕、文本(text)务豺、頂點(Vertices)、路徑(path)笼沥。今天在這里不會講這些啦。主要講能用到的今天項目的方法馆纳。主要是canvas.drawRect()和canvas.clicpRect鲁驶。第一個不用多說了就是繪制一個矩形。而第二個也是顧名思義就是對矩形進(jìn)行裁剪灵嫌。那么怎么用呢寿羞,先來看一個例子绪穆。

mPaint = new Paint();
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.RED);
canvas.drawRect(new RectF(0, 0, 500, 100), mPaint);

他的樣子時這樣的


test1.png

然后再在添加一句代碼

mPaint = new Paint();
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.RED);
canvas.clipRect(new RectF(0, 0, 200, 100));
canvas.drawRect(new RectF(0, 0, 500, 100), mPaint);

再看效果

test2.png

你會發(fā)現(xiàn)紅條被裁剪了玖院,他的寬度就是clicpRect()方法中的寬度难菌〗季疲看到這里是不是一下子有了做進(jìn)度條的思路呢。沒錯就是利用這個方法一步一步的進(jìn)行裁剪就可以做出進(jìn)度條的效果啦摹闽。進(jìn)度條的效果有了付鹿,最神奇的字體進(jìn)度是怎么回事呢舵匾?其實也是用這個方法啦慢叨。一個道理拍谐,只是需要一個簡單的判斷馏段,判斷進(jìn)度何時到字體的位置院喜,然后在進(jìn)行裁剪。
擼代碼:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //繪制背景
        drawBackgroud(canvas);
        //繪制進(jìn)度
        drawProcess(canvas);
        //繪制文本
        drawText(canvas);
        //繪制進(jìn)度文本
        drawProcessText(canvas);
    }

整體的代碼邏輯就在這了砍濒“中希總共就分為這四個部分拿愧,利用canvas.drawRect()和canvas.clicpRect方法浇辜,加上一些有效性的判斷就完全可以啦柳洋。具體的判斷就很簡單啦熊镣。我這里就直接傷代碼了立由。

    private void drawBackgroud(Canvas canvas) {
        pgPaint.setColor(Color.GREEN);
        canvas.drawRoundRect(pgRect, radius, radius, pgPaint);
    }
    private void drawProcess(Canvas canvas) {
        processPaint.setColor(Color.GREEN);
        canvas.save(Canvas.CLIP_SAVE_FLAG);
        int right = (int) (mProcess / mMaxProcess * getMeasuredWidth());
        canvas.clipRect(pgRect.left, pgRect.top, right, pgRect.bottom);
        canvas.drawRoundRect(pgRect, radius, radius, processPaint);
        canvas.restore();
    }
    private void drawText(Canvas canvas) {
        processPaint.setColor(Color.GREEN);
        String text = getProcessText();
        processPaint.getTextBounds(text, 0, text.length(), textRect);
        processPaint.setTextSize(50);
        float tx = (getMeasuredWidth() - textRect.width()) / 2;
        float ty = (getMeasuredHeight() + textRect.height()) / 2;
        canvas.drawText(text, tx, ty, processPaint);
    }
    private void drawProcessText(Canvas canvas) {
        processPaint.setColor(Color.WHITE);
        //獲取進(jìn)度文本
        String text = getProcessText();
        canvas.save();
        //計算坐標(biāo),使文字居中顯示
        float tx = (getMeasuredWidth() - textRect.width()) / 2;
        float ty = (getMeasuredHeight() + textRect.height()) / 2;
        //進(jìn)度條走的進(jìn)度比例
        int right = (int) (mProcess / mMaxProcess * getMeasuredWidth());
        //判斷是否到了字體的位置。
        if(tx <= right){
            canvas.clipRect(textRect.left, textRect.top, right, textRect.right);
            canvas.drawText(text, tx, ty, processPaint);
        }
        canvas.restore();
    }

相信大家可以看懂里面的一些邏輯荷逞。就是在不斷的進(jìn)行裁剪實現(xiàn)進(jìn)度的刷新种远。
mProcess是外部傳進(jìn)來的進(jìn)度通過

    public void setProcess(int process){
        this.mProcess = process;
        postInvalidate();
    }

好啦顽耳,我這里就是將一個思路射富,這個例子還有很多完善的地方胰耗,大家可以自行完善就好限次。

給上Demo地址 這里

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市柴灯,隨后出現(xiàn)的幾起案子卖漫,更是在濱河造成了極大的恐慌,老刑警劉巖赠群,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件羊始,死亡現(xiàn)場離奇詭異,居然都是意外死亡乎串,警方通過查閱死者的電腦和手機(jī)店枣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來叹誉,“玉大人鸯两,你說我怎么就攤上這事〕せ恚” “怎么了匠襟?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長双妨。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮幕垦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己岛抄,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上长酗,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天,我揣著相機(jī)與錄音菲茬,去河邊找鬼。 笑死镀赌,一個胖子當(dāng)著我的面吹牛良姆,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播伯复,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起捣郊,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎畜侦,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體尸变,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了呛哟。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片公给。...
    茶點故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡街望,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布巫财,位于F島的核電站,受9級特大地震影響闽瓢,放射性物質(zhì)發(fā)生泄漏扣讼。R本人自食惡果不足惜销钝,卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望滤祖。 院中可真熱鬧,春花似錦种蘸、人聲如沸墓赴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽诫硕。三九已至,卻和暖如春刊侯,著一層夾襖步出監(jiān)牢的瞬間章办,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工滨彻, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留藕届,地道東北人。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓亭饵,卻偏偏與公主長得像休偶,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子冬骚,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容