Android’de RecyclerView ve CardView Kullanımı

Hiç kullanıcılara bir liste içinde veri göstermek zorunda olduğunuz bir uygulama oluşturmak istediniz mi? Bu herhangi bir şey olabilir, örneğin yapılacaklar listesi, alışveriş listesi, arkadaş listesi, iletişim listesi, vb. Bu tür listelerin önemli bir özelliği, verilerinin genellikle benzer şekilde biçimlendirilmiş konteynerlerde gösterilmesi gerektiğidir. Örneğin, bir iletişim listesi oluşturuyorsanız, muhtemelen listedeki her iletişim kişisinin adını ve numarasını göstereceksiniz.

Android’de kullanabileceğiniz iki çok kullanışlı görünüm vardır. Bunlar CardView ve RecyclerView olarak adlandırılır. CardView, bir listedeki bireysel öğelerle ilgili verileri sergilemek için kullanışlıdır. RecyclerView, bu öğelerin bir listesini sergilemek için kullanışlıdır.

Bu öğreticide, bu iki görünümü birlikte kullanarak mahalledeki insanların bir listesini oluşturmayı öğreneceksiniz.

İçindekiler

Başlangıç Ayarları

Android Studio‘yu açın ve New Project düğmesine tıklayın. Empty Views Activity seçin ve ardından Next düğmesine tıklayın.

Sonraki ekranda, uygulamanın adını istediğiniz şekilde ayarlayın. Ben onu “RecyclerCard” olarak ayarladım. Dil olarak Java seçtim. Ancak günümüzde Kotlin kullanarak da devam edebilirsiniz. Minimum SDK’yi 23 veya daha yüksek bir değere ayarlayın. İşiniz bittiğinde, Finish tıklayın.

Ayrıca daha düşük bir değere de ayarlayabilirsiniz, ancak bu durumda build.gradle dosyanıza aşağıdaki bağımlılıkları eklemeniz gerekecektir.


dependencies {
    implementation ("androidx.cardview:cardview:1.0.0")
    implementation ("androidx.recyclerview:recyclerview:1.3.2")

.......

dependencies {

implementation ("androidx.cardview:cardview:1.0.0")

implementation ("androidx.recyclerview:recyclerview:1.3.2")

.......

CardView Oluşturma

Bir CardView, verilerinizi veya öğenizi benzer bir stildeki konteynerlerde görüntülemek istediğinizde idealdir. Temelde, yuvarlatılmış köşeli bir arka plan ve gölgeye sahip bir FrameLayout‘tur. CardView için yerel destek, Lollipop’ta eklendi, burada gölgeler için elevation özelliğini kullanır. Daha eski platformlar, aynı etkiyi elde etmek için özel bir simüle edilmiş gölgeye güvenirler.

Aşağıdaki XML kullanılarak boş bir CardView oluşturabilirsiniz:


<androidx.cardview.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="200dp" >
    
</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android"

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

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/card_view"

android:layout_width="match_parent"

android:layout_height="200dp" >

</androidx.cardview.widget.CardView>

Boş bir CardView çok kullanışlı olmayacaktır. Mahallemizdeki insanlar hakkında bilgi göstermek için kullanacağız. Bu yüzden CardView içine bir resim, isim, yaş ve meslek göstermek için bazı widget’lar ekleyelim.

CardView‘ımız daha büyük bir uygulamanın bir parçası olacak. Bu yüzden CardView UI için XML kodunu item.xml adında bir dosyanın içine yerleştireceğiz. Bu dosyayı oluşturmak için layout klasörüne gidin ve ardından sağ tıklayarak Yeni Bir Düzen Kaynak Dosyası (Layout Resource File) ekleyin.

Tam XML dosyası aşağıdakine benzer olacaktır(person_row.xml):


<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="20dp"
    app:cardCornerRadius="10dp">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp">
        <ImageView
            android:id="@+id/avatar"
            android:layout_width="120dp"
            android:layout_height="120dp"
            tools:srcCompat="@tools:sample/avatars" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="20dp"
            android:layout_toEndOf="@+id/avatar"
            android:orientation="vertical">
            <TextView
                android:id="@+id/kisi_ad"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-black"
                android:textColor="@color/black"
                android:textSize="24sp"
                tools:text="Hayri" />
            <TextView
                android:id="@+id/kisi_yas"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/kirmizi"
                tools:text="40 Yaş" />
            <TextView
                android:id="@+id/kisi_meslek"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/mavi"
                android:textSize="20sp"
                tools:text="Öğretmen" />
        </LinearLayout>
    </RelativeLayout>
</androidx.cardview.widget.CardView>

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

<androidx.cardview.widget.CardView 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:id="@+id/card_view"

android:layout_width="match_parent"

android:layout_height="160dp"

android:layout_marginStart="20dp"

android:layout_marginTop="16dp"

android:layout_marginEnd="20dp"

app:cardCornerRadius="10dp">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:padding="16dp">

<ImageView

android:id="@+id/avatar"

android:layout_width="120dp"

android:layout_height="120dp"

tools:srcCompat="@tools:sample/avatars" />

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginStart="20dp"

android:layout_marginTop="20dp"

android:layout_toEndOf="@+id/avatar"

android:orientation="vertical">

<TextView

android:id="@+id/kisi_ad"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:fontFamily="sans-serif-black"

android:textColor="@color/black"

android:textSize="24sp"

tools:text="Hayri" />

<TextView

android:id="@+id/kisi_yas"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="@color/kirmizi"

tools:text="40 Yaş" />

<TextView

android:id="@+id/kisi_meslek"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="@color/mavi"

android:textSize="20sp"

tools:text="Öğretmen" />

</LinearLayout>

</RelativeLayout>

</androidx.cardview.widget.CardView>

CardView‘ımız, bir ImageView widget’ı ve bir LinearLayout widget’ını içeren bir RelativeLayout widget’ını içerir. LinearLayout widget’ı, kişinin adını, yaşını ve mesleğini tutan üç daha fazla TextView widget’ını içerir.

Aşağıdaki resim CardView widget’ını göstermektedir:

Bir RecyclerView oluşturmak, bir CardView oluşturmaktan biraz daha karmaşıktır. Bu, gereken XML’i sadece yazmak yeterli değildir; ayrıca veriyle doldurmak için Kotlin veya Java kodu da yazmanız gerekir.

Aşağıdaki XML kodu, activity_main.xml dosyamıza eklenir. Bu dosya bir TextView‘in altında bir RecyclerView içerir.


<?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">
    <TextView
        android:id="@+id/baslik"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="KOMŞULAR"
        android:textAlignment="center"
        android:layout_marginTop="20dp"
        android:textSize="30sp"
        android:textColor="@color/black"
        android:fontFamily="sans-serif-black"
        app:layout_constraintTop_toTopOf="parent" />
    
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="80dp"
        app:layout_constraintTop_toBottomOf="@id/baslik" />
    
</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">

<TextView

android:id="@+id/baslik"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="KOMŞULAR"

android:textAlignment="center"

android:layout_marginTop="20dp"

android:textSize="30sp"

android:textColor="@color/black"

android:fontFamily="sans-serif-black"

app:layout_constraintTop_toTopOf="parent" />

<androidx.recyclerview.widget.RecyclerView

android:id="@+id/recycler_view"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginTop="80dp"

app:layout_constraintTop_toBottomOf="@id/baslik" />

</androidx.constraintlayout.widget.ConstraintLayout>

Önizleme düzeni dosyası, “KOMŞULAR” başlığını ve ardından “item 0”, “item 1”, “item 2” vb. başlıklı bir öğeler listesi gösterecektir. Ancak, uygulamayı bir cihaza yüklemek sadece başlığı gösterecek ve başka bir şey göstermeyecektir. Bu, RecyclerView’ı doldurmak için herhangi bir Kotlin kodu yazmadığımız içindir.

RecyclerView kütüphanesi, sağladığınız verilere ve öğeleri sunmak için sağladığınız düzen bilgilerine dayanarak dinamik olarak öğeler oluşturur. Bu widget, ekranın dışına kaydırılmış öğeleri geri dönüştürdüğü için büyük miktarda veri gösterildiğinde önemli performans kazançları sağlar.

Şimdi, RecyclerView widget’ımızı dolduran bazı kodlar yazacağız.

Yardımcı Sınıflar Oluşturma MainActivity.java dosyanız zaten bazı kodlar içerecek. İmlecinizi MainActivity sınıfının altına veya harici olarak dışına aşağıdaki satırı ekleyin(Kisi.java):


public class Kisi {
    private String ad;
    private int yas;
    private String meslek;
    private int resimId;

    public Kisi(String ad, int yas, String meslek, int resimId) {
        this.ad = ad;
        this.yas = yas;
        this.meslek = meslek;
        this.resimId = resimId;
    }

    public String getAd() {
        return ad;
    }

    public void setAd(String ad) {
        this.ad = ad;
    }

    public int getYas() {
        return yas;
    }

    public void setYas(int yas) {
        this.yas = yas;
    }

    public String getMeslek() {
        return meslek;
    }

    public void setMeslek(String meslek) {
        this.meslek = meslek;
    }

    public int getResimId() {
        return resimId;
    }

    public void setResimId(int resimId) {
        this.resimId = resimId;
    }
}

public class Kisi {

private String ad;

private int yas;

private String meslek;

private int resimId;

public Kisi(String ad, int yas, String meslek, int resimId) {

this.ad = ad;

this.yas = yas;

this.meslek = meslek;

this.resimId = resimId;

}

public String getAd() {

return ad;

}

public void setAd(String ad) {

this.ad = ad;

}

public int getYas() {

return yas;

}

public void setYas(int yas) {

this.yas = yas;

}

public String getMeslek() {

return meslek;

}

public void setMeslek(String meslek) {

this.meslek = meslek;

}

public int getResimId() {

return resimId;

}

public void setResimId(int resimId) {

this.resimId = resimId;

}

MainActivity sınıfı içine onCreate() metodunun hemen üstüne aşağıdaki satırı ekleyelim:


        List<Kisi> kisiler = new ArrayList<>();
        kisiler.add(new Kisi("Ayşe", 25, "Mühendis", R.drawable.avatar1));
        kisiler.add(new Kisi("Ahmet", 30, "Doktor", R.drawable.avatar2));
        kisiler.add(new Kisi("Mehmet", 40, "Öğretmen", R.drawable.avatar3));
        kisiler.add(new Kisi("Rasim", 35, "Avukat", R.drawable.avatar4));
        kisiler.add(new Kisi("Anıl", 28, "Grafik Tasarımcı", R.drawable.avatar5));

List<Kisi> kisiler = new ArrayList<>();

kisiler.add(new Kisi("Ayşe", 25, "Mühendis", R.drawable.avatar1));

kisiler.add(new Kisi("Ahmet", 30, "Doktor", R.drawable.avatar2));

kisiler.add(new Kisi("Mehmet", 40, "Öğretmen", R.drawable.avatar3));

kisiler.add(new Kisi("Rasim", 35, "Avukat", R.drawable.avatar4));

kisiler.add(new Kisi("Anıl", 28, "Grafik Tasarımcı", R.drawable.avatar5));

Bu satır, Kisi sınıfı türünde bir dizi oluşturur ve bu dizide farklı kişilerin bilgilerini depolar. Her bir kişi için ad, yaş, meslek ve resim ID’si bilgilerini içeren bir Kisi nesnesi oluşturulur. Bu örnek kişiler, R.drawable içindeki resim kaynaklarını kullanır. Bu kaynaklar, drawable klasöründe bulunan resim dosyalarına işaret eder.

Şimdi, onCreate() metodunun içinden bu yöntemi çağırarak kisiler listemizi dolduracağız. Burada, farklı insanların adını, yaşını, mesleğini ve avatarını sağlıyoruz. Avatar bağımsız değişkeni, farklı drawable kaynaklarına bir referans içerir, bunlar basit png dosyalarıdır.

Şimdi, KisiAdapter adında başka bir sınıf tanımlayacağız. Bu sınıf, RecyclerView.Adapter‘ı genişleten özel bir adaptör sınıfıdır. Bu sınıf, Kisi nesnelerinin listesini kurucu argümanı olarak alacaktır. Adaptör, listemizdeki her öğe için görünümler sağlamaktan sorumludur. İşte KisiAdapter sınıfı için tam kod:


import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.cardview.widget.CardView;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class KisiAdapter extends RecyclerView.Adapter<KisiAdapter.KisiViewHolder> {

    public static class KisiViewHolder extends RecyclerView.ViewHolder {
        CardView cv;
        TextView kisiAd;
        TextView kisiYas;
        TextView kisiMeslek;
        ImageView kisiResim;

        KisiViewHolder(View itemView) {
            super(itemView);
            cv = (CardView)itemView.findViewById(R.id.card_view);
            kisiAd = (TextView)itemView.findViewById(R.id.kisi_ad);
            kisiYas = (TextView)itemView.findViewById(R.id.kisi_yas);
            kisiMeslek = (TextView)itemView.findViewById(R.id.kisi_meslek);
            kisiResim = (ImageView)itemView.findViewById(R.id.avatar);
        }
    }

    List<Kisi> kisiler;

    KisiAdapter(List<Kisi> kisiler){
        this.kisiler = kisiler;
    }

    @Override
    public int getItemCount() {
        return kisiler.size();
    }

    @Override
    public KisiViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.person_row, viewGroup, false);
        KisiViewHolder holder = new KisiViewHolder(v);
        return holder;
    }

    @Override
    public void onBindViewHolder(KisiViewHolder personViewHolder, int i) {
        personViewHolder.kisiAd.setText(kisiler.get(i).getAd());
        personViewHolder.kisiYas.setText(String.valueOf(kisiler.get(i).getYas()));
        personViewHolder.kisiMeslek.setText(kisiler.get(i).getMeslek());
        personViewHolder.kisiResim.setImageResource(kisiler.get(i).getResimId());
    }
}

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.TextView;

import androidx.cardview.widget.CardView;

import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class KisiAdapter extends RecyclerView.Adapter<KisiAdapter.KisiViewHolder> {

public static class KisiViewHolder extends RecyclerView.ViewHolder {

CardView cv;

TextView kisiAd;

TextView kisiYas;

TextView kisiMeslek;

ImageView kisiResim;

KisiViewHolder(View itemView) {

super(itemView);

cv = (CardView)itemView.findViewById(R.id.card_view);

kisiAd = (TextView)itemView.findViewById(R.id.kisi_ad);

kisiYas = (TextView)itemView.findViewById(R.id.kisi_yas);

kisiMeslek = (TextView)itemView.findViewById(R.id.kisi_meslek);

kisiResim = (ImageView)itemView.findViewById(R.id.avatar);

}

List<Kisi> kisiler;

KisiAdapter(List<Kisi> kisiler){

this.kisiler = kisiler;

}

@Override

public int getItemCount() {

return kisiler.size();

}

@Override

public KisiViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {

View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.person_row, viewGroup, false);

KisiViewHolder holder = new KisiViewHolder(v);

return holder;

}

@Override

public void onBindViewHolder(KisiViewHolder personViewHolder, int i) {

personViewHolder.kisiAd.setText(kisiler.get(i).getAd());

personViewHolder.kisiYas.setText(String.valueOf(kisiler.get(i).getYas()));

personViewHolder.kisiMeslek.setText(kisiler.get(i).getMeslek());

personViewHolder.kisiResim.setImageResource(kisiler.get(i).getResimId());

}

Burada dikkate alınması gereken birkaç şey var. İlk olarak, getItemCount(), onCreateViewHolder() ve onBindViewHolder() adlı üç farklı yöntemi geçersiz kılıyoruz (override ediyoruz). Ayrıca, her bir RecyclerView öğesindeki görünümlere bir referans içeren KisiViewHolder adlı bir iç sınıf içerir. Bu özel durumda, üç farklı TextView widget’ına ve bir ImageView widget’ına referans içerir.

getItemCount() yöntemi, öğe sayısını belirlemek için içeride kullanılır. Bu yöntemi, listemizdeki öğe sayısı hakkında doğru bilgi sağlamak için geçersiz kılıyoruz.

onCreateViewHolder() yöntemi, listedeki her öğe için yeni bir KisiViewHolder nesnesi oluşturur ve döndürür. Burada inflate() yöntemine CardView için düzen dosyasını ilettiğimizi görebilirsiniz. onBindViewHolder() yöntemi, görünüm tutucusundaki görünümler için veri bağlama sağlar.

onCreate() Yönteminin Güncellenmesi Artık tüm yardımcı kodlarımızı yerine koyduğumuza göre, MainActivity için onCreate() yöntemini güncelleyebiliriz. İşte onCreate() yönteminin uygulama kodu:


public class MainActivity extends AppCompatActivity {

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


        RecyclerView recyclerView = findViewById(R.id.recycler_view);
        recyclerView.setHasFixedSize(true);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(linearLayoutManager);


        List<Kisi> kisiler = new ArrayList<>();
        kisiler.add(new Kisi("Ayşe", 25, "Mühendis", R.drawable.avatar1));
        kisiler.add(new Kisi("Ahmet", 30, "Doktor", R.drawable.avatar2));
        kisiler.add(new Kisi("Mehmet", 40, "Öğretmen", R.drawable.avatar3));
        kisiler.add(new Kisi("Rasim", 35, "Avukat", R.drawable.avatar4));
        kisiler.add(new Kisi("Anıl", 28, "Grafik Tasarımcı", R.drawable.avatar5));

        KisiAdapter adapter = new KisiAdapter(kisiler);
        recyclerView.setAdapter(adapter);

    }
}

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

RecyclerView recyclerView = findViewById(R.id.recycler_view);

recyclerView.setHasFixedSize(true);

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);

recyclerView.setLayoutManager(linearLayoutManager);

List<Kisi> kisiler = new ArrayList<>();

kisiler.add(new Kisi("Ayşe", 25, "Mühendis", R.drawable.avatar1));

kisiler.add(new Kisi("Ahmet", 30, "Doktor", R.drawable.avatar2));

kisiler.add(new Kisi("Mehmet", 40, "Öğretmen", R.drawable.avatar3));

kisiler.add(new Kisi("Rasim", 35, "Avukat", R.drawable.avatar4));

kisiler.add(new Kisi("Anıl", 28, "Grafik Tasarımcı", R.drawable.avatar5));

KisiAdapter adapter = new KisiAdapter(kisiler);

recyclerView.setAdapter(adapter);

}

Android'de RecyclerView ve CardView Kullanımı — Android’de RecyclerView ve CardView Kullanımı

Sol ekran, adaptörümüz olmadan uygulamanın nasıl göründüğünü gösterir. Görebileceğiniz gibi, RecyclerView, veri sağlanmadığı sürece hiçbir şeyi renderlemez. Görüntü dosyaları, SVGREPO bir Avatar simge setinden alınmıştır. Bunlar, drawable klasörüne yerleştirmeniz gereken basit png dosyalarıdır.

Son Düşünceler

Bu öğreticide, Android’de bir CardView ve RecyclerView oluşturmanın temellerini öğrendiniz. Bu görünümler genellikle benzer verilere sahip öğelerin bir listesini görüntülemek için birlikte kullanılır. RecyclerView, ekranınızdan kaydırılmış öğeleri geri dönüştürdüğü için büyük listeler için büyük bir performans artışı sağlar. Verileri listelerde görüntülerken RecyclerView kullanmayı tercih etmelisiniz.

Android’de RecyclerView ve CardView Kullanımı

Başlangıç Ayarları

CardView Oluşturma

Son Düşünceler

Yorum Yap

İptal Et

Başlangıç Ayarları

CardView Oluşturma

Son Düşünceler

Bunları da beğenebilirsiniz

Yorum Yap