iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0

縮放 ImageView

接下來我們要來縮放 ImageView
縮放的功能可以透過許多方法來實作。
今天我們使用的概念是利用使用者兩隻手指按下的距離當作基準,隨者使用者移動兩隻手指距離(放大或縮小),我們等比例的調整圖片的大小。

知道這個邏輯後,我們一樣會 override onTouchEvent 透過 MotionEvent 提供的參數 ACTION_POINTER_DOWN 來判斷使用者是否用兩隻手指觸碰螢幕。


 override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.action and MotionEvent.ACTION_MASK) {
            
            MotionEvent.ACTION_POINTER_DOWN -> {
                beforeDistance = getdistance(event)
            }

從上面的程式碼就可以看到,我們在使用者兩隻手指按下後就用 getdistance 來找兩隻手指距離間的值。

private fun getdistance(event: MotionEvent):Float {
        val detalX = event.getX(0) - event.getX(1).toDouble()
        val deltaY = event.getY(0) - event.getY(1).toDouble()
        return Math.sqrt(detalX * detalX + deltaY * deltaY).toFloat()
    }

運用勾股定理求兩點間距離

MotionEvent.ACTION_MOVE -> {
    val afterdistance = getdistance(event)
    scaleImage(afterdistance)
    beforeDistance = afterdistance
    }

當使用者移動手指時,我們就即時的更新移動後兩指間的差距,然後改變 ImageView 的大小。
還有一個很重要的一點,我們要把移動後的資訊,更新成最新的資訊。
這樣下次移動後才能夠達到正確的比例。

在我們看程式碼前我們來了解,Android 的 left, right, top, bottom 代表什麼吧。
要特別注意的是這幾個值都是 View 相對於 ViewGroup 的長度。

private fun scaleImage(afterDistance:Float) {

        val ratio = afterDistance / beforeDistance

        val newWidth = this.width * ratio
        val newHeight = this.height * ratio

        val sizeX = (newWidth - this.width) / 2
        val sizeY = (newHeight - this.height) / 2


        val left = (this.left - sizeX).toInt()
        val right = (left + newWidth).toInt()
        val top = (this.top - sizeY).toInt()
        val bottom = (top + newHeight).toInt()

        setFrame(left,top, right, bottom)

        }

從這裡我們就可以看到我們利用手指移動前後得到比例。
然後利用這個比例去得到 View 長寬經縮放後的長度。

得到長度後,我們希望 ImageView 能夠平均的縮放,所以我們將差距平均分配。
利用者個長度,我們就可以得到新的 ImageView 上下左右的值,我們就可以運用 setFrame 來縮放 ImageView 囉。

今天就先這樣囉,我們明天見~~


上一篇
Day6_ScalableImageView
下一篇
Day8_ScalableImageView
系列文
發現新大陸-Android Kotlin 開發之路30

尚未有邦友留言

立即登入留言