背景
先說個事:最近我准備做個開源的博客園android客戶端!符合Google最新的material design設計風格的!不知道有沒有小伙伴願意和我一起做呢?如果有願意的,請私信我哦!!!!我還打算每天直播我們工作的進度,代碼,以及BUG等!!
最近在做公司的一個項目!在登陸頁面那兒有幾個小知識點!雖然不是很難,但我猜想還是會有很多童鞋不會!所以我覺得我有必要寫一篇博客來說明一下!下面呢我就先上一下效果動態圖
看效果
1.用戶頭像是原形,另外周圍有白色光圈!
2.用戶名和密碼輸入框在空的時候點擊登陸為抖動!
原理
1.用戶頭像是自定義ImageView,另外讀者要注意畫筆的模式,下面我先給個谷歌官方的截圖
這里我就不過多介紹當設置了這些模式之后會有哪些效果,在下面的代碼中我也只是說明我們要用的模式!!其他的讀者自己去谷歌吧!!
2.第二個就是個簡單的動畫!!很簡單!!
代碼實現
一.我們先來看那個動畫效果吧!我是直接寫的xml文件 看代碼:
這邊我是用的移動x軸方向,動畫只執行一次,另外,請讀者注意一下,我設置了了個動畫插值器(控制動畫的變化的),我是用的cycleInterpolator這個,用來控制動畫循環的
這個就是動畫插值器了!!執行兩次!
好了動畫xml寫完了,我們來看看怎么執行的?
很簡單,看代碼就行了!我就不過多解釋了!!
二.自定義ImageView的實現
1.首先我得先確定ImageView的大小
在這里我的先對上面的代碼中的MeasureSpec.getMode(int size)這個方法解釋下?
這個方法是得到寬高大小模式的?他有三個返回值:
MeasureSpec.EXACTLY:這個是指當你的view的大小設置成fill_parent或者固定的大小 就是大小確定的
MeasureSpec.AT_MOST:這個是指當你的view的大小設置成wrap_parent的時候,不確定 自適應
MeasureSpec.UNSPECIFIED:這個是指當你的view的大小未指定的時候,這種情況不太可能出現 我們一般不考慮!
當我們了解這個的時候,就可以確定該view的寬高了!當MeasureSpec.EXACTLY的時候,就用設置的!當是 MeasureSpec.AT_MOST的時候,就是內部圖片大小加padding值!
2.開始繪制 先看代碼,在解釋
首先我們得獲取寬高的最小值,之后再把圖片縮小/放大 到這個大小,之后就是得到圓形的圖片!
我們直接看getRoundBitMap(Bitmap map,int min)方法,要傳兩個參數,一個原圖還有大小!
首先我們得繪制一個和原圖一樣大小的畫布之后繪制圓形在繪制圖片,至此就得到了圓形圖片了!另外,請讀者注意下,就是在我們在畫布上繪制了圓形之后,為畫筆paint設置了Xfermode,對就是PorterDuff.Mode.SRC_IN!那這個是什么意思呢?還記得我們在文章開頭現實的那個mode的所有類型嗎?他已經很好的展示了當設置了這個寫mode之后的效果!首先我得先說明下 dst是先繪制的,src是后繪制的?那現在就很好理解PorterDuff.Mode.SRC_IN這個的意思了!取dst和src的交集,但是是顯示src(后繪制的)!現在,大家應該能明白我先畫圓形在在繪制bitmap了吧!!
現在我們再來看ondraw()這個方法,當我們得到了圓形的bitmap之后,按理說直接繪制就行了,但是問題在於外面還有層白圈!其實很簡單--就是同心圓而已,只不過半徑不一樣罷了。只要繪制個半徑比bitmap大的圓就行啦!!!
至此,本篇文章結束!!