Merhaba,
bu yadımda Android üzerinde Gridview gösterimini paylaşacağım. Üzerinde çalıştığımız uygulama Kotlin Android projesi olacaktır.
Uygulamada yan yana ve alt alta meyve resimlerini gösterecek şekilde bir tasarım yapılacaktı. Bu tasarım ile hem meyvelerin isimleri hem de görselleri belli bir hizada telefon ekranında gösterilecektir.
ilk olarak Android Studio ile bir kotlin projesi oluşturun.
activity_main.xml dosyasına giderek bu dosyaya bir gridview komponent'i ekleyin.
activity_main.xml dosyasının son hali aşağıdaki gibi olacaktı.
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<GridView
android:id="@+id/fruitsGridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="150dp"
android:horizontalSpacing="15dp"
android:numColumns="auto_fit"
android:verticalSpacing="15dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
|
activity_main.xml dosyasının yanında fruit_item.xml diye bir xml dosyası daha ekleyin. Görüntünün blok şeklinde olması için fruit_item.xml dosyasını LinearLayout olarak tasarlayın. fruit_item.xml dosyasında meyvelerin resim ve görsellerini göstermek için bir ImageView ve bir TextView ekleyin.
fruit_item.xml dosyasının son hali aşağıdaki gibi olacaktır.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#ddd"
android:gravity="center"
android:orientation="vertical"
android:padding="15dp">
<ImageView
android:id="@+id/fruitImage"
android:layout_width="100dp"
android:layout_height="100dp"
/>
<TextView
android:id="@+id/fruitName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="20sp" />
</LinearLayout>
|
fruit bilgilerini adapter'a vermek ve GridView da göstermek için Fruit adında bir kotlin class'ı oluşturun.
Fruit.kt dosyasının içeriği aşağıdaki gibi olacaktır.
class Fruit {
var name: String? = null
var image: Int? = null
constructor(name: String, image: Int) {
this.name = name
this.image = image
}
override fun toString(): String {
return "Fruit(name=$name, image=$image)"
}
}
|
GridView'in içini doldurmak için FruitAdapter adında bir kotlin class'ı oluşturun. Bu class BaseAdapter'i extend edecektir. Extend işleminden sonra getCount, getItem, getItemId, getView methodlarını override ederek Fruit class'ına göre doldurulmalıdır.
FruitAdapter.kt dosyasının son hali aşağıdaki gibi olmalıdır.
class FruitAdapter : BaseAdapter {
var fruitList = ArrayList<Fruit>()
var context: Context? = null
constructor(context: Context, fruitList: ArrayList<Fruit>) : super() {
this.context = context
this.fruitList = fruitList
}
override fun getCount(): Int {
return fruitList.size
}
override fun getItem(position: Int): Any {
return fruitList[position]
}
override fun getItemId(position: Int): Long {
return position.toLong()
}
override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
val fruit = this.fruitList[position]
var inflator = context!!.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
var fruitItemView = inflator.inflate(R.layout.fruit_item, null)
fruitItemView.fruitName.text = fruit.name!!
fruitItemView.fruitImage.setImageResource(fruit.image!!)
fruitItemView.fruitImage.setOnClickListener {
println("Current fruit : ${fruit.toString()}")
}
return fruitItemView
}
}
|
Son olarak MainActivity.kt' de adapter ve fruits adında iki adet global variable oluşturun. onCreate methodunda adapter ve fruits'in içini doldurun ve gridView'a set edin.
MainActivity.kt dosyasının son hali aşağıdaki gibi olmalıdır.
class MainActivity : AppCompatActivity() {
var adapter: FruitAdapter? = null
var fruits = ArrayList<Fruit>()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
fruits.add(Fruit("Watermelon", R.drawable.watermelon_icon))
fruits.add(Fruit("Apple", R.drawable.apple_icon))
fruits.add(Fruit("Lemon", R.drawable.lemon_icon))
fruits.add(Fruit("Strawberry", R.drawable.strawberry_icon))
fruits.add(Fruit("Cherry", R.drawable.cherry_icon))
fruits.add(Fruit("Banana", R.drawable.banana_icon))
adapter = FruitAdapter(this, fruits)
fruitsGridView.adapter = adapter
}
}
|
uygulamanın kaynak kodlarına aşağıdaki linkten erişebilirsiniz.
github : https://github.com/lvntyldz/tutorials/tree/master/kotlin-android-app-examples/05-grid-view
Hiç yorum yok:
Yorum Gönder