How To Use Tab Layout in Android


tablayBu yazıda TabLayout un çalışma mantığını göreceğiz. Verecek olduğum örnek 3 tane tab içerecek. Burada önemli olan her bir tab içine birer activity alacak.
Şimdi yeni bir proje oluşturmakla başlayalım. Yeni bir proje oluşturalım ve ardından activity dosyamızı açalım. Bendeki adı AndroidTabLayoutActivity.java. Buraya ulaşmak için de projenizin içerisindeki şu dizine bakmanız yeterli. src/paketAdi/classAdi.
Buradaki activity yi TabActivity den extendsi etmemiz gerekli. Hemen java koduna bakalım:

public class AndroidTabLayoutActivity extends TabActivity { ... }


Class ı yazmadan önce xml dosyalarında düzenleme yapalım. Şimdi main.xml dosyasını açalım (res/layout/main.xml). Ve aşağıdakileri yazalım.

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>
    </LinearLayout>
</TabHost>

Daha sonra tab layout içerisine eklememiz gereken activity ler için 3 tane class olşuturacağız. Ve bu 3 class için de 3 tane layout oluşturacağız. Önce class ları oluşturalım. PaketDosyası(com.packagename…) Sağ Tık > New > Class
Sırasıyla 3 class (activity):

PhotosActivity.java

package com.example.androidtablayout;

import android.app.Activity;
import android.os.Bundle;

public class PhotosActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.photos_layout);
    }
}

SongsActivity.java

package com.example.androidtablayout;

import android.app.Activity;
import android.os.Bundle;

public class PhotosActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.songs_layout);
    }
}

VideosActivity.java

package com.example.androidtablayout;

import android.app.Activity;
import android.os.Bundle;

public class PhotosActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.videos_layout);
    }
}

Classlar (activity) oluşturuldu. Şimdi de bunlara bağlı olarak XML dosyalarımızı oluşturalım. İsimlerini de sırasyıla photos_layout.xml, songs_layout.xml, videos_layout.xml şeklinde yapalım.
Sağ Tık res/layout > New > Android XML File veya New File

photos_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:layout_height="match_parent">

	<TextView android:text="FOTOĞRAFLAR"
		android:padding="15dip"
		android:textSize="18dip"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"/>
	
</LinearLayout>

songs_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:layout_height="match_parent">
  
	<TextView android:text="ŞARKILAR"
  		android:padding="15dip"
  		android:textSize="18dip"
  		android:layout_width="fill_parent"
  		android:layout_height="wrap_content"/>
</LinearLayout>

videos_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:layout_height="match_parent">
  
	<TextView android:text="VİDEOLAR"
  		android:padding="15dip"
  		android:textSize="18dip"
 	 	android:layout_width="fill_parent"
  		android:layout_height="wrap_content"/>
</LinearLayout>

Son olarak ise tasarımın daha iyi görünmesini istiyorsak her bir tab için seçili olması veya olmaması halinde farklı iconlar göstermemiz gerekli.
Kullanılacak iconları gösterecek olursak:

( 48 X 48 ) res/drawable-hdpi
photos_grayphotos_whitesongs_graysongs_whitevideos_grayvideos_white

( 32 x 32 ) res/drawable-mdpi
photos_grayphotos_whitesongs_graysongs_whitevideos_grayvideos_white

( 24 x 24 ) res/drawable-ldpi
photos_grayphotos_whitesongs_graysongs_whitevideos_grayvideos_white


Şimdi yukarıda verdiğimiz iconlar için gerekli olan XML dosyalarını yazalım. Bunun için res/drawable-hdpi in içine xml dosyaları oluşturacağız. Tab ın seçili veya seçili olmama durumuna göre değişecek olan icon için gerekli kodlar sırasıyla aşağıdadır:

icon_photos_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Seçili olduğu zaman, gri iconu kullan -->
    <item android:drawable="@drawable/photos_gray"
          android:state_selected="true" />
    <!-- Seçili olmadığı zaman, beyaz iconu kullan -->
    <item android:drawable="@drawable/photos_white" />
</selector>

icon_songs_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Seçili olduğu zaman, gri iconu kullan -->
    <item android:drawable="@drawable/songs_gray"
          android:state_selected="true" />
    <!-- Seçili olmadığı zaman, beyaz iconu kullan -->
    <item android:drawable="@drawable/songs_white" />
</selector>

icon_videos_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Seçili olduğu zaman, gri iconu kullan -->
    <item android:drawable="@drawable/videos_gray"
          android:state_selected="true" />
    <!-- Seçili olmadığı zaman, beyaz iconu kullan -->
    <item android:drawable="@drawable/videos_white" />
</selector>

Artık activity mizi yazmaya başlayabiliriz. AndroidTabLayoutActivity.java içerisine aşağıdaki kodları ekleyin. src > PaketDosyası(com.packagename…) > AndroidTabLayoutActivity.java

package com.example.androidtablayout;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class AndroidTabLayoutActivity extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        TabHost tabHost = getTabHost();
        
        // Potoğraflar için Tab
        TabSpec photospec = tabHost.newTabSpec("Photos");
        photospec.setIndicator("Fotoğraflar", getResources().getDrawable(R.drawable.icon_photos_tab));
        Intent photosIntent = new Intent(this, PhotosActivity.class);
        photospec.setContent(photosIntent);
        
        // Şarkılar için Tab
        TabSpec songspec = tabHost.newTabSpec("Songs");
        // setting Title and Icon for the Tab
        songspec.setIndicator("Şarkılar", getResources().getDrawable(R.drawable.icon_songs_tab));
        Intent songsIntent = new Intent(this, SongsActivity.class);
        songspec.setContent(songsIntent);
        
        // Videolar için Tab
        TabSpec videospec = tabHost.newTabSpec("Videos");
        videospec.setIndicator("Videolar", getResources().getDrawable(R.drawable.icon_videos_tab));
        Intent videosIntent = new Intent(this, VideosActivity.class);
        videospec.setContent(videosIntent);
        
        // TabSpec leri TabHost a ekliyoruz.
        tabHost.addTab(photospec); 
        tabHost.addTab(songspec);
        tabHost.addTab(videospec);
    }
}

Bu haliyle çalışacaktır fakat activity ler içerisinde işlem yapmak isterseniz AndroidManifest.xml dosyasının içerisine oluşturulan 3 tane class (activity)’ı belirtmemiz gereklidir.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.example.androidtablayout"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="8" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".AndroidTabLayoutActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <!--  Fotoğraflar Activity -->
        <activity android:name=".PhotosActivity" />
        
        <!--  Şarkılar Activity -->
        <activity android:name=".SongsActivity" />
        
        <!--  Videolar Activity -->
        <activity android:name=".VideosActivity" />
      
    </application>
</manifest>

Son olarak ekran görüntüsü ise aşağıdaki gibidir:
screen5

Reklamlar

27 Ara 2012 tarihinde Android içinde yayınlandı ve , , , , , olarak etiketlendi. Kalıcı bağlantıyı yer imlerinize ekleyin. 2 Yorum.

  1. hırkız

    • Arkadaşım ister “hırkız” de ister başka bir şey…
      Başkasına faydalı olmak için oturdum uğraştım, istersen faydalanırsın.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: