MultiPictureView是一個可以將多張圖片以網(wǎng)格的方式顯示的View,通過簡單的接口實現(xiàn)煩人的布局,從此解放你的小手手
我們提供的服務(wù)有:網(wǎng)站制作、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、西湖ssl等。為上千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的西湖網(wǎng)站制作公司
第一步:添加到根build.gradle
第二步:在模塊的build.gradle添加依賴
在Demo中使用了下面兩個開源項目,感謝一哈,雖然第二個是我寫的...大家要覺得好用,記得給我點個贊
之前項目中的圓角圖片控件是通過對 ImageView 的圖片轉(zhuǎn)換為 Bitmap ,在 Bitmap 的基礎(chǔ)上實現(xiàn)的圖片圓角。因為要對圖片資源進行 Bitmap 轉(zhuǎn)換,所以很擔(dān)心在 app 中圖片資源非常多的時候造成內(nèi)存溢出或程序卡頓。所以換成了下面的方式實現(xiàn)圓角圖片,原理非常簡單,通過 canvas 的 clipPath 方法,剪裁整個 canvas 以達到實現(xiàn)圖片圓角的目的。
一言以蔽之, clipPath 實現(xiàn)圓角,是剪裁 ImageView 的畫布 (canvas) ;而操作 Bitmap 實現(xiàn)圓角,是剪裁 ImageView 的圖片
先上效果圖
源碼
單點拖動圖片對圖片進行平移操作。雙手縮放圖片大小和旋轉(zhuǎn)圖片到一定的角度。圖片縮放的時候 不能大于最大的縮放因子和小于最小的縮放因子。大于最大縮放因子或者小于最小縮放因子需要對圖像進行回彈。圖片旋轉(zhuǎn)的角度只能為90度的倍數(shù),不滿足90度要進行回彈。圖片回彈要一個漸變的效果。
大體思路: 首先,Android中提供了Matrix類可以對圖像進行處理。其次,要顯示一張圖片最容易想到的就是ImageView?;貜椧鬂u變的過程,可以通過屬性動畫進行設(shè)置。所以大體的思路是:繼承ImageView,重寫onTouchEvent()方法,判斷事件類型,在對應(yīng)的事件使用Matrix對圖像進行變換。
Matrix是一個已經(jīng)封裝好的矩陣,最重要的作用就是對坐標(biāo)點進行變換。
舉個栗子:
1.某個點(x0,y0,1)通過單位矩陣E映射得到的點還是(x0,y0,1)。
3.點(x0,y0,1)通過矩陣T映射得到的點就會做如下的變換
可以看到點(x0,y0,1)經(jīng)過T矩陣在x軸方向上平移了dx,在y軸方向上平移了dy。
通過以上的變換可以得到具體的思路: 我們維護一個圖像對應(yīng)的矩陣mCurrentMatrix,該矩陣主要是對ImageView中的圖像的各個點進行映射。ImageView在容器位置擺放完成之后,置mCurrentMatrix矩陣為單位矩陣。當(dāng)onTouchEvent()方法中觸發(fā)單點觸控并且手指進行平移的時候,調(diào)用矩陣mCurrentMatrix的postTranslate(dx,dy),對mCurrentMatrix進行變換。當(dāng)手指抬起,利用變換結(jié)束后的矩陣對圖像的各個點進行映射,從而得到平移變換后的圖像。同理可得,在兩只手指進行縮放旋轉(zhuǎn)的時候,我們對矩陣mCurrentMatrix進行各種變換,當(dāng)縮放旋轉(zhuǎn)的事件結(jié)束再利用變換完的矩陣去映射圖像的各個點,從而得到縮放、旋轉(zhuǎn)后的圖像。
安卓自定義View進階 - Matrix原理
安卓自定義View進階 - Matrix詳解
首先理清事件的邏輯:
初始化圖像大小和位置
縮放圖像大小和控件大小自適應(yīng),平移圖像中心和控件中心重合
onTouchEvent()函數(shù)
平移操作
將圖像對應(yīng)的矩陣進行變換。
縮放操作
mBoundRectF為記錄圖像邊界的矩形??s放的時候選取圖像的中心進行縮放。
旋轉(zhuǎn)操作
旋轉(zhuǎn)的時候旋轉(zhuǎn)的旋轉(zhuǎn)中心也是圖像的中心
圖像中各個點的映射
調(diào)用ImageView的setImageMatrix(Matrix matrix)會讓ImageView根據(jù)設(shè)置的matrix去重新繪制圖像。
更新圖像的矩形邊界
獲得圖像的矩形,并根據(jù)矩陣映射矩形各個點的坐標(biāo)。
縮放回彈
旋轉(zhuǎn)回彈
一些計算方法
要求圖像的變換是一個漸變的過程,很容易想到的就是屬性動畫。因為屬性動畫本身就是對值進行不斷set的過程。而我們維護的矩陣也是一個值,所以很自然可以想到,如果得到回彈之前的矩陣的值以及回彈之后矩陣的值,就可以根據(jù)動畫監(jiān)聽器中動畫當(dāng)前的系數(shù)值去改變矩陣的值。
對animator對象設(shè)置完監(jiān)聽器之后,就可以在手指抬起的時候調(diào)用屬性動畫的start()方法開啟動畫。
自定義可平移、縮放、旋轉(zhuǎn)的控件主要點有兩個方面:一是onTouchEvent()中判斷平移、旋轉(zhuǎn)、縮放的觸發(fā)條件,平移位移量、縮放比例因子、旋轉(zhuǎn)角度的計算。二是Matrix矩陣的應(yīng)用。
android imageView有一個屬性就是scaleType擴大類型,使用fitXy值就可以實現(xiàn)鋪滿整個空間,操作如下:在ImageView里加上android:scaleType="fitXy"。\x0d\x0a 默認(rèn)還有其他很多類型:scaleType=“matrix” 是保持原圖大小、從左上角的點開始,以矩陣形式繪圖。\x0d\x0a\x0d\x0ascaleType=“fitXY” 是將原圖進行橫方向(即XY方向)的拉伸后繪制的。\x0d\x0a\x0d\x0ascaleType=“fitStart” 是將原圖沿左上角的點(即matrix方式繪圖開始的點),按比例縮放原圖繪制而成的。
RoundedBitmapDrawable 是 supportV4 下的一個類,有了它,顯示圓角和圓形圖片的情況下就不需要額外的第三方類庫了,還能和各種圖片加載庫配合使用。
點擊此處 可以看到官方的介紹。
setCircular(boolean circular) : 把圖片的形狀設(shè)為圓形;
setCornerRadius(float cornerRadius) : 設(shè)置圖片的圓角半徑。
這里貼一下源碼,更能清晰的知道它的實現(xiàn):
至于具體的實現(xiàn),閱讀源碼發(fā)現(xiàn)官方使用了 BitmapShader 來實現(xiàn)的圓角。
效果
首先來看下原圖和處理后效果,以及做一些擴展,如添加一個邊框
通過 RoundedBitmapDrawableFactory 傳遞要轉(zhuǎn)換bitmap 我就可以很簡單的生成一個如下圖的圓角圖片
可以看到我們僅僅只是改了一個屬性就實現(xiàn)了如下圖正圓形的轉(zhuǎn)換,但你可能已經(jīng)發(fā)現(xiàn)圖像有一些變形,因為內(nèi)部在接收到 circular == true 后先是對圖像進行了轉(zhuǎn)換為正方形的操作,這個操作是一個伸縮放操作,而不是裁剪,所以圖像發(fā)生了變形,所以在使用 setCircular 時最好能保證你的原圖時一個正方形的,如果不是的話,下面我們也會給出相應(yīng)解決方案
我們自己進行對bitmap的裁剪來轉(zhuǎn)換成正方形,就解決了上面提到的拉伸問題,再繪制邊框就實現(xiàn)了一個如下帶邊框的正圓形圖片
RoundedBitmapDrawable 也可以直接設(shè)置轉(zhuǎn)換過程的
這些操作,來更好的工作
到這個里我們就可以把項目中的圓角圖片的控件更換一下,平時記得多留意一下系統(tǒng)提供的一些API,可能會幫我們節(jié)省不少時間。
引用:
★★★ Android一些容易被忽略的類-RoundedBitmapDrawable
★★ Android 必知必會-使用 supportV4 的 RoundedBitmapDrawable 實現(xiàn)圓角