Android Navigation Drawer ile Slide Menü – 1

Selamlar, bugün yeni bir yazı dizisiyle karşınızdayım. Android dünyasından en çok kullanılan ve ihtiyaç duyulan yapıları birlikte göreceğiz. Bir seri halinde birçok yapıyı tanıtmaya çalışacağım. Ancak eğer sizinde istekleriniz olursa yorum olarak belirtmenizi istiyorum. Şimdi gelelim bugünkü konumuza. Android kullanıcıların en çok kullandığı yapı olan Sliding(Kayan) Menü, oldukça basit bir yapıya sahip. Değişik versiyonları ve yapıları olmakla birlikte şimdilik en temel halini yapacağız. Daha sonraki yazılarda geliştirmeye ve değiştirmeye devam edeceğiz.

Öyleyse menümüzü yapmaya başlayalım. Öncelikle bir örnek proje oluşturuyoruz. Bu kısmı bildiğinizi düşünerek geçiyorum. Menümüzü tasarlamaya başlayalım.  res –> layout –> activity_main.xml isimli dosyası açıyoruz. Ardından aşağıdaki gibi kodlamaya başlıyoruz.

activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gkhnl.slidingmenuinandroid.MainActivity">

    <ListView
        android:id="@+id/lw_Menu"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:background="@color/list_back" />


</android.support.v4.widget.DrawerLayout>

Öncelikle bize custom bir menü için bir tasarım gerekiyor. Bu tasarımı kullanarak default bir listview tasarımı yerine kendi tasarımımızı kullanmış olacağız. Yeni bir layout oluşturuyoruz ve ismini slidemenu_item.xml olarak belirliyoruz ve aşağıdaki gibi kodluyoruz.

slidemenu_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"
    android:orientation="vertical">

    <TextView
        android:id="@+id/txt_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:paddingBottom="10dp"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:paddingTop="10dp"
        android:textColor="@color/title" />
</LinearLayout>

Bu custom tasarım için bir adapter oluşturmamız gerekiyor. Adapter için ise önce bir modele ihtiyacımız var. Modelimizi menüde kullanacağımız yapıya göre şekillendireceğiz. Hemen modelimizi oluşturalım. POJO bir model sınıfı oluşturuyoruz.

SlideMenuItem.java

package com.gkhnl.slidingmenuinandroid;

public class SlideMenuItem {

    private String title;

    public SlideMenuItem() {
    }

    public SlideMenuItem(String title) {
        this.title = title;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }
}

Şimdilik bize başlık yeterli olduğu için böye bir model oluşturduk. Model sınıfımızı da oluşturduğumuza göre artık adapter sınıfını oluşturabiliriz. SlideMenuAdapter isminde bir class oluşturuyoruz ve aşağıdaki gibi kodluyoruz.

SlideMenuAdapter.java

package com.gkhnl.slidingmenuinandroid;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import java.util.List;

public class SlideMenuAdapter extends BaseAdapter {

    private List<SlideMenuItem> items;
    private TextView txt_title;
    private Context ctx;

    public SlideMenuAdapter(List<SlideMenuItem> items, Context context) {
        this.items = items;
        this.ctx = context;
    }

    // Mevcut item sayısını verir
    @Override
    public int getCount() {
        return items.size();
    }

    // Position ı verilen item ı verir
    @Override
    public Object getItem(int position) {
        return items.get(position);
    }

    // Item position ı verir
    @Override
    public long getItemId(int position) {
        return position;
    }

    // Custom view yükler
    @Override
    public View getView(int position, View view, ViewGroup viewGroup) {

        // Her list item için custom tasarım yüklüyor
        if (view == null) {

            view = LayoutInflater.from(ctx).inflate(R.layout.slidemenu_item, null);

            // Yeni tasarım içindeki title textine ulaşıp, veriyi set ediyor
            txt_title = (TextView) view.findViewById(R.id.txt_title);
            txt_title.setText(items.get(position).getTitle());

            return view;
        }

        return null;
    }
}

Adapter sınıfımızı BaseAdapter sınıfından türetiyoruz. Zorunlu olarak dört metodu implement ediyoruz. Ne işe yaradıklarını kod üzerinde anlattık. Bu metodları kesinlikle doğru şekilde doldurmamız gerekiyor.

LayoutInflater sınıfı ile yapılan önemli. Burada yaptığımız şey bir tasarımı bir view içerisine yüklemek. inflate() metodu custom tasarımı view nesnesine aktarıyor.

view = LayoutInflater.from(ctx).inflate(R.layout.slidemenu_item, null);

Ve bu view içerisindeki bileşenlere ulaşıyoruz.

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

Gerekli sınıflarımızı oluşturduktan sonra sonra şimdi MainActivity ekranını kodlamaya başlayalım. MainActivity sınıfını aşağıdaki kodlayalım.

MainActivity.java

package com.gkhnl.slidingmenuinandroid;

import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBarDrawerToggle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.List;


public class MainActivity extends ActionBarActivity {

    DrawerLayout drawerLayout;
    ActionBarDrawerToggle toggle;
    ListView lw_SlideMenu;
    SlideMenuAdapter adapter;

    List<SlideMenuItem> items;
    String[] titles;
    CharSequence actionBarTitle, appTitle;

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

        lw_SlideMenu = (ListView) findViewById(R.id.lw_Menu);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);

        // Açılışta uygulama ismini alıyor
        actionBarTitle = appTitle = getSupportActionBar().getTitle();

        // Menü başlıklarını kaynak dosyasından çekiyor
        titles = getResources().getStringArray(R.array.slidemenu_item);
        items = new ArrayList<SlideMenuItem>();

        items.add(new SlideMenuItem(titles[0]));
        items.add(new SlideMenuItem(titles[1]));
        items.add(new SlideMenuItem(titles[2]));
        items.add(new SlideMenuItem(titles[3]));

        // Menüdeki her list item a click veriyor
        lw_SlideMenu.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

                // Her item a tıklanıldığında actionBar daki görünen başlığı değiştiriyor
                actionBarTitle = items.get(i).getTitle();

                // menü tıklamadan sonra kapanıyor
                drawerLayout.closeDrawer(lw_SlideMenu);
            }
        });

        // Oluşturduğumuz adapter nesnesini listview e set ediyoruz.
        adapter = new SlideMenuAdapter(items, getApplicationContext());
        lw_SlideMenu.setAdapter(adapter);

        // Toggle butonuna click veriyoruz, home butonu gibi davranmasını sağlıyor.
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        // toggle nesnesi oluşturuyoruz.
        toggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.opened, R.string.closed) {

            @Override
            public void onDrawerOpened(View drawerView) {
                getSupportActionBar().setTitle(appTitle);

            }

            @Override
            public void onDrawerClosed(View drawerView) {
                getSupportActionBar().setTitle(actionBarTitle);

            }
        };

        // toggle açılıp kapanmasına göre, toggle iconu değiştiriyor.
        toggle.syncState();
        // menü açılıp kapanmasını dinliyoruz.
        drawerLayout.setDrawerListener(toggle);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();

        // toggle icona tıklanıldığında menünün açılmasını sağlıyor
        if (toggle.onOptionsItemSelected(item)) {
            return true;
        }

        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

}

Burada bazı kodları açıklayalım. Öncelikle menüde görünmesini istediğimiz başlıkları el ile girmemek ve daha düzgün bir kodlama için string dosyasında bir string-array oluşturduk.

string.xml

<resources>
    <string name="app_name">SlidingMenuInAndroid</string>
    <string name="title_activity_main">Slide Menü</string>
    <string name="opened">Menü Açık</string>
    <string name="closed">Menü Kapalı</string>

    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>


    <string-array name="slidemenu_item">
        <item>Anasayfa</item>
        <item>Birinci Sayfa</item>
        <item>İkinci Sayfa</item>
        <item>Üçüncü Sayfa</item>
    </string-array>
</resources>

Oluşturduğumuz array yapısını kullanabilmek için şu şekilde string dosyamızdan çektik.

titles = getResources().getStringArray(R.array.slidemenu_item);

Her menü elemanının başlığını SlideMenuItem tipinde bir ArrayList oluşturup buraya ekliyoruz.

items = new ArrayList<SlideMenuItem>();

items.add(new SlideMenuItem(titles[0]));
items.add(new SlideMenuItem(titles[1]));
items.add(new SlideMenuItem(titles[2]));
items.add(new SlideMenuItem(titles[3]));

Oluşturduğumuz items listimizi adapter a gönderiyoruz. Ve ardından listview bileşenine set ediyoruz.

adapter = new SlideMenuAdapter(items, getApplicationContext());
lw_SlideMenu.setAdapter(adapter);

Menüde ki her bir öğesine tıkladığımızda harekete geçmesi için click event ekliyoruz. Aynı zamanda her tıklamadan sonra menünün closeDrawer() ile kapanmasını metodu ve üstte ActionBar’da başlık değişmesini sağlıyoruz.

lw_SlideMenu.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

                actionBarTitle = items.get(i).getTitle();

                drawerLayout.closeDrawer(lw_SlideMenu);
            }
        });

ActionBarDrawerToggle nesnemizi oluştururken 4 parametre kulanıyoruz. Birincisi context, ikincisi drawerLayout nesnemiz, üçüncüsü ve dördüncü ise menü açıldığında ve kapandığında kullanılan açıklamalar (string dosyası yardımıyla gönderdirdik). onDrawerOpened() metodu menü açılınca, onDrawerClosed() metodu menü kapanınca yapılacakları belirtmek için kullanılır. Biz bu metodları sadece ActionBar başlığımızı değiştirmek çin kullandık.

toggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.opened, R.string.closed) {

            @Override
            public void onDrawerOpened(View drawerView) {
                getSupportActionBar().setTitle(appTitle);

            }

            @Override
            public void onDrawerClosed(View drawerView) {
                getSupportActionBar().setTitle(actionBarTitle);

            }
        };

Kullandığımız tüm sınıfları ve tasarımları tek tek anlatmış oldum. Son olarak kullandığımız color.xml dosyasınıda paylaşıyorum.

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="list_back">#ff3a3a3a</color>
    <color name="title">#fff</color>
</resources>

Ekran Görüntüleri

Eğer tüm kodları doğru şekilde yerleştirdiyseniz çalıştırdığınızda karşınıza gelecek ekran görüntüleri şunlar olacak:

Kaynak Kodları

Projenin tümü Github da bulunuyor.

Bir sonraki yazıda her bir menü elemanına bir sayfa bağlayacağız. Ve menü elemanlarına başlık dışında bir de icon ekleyeceğiz. Görüşmek üzere 🙂

Sonraki Yazı

Android Navigation Drawer ile Slide Menü – 2