作者簡介

大家好，新的一周又開始了!本篇來自 馬云飛 的投稿，分享了如何實現(xiàn)圓角圖片，希望能幫助有需要的朋友。

馬云飛 的博客地址：

http://blog.csdn.net/sw950729

正文

最近一兩個月沒事做，然后就開始封裝一些東西，昨天上司讓我?guī)退龅膱A角圖片。思路自然是和網(wǎng)上的demo不一樣的。

網(wǎng)上demo的效果：

 

 

 

 

差不多應(yīng)該是這樣的，但是容易出一些問題，比如你的圖片本身就是個圓角?又或者圖片太大，你想縮小顯示，但出現(xiàn)顯示內(nèi)容不全?

我想實現(xiàn)的效果是這樣的： 

 

 

 

圖畫的較丑，見諒。

意思就是以他的寬高的最小值，為正方形的寬給他做圓角，當(dāng)然長方形也可以的，因為我試了效果，沒有問題，你們到時候可以自己嘗試。

參考文章：

http://blog.csdn.net/lmj623565791/article/details/41967509

這是翔神的文章，不過他的效果，并不是我想要的，因為，他的繪圖是從(0，0)點然后截取寬高繪圖，并不是我想要的重中間截取，然后繪圖。

大體代碼和他的差不多。不過依舊刪除了一些無用的代碼(哈哈，這個我抄代碼的特性，沒用放著干嘛，礙眼。)

好了下面上代碼。初始化： 

 

 

 

這邊我用到了dp2px。這個就是將dp轉(zhuǎn)換成px。網(wǎng)上代碼一堆~： 

 

 

 

既然繼承了ImageView，少不了的自然是onMeasure方法： 

 

 

 

下面就是重點了，對 bitmapshader 不了解的，去看看這個：

http://blog.csdn.net/aigestudio/article/details/41799811

設(shè)置bitmapshader的代碼如下： 

 

 

 

如果有人看了前面我給的參考文章，那么，你可以發(fā)現(xiàn)，我把這個類的代碼進行了改動，差不多就是把圖片的起點坐標(biāo)從(0，0)移動到了我想要的起點。

至于為什么，我們打開ImageView的源碼，找到Center_Crop。這快代碼的意思差不多是將圖片居中把。

來，我們上源碼： 

 

 

 

他怎么計算的scale我們別管它，重點是如何計算他的dx和dy。

這里我就舉個例子來計算。drawable的寬和高是(300，200)。我要繪制的view的寬高是(200，200)。按照 我的思路繪圖是從(50，0)到(250，250)，而不是(0，0)到(200，200)。

話不多說。我們看源碼的計算： 

 

 

 

我們畫圖，來說明這一切，看完圖，你或許就懂了。 

 

 

 

紅色框是我們之后的，那這樣，1這塊區(qū)域可以理解成沒了。銷毀了。但是實際的效果是這樣： 

 

 

 

圓形好像看似沒什么問題，那你們自己看圓角圖片左邊是不是被拉伸，這個拉伸距離應(yīng)該剛好是我們之前計算得到的50dp。因為上圖的1那塊已經(jīng)不存在了，所以你畫圖的時候那快距離就是拉伸的距離?，F(xiàn)在我們看看-50dp的圖。 

 

 

 

1 的部分被移出去了。但他依然是存在的，所以繪制的圖是不會出現(xiàn)任何拉伸的。perfect~

屬性配置完了，剩下的就是ondraw方法咯。很簡單，代碼如下： 

 

 

 

當(dāng)然你也得考慮到 onsizechanged 的時候，代碼也不多： 

 

 

 

好了。在這邊我補上attrs屬性： 

 

 

 

現(xiàn)在。一個***的，***的圓角ImageVIew就解決了。不過好像還缺點什么，對了。自行修改圓角，自行修改類型，加上這個才算***。

附上代碼： 

 

 

 

現(xiàn)在我們新建個xml。放2張圖片。一個圓角，一個圓形，先看看效果如何： 

 

 

 

多張圖片在外層加一個scrollview。好了。我們來看一下效果： 

 

 

 

***~~

圓角大小自行修改。類型自行修改。好了。今天主要內(nèi)容就這么多把。整理了2個多小時~也是夠夠的。