Android Tab Menü Oluşturma :MobileCoder I MobileCoder.NET I Mobil Programlama I Android Programlama I Mobil Geliştiricilerin Buluşma Noktası I www.MobileCoder.Net

Android Tab Menü Oluşturma

07.04.2015 tarihinde Android Programlama kategorisine eklenmiş, 768 views Kişi Okumuş ve 0 Yorum Yapılmış.

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.

resim

 

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

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ı daha iyi anlamayalı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.

resim3 resim4

resim 5

tablar.xml dosyamız:


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

<TabHost
android:id="@+id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >

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

<Button
android:id="@+id/bStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start" />

<Button
android:id="@+id/bStop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stop" />

<TextView
android:id="@+id/tvSonuc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>

<LinearLayout
android:id="@+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>

<LinearLayout
android:id="@+id/tYeniTabEkle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<Button
android:id="@+id/bYeniTab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab Ekle" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>

</LinearLayout>

Layout dosyamıza tabhost ekleriz. Ancak uygulamayı çalıştırdığımızda tablar görünmez. Bunun için Java kodlarıyla tabları oluşturmamız gerekiyor. Bunun için java classımızın oncreate methoduna sadece bir tane tab için aşağıdaki kodlar yazılmalıdır.


tabhost= (TabHost) findViewById(R.id.tabhost);
tabhost.setup();

TabSpec tabOzellikleri;

tabOzellikleri=tabhost.newTabSpec("tag1");
tabOzellikleri.setContent(R.id.tab1);//LinearLayout'un id'si
tabOzellikleri.setIndicator("Kronometre");//Tab'ın görünecek adı
tabhost.addTab(tabOzellikleri);//tab tabhosta eklenir.

Java ile tab oluşturma

Java ile dinamik olarak yeni tab oluşturabiliriz. Bunun için Tab Ekle butonunun click methoduna aşağıdaki kodları yazarız.


TabSpec yeniTabSpec= tabhost.newTabSpec("tag1");

yeniTabSpec.setContent(new TabHost.TabContentFactory() {

&nbsp;

@Override

public View createTabContent(String tag) {

// TODO Auto-generated method stub

&nbsp;

TextView text= new TextView(Tablar.this);

text.setText("Yeni bir tab oluştu!");

&nbsp;

&nbsp;

return text;

}

});

&nbsp;

yeniTabSpec.setIndicator("Yeni");

tabhost.addTab(yeniTabSpec);

Aslında normalde yapılan işlemden çok da farklı bir işlem yapılmıyor. Sadece setContent methodu için hazır bir LinearLayout olmadığı için TabContent methodla oluşturuluyor.

 

 

 

 TabHost ile Tab Seklemeleri Oluşturma

 

Bir nevi menü görevi yapan tab sekmelerinin işleyişine bakalım. Bu işlemi, tabhostaracılığıyla yapıyoruz.

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

Burada, sayfamızın üstteki paneli için bir tab panel yaptık ve sayfayı yatay olarak kaplamasını sağladık. Bunu yazdıktan sonra activity_main.xml dosyamızın görünümü şu şekilde olacaktır.

resim5

Burada soldaki gibi sayfa1 ve sayfa2 adında 2 sayfa ekleyelim ve bunları birbirine bağlayalım. Daha sonra manifest dosyamıza gelelim ve bunları tanıtalım. Eklememiz gereken kod aşağıda dikdörtgen içine alınan koddur.resim6

Bunları yaptıktan sonra sayfa1 ve sayfa2 java dosyalarının içine yazılması gereken kodu verelim.

 

resim8 resim7

Burada sadece bağlamaları yaptık. Bu sayfalara karşılık gelen xml dosyalarını yani sayfanın kendisini de gösterelim. Ben bunların sayfalarına aşağıdaki gibi birer textview ekledim.resim10 resim9

 

Yapmamız gereken son işlem kaldı. Burada da MainActivity.java dosyasını kodlayacağız. Burada tüm tabişlemlerini yapacağız. Tab’larımıza resim koyacağız. Şimdi bunu kodlayalım ve anlatalım.

İlk olarak bir icon oluşturun ve bunu soldaki panelden drawable-hdpi klasörüne sürükleyip bırakın. Ben bir tane oluşturdum ve bu klasöre attım.

,

resim11

1 => Burada sınıfımızı Activity değil TabActivity sınıfından extends etmemiz gerekiyor.

2 => Burada java dosyamızı, xml sayfamıza bağladık.

3 => Burada bir tabhost nesnesi oluşturduk ve id‘si ile bağladık.

4 => Burada 2 adet TabSpec nesnesi oluşturduk. Bunlar, yukarıda çıkacak olan tablarımızdır. Buradatırnak içindeki isimler, manifest içindeki isimlerdir.

5 => Burada bir nevi tab’ları, sayfaları ile ilişkilendirdik. Buradaki ilk parametre, tab’ın ismidir. Drawableparametresinde de iconumuzu belirttik.

6 => Burada son olarak bu tab1 ve tab2 nesnelerini, tab panel’e ekledik.

Ekran çıktılarımız aşağıdaki gibi olacaktır.

 

resim13 resim12

 

 

 

Android TabHost Kullanımı

 

Merhaba arkadaşlar, TabHost kontrolünü uygulamalarımızda ekranı daha iyi kullanabilmek için farklı parçalara bölmek istersek kullanabiliriz.Bu şekilde tek ekranda daha fazla bilgiyi kullanıcılara gösterebiliriz.Kullanımı oldukca basit olan kontrolü eclipse içerindeki Composite bölümünden ( Palette ) uygulamamıza ekleyelim

xml içerigimiz

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

<TabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >

<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/tabUrunListesi"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ListView
android:id="@+id/lstUrunListesi"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>

<LinearLayout
android:id="@+id/tabStoklar"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ListView
android:id="@+id/lstStoklar"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>

<LinearLayout
android:id="@+id/tabKasa"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ListView
android:id="@+id/lstKasa"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>

<LinearLayout
android:id="@+id/tabOzel"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ListView
android:id="@+id/lstOzel"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>

</RelativeLayout>

 

MainActivity.java sınıfının içerisi

Ekran çıktıları

 

resim15 resim14

 

Ayşe UYGUN

KAYNAKÇA

http://www.kodbankasi.org/android-tab-menu-olusturma/

http://www.mehmetkirazli.com/android-dersleri-19-tabhost-ile-tab-seklemeleri-olusturma/

http://emrealtunbilek.com/teknoloji/android/android-tab-kullanimi/

http://emrealtunbilek.com/teknoloji/android/java-ile-yeni-tab-olusturma/

http://www.androiddunyasi.net/android-tabhost-kullanimi-2.apk

 

 

Yazar Hakkında

Yazar : Hasan Nair

Yazar Hakkında :

Yazarın Tüm Yazıları İçin Tıklayınız

Yorumlar

Sitemizde En Çok Okunan İçerikler

ANDROİD TELEFONLARA ROOT ATMA
ANDROİD TELEFONLARA ROOT ATMARoot Ne demek ? Bir android cihazı root etmek telefonun
fragment
ANDROİD FRAGMENT YAPISI VE KULLANIMIFragmentler Activity içerisinde yer alan kullanıcı ara yüzleridir. Fragment
Asp.NET’de web servis hazırlama ve Android de kullanimi  Web Servis Nedir ? Web üzerinden HTTP protokolü ile hizmet
ANDROİD TELEFONLARDA KONFERANS GÖRÜŞME
ANDROİD TELEFONLARDA KONFERANS GÖRÜŞMEANDROİD TELEFONLARDA KONFERANS GÖRÜŞME   Konferans görüşme çok fazla bilinmeyen androidin

Sitemizde En Çok Yorumlanan İçerikler

WEB UYGULAMALARINDA EKRAN UYUMU
WEB UYGULAMALARINDA EKRAN UYUMUAndroid için web uygulamaları hazırlarken odaklanmamız gereken en önemli
ActionBar Kullanım Özellikleri
ActionBar Kullanım ÖzellikleriActionBar Genel Bakış ActionBar temel olarak 4 ana işlevsel alan barındırır.

Son Yapılan Yorumlar

  • Kategoriler

  • Son Yazılar

  • Takvim

    Ağustos 2017
    P S Ç P C C P
    « Kas    
     123456
    78910111213
    14151617181920
    21222324252627
    28293031  
  • Etiketler

  • Son Yorumlar

    • Arşivler

    • Meta