Android實現自定義RelativeLayout可拖動、縮放、旋轉TextView

loisonly 8年前發布 | 15K 次閱讀 TextView Android開發 移動開發

因最近公司項目需求,需要做出一個在一張背景圖上添加文字,文字可編輯如修改顏色、樣式、字體、背景添加氣泡等,也可對文字的位置進行修改,實現拖動、旋轉、縮放等功能,類似于美圖秀秀中文字的添加,最后可將背景圖和文字聯合生成一張圖片,保存到相冊中,在網上也沒有找到合適的代碼以供參考,所以決定自己寫一個自定義的控件實現以上的效果。

先貼上圖看一下效果,這個demo的基本功能包括:

一、點擊自定義View可以創建標簽,點擊標簽滑動可以改變標簽位置;

二、在View上進行兩指縮放旋轉可以改變標簽的方向和大小,當有多個標簽TextView存在時,兩指縮放和旋轉會自動尋找離兩指中心點最近的TextView標簽進行操作

三、在自定義上可識別左滑和右滑操作!

四、可監控TextView的實時滑動!

五、對話框中可滑動滑條改變字體顏色!

六、點擊保存能將畫布生成圖片保存下來!

實現這個效果的基本思路如下:

首先,我們自定義一個MyView繼承RelativeLayout,然后對該MyRelativeLayout進行onTouchEvent的事件進行監聽,以此來判斷是什么事件,對于父布局,我們需要分類的事件有單擊事件,左右滑動事件,兩個手指的縮放,旋轉操作,對于最后操作的TextView,我們需要監聽的事件有單擊事件,兩個手指的縮放和旋轉操作。

對于MyView,單擊事件就是單純的點擊事件,他是用來觸發產生新的TextView的事件來源,也就是點擊MyView就會生成新的標簽,還有左右滑動事件,因為在公司的項目中還需要添加濾鏡的效果,所以我們要監聽左右滑動的事件來實現切換上下兩種不同的濾鏡效果,然后通過借口回調的的方式告訴調用者即可!最后就是兩個手指的滑動事件,我們要通過兩個手指在移動過程中兩個手指之間的距離的漸變來判斷當前用戶是想實現放大還是縮小的功能,同時,根據剛開始的兩個手指的落點的連線和滑動過程中兩個手指的連線來確定用戶的旋轉角度,從而改變標簽TextView的旋轉角度。

對于標簽TextView本身,點擊事件是為了確定我門當前操作的焦點是在哪個TextView上,因為到時候MyView上有很多個標簽TextView,我門會把所有的TextView保存到List之中去,然而每次操作的只有一個全局的TextView所以我們每次在點擊一個TextView的時候就要把被點擊的TextView賦值給全局的TextView,代表我們操作的是哪一個View,然后當我們按住TextView滑動的時候,實現的效果是在MyView上的移動效果,當我們兩個手指在TextVIew上的時候,TextView本身也要監聽是否有旋轉和縮放,從而改變TextView自己的旋轉角度和縮放效果。

首先,我們對MyView進行分析。當然稍后我會給出整個自定義控件的所有代碼。

我們需要關注的是MotionEvent.ACTION_DOWN,MotionEvent.ACTION_MOVE,MotionEvent.ACTION_UP,MotionEvent.ACTION_POINTER_UP,MotionEvent.ACTION_POINTER_DOWN,MotionEvent.ACTION_CANCEL.

首先,我們討論在MyView上滑動實現對TextView的縮放和旋轉操作。當我們有兩個以上的手指觸摸view的時候,菜具備觸發縮放和旋轉的條件,此時,我們需要監聽ACTION_DOWN和ACTION_POINTER_DOWN,如果兩個事件同時觸發,說明有兩個手指,此時我們紀錄下剛落點時的兩個點的坐標,然后在兩個手指的滑動過程中,我們在ACTINON_MOVE事件中去動態的獲取滑動中的兩個點的坐標,然后實時的去計算兩個點之間的距離,再與之前的距離進行比較,如果比之前的打大,說明用戶的意圖是放大,反之就是縮小,于此同時,計算兩個點之間的連線與之前兩個點之間點連線的角度,再根據整個計算出來的角度對TextView進行旋轉操作。

由于為了提高用戶的體驗,我們決定當MyView上有很多標簽TextView的時候,在MyView上進行縮放和旋轉操作的時候,我們會自動的去計算兩個手指之間的中點坐標,然后去遍歷List中存儲的所有TextView的位置信息,去匹配List中所有TextView的中心與兩個手指中點最近的TextView,對它進行操縱,這樣,用戶就不用專門去找到某一個TextView去點擊一個它才能對他操作了,提高用戶體驗度,尤其是操作某一個TextView非常小的時候,手指壓根點不到的時候。

另外,在TextView上的操作,原理都一樣,在這里就不再贅述,稍后給出的代碼中也有相應的注釋,相信一看便知,大家在測試的時候直接將該自定義View使用到布局文件中即可,就可以測試其功能,項目還沒有上線,所以說該自定義控件可能還有bug沒有修改,希望大家一起改正,謝謝。

 

 

 本文由用戶 loisonly 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!