Android ProgramlamaGenel

Android Tab Menü Oluşturma

Uzun zamandır android dersi girmediğimi farkettim bu nedenle bugün android derslerine yeni bir konuyla devam edeceğim. Önceki konularda android option menü oluşturmadan bahsetmiştim. Şimdi de birçok uygulamada kullanılan tab sekmelerinin nasıl oluşturulacağını anlatacağım.

Tab sekmelerini oluştururken Tabhost‘tan yararlanılır. Daha iyi anlaşılması için yeni bir proje yapalım. Başka kodları karıştırmayalım.

Yeni proje oluşturduktan sonra Palette kısmından Composite içerisine girin ve projenize panelden tabhost‘u tutup sürükleyin.

İlk olarak bir proje oluşturalım ve gelen sayfamızın xml dosyasına şu kodları yazalım.

activity_main.xml dosyasının içeriği ve görüntüsünün şu şekilde gelmesi lazım.

tabhost kullanımı

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:baselineAligned="false">
<TabHost
android:id="@android:id/tabhost"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TabWidget>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="@+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="@+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>

Bu kısımdan sonra Tab1, Tab2 ve Tab3 adında 3 adet yeni class ekleyelim. Ardından unutmadan hemen class’ları android manifest dosyamıza tanıtıyoruz.

<activity android:name=".Tab1"></activity>
<activity android:name=".Tab2"></activity>
<activity android:name=".Tab3"></activity>

Oluşturulan her class için de layout eklemek gerekiyor. Sırasıyla res -> layout klasörüne tab1, tab2 ve tab3 adında xml dosyaları oluşturuyoruz ve içerilerine birer buton atıyoruz.

Şimdi tekrar tabhost eklediğimiz ana class’ımız MainActivity.java  dosyasına girip aşağıdaki kodları yazıyoruz.

tabmenü yapımı

package com.Example.tabmenu;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
public class MainActivity extends TabActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabHost tabh = (TabHost)findViewById(android.R.id.tabhost);
TabSpec tab1 = tabh.newTabSpec("tab menü 1. seçenek");
TabSpec tab2 = tabh.newTabSpec("tab menü 2. seçenek");
TabSpec tab3 = tabh.newTabSpec("tab menü 3. seçenek");
tab1.setIndicator("1.sekme");
tab1.setContent(new Intent(this,Tab1.class));
tab2.setIndicator("2.sekme");
tab2.setContent(new Intent(this,Tab2.class));
tab3.setIndicator("3.sekme");
tab3.setContent(new Intent(this,Tab3.class));
tabh.addTab(tab1); tabh.addTab(tab2); tabh.addTab(tab3);
}
}

Yukarıdaki MainActivity kodlarını yavaştan anlatayım.

  • Öncelikle TabActivity ‘ den extends etmemiz gerekiyor.
  • Tabhost nesnesi oluşturup xml dosyasındaki id le bağlıyoruz.
  • TabSpec oluşturup tablarımıza isim veriyoruz.
  • SetIndicator ile görünecek kısımları ve Intent’lerimizi oluşturuyoruz. Intentler ile hangi tab tıklanırsa onun ilgili olduğu xml dosyasını yazıp, bağlıyoruz.
  • Son olarak da tab’ları, tabhost’a ekliyoruz ve uygulamamız artık hazır hale geliyor.

Ekran görüntülerini de ekleyelim.

tab menü ekran görüntüsü tabmenü ekran görüntüsü1

Evet arkadaşlar, kodlarımız bu kadar. Bu makaleyi hazırlamak gerçekten zamanımı aldı. Umarım faydalı olmuştur. Yorumlarınızı esirgemezseniz sevinirim. Bol kodlu günler.

This Post Has 20 Comments

  1. Ercan Reply

    Teşekkürler çok güzel bir yazı olmuş. Bir sorum olacak istediğimiz kadar ekrana bölebiliyor muyuz tab menüler ile ?

    • admin Reply

      Evet bölebilirsiniz, tamamen size ve uygulamanın işlevine kalmış.

  2. Ziya Göker Reply

    Güzel yazı olmuş, tab menüler oldukça revaçta özellikle web uygulamalarında.

    • admin Reply

      Katılıyorum Ziya Bey, son zamanlardaki site uygulamaları ve web tabanlı uygulamalarda oldukça sık kullanılıyor.

  3. yusuf Reply

    Temel ve faydali seylerden bahsetmissiniz. Sagolun

  4. murat Reply

    Hocam bu tab menu olusturdugumuzda 10 kadar menu olsa bunlar kayan menu seklinde olurmu? Yani ekran 3 bolum aliyor kalanlari kaydirip gorebilirmiyiz? Anlatabilmisimdir umarim :)

    • admin Reply

      Tab menülerde bu tarz kullanım olduğunu sanmıyorum :)

      Sizin aradığınız slider menü. Github üzerinden “android slider menü” diye aratırsanız oldukça fazla örnek proje mevcut. Beğendiğiniz bir tanesinin kodlarını düzenleyerek projenize entegre edebilirsiniz.

  5. feride Reply

    Merhaba, ben kirklarelinde okuyorum ve mobil oyun yapimini ogrenmeye calisiyorum. Bu bilgiler oldukça faydali oldu teşekkür ederim. Umarım devami gelir :) .

    • admin Reply

      Rica ederim efenim :) İş yoğunluğundan dolayı siteye çok sık yazı ekleyemiyorum. Ancak boş zaman olduğunda ilk iş programlama makalelerine devam etmek olacak :)

  6. kor Reply

    uygulama için tşkler güzel bir anlatım olmuş

  7. Semih Reply

    Uygulama için çok teşekkür ederim yeni başlıyorum mobil kodlamaya gerçekten yararlı oluyor bu taz bilgiler.

    • admin Reply

      Rica ederim, yakın zamanda web servisler – sqlite işlemleri ve ileri android konuları siteye eklenecektir.

  8. hasan Reply

    Hocam o kadar güzel anlatmışınız ki neredeyse sadece videonun sesini duyarak yazdım :)

  9. selçuk cengiz Reply

    çok teşekkürler

  10. Umut Reply

    Çok sağolun hocam kısmetse kendi projeme entegre etmeyi düşünüyorum. Emeğiniz için çok teşekkürler

  11. mustafa Reply

    merhaba hocam bende bi sıkıntı çıkıyor üstteki TabMenu barı sekmelerin altında gözüküyo tabmenu barını nasıl yukarı alabilirim ?

  12. Burak Reply

    Merhaba hocam ben aynısını yaptığımda ekranda “proje has stopped” uyarıyı alıyorum. Bu problemi bir türlü çözemedim. Yardımcı olursanız çok sevinirim.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak.