Android’de Fragment Kullanımı


   Bugünkü yazımızda Android 3.0 ile birlikte hayatımıza giren ve dinamik yapısı sayesinde kullanıcı arayüzünde oldukça kolay ve hızlı bir kullanım olanağı sunan Fragment yapısını inceleyeceğiz.  Fragment yapısının aslında temel dayanağı, teknolojinin günden güne minimum iş-maksimum performans sürecine olan uyumundan kaynaklanmaktadır. Buna örnek olarak web tarafındaki single page yapısını gösterebiliriz. HTML5 ile yaygınlaşan single page mimarisi sayesinde, farklı bir sayfaya yönlenme ihtiyacı duymadan tek sayfada sluglar sayesinde farklı içeriklere ulaşma olanağı sağlanmıştır.


Android Fragment Kullanımı
   Android 3.0 ile birlikte de kullanıcının sürekli activity değiştirerek user friendly olmayan, yavaş bir yapı kullanımını önlemek için tek activity’de birden fazla Fragment oluşturarak daha esnek bir arayüz parçası oluşturulması sağlanmıştır. 

  Fragment, Activity’nin ‘lifecycle’ diye tabir edilen yaşam döngüsünün içinde yer alır. Böylece bir menü oluşturduğumuz takdirde, menü sekmeleri arasında döngüden çıkmadan geçiş yapabiliriz. Bu da hem performansı koruma, hem de kullanıcıya kolay bir arayüz kullanımı sunmak için en iyi yöntemlerden biridir. Şimdi bunu bir örnekle gerçekleştirelim: 

android fragment kodları

1- Öncelikle herhangi bir Java derleyici üzerinden Android projemizi oluşturuyoruz:

Fragment Ornek Kod

Not: Fragment yapısının çalışması için projenin ‘libs’ klasöründe Android Support v4 kütüphanesi olması gerekir.  

2- Sonrasında new-android-xml layout file uzantısını inceleyerek birincifragment.xml adında ilk Fragment Layout’umuzu oluşturuyoruz: 

İlk aşama için bir button, edit text ve seekbar ekliyoruz.

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

<Button
android:id="@+id/fragmentbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/seekBar1"
android:layout_centerHorizontal="true"
android:layout_marginTop="17dp"
android:text="Button" />

<EditText
android:id="@+id/fragmentedittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:ems="10"
android:inputType="text" >
<requestFocus />
</EditText>

<SeekBar
android:id="@+id/fragmentseekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/editText1"
android:layout_marginTop="14dp" />

</RelativeLayout>

Ekranımız aşağıdaki gibi görünüyor:

Fragment Örnek Proje

3- Şimdi class sürecine geçtiğimizde, projenin new-class yolunu izleyerek BirinciFragment class’ımızı oluşturuyoruz.  OnCreateView methoduna Fragment içi yapının ana hattını oluşturacak layout’u inflate ediyoruz.

 

package com.cagrikacmaz.fragmentornegi;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class BirinciFragment extends Fragment {

	 @Override
	    public View onCreateView(LayoutInflater inflater, 
        ViewGroup container, Bundle savedInstanceState) {

	        // Fragment içi düzenin oluşturulduğu alan(www.cagrikacmaz.com) 
	        View view =  inflater.inflate(R.layout.birincifragment, 
                                  container, false);
	        return view;
	   }

}

 4- Değişikliklerimizi tamamladıktan sonra ikinci fragment için yeni bir xml layout oluşturuyoruz. İçine sadece bir TextView yerleştirerek “İkinci Fragment” yazmamız yeterli olacaktır. 

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

<TextView
android:id="@+id/ikincifragmenttext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="İkinci Fragment"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>



Fragment örnek kodlama 

5- Devam etmeden önce bu zamana kadar yaptığımız değişiklikleri kaydetmeyi unutmayalım. Şimdi projemiz üzerinden New-Class adımlarını takip ederek “IkinciFragment” adında yeni bir Java Class’ı oluşturuyoruz. Bir önceki adımda oluşturduğumuz ‘ikincifragment’ xml layoutu da yeni class’ımıza aşağıdaki gibi implement ediyoruz:

package com.cagrikacmaz.fragmentornegi;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class IkinciFragment extends Fragment {
 
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, 
 Bundle savedInstanceState) {
 View view = inflater.inflate(R.layout.ikincifragment, 
 container, false);
 
 return view;
 }
 
}

Projemizin başında standart oluşan ana sınıfımıza ait olan layout’a oluşturduğumuz iki fragment’ı <fragment> takıyla ekleyip, tools:layout ile de çağırma işlemini gerçekleştiriyoruz.

<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"
tools:context=".FragmentExampleActivity" >

<fragment
android:id="@+id/birinci_fragment"
android:name="com.example.fragmentexample.ToolbarFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
tools:layout="@layout/birincifragment" />

<fragment
android:id="@+id/ikinci_fragment"
android:name="com.example.fragmentexample.TextFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
tools:layout="@layout/ikincifragment" />
</RelativeLayout> 

Sayfamızın son hali aşağıdaki gibi oluyor:

fragment yapısı android örnek

 

Artık tek bir layout üzerinde iki fragment’ımızı da görebiliyoruz.  

6- Hatırlayacağınız üzere birinci fragment layout’umuzda arayüzde fragment değişimini görebilmek için bir ‘seekbar’ oluşturmuştuk. Yatay olarak yapılacak parmak hareketine göre fragment değişimini sağlayacak bu seekbar için öncelikle BirinciFragment class’ımız üzerinde gerekli değişiklikleri yapıyoruz.

package com.cagrikacmaz.fragmentornegi;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
//Kullanıcı bazlı seekbar değişimlerini dinlemek için OnSeekBarChangeListener'a implement ediyoruz.
public class BirinciFragment extends Fragment implements OnSeekBarChangeListener {
private static int seekvalue = 10; //Seekbar değerini 10 olarak belirliyoruz.
private static EditText edittext;
ToolbarListener activityCallback;

public interface ToolbarListener {
public void onButtonClick(int position, String text);
}

@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
try {
activityCallback = (ToolbarListener) activity;
} catch (ClassCastException e) {
throw new ClassCastException(activity.toString()
+ " ToolbarListener'a implement edilmeli!");
}
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
//Burada birincifragment.xml layout'unda id tanımladığımız button, seekbar ve edittext'i tanımlıyoruz.
View view = inflater.inflate(R.layout.birincifragment,
container, false);
edittext = (EditText) view.findViewById(R.id.fragmentedittext);
final SeekBar seekbar =
(SeekBar) view.findViewById(R.id.fragmentseekbar);

seekbar.setOnSeekBarChangeListener(this);

final Button button =
(Button) view.findViewById(R.id.fragmentbutton);
button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
buttonClicked(v);
}
});
return view;
}
//Oluşturduğumuz butona tıklandığında edittext'teki yazıyı çağırıyor ve seekvalue değerini callback ediyoruz.
public void buttonClicked (View view) {
activityCallback.onButtonClick(seekvalue,
edittext.getText().toString());

}

@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
seekvalue = progress;
}

@Override
public void onStartTrackingTouch(SeekBar arg0) {
// Seekbar işlem başı görevleri(www.cagrikacmaz.com)
} @Override public void onStopTrackingTouch(SeekBar arg0) { 
// Seekbar işlem sonu görevleri(www.cagrikacmaz.com) } }

7- Ana class’ımız olan FragmentOrnek için önceki Android versiyonlarında fragment support desteği kullanıldığından BirinciFragment’ın toolbar’ında oluşturduklarımızı implement etmek için aşağıdaki değişiklikleri gerçekleştiriyoruz.

 package com.cagrikacmaz.fragmentornegi;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class FragmentOrnek extends FragmentActivity implements BirinciFragment.ToolbarListener {

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

public void onButtonClick(int fontsize, String text) {

}
}

8- Şimdi ise oluşturduğumuz ikinci fragment’ımızın class’ına giderek fragment değişiminde gerçekleşmesini istediğimi değişimleri tanımlıyoruz:

package com.cagrikacmaz.fragmentornegi;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class IkinciFragment extends Fragment {
private static TextView textview;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.ikincifragment,
container, false);
textview = (TextView) view.findViewById(R.id.ikincifragmenttext); //Layoutumuzda bulunan textviewi tanımlıyoruz.
return view;
}

public void changeTextProperties(int fontsize, String text)
{
textview.setTextSize(fontsize);
textview.setText(text); //Renk ve Font değişimi girdilerini oluşturuyoruz.(www.cagrikacmaz.com)
}
}

Bu değişikliğin arayüzümüzde gerçekleşmesi için ana class’ımız olan FragmentOrnek’de oluşturduğumuz onButtonClick methodunun içini aşağıdaki gibi doldurup, IkinciFragment’ı çağırıyoruz:

 public void onButtonClick(int fontsize, String text) {
		IkinciFragment ikinciFragment = 
			       (IkinciFragment) 
			         getSupportFragmentManager().findFragmentById(R.id.ikinci_fragment);		
		ikinciFragment.changeTextProperties(fontsize, text);
    	}

Uygulamamız artık hazır. İstediğiniz takdirde fragment değiştikçe oluşacak tasarımsal değişiklikleri de ‘changeTextProperties’  metodundan gerçekleştirebilirsiniz. Bizim projemizin sonucu aşağıdaki gibidir: 

Bu slayt gösterisi için JavaScript gerekir.

 

Projenin kaynak kodlarını indirmek için buraya tıklayabilirsiniz.

(Rar Şifresi: www.cagrikacmaz.com)

Daha fazla örnek uygulama ve anlatım için Java sayfamızı ziyaret edebilirsiniz.

Herkese mutlu kodlamalar :) 

Bunlar da ilginizi çekebilir

Gitmeden yorumunuzu bırakın.


Time limit is exhausted. Please reload the CAPTCHA.