kodbankasi http://kodbankasi.org/kodbankasi

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.

Bir önceki yazımız olan Android Spinner kullanımı başlıklı yazımızı da inceleyebilirsiniz.

19 Yorumlar

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

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

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

  3. Temel ve faydali seylerden bahsetmissiniz. Sagolun

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

    • 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. Merhaba, ben kirklarelinde okuyorum ve mobil oyun yapimini ogrenmeye calisiyorum. Bu bilgiler oldukça faydali oldu teşekkür ederim. Umarım devami gelir :) .

    • 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. uygulama için tşkler güzel bir anlatım olmuş

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

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

  9. selçuk cengiz

    çok teşekkürler

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

  11. 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 ?

Bir Cevap Yazın

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

Bu yazı da ilginizi çekebilir !

Modem Wifi şifresi Değiştirme

Ev veya işyerlerine yeni bağlatılan internet hatlarına genel olarak karmaşık bir şifre veya oldukça basit ...