Android GridView Kullanımı

GridView, son makalede ayrıntılı olarak öğrendiğimiz ListView gibi çalışır. Tek fark, GridView‘ın View nesnelerini ızgara olarak görüntülemek için kullanılmasıdır.

View nesneleri TextView, ImageView vb. her hangi bir görünüm grubu olabilir. Bu görünüme en iyi örnek, görüntüleri bir ızgarada gösteren telefon galerisidir. Sütun sayısını belirli bir sayıya ayarlayabilir ve görüntüleri sütunlara otomatik olarak sığdırabiliriz.

gridView öğesinin her bir öğesi arasındaki dikey ve yatay boşluk, verticalSpacing ve horizontalSpacing ile ayarlanabilir.


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

<GridView

android:id="@+id/gridView"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:verticalSpacing="2dp"

android:horizontalSpacing="2dp"

android:numColumns="2"/>

İçindekiler

Array Adapter ile GridView Kullanımı

Son makalede, bir Adapter‘ın veri kümesini, daha sonra UI bileşenlerini oluşturmak için AdapterView‘de doldurulan View nesnelerine nasıl dönüştürdüğünü açıkladık. Şimdi AdapterView GridView oldu. Ayrıntılı açıklamalar ve basit örnek için buraya bakabilirsiniz.

Örnek Uygulama

Ana XML dosyası activity_main.xml içinde bir GridView tanımlayacağız.

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://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:verticalSpacing="2dp"
        android:horizontalSpacing="2dp"
        android:numColumns="2"/>

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://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:verticalSpacing="2dp"

android:horizontalSpacing="2dp"

android:numColumns="2"/>

</androidx.constraintlayout.widget.ConstraintLayout>

gird_item.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_horizontal|center_vertical"
        android:text="Bilgisayar Parçaları" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:id="@+id/textView"

android:layout_width="match_parent"

android:layout_height="50dp"

android:gravity="center_horizontal|center_vertical"

android:text="Bilgisayar Parçaları" />

</LinearLayout>

MainActivity.java dosyası aşağıdaki gibi olacaktır.


package com.example.tkodlama;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    GridView gridView;
    TextView textView;
    String[] parcalar = {
            "ANAKART",
            "İŞLEMCİ",
            "RAM",
            "GPU",
            "ETHERNET KARTI",
            "FARE",
            "KLAVYE",
            "EKRAN",
            "YAZICI",
            "3D YAZICI",
            "SSD",
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textView =(TextView)findViewById(R.id.textView);
        gridView =(GridView)findViewById(R.id.gridView);

        final ArrayAdapter<String> adapter = new ArrayAdapter<String> (this, R.layout.gird_item, R.id.textView, parcalar);

        gridView.setAdapter(adapter);
    }
}

package com.example.tkodlama;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.ArrayAdapter;

import android.widget.GridView;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

GridView gridView;

TextView textView;

String[] parcalar = {

"ANAKART",

"İŞLEMCİ",

"RAM",

"GPU",

"ETHERNET KARTI",

"FARE",

"KLAVYE",

"EKRAN",

"YAZICI",

"3D YAZICI",

"SSD",

};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

textView =(TextView)findViewById(R.id.textView);

gridView =(GridView)findViewById(R.id.gridView);

final ArrayAdapter<String> adapter = new ArrayAdapter<String> (this, R.layout.gird_item, R.id.textView, parcalar);

gridView.setAdapter(adapter);

}

Çıktı:

Base Adapter ile GridView Kullanımı

Önceki örnekte Array Adapter kullanarak verileri çektik. Genelde tek bileşen içeren verilerimiz olduğunda bu şekilde yapmak mümkün ancak veriler bir kaç komponenti bir arada içeriyorsa ve bir sınıftan çekiliyorsa Custom(Özel) bir adapter oluşturmak gerekir.

Daha önceki yazılarda Custom Adapter oluşturma ile ilgili detaylı açıklama yaptığım için burada örnek bir uygulama hazırlayacağız.

Örnek Uygulama

Örnek uygulamanın ekran çıktısı aşağıdaki gibi olacaktır.

Örnek uygulamada film posterlerini, isimlerini ve yapım yılları ile ekranda GridView içinde gösterilecektir. İlk olarak main_activity.xml ve grid_item.xml düzenlerini oluşturarak başlıyoruz.

main_activity.xml


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://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:verticalSpacing="2dp"
        android:horizontalSpacing="2dp"
        android:numColumns="2"/>

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://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:verticalSpacing="2dp"

android:horizontalSpacing="2dp"

android:numColumns="2"/>

</androidx.constraintlayout.widget.ConstraintLayout>

grid_view.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageViewPoster"
        android:layout_width="match_parent"
        android:layout_height="200dp"/>

    <TextView
        android:id="@+id/textViewFilmAdi"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="20dp"
        android:gravity="center_horizontal|center_vertical"
        android:text="Film Adı" />

    <TextView
        android:id="@+id/textViewYapimYili"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_horizontal|center_vertical"
        android:text="Film Yılı" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<ImageView

android:id="@+id/imageViewPoster"

android:layout_width="match_parent"

android:layout_height="200dp"/>

<TextView

android:id="@+id/textViewFilmAdi"

android:layout_width="match_parent"

android:layout_height="50dp"

android:textSize="20dp"

android:gravity="center_horizontal|center_vertical"

android:text="Film Adı" />

<TextView

android:id="@+id/textViewYapimYili"

android:layout_width="match_parent"

android:layout_height="50dp"

android:gravity="center_horizontal|center_vertical"

android:text="Film Yılı" />

</LinearLayout>

Düzenleri oluşturduktan sonra Film sınıfını ve varlıklarını oluşturuyoruz.

Film.java


package com.example.tkodlama;

public class Film {
    private int posterId;
    private String filmAdi;
    private String yapimYili;

    public Film(int posterId, String filmAdi, String yapimYili) {
        this.posterId = posterId;
        this.filmAdi = filmAdi;
        this.yapimYili = yapimYili;
    }

    public int getPosterId() {
        return posterId;
    }

    public void setPosterId(int posterId) {
        this.posterId = posterId;
    }

    public String getFilmAdi() {
        return filmAdi;
    }

    public void setFilmAdi(String filmAdi) {
        this.filmAdi = filmAdi;
    }

    public String getYapimYili() {
        return yapimYili;
    }

    public void setYapimYili(String yapimYili) {
        this.yapimYili = yapimYili;
    }
}

package com.example.tkodlama;

public class Film {

private int posterId;

private String filmAdi;

private String yapimYili;

public Film(int posterId, String filmAdi, String yapimYili) {

this.posterId = posterId;

this.filmAdi = filmAdi;

this.yapimYili = yapimYili;

}

public int getPosterId() {

return posterId;

}

public void setPosterId(int posterId) {

this.posterId = posterId;

}

public String getFilmAdi() {

return filmAdi;

}

public void setFilmAdi(String filmAdi) {

this.filmAdi = filmAdi;

}

public String getYapimYili() {

return yapimYili;

}

public void setYapimYili(String yapimYili) {

this.yapimYili = yapimYili;

}

MainActivity içindeki onCreate() metodu içine aşağıdaki kodları ekliyoruz.

NOT: drawable içinde posterlerin olması gerektiğini unutmayın.

MainActivity.java


package com.example.tkodlama;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.GridView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        Film film1 = new Film(R.drawable.poster1,"Who Am I","2012");
        Film film2 = new Film(R.drawable.poster2,"Ex Machina","2015");
        Film film3 = new Film(R.drawable.poster3,"A.I.","2001");
        Film film4 = new Film(R.drawable.poster4,"I, Robot","2004");
        Film film5 = new Film(R.drawable.poster5,"Chappie","2015");
        Film film6 = new Film(R.drawable.poster6,"JOBS","2015");


        ArrayList<Film> filmler = new ArrayList<Film>();
        filmler.add(film1);
        filmler.add(film2);
        filmler.add(film3);
        filmler.add(film4);
        filmler.add(film5);
        filmler.add(film6);

        // Özel Adapter
        CustomAdapter adapter = new CustomAdapter(this, filmler);

        GridView gridView=(GridView)findViewById(R.id.gridView);
        gridView.setAdapter(adapter);


    }
}

package com.example.tkodlama;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.GridView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Film film1 = new Film(R.drawable.poster1,"Who Am I","2012");

Film film2 = new Film(R.drawable.poster2,"Ex Machina","2015");

Film film3 = new Film(R.drawable.poster3,"A.I.","2001");

Film film4 = new Film(R.drawable.poster4,"I, Robot","2004");

Film film5 = new Film(R.drawable.poster5,"Chappie","2015");

Film film6 = new Film(R.drawable.poster6,"JOBS","2015");

ArrayList<Film> filmler = new ArrayList<Film>();

filmler.add(film1);

filmler.add(film2);

filmler.add(film3);

filmler.add(film4);

filmler.add(film5);

filmler.add(film6);

// Özel Adapter

CustomAdapter adapter = new CustomAdapter(this, filmler);

GridView gridView=(GridView)findViewById(R.id.gridView);

gridView.setAdapter(adapter);

}

Şimdi MainActivity’de kullandığımız CustomAdapter sınıfını oluşturalım. Burada adapterda grid_item.xml dosyasını çağırıp yeni view çizdireceğiz.

CustomAdapter.java


package com.example.tkodlama;

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;

import java.util.ArrayList;

public class CustomAdapter extends BaseAdapter {

    private Context context;
    private ArrayList<Film> filmler;

    public CustomAdapter(Context context, ArrayList<Film> filmler) {
        this.context = context;
        this.filmler = filmler;
    }


    @Override
    public int getCount() {
        return filmler.size();
    }

    @Override
    public Object getItem(int i) {
        return filmler.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {

        // inflate the layout for each list row
        if (view == null) {
            view = LayoutInflater.from(context).
                    inflate(R.layout.gird_item, viewGroup, false);

        }


        Film mevcutFilm = (Film) getItem(i);


        TextView textViewFilmAdi = (TextView)view.findViewById(R.id.textViewFilmAdi);
        TextView textViewYapimYili = (TextView)view.findViewById(R.id.textViewYapimYili);
        ImageView imageViewPoster = (ImageView)view.findViewById(R.id.imageViewPoster);

        textViewFilmAdi.setText(mevcutFilm.getFilmAdi());
        textViewYapimYili.setText(mevcutFilm.getYapimYili());
        imageViewPoster.setImageResource(mevcutFilm.getPosterId());

        return view;
    }
}

package com.example.tkodlama;

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;

import java.util.ArrayList;

public class CustomAdapter extends BaseAdapter {

private Context context;

private ArrayList<Film> filmler;

public CustomAdapter(Context context, ArrayList<Film> filmler) {

this.context = context;

this.filmler = filmler;

}

@Override

public int getCount() {

return filmler.size();

}

@Override

public Object getItem(int i) {

return filmler.get(i);

}

@Override

public long getItemId(int i) {

return i;

}

@Override

public View getView(int i, View view, ViewGroup viewGroup) {

// inflate the layout for each list row

if (view == null) {

view = LayoutInflater.from(context).

inflate(R.layout.gird_item, viewGroup, false);

}

Film mevcutFilm = (Film) getItem(i);

TextView textViewFilmAdi = (TextView)view.findViewById(R.id.textViewFilmAdi);

TextView textViewYapimYili = (TextView)view.findViewById(R.id.textViewYapimYili);

ImageView imageViewPoster = (ImageView)view.findViewById(R.id.imageViewPoster);

textViewFilmAdi.setText(mevcutFilm.getFilmAdi());

textViewYapimYili.setText(mevcutFilm.getYapimYili());

imageViewPoster.setImageResource(mevcutFilm.getPosterId());

return view;

}

Android GridView Öğelerine Tıklama Olayı

Örnek 1: GridView öğelerine tıklandığında ekrana Toast mesajı ile uyarı verme


        GridView gridView = (GridView)findViewById(R.id.gridView);
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

                Toast.makeText(getApplicationContext(),"ListView Öğesine Tıklandı", Toast.LENGTH_LONG).show();
            }
        });

GridView gridView = (GridView)findViewById(R.id.gridView);

gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

Toast.makeText(getApplicationContext(),"ListView Öğesine Tıklandı", Toast.LENGTH_LONG).show();

}

});

Örnek 2: GridView öğlerine tıklandığında yeni bir Activity açma


        GridView gridView = (GridView)findViewById(R.id.gridView);
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

                Intent intent = new Intent(MainActivity.this, DetayActivity.class);
                String mesaj = "örnek mesaj";
                intent.putExtra("MESAJ", mesaj);
                startActivity(intent);
            }
        });

GridView gridView = (GridView)findViewById(R.id.gridView);

gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

Intent intent = new Intent(MainActivity.this, DetayActivity.class);

String mesaj = "örnek mesaj";

intent.putExtra("MESAJ", mesaj);

startActivity(intent);

}

});

Daha fazla Android içeriği için Android Dersleri yazısını inceleyebilirsiniz.

Android GridView Kullanımı

Array Adapter ile GridView Kullanımı

Base Adapter ile GridView Kullanımı

Android GridView Öğelerine Tıklama Olayı

1 Yorum

İptal Et

Array Adapter ile GridView Kullanımı

Base Adapter ile GridView Kullanımı

Android GridView Öğelerine Tıklama Olayı

Bunları da beğenebilirsiniz

1 Yorum