Android RecyclerView ve CardView Kullanımı

Merhaba arkadaşlar,
mobilhanem.com üzerinden anlattığımız/yayınladığımız derslere bugün sizlere RecyclerView ve CardView kavramlarının nasıl kullanıldığını anlatacağım. Android 5.0  Lollipop güncellemesi ile birlikte ortaya çıkan bu iki widget , gerçekten çok kullanışlı ve uygulamalarınıza estetik olarak daha güzel bir görünüm sağlamaktadır. İlk olarak RecyclerView nedir ona bakalım ; bu widget ,ListView in farklı bir versiyonu olarak düşünülebilir. Daha esnek bir yapıya sahiptir ayrıca, hem horizontal (yatay) hem de vertical (dikey) olarak konumlanan bir layout yapısına sahiptir. ListView yapısından farklı olarak, RecyclerView, verilerin konumlanmasını yönetebilmek için, LayoutManager yapısına ihtiyaç duymaktadır. Kendi LayoutManager ını tanımlayacabileceğin gibi, çoğu zaman LayoutManager ın kendi alt sınıflarını da kullanabilirsin. Bu alt sınıflar nelerdir şimdi ona bakalım :

* LinearLayoutManager: Verilerin horizontal veya vertical eksende görüntülenmesini sağlar.

* GridLayoutManager: Verilerin grid yapısı içinde görüntülenmesini sağlar.

* StaggeredGridLayoutManager: Verilerin staggered grid yapısı içinde görüntülenmesini sağlar.

Ben bu dersimizde, LinearLayoutManager kullandım. Kaynak kodlarını da indirip incelerseniz eğer sizin için daha faydalı olacaktır.

Şimdi de biraz CardView yapısından bahsedelim, CardView genelde tek başına kullanılabilen bir yapı değildir, RecyclerView veya ListView içerisinde bir liste elemanı olarak kullanılması yaygındır. Bende bu dersimizde, RecyclerView içerisinde nasıl kullanacağımızı sizlere anlatmaya çalışacağım. CardView , farklı yapıda içeriklerin bir arada kullanmamıza ve görsellik olarak yeni bir deneyim kazanmamıza yardımcı olmaktadır. İki farklı widget ı da gördüğümüze göre, şimdi yapmış olduğum uygulamayı anlamaya çalışalım.

v7 support library sayesinde, bu iki yapıyı kullanmamıza olanak sağlamaktadır. Şimdi uygulamamızda kullanabilmemiz için build.gradle açıp dependencies kısmına aşağıdaki iki kod bloğunu yapıştırıyoruz.

Daha sonra CardView yapısının layout kısmını ayarlayalım. CardView de gözükmesini istediğimiz verileri belirledik aşağıdaki layout kısmına bakarsanız eğer, bir ImageView , iki tane de TextView kullandığımı göreceksiniz.

id sini person_photo olarak belirlediğim ImageView kullanıcın resmini tutacak

id sini person_name olarak belirlediğim TextView , kullanıcının ismini tutacak

id sini person_age olarak belirlediğim TextView ise, kullanıcının yaşını tutacak

CardView için xml layout dosyamız aşağıdaki gibidir.

card_view_layout.xml 

Şimdir RecyclerView yapımızın layout kısmına bakalım. Aşağıda gördüğünüz gibi, RecyclerView widget ımızı tanımladık. Uygulamamızı çalıştırdığımızda, ilk çalışacak kısma bağlı olarak açılan kısım activity_main.xml olduğu için burada bu yapıyı gösterdim.

activity_main.xml

İki widget ımızın da görselliğini tamamladığımıza göre kod kısmına bakabiliriz.

Bu yapının içinde gözükmesini istediğim bileşenleri yukarıda belirtmiştim. kullanıcı ismi, yaşı ve resmi gibi verileri tutabilmemiz için Person adını verdiğim bir sınıf oluşturdum. Şimdi bu sınıfa bakalım;

Aşağıda gördünüğümüz gibi Person sınıfımızın değişkenleri ; name, age ve photo_id dir. Constructor ve getter methodlarımız da yazılmıştır.

Person.java

Sınıfımızı da gördüğümüze göre; şimdi verilerimizi şekillendirmemiz için bir adapter yapısını yaratmamız gerekmektedir. Aşağıdaki şekilde ne demek istediğimi tam olarak anlayacaksınız.

RecyclerView

 

RecyclerView yapısında Layout Manager ımız ile verilerimiz arasında köprü kuran Adapter sınıfını nasıl oluşturduğumuza bakalım. Aşağıdaki kodu incelediğimiz de, nasıl bir ListView için custom adapter yaratıp istediğimiz verileri ListView mizde gösteriyorsak, RecyclerView yapısı içinde aynı mantıkla bir Adapter oluşturduk ismini de SimpleRecyclerAdapter koyduk. Bu yapıda, ViewHolder pattern yapısını kullanmaya zorunlu kıldığını görmekteyiz. ViewHolder kısmında yer alacak değişkenleri yazdık ve referanslarını aldık. SimpleRecyclerAdapter constructor une baktığımızda, içinde Person sınıfını barındıran bir Liste aldığını göreceksiniz. Listenin içindeki verileri de , ilgili oldukları değişkenlerimize atadık.

ListView deki setOnItemClickListener methodunun Recylerview de olmadığını göreceksiniz. Bu yüzden ben bir interface oluşturdum. Tıklanan elemanı ve pozisyonunu alıyor fonksiyon gördüğünüz gibi.

Daha sonra adapter sınıfımızda view  e tıklandığında kendi interface de yazdığımız onItemClick methodunu tetikledik.

SimpleRecyclerAdapter.java

Adapter kısmını da bitirdiğimize göre, şimdi MainActivity sınıfımızı inceleyelim. Aşağıda gördüğünüz gibi, Person sınıfını barındıran, List bileşenini oluşturup , gerekli bilgileri SimpleRecyclerAdapter ın constructor une yolladık. Yukarı da bahsettiğim gibi LinearLayoutManager yapısını kullanarak konumunu vertical olarak belirledik. En son olarak da RecyclerView yapısına oluşturduğumuz adapter ımızı ekledik.

MainActivity.java

 

Böylelikle, RecyclerView ve CardView kullanımı bitirmiş olduk. Daha yeni android dünyasına giren bu widget ları sizlere tanıtmak ve nasıl kullanılacağını göstermek istedim. Umarım faydalı bir ders olmuştur. Uygulamanın kaynak kodunu indirip, çalıştırın ve bu yeni widget lar ile ilgili görüşlerinizi paylaşın. Ben gerçekten çok beğendim, uygulamalarımıza farklı bir hava katacağı kesin bu yapıların.

Ders hakkında soru ve önerilerinizi çekinmeden yorum bırakabilirsiniz. Bol Android’li günler sizin olsun :)

Sizlerden ricamız facebook.com/mobilhanem sayfamızı beğenmenizdir. Diğer dersimde görüşmek üzere kendinize iyi bakın..

Tüm Android Ders, Proje ve Kaynak Kodlar için tıklayınız.

Alper Beyler

Yüksek Lisans: Çankaya Üniversitesi / Bilgisayar Mühendisliği
Lisans: Çankaya Üniversitesi / Bilgisayar Mühendisliği (4/3.30) (2010-2014)
Lisans : Viyana Teknik Üniversitesi / Bilgisayar Bilimleri (2013)

22 Yorum

    • Merhaba, burdaki kaynak kodu indirip incelediniz mi ? video var bide run ettiğinizde uygulamayı sorunsuz bir şekilde çalışacaktır cardview lerin arasındaki boşluk oluşturduğunuz layout ile ilgili olabilir oradaki kodları görmek lazım.
      ayrıca cardview e bu kodu ekleyip (yada çıkarıp) farka bakar mısın : app:cardUseCompatPadding=”true”

      • Kodu ekledim ama birşey değişmedi. Kaynak kodları indirip çalıştırdığımda sorun yok ama kendi uygulamama entegre edince kodları resimdekigibi açıklık oluyor aralarında.

        main_activity.xml

        card_view_layout.xml

    • card_view_layout dosyasından kaynaklanıyor bu durum. Ana layoutu linearLayout olduğu için bu şekilde görünüyor. Ana layoutu CardView yaparsanız arka arkaya Person objelerini görebilirsiniz. Bunun için de card_view_layout dosyası:

      şeklinde olacak.

    • Merhaba bu dersteki kaynak kodu yeniledik tekrardan indirip denersen düzgün bir şekilde çalıştığını göreceksin

  • Merhaba, Empty Activity’de verdiğiniz kodları ekleyince kartların arasında açıklık olmuyor ama Navigation Drawer Activity açtıktan sonra uygulamaya resimdeki hatayı veriyor tıklayıp implemet methots diyince;

    @Override
    public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {

    }

    bu kodları ekliyor ve ondan sonra kartlar arasında açıklık oluşuyor. Bunu nasıl çözebilirim neyden kaynaklanıyor acaba ?

  • Merhaba bu konuda çoklu şeçme işlemini
    Silme okuma ekleme vb işlemleri anlatabilirmisiniz veya örnek verebilirmisiniz

    • Merhaba interface yardımı ile click listener oluşturursun ve mainactivity sınıfında erişip card positionu ve tıkladığın yerin adını alabilirsin kaynak kod güncel indirip denersen faydalı olacaktır

  • Program açıldığında , activity_main.xml ‘de RelativeLayout ; card_view_layout.xml dosyasında da,LinearLayout altı kırmızı çizgiyle çiziliyor. Maus bu kırmızı çizgiye dokundurulduğunda hataların “Cannot find the declaration of element LinearLayout” ve “Cannot find the declaration of element RelativeLayout” olduğu görülüyor.Bu hata nasıl giderilir.Teşekkürler..

  • İmage yerine buton koyup id tanımlaması yapıp eklediğim buton kadar belirlediğim ses dosyalarının çalmasını istiyorum bunu nasıl yapabilirim?

  • Merhaba, burda yazanları uyguladım ancak item e tıkladığımda hata oluyor ve ;
    ‘listener.onItemClick(v, view_holder.getPosition());’ ve ‘Person person = person_list.get(position);’ satırlarında problem olduğunu söylüyor, api hatası vardı ‘getPosition’ yerine ‘getAdapterPosition’ kullandım ancak hala hata veriyor, neden kaynaklı olabilir?

Haftalık Bülten

Mobilhanem'de yayınlanan dersleri haftalık mail almak ister misiniz?