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>

<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>

<?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;
    }
}

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;
    }
}

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);

1	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);

1	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);
    }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

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>

<string name="app_name">SlidingMenuInAndroid</string>

<string name="title_activity_main">Slide Menü</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);

1	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]));

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);

1 2	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);
            }
        });

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);

            }
        };

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>

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

</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

6 Yorum

Muhammed ÖZDEMİR dedi ki:

12 Haziran 2015, 09:36

Ellerine sağlık Gökhan hocam

Cevapla
- Gökhan ÜNAL dedi ki:
  
  13 Haziran 2015, 18:23
  
  Teşekkürler 🙂
  
  Cevapla
Can ATİK dedi ki:

12 Haziran 2015, 13:04

Derslerinizi sürekli takip ediyorum, özellikle android derslerinizi. Umarım android derslerine devam edersiniz. Teşekkürler

Cevapla
- Gökhan ÜNAL dedi ki:
  
  13 Haziran 2015, 18:24
  
  Takip etmeye devam edin, yeni yazıya bakabilirsiniz 🙂
  
  Cevapla
Anrdoid Navigation Drawer ile Slide Menü – 2 | Kod5.org dedi ki:

13 Haziran 2015, 18:19

[…] bir günlük aranın ardından kaldığımız yerden devam ediyoruz. Geçen yazıda menümüzü oluşturup çalışır hale getirdik. Şimdi biraz daha geliştirip hem menü […]

Cevapla
Banu Dikmen dedi ki:

25 Şubat 2016, 22:36

Sayfanızı yeni keşfettim. İnanılmaz işime yaradı teşekkür ediyorum.

Cevapla
Baris Omer dedi ki:

22 Mayıs 2017, 23:57

Merhba, ben webview ile sitemin uygulamasini yaptim. Kod bilgim yok. webview uygulamasina bu sekilde menu eklersem sayfalarin uygulamada (webview de) acilmasini nasil saglarim (ki bi sekilde menu ekledim fakat menuye verdigim link uygulama disina cikip chrome da aciliyor)

Cevapla

activity_main.xml

slidemenu_item.xml

SlideMenuItem.java

SlideMenuAdapter.java

MainActivity.java

string.xml

color.xml

Ekran Görüntüleri

Kaynak Kodları

Sonraki Yazı

Android Navigation Drawer ile Slide Menü – 2

Benzer Yazılar

6 Yorum

Anrdoid Navigation Drawer ile Slide Menü – 2 | Kod5.org için bir cevap yazın X