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 |
Ellerine sağlık Gökhan hocam
Teşekkürler 🙂
Derslerinizi sürekli takip ediyorum, özellikle android derslerinizi. Umarım android derslerine devam edersiniz. Teşekkürler
Takip etmeye devam edin, yeni yazıya bakabilirsiniz 🙂
[…] 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ü […]
Sayfanızı yeni keşfettim. İnanılmaz işime yaradı teşekkür ediyorum.
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)