Kotlin का उपयोग करके Android ऐप में GridView Layout कैसे बनाएं?

यह उदाहरण दर्शाता है कि Kotlin का उपयोग करके Android ऐप में GridView Layout कैसे बनाया जाता है। GridView एक ऐसा ViewGroup है जो आइटम्स को दो-आयामी स्क्रॉल करने योग्य ग्रिड में प्रदर्शित करता है।

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

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

चरण 2: activity_main.xml में GridView जोड़ें

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="2" />

</RelativeLayout>

चरण 3: MainActivity.kt में कोड जोड़ें

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

import android.os.Bundle
import android.widget.AdapterView.OnItemClickListener
import android.widget.GridView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    lateinit var gridView: GridView
    private var playerNames = arrayOf("Cristiano Ronaldo", "Joao Felix", "Bernado Silva", "Andre Silve", "Bruno Fernandez", "William Carvalho", "Nelson Semedo", "Pepe", "Rui Patricio")
    private var playerImages = intArrayOf(R.drawable.ronaldo, R.drawable.felix, R.drawable.bernado, R.drawable.andre, R.drawable.bruno, R.drawable.carvalho, R.drawable.semedo, R.drawable.pepe, R.drawable.patricio)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        gridView = findViewById(R.id.gridView)
        val mainAdapter = MainAdapter(this@MainActivity, playerNames, playerImages)
        gridView.adapter = mainAdapter
        gridView.onItemClickListener = OnItemClickListener { _, _, position, _ ->
            Toast.makeText(applicationContext, "You Clicked " + playerNames[position], Toast.LENGTH_SHORT).show()
        }
    }
}

चरण 4: कस्टम एडाप्टर बनाएं (MainAdapter.kt)

एक नई Kotlin क्लास MainAdapter.kt बनाएं और निम्नलिखित कोड जोड़ें:

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.ImageView
import android.widget.TextView

internal class MainAdapter(
    private val context: Context,
    private val numbersInWords: Array<String>,
    private val numberImage: IntArray
) : BaseAdapter() {

    private var layoutInflater: LayoutInflater? = null
    private lateinit var imageView: ImageView
    private lateinit var textView: TextView

    override fun getCount(): Int = numbersInWords.size

    override fun getItem(position: Int): Any? = null

    override fun getItemId(position: Int): Long = 0

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View? {
        var convertView = convertView
        if (layoutInflater == null) {
            layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        }
        if (convertView == null) {
            convertView = layoutInflater!!.inflate(R.layout.rowitem, null)
        }
        imageView = convertView!!.findViewById(R.id.imageView)
        textView = convertView.findViewById(R.id.textView)
        imageView.setImageResource(numberImage[position])
        textView.text = numbersInWords[position]
        return convertView
    }
}

चरण 5: रो लेआउट बनाएं (row_item.xml)

एक Layout Resource File row_item.xml बनाएं:

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="10dp"
        android:text="Numbers"
        android:textAlignment="center"
        android:gravity="center"
        android:textColor="@android:color/background_dark"
        android:textSize="24sp"
        android:textStyle="bold" />

</LinearLayout>

चरण 6: AndroidManifest.xml कॉन्फ़िगर करें

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.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 डिवाइस को कंप्यूटर से कनेक्ट करें। Android Studio में किसी एक्टिविटी फ़ाइल को खोलें और टूलबार से Run आइकन पर क्लिक करें। अपना मोबाइल डिवाइस चुनें और ऐप चलने पर डिफ़ॉल्ट स्क्रीन देखें।