#ANDROID - Fragmentler ile ScrollTab

15 Ekim 2015 Perşembe

#ANDROID - Fragmentler ile ScrollTab

    Hiç yorum yok
Androidde bin bir çeşit activity oluşturup kullanıcıyı oradan oraya yönlendirerek uygulamalar yazabiliriz ancak bunun çok daha pratik bir yolu var. Bu yol fragment kullanmaktan geçiyor.

Fragment kullanarak oluştuğumuz  tüm -halk değimiyle- sayfaları MainActivity'de göstereceğiz ve kullanıcı parmağını sağa sola kaydırdığında fragmentler arasında geçiş yapacağız.

Twitter, Facebook, Instagram, Snapchat vs. vs. diye devam eder yani neredeyse ileri düzey tüm uygulamalar bu yapıyı kullanıyor.

Şimdi hemen işe koyulalım. Öncelikle derli toplu olması adına bize gerekecek sayfaları yazmakta fayda var. Yeni bir proje oluşturduğumuzda MainActivity otomatik olarak geliyor zaten. Biz FragmentA.java, FragmentB.java, FragmentC.java, fragmenta.xml, fragmentb.java ve fragmentc.java dosyalarını oluşturacağız.

Üç adet fragment oluşturmamızın özel hiçbir nedeni yok sadece örnek olsun diye yapıyoruz siz daha fazla ya da daha az oluşturabilirsiniz.

Bizim yapacağımız tüm işler MainActivity'de biteceği için oluşturduğumuz fragment sayfalarının üzerinden hızlıca bir geçelim. .xml uzantılı dosyalarımızda örneğin: "Bu Fragment A sayfası." yazılı bir TextView var bir de diğerlerinden ayırt edilmesi için üç fragmentin LinearLayout'una farklı backgroundlar atadık.

fragmenta.xml dosyası:

<?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:background="#ffcc00"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bu Fragment A"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

fragmentb.xml dosyası:

<?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:background="#245"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bu Fragment B"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

fragmentc.xml dosyası:

<?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:background="#931334"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bu Fragment C"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

.XML uzantılı dosyalarımızı hazırladık şimdi .JAVA uzantılı dosyalarımızı oluşturup bu Layoutlarımızı orada tanıtıyoruz.

FragmentA.java dosyası:

package com.example.fragmentscrolltab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class FragmentA extends Fragment {
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
 
        View view = inflater.inflate(R.layout.fragmenta, container, false);
        return view;
    }
 
}

FragmentB.java dosyası:

package com.example.fragmentscrolltab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class FragmentB extends Fragment {
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
 
        View view = inflater.inflate(R.layout.fragmentb, container, false);
        return view;
    }
 
}

FragmentC.java dosyası:

package com.example.fragmentscrolltab;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class FragmentC extends Fragment {
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
 
        View view = inflater.inflate(R.layout.fragmentc, container, false);
        return view;
    }
 
}

Evet artık fragmentlerimiz hazır. Şimdi bu fragmentleri MainActivity'de çağıracağız ve parmak kaydırma hareketiyle ekranda gösterilmesini sağlayacağız.

mainactivity.xml'de çok dikkat edilmesi gereken bir nokta var. Burada bir Layout değil ViewPager kullanacağız. IDE (Eclipse) bunu bize otomatik olarak getirmiyor bu nedenle elle yazmak zorundayız.

MainActivity.xml dosyası:

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/pager">

    <android.support.v4.view.PagerTitleStrip
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="top"
        android:background="#33b5e5"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:textSize="15dp">
    </android.support.v4.view.PagerTitleStrip>

</android.support.v4.view.ViewPager>

Ve ayrıca "tab" (fragment) başlıklarımızı ekranda göstermek için ViewPager'ın içerisine PagerTitleStrip tanımlıyoruz.

Daha sonra artık kodlarımızı yazmaya başlayabiliriz.

MainActivity.java dosyası:

package com.example.fragmentscrolltab;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity {

    ViewPager viewpager = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewpager = (ViewPager) findViewById(R.id.pager);

        FragmentManager fm = getSupportFragmentManager();
        viewpager.setAdapter(new MyAdaptor(fm));
    }

    class MyAdaptor extends FragmentPagerAdapter {

        public MyAdaptor(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int i) {

            Fragment fragment = null;

            if(i==0) //Seçilen A'ise
            {
                fragment = new FragmentA();
            }
            else if(i==1) //Seçilen B'ise
            {
                fragment = new FragmentB();
            }
            else //Seçilen C'ise
            {
                fragment = new FragmentC();
            }

            return fragment; //Hangi ekranın seçildiğinin bilgisini tutar.
        }

        @Override
        public int getCount() {
            return 3; //Kaç tane ekrana geçiş yapılacağının bilgisini tutar.
        }

        //Ekrana başlık gelmesi için bu metodu oluşturuyoruz.
        @Override
        public CharSequence getPageTitle(int i)
        {
            if (i == 0) {
                return "Birinci Tab";
            } else if (i == 1) {
                return "Ikinci Tab";
            } else if (i == 2) {
                return "Üçüncü Tab";
            }
            return null;
        }
    }


}

Evet artık uygulamamız hazır. Kod bloklarında zaten açıklama satırıyla neyin ne olduğunu belirttiğim için burada açıklamıyorum.

Son olarak bundan önceki her makalemizde activity'mizi AndroidManifest.xml dosyasında tanıtmayı unutmayalım yazmıştım. Burada fragment kullandığımız için böyle bir derdimiz yok.

Makale görseli:

Hiç yorum yok :

Yorum Gönder

Kaydol: Kayıt Yorumları ( Atom )