天天看點

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

今日科技快訊

近日,汽車之家宣布與湖南衛視達成獨家戰略合作。據悉,雙方開辟了“台網互動”營銷模式,将共同開展汽車廣告業務,并聯合推出品效合一的新型汽車類廣告産品“芒果汽車碼頭”,幫助車企實作品牌宣傳和營銷效果二合一。作者簡介

又到周五啦,提前祝大家周末愉快!

本篇來自 smily的投稿,分享了一個自定義折線圖控件,效果很不錯,感興趣的朋友可以看一看。

smily的部落格位址:http://blog.csdn.net/qq_20521573正文

首先看下要實作的效果圖,動态圖檔錄制效果不好,漸變顔色沒有完全顯示出來,以至于下半部分漸變色變成了白色。

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

折線圖的繪制主要有一下幾個步驟。

一、定義 LineChartView類 并繼承 View。

二、添加自定義屬性。以在 value目錄 下建立 attrs.xml 檔案,檔案中我們可以定義一些用到的屬性,比如折線顔色、字型大小等屬性。檔案内容如下:

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

接下來在 LineChartView 的構造方法中解析自定義屬性的值并做相應的處理。在構造方法裡還初始化了 漸變顔色、折線資料的List集合 以及 初始化畫筆 等操作代碼如下:

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

另外,折現資料需要實體類,實體類可直接添加到 LineChartView 内部。如下:

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

三、初始化畫筆和路徑。代碼如下:

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

四、重寫 onLayout方法。在 onLayout方法 中擷取控件的寬高、初始化原點坐标以及設定控件的背景。代碼如下:

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

五、重寫onDraw方法。在onDraw方法中完成折線圖的繪制。代碼如下:

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

折線圖的繪制可以分三部分:1.繪制坐标軸 2.繪制View上的文字 3.繪制折線。

1.坐标軸繪制的是第一象限,即左下角的點為原點。繪制坐标軸代碼如下:

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

2.繪制文字,代碼如下:

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

3.繪制折線及漸變填充

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

六、折線圖添加動畫。

1.首先需要計算動畫的進度,是以在 LineChartView 中定義成員變量 mProgress,并添加以下方法:

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

2.接下來設定動畫效果,代碼如下:

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

3.添加開啟動畫的方法:

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

至此,折線圖的繪制已經全部完成。最後還可以添加get() set()方法,暴露出屬性接口,以供外部調用。代碼就不再貼出來了。

七、使用LineChartView

1.在布局檔案中添加 LineChartView,可設定折線顔色、字型顔色、等屬性,如下:

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

2.在 Activity 中為 LineChartView 設定資料,也可以通過代碼為其設定屬性。

android 圖檔顔色漸變動畫,自定義View之顔色漸變折線圖

項目位址:https://github.com/zhpanvip/LineChartView更多

每天學習累了,看些搞笑的段子放松一下吧。關注最具娛樂精神的公衆号,每天都有好心情。