Android Cep Telefonu Uygulamaları Programlar Oyun Paylaşım Noktası: android tablayout

Tab Layoutu  resimler, kodlar ve örneklerle destekleyerek anlatacağım. 
 Tab Layout 
 
Tab layout adından da anlaşılacağı üzere tabların kullanıldığı şablondur. Örneğimizle daha iyi anlayacaksınız. Örneğimiz 3 tane tab içerecek, tabların kendilerine ait isimleri ve simgeleri olacak. Ve de tabların kendi içerikleri de olacak. Örneğimizin emulatör çıktısı şöyle olacak: 
 
<div style="text-align: center;">
<a href="http://androidhocam.files.wordpress.com/2013/08/tablayout.png"><img alt="tablayout" class=" wp-image-197 aligncenter" height="416" src="http://androidhocam.files.wordpress.com/2013/08/tablayout.png" width="243" /></a></div>
<div style="text-align: center;">
 </div>
Gerekli Adımlar: 
 1. Yeni bir proje oluşturup (1. derste anlatmıştım.) adına TabLayout diyoruz. 
 2. activity_main.xml dosyasına aşağıdaki kodu girin. 
<pre class="lang:default decode:true"></pre>
<pre class="lang:default decode:true"><?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></pre>
<pre class="lang:default decode:true"></pre>
3. Aşağıda verdiğim fotoğrafları /res/drawable-hdpi dosyasına kaydedin, isimleri sırasıyla:home, music, photos olmalı. 
 
  <a href="http://androidhocam.files.wordpress.com/2013/08/home.png"><img alt="home" class="alignnone size-full wp-image-168" height="48" src="http://androidhocam.files.wordpress.com/2013/08/home.png" width="48" /></a>   <a href="http://androidhocam.files.wordpress.com/2013/08/music.png"><img alt="music" class="alignnone size-full wp-image-169" height="48" src="http://androidhocam.files.wordpress.com/2013/08/music.png" width="48" /></a>    <a href="http://androidhocam.files.wordpress.com/2013/08/photos.png"><img alt="photos" class="alignnone size-full wp-image-170" height="48" src="http://androidhocam.files.wordpress.com/2013/08/photos.png" width="48" /></a> 
 
4. res altındaki layout klasörüne sağ tıklayıp 3 tane yeni android xml dosyası açın, isimleri şöyle olmalı: home.xml, music.xml, photo.xml (sıra önemli değil) Sırasıyla bu xml dosyalarına aşağıdaki kodları girin. 
 
home.xml 
<pre class="lang:default decode:true"></pre>
<pre class="lang:default decode:true"><?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" >

</LinearLayout></pre>
 
music.xml 
<pre class="lang:default decode:true"></pre>
<pre class="lang:default decode:true"><?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" >

</LinearLayout></pre>
 photo.xml 
<pre class="lang:default decode:true"></pre>
<pre class="lang:default decode:true"><?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" >

</LinearLayout></pre>
 
5. drawable-hdpi klasörü altına üç tane android xml dosyası açın. Sırasıyla şu isimleri verin: hometab, musictab, phototab. Ve aşağıdaki kodları girin: 
 hometab.xml 
<pre class="lang:default decode:true"></pre>
<pre class="lang:default decode:true"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/home" />
</selector></pre>
 musictab.xml 
<pre class="lang:default decode:true"></pre>
<pre class="lang:default decode:true"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/music"
 android:state_selected="true" />
 <item android:drawable="@drawable/music" />
</selector></pre>
 
  phototab.xml 
<pre class="lang:default decode:true"></pre>
<pre class="lang:default decode:true"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/photos"
 android:state_selected="true" />
 <item android:drawable="@drawable/photos" />
</selector></pre>
 
  6. Madem 3 farklı tabımız olacak o zaman 3 tane farklı .java dosyamız olmalı, çünkü biz bu üç tabın içinde farklı şeyler olsun istiyoruz. src klasörü altındaki paket dosyanıza sağ tıklayarak üç tane yeni sınıf oluşturun isimleri şöyle olsun: HomeActivity.java, MusicActivity.java, PhotoActivity.java Sırasıyla aşağıdaki kodları girin: 
 HomeActivity.java 
<pre></pre>
<pre>package com.androidhocam.tablayout;import android.app.Activity;
import android.os.Bundle;public class HomeActivity extends Activity {@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.home);}}</pre>
 MusicActivity.java 
<pre></pre>
<pre>package com.androidhocam.tablayout;import android.app.Activity;
import android.os.Bundle;public class HomeActivity extends Activity {@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.home);}}</pre>
 PhotoActivity.java 
<pre></pre>
<pre>package com.androidhocam.tablayout;import android.app.Activity;
import android.os.Bundle;public class PhotoActivity extends Activity {@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.photo);}}}</pre>
 7. Şimdi de MainActivity.java dosyasında tabları ve tabların isimlerini oluşturup tabhost a ekleyeceğiz. Aşağıdaki kodu MainActivity.java dosyasına girin. 
<pre></pre>
<pre>package com.androidhocam.tablayout;import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;public class MainActivity extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);TabHost tabHost = getTabHost();TabSpec homespec = tabHost.newTabSpec("Anasayfa");
homespec.setIndicator("Anasayfa", getResources().getDrawable(R.drawable.hometab));
Intent videosIntent = new Intent(this, HomeActivity.class);
homespec.setContent(videosIntent);TabSpec photospec = tabHost.newTabSpec("Fotoğraflar");photospec.setIndicator("Fotoğraflar", getResources().getDrawable(R.drawable.phototab));
Intent photosIntent = new Intent(this, PhotoActivity.class);
photospec.setContent(photosIntent);TabSpec songspec = tabHost.newTabSpec("Müzik");
songspec.setIndicator("Müzik", getResources().getDrawable(R.drawable.musictab));
Intent songsIntent = new Intent(this, MusicActivity.class);
songspec.setContent(songsIntent);

tabHost.addTab(homespec);
tabHost.addTab(photospec);
tabHost.addTab(songspec);

}
}</pre>
 8. Şimdi de 6. adımda ek olarak oluşturduğumuz aktiviteleri AndroidManifest.xml dosyasına activite olarak giriyoruz. Şu kodları manifeste ekleyin: 
<pre class="lang:default decode:true"></pre>
<pre class="lang:default decode:true"> <activity android:name=".PhotoActivity" />
 <activity android:name=".HomeActivity" />
 <activity android:name=".MusicActivity" /></pre>
 9. Herşey hazır, şimdi projemize sağ tıklayıp Run as -> Android Application diyoruz. Sonuç aşağıda görülüyor. 
 
Tab Layout Emülatör Çıktısı 
 
<div style="text-align: center;">
<a href="http://androidhocam.files.wordpress.com/2013/08/tablayout.png"><img alt="tablayout" class=" wp-image-197 aligncenter" height="416" src="http://androidhocam.files.wordpress.com/2013/08/tablayout.png" width="243" /></a></div>
<div style="text-align: center;">
 
<div style="text-align: left;">
Not: Bu yazı<a href="http://www.androidevreni.com/" target="_blank"> Android Evreni</a> kurucusu ve yazarı Mustafa DEMİR tarafından yazılmıştır.</div>
<div style="text-align: left;">
 </div>
</div>
<div style="text-align: left;">
Kodları indirmek ve dersin kaynağına ulaşmak için<a href="http://www.androidevreni.com/?p=216" target="_blank"> tıklayınız.</a></div>

Android Mobil Telefon Tab Layout - Uygulamalı Ders

Tab Layoutu resimler, kodlar ve örneklerle destekleyerek anlatacağım. Tab Layout Tab layout adından da anlaşılacağı üzere tabların kulla...

Devamı »

Android Mobil Telefon Tab Layout - Uygulamalı Ders

Popüler Yayınlar

Blog Arşivi