ScalableImage

自定義 ImageView

因為我們想要製作可以移動的 View 所以我們可以自定義一個 View 然後在 XML 裡使用他。詳細內容如下。

class ScalableImage: ImageView {

    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    

如果我們想要在 XML 裡直接載入這個自定義的 View 我們就必需，使用這兩項 constructor 。

然後我們就可以在 XML 上直接使用

<com.example.jheng.day2_2_scalableimageview.ScalableImage

        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:scaleType="matrix"
            .
            .
            .
                                    />

建立完這些候我們就可以把我們想要在 ImageView 上實現的功能寫在裡面了。

移動 ImageView

使用者手指按下

因為我們要實現移動 ImageView 所以我們要 override onTouchEvent ， onTouchEvent 提供我們發生觸控當下的資訊，讓我們能夠去運用。

如果你還沒看過上一篇的讀者，可以先看上一篇座標系統的解說，再來看看會更進入狀況唷。
首先，在我們講解程式碼前，請先再看一次這張圖。

Android 在繪製 View 會以 View 的左上角為基準點，在計算長寬進行繪製，繪製後就會是我們看到的 View。

我們可以利用 MotionEvent 提供的參數得知使用者手指按下或移動手指，我們就可以利用這些資訊來做判斷。

override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.action and MotionEvent.ACTION_MASK) {
            
            MotionEvent.ACTION_DOWN ->{
                dx = event.rawX - this.x
                dy = event.rawY - this.y
                
            }

於是乎，我們希望能夠找到 View(左上角) 在整個 DecorView 上的座標。也就是圖一上虛線的數值。

使用者移動手指

接下來我們希望使用者在移動手指的時候，不斷更新 View 在整個 Decor View 裡的座標位置。這樣就有 ImageView 不斷移動的效果。

MotionEvent.ACTION_MOVE -> {
    this.x = event.rawX - dx
    this.y = event.rawY - dy
    }

做完以上兩點之後，我們就可以做一個簡單移動 Image 的效果囉。

今天就先這樣，我們明天見囉。