Android 201Başlangıç seviyesi derslerde Android uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

RecyclerView Hizalama ve Silme İşlemi

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Hasibe Zafer
Etiketler : android

Bu bölümde elemanları dikey olarak listelediğimiz projemize OptionsMenu ekleyerek; yatay(horizontal), ızgara(grid), zik-zak(staggered) olarak hizalanmasını sağlayacağız. Ve listedeki elemanları eklediğimiz silme butonu yardımı ile silme işlemini gerçekleştireceğiz. 

İlk olarak OptionsMenu oluşturalım.
Bunun için res/menu klasörüne sağ tıklayarak “New/Menu Resource File” seçiyoruz ve layout_menu.xml adında dosyamızı oluşturuyoruz. Buraya iki menü ekliyoruz. Eklemek için kodlarımız şu şekilde:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <item
        android:id="@+id/gridView"
        android:icon="@drawable/ic_grid_two_white"
        android:title="LinearView Horizontal"
        app:showAsAction="always">

    </item>
    <item
        android:id="@+id/linearViewVertical"
        android:icon="@drawable/ic_list_white"
        android:title="LinearView Vertical"
        app:showAsAction="always">

    </item>


</menu>


 

Eklediğimiz ikonların Toolbar üzerinde görünmesi için MainActivity içerisinde gerekli tanımlamamızı yapalım.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.layout_menu, menu);
    return super.onCreateOptionsMenu(menu);
}


Burada onCreateOptionsMenu() metodu ile oluşturmuş olduğumuz layout_menu dosyamızın yolunu belirterek inflate ediyoruz.

Tanımlamamızı da yaptıktan sonra toolbar üzerinde şu şekilde iki ikon eklenmiş oldu.


Eklediğimiz ikonlara tıklanma(click) işlemlerini kontrol etmek
Bu işlem için yararlandığımız metod onOptionsItemSelected() metodudur. Kodlarımızı inceleyerek gerekli açıklamalarımızı yapalım.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
    switch (id) {

        case R.id.linearViewVertical:
            linearLayoutManager = new LinearLayoutManager(this);
            linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
            recyclerView.setLayoutManager(linearLayoutManager);
            break;
        case R.id.gridView:
            GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2);
            recyclerView.setLayoutManager(gridLayoutManager);
            break;


    }
    return super.onOptionsItemSelected(item);
}

 

Metodumuza parametre olarak menümüzde yer alan item bilgisini gönderdik. 
int tipinde bir değişken oluşturduk ve tıklanan ikonun(item) id bilgisini getItemId() metodu ile alarak bu değişkene atadık.
Artık elimizde hangi ikona tıklandığı bilgisi mevcut. Bu bilgi ile switch-case blogumuzu yazarak ikona tıklandığında yapmak istediğimiz işlemi yazıyoruz.

Listemizin dikey(vertical) şekilde görüntülenmesi için:
LinearLayoutManager sınıfından yararlanıyoruz. Bu sınıftan oluşturduğumuz objemize setOrientation() methodu yardımı ile VERTICAL ya da HORIZONTAL bilgisini ekliyoruz. 

Listemizin ızgara(grid) şeklinde görüntülenmesi için:
GridLayoutManager sınıfından yararlanıyoruz. Izgara sayımızı ikinci parametre olarak metodumuza gönderiyoruz.

LayoutManager yardımı ile oluşturduğumuz bu görünümleri listemize uygulamak için setLayoutManager() metodunu kullanıyoruz. Seçilen item return ederek işlemimizi tanımlıyoruz. Bizim liste elemanlarımızın hepsi aynı boyutta olduğu için zik-zak ve yatay eklemedik. Fakat eklemek isterseniz ilgili kodlar şu şekilde: 

Listemizin zik-zak(staggered) şeklinde görüntülenmesi için:
Zik-zak(staggered) görünümü için liste elemanlarınızın farklı boyutta olması gereklidir. Bu görünüm için menümüze ikon ekleyip StaggeredLayoutManager() sınıfından yararlanabilirsiniz. Gerekli kod parçacığı şu şekilde. 

StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(staggeredGridLayoutManager);

Burada zik-zak görünümün yatay ya da dikeyde görünümü için VERTICAL HORIZONTAL değişimi yapabilirsiniz.

Listemizin yatay(horizontal) şeklinde görüntülenmesi için:
Yatay(horizontal) görünümü elde etmek gerekli kod parçacığımız şu şekilde.

LinearLayoutManager = new LinearLayoutManager(this);
linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(linearLayoutManager);


Silme İşlemi
Listemizden bir elemanı silmek için ProductAdapter içerisinde Overrride edilen onClick() metodu içerisine silme işlemimizi gerçekleştiren deleteProduct() adında bir method tanımlıyoruz. Kodlarımız üzerinden inceleyelim.

 

@Override
public void onClick(View v) {
    if (v == deleteproduct) {
        deleteproduct(getLayoutPosition());
    }

}

private void deleteproduct(int position) {
    mProductList.remove(position);
    notifyItemRemoved(position);
    notifyItemRangeChanged(position, mProductList.size());
}

deleteproduct() methodumuz içerisine position bilgisini tutan bir parametre almakta. Bu da listenin hangi elemanını sileceğimiz bilgisini bize sunuyor. 
mProductList adındaki listemiz üzerinden remove() metoduna position bilgisini vererek silme işlemini gerçekleştiriyoruz. 

notifyItemRemoved() : Listedeki elemanın silindiğini listeye bildiren method.

notifyItemRangeChanged(): Eleman silindikten sonra listenin boyutunu(size) güncelleyen method.

Liste elemanları silinirken notifyItemRemoved() methodu ile özel bir animasyon ile silinir. RecyclerView yazımıza burada son veriyoruz.

Kodların tamamına buradan erişebilirsiniz.