? ? ? ? 繼承系統(tǒng)控件的自定義View,實(shí)際上就是對(duì)系統(tǒng)控件的一種拓展峰鄙,大體就是添加一些本來(lái)沒(méi)有的新功能或者修改它的一個(gè)顯示效果栖袋。
? ? ? ? 1赶撰、先以簡(jiǎn)單的TextView來(lái)實(shí)現(xiàn)剑令。比如給TextView加一條紅色的下劃線? ?
? ? ? ? 首先糊啡,生成一個(gè)CustomTextView繼承自TextView,并重寫(override)onDraw方法和構(gòu)造方法吁津,如下
? ? ? ? 然后在onDraw方法中,定義一個(gè)Paint堕扶,并給它設(shè)置顏色(RED)和寬度
? ? ? ?再然后通過(guò)getWidth()和getHeight()方法獲取到控件的寬高
? ? ? ? 最后再用canvas.drawLine在控件底部實(shí)現(xiàn)紅色的下劃線碍脏,整個(gè)onDraw方法如下
? ? ? ? 修改activity_main中的TextView為CustomTextView
運(yùn)行后的效果如下
通過(guò)修改canvas.drawLine的幾個(gè)參數(shù)的值,可以實(shí)現(xiàn)這條紅線在控件中的不同的位置稍算。
? ? ? ? 2典尾、再看一個(gè)稍微復(fù)雜一點(diǎn)的繼承ImageView的圓形拼接的CustomImageView,類似于有一個(gè)版本釘釘?shù)娜毫念^像糊探。
????????同樣創(chuàng)建一個(gè)CustomImageView繼承自ImageView钾埂,并實(shí)現(xiàn)構(gòu)造方法和onDraw方法,不同的是我們需要一個(gè)參數(shù)mNum來(lái)判斷需要幾張圖片進(jìn)行拼接(demo中num最大為4)科平。
? ? ? ? 首先創(chuàng)建一個(gè)attrs.xml的文件褥紫,聲明custom_iv如下
? ? ? ? 創(chuàng)建CustomImageView 繼承ImageView,實(shí)現(xiàn)構(gòu)造方法和onDraw瞪慧,聲明變量mNum
? ? ? ? 在constructor(context: Context,attributeSet: AttributeSet)方法中髓考,實(shí)現(xiàn)自定義參數(shù)屬性,如下
? ? ? ? 我們?cè)诒镜刭Y源庫(kù)中弃酌,添加4張大小相同的圖片氨菇,分別取名去image1、2妓湘、3查蓉、4,在onDraw方法中榜贴,實(shí)例化一個(gè)Paint豌研,并獲取到4張圖片的bitmap
? ? 根據(jù)屬性mNum來(lái)做不同類型的圖片拼接,當(dāng)mNum等于1時(shí),只需要把image1的bitmap先按照控件大小進(jìn)行縮放聂沙,然后裁剪成圓形即可秆麸,新建BitmapUtil類,getCircleBitmap 方法及汉。第一步自然是要獲取到這個(gè)縮放比例沮趣,
val scale=mWidth.toFloat()/(bitmap.height).toFloat()
然后根據(jù)方法直接獲取到縮放后的bitmap,直接給出scaleBitmapToScreen方法截圖
? ? ? ? 然后再把bitmap裁剪成圓形(getCircleBitmap? 方法)
? ? 然后在onDraw方法中就可以根據(jù)不同的mNum的值來(lái)做不同的處理坷随,先把=1的
比較簡(jiǎn)單房铭,在布局文件中引用CustomImageView,并設(shè)置num=1温眉,如下
? ? ? ? 運(yùn)行效果如圖
? ? ? ? 當(dāng)mNum=2時(shí)缸匪,對(duì)image1和image2圖片bitmap進(jìn)行一次水平拼接,再裁剪成圓形类溢,
? ? ? ? 先說(shuō)一下水平拼接的一個(gè)思路凌蔬,首先兩張圖片要拼接到一塊,那么必須保證它們的高度相同闯冷,這樣才能保證齊整砂心,所以在這里,使用bitmap1的高度為基準(zhǔn)蛇耀,計(jì)算出bitmap2相對(duì)于bitmap1的縮放比例辩诞,再獲取到新的縮放后的newBitmap(這里要說(shuō)一下,縮放之后纺涤,bitmap2的寬度也會(huì)發(fā)生變化译暂,為了讓拼接后的圖片能顯示中心位置,我們需要對(duì)新生成的bitmap進(jìn)行裁剪撩炊,這個(gè)裁剪在下邊再說(shuō))外永。拼接后的bitmap寬度即為bitmap1 的寬度+newBitmap的寬度。(不是說(shuō)4張圖片的大小都是一樣的嗎衰抑,為啥還要考慮縮放象迎,保證他們的寬或高相同?這個(gè)地方主要是為了mNum=3時(shí)的考慮呛踊。)
把布局文件中的CustomImageView控件? num屬性修改為2砾淌,運(yùn)行效果如下
? ? ? ? 那么當(dāng)mNum=3時(shí),先把image1谭网、image2上下拼接成一個(gè)新的bitmap汪厨,起名newBitmap,再把newBitmap和image3左右拼接起來(lái)愉择,獲取到占滿控件大小的圓形bitmap劫乱,整體方法如下
? ? ? ? 再看一下drawMultiV方法织中,依然先把思路說(shuō)一下,首先兩張圖片上下拼接到一塊衷戈,那么必須保證它們的寬度相同狭吼,使用bitmap1的寬度為基準(zhǔn),計(jì)算出bitmap2相對(duì)于bitmap1的縮放比例殖妇,再獲取到新的縮放后的newBitmap(縮放之后刁笙,bitmap2的高度依然會(huì)發(fā)生變化,還是需要裁剪)谦趣。拼接后的bitmap高度即為bitmap1 的高度+newBitmap的高度疲吸。
? ? ? ? 把num修改為3,效果如下
? ? ? ? 最后當(dāng)mNum=4時(shí)前鹅,一樣的思考方式摘悴,先把image1、image2上下拼接到一起形成新的image22舰绘,image3蹂喻、image4拼接到一起形成新的image33,再把image22除盏、image33左右拼接到一起叉橱,然后再根據(jù)控件尺寸進(jìn)行縮放裁剪成圓形,整體如下
? ? ? ? num修改為4者蠕,效果如下
? ? ? ? 最后我們說(shuō)一下剛才提到的在縮放后需要裁剪的方法scaleBitmap,依然先說(shuō)思路掐松,在bitmap進(jìn)行縮放后踱侣,如果是以寬度為基準(zhǔn),那么需要確贝蠡牵縮放后的bitmap的高度和之前的高度相同抡句,相反,如果以高度為基準(zhǔn)杠愧,就需要確贝疲縮放后的bitmap的寬度和之前相同,這里就需要裁剪bitmap的x或者y從width(height)*(scale-1)/2開(kāi)始流济,具體方法截圖如下
? ? 對(duì)于繼承系統(tǒng)控件的自定義View暫時(shí)就說(shuō)這么多锐锣,如果上面代碼或者過(guò)程中有什么錯(cuò)誤或者不規(guī)范的地方,歡迎批評(píng)指正