Kotlin का उपयोग करके Android ImageView में जूम-इन और जूम-आउट कैसे करें?

परिचय

यह उदाहरण दर्शाता है कि Kotlin का उपयोग करके Android ImageView में ScaleGestureDetector का उपयोग करके पिंच टू जूम (जूम-इन और जूम-आउट) कैसे लागू किया जाए।

चरण 1: नया प्रोजेक्ट बनाएं

Android Studio खोलें, File → New Project पर जाएं और नया प्रोजेक्ट बनाने के लिए सभी आवश्यक विवरण भरें।

चरण 2: लेआउट XML कॉन्फ़िगर करें

res/layout/activity_main.xml में निम्नलिखित कोड जोड़ें:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/image"
        android:scaleType="matrix" />

</LinearLayout>

चरण 3: Kotlin कोड लागू करें

src/MainActivity.kt में निम्नलिखित कोड जोड़ें:

import android.os.Bundle
import android.view.MotionEvent
import android.view.ScaleGestureDetector
import android.view.ScaleGestureDetector.SimpleOnScaleGestureListener
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import kotlin.math.max
import kotlin.math.min

class MainActivity : AppCompatActivity() {
    private lateinit var scaleGestureDetector: ScaleGestureDetector
    private var scaleFactor = 1.0f
    private lateinit var imageView: ImageView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        
        imageView = findViewById(R.id.imageView)
        scaleGestureDetector = ScaleGestureDetector(this, ScaleListener())
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        scaleGestureDetector.onTouchEvent(event)
        return true
    }

    private inner class ScaleListener : SimpleOnScaleGestureListener() {
        override fun onScale(detector: ScaleGestureDetector): Boolean {
            scaleFactor *= detector.scaleFactor
            // जूम सीमा: 0.1x से 10x तक
            scaleFactor = max(0.1f, min(scaleFactor, 10.0f))
            imageView.scaleX = scaleFactor
            imageView.scaleY = scaleFactor
            return true
        }
    }
}

चरण 4: मैनिफेस्ट कॉन्फ़िगर करें

androidManifest.xml में निम्नलिखित कोड जोड़ें:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.q11">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

ऐप चलाएं

अपने एंड्रॉइड डिवाइस को कंप्यूटर से कनेक्ट करें। Android Studio में प्रोजेक्ट की एक्टिविटी फाइल खोलें और टूलबार से Run आइकन पर क्लिक करें। अपना मोबाइल डिवाइस चुनें और इमेज पर दो उंगलियों से पिंच करके जूम टेस्ट करें।

उन्नत: पैन और जूम दोनों

बेहतर यूजर अनुभव के लिए, PhotoView लाइब्रेरी का उपयोग करें या कस्टम TouchListener में ट्रांसलेशन (पैन) भी जोड़ें:

// PhotoView लाइब्रेरी (build.gradle में जोड़ें)
// implementation 'com.github.chrisbanes:PhotoView:2.3.0'

// XML में:
<com.github.chrisbanes.photoview.PhotoView
    android:id="@+id/photoView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

// कोड में:
photoView.setImageResource(R.drawable.image)