Android Development 10: Android Fragments

person Myat Min Soefolder_openAndroid Developmentaccess_time May 22, 2016

Android Fragments

Android Device တွေဟာ Screen size အမျိုးမျိုးနဲ့ရှိပါတယ်။ ဒါကြောင့် layout ကိုအသေမထားပဲ screen size ပေါ်မူတည်ပြီးပြောင်းလဲသင့်ပါတယ်။ အထူးသဖြင့် mobile + tablet နှစ်ခုလုံးအတွက်လုပ်တော့မယ်ဆိုရင် layout ကိုနှစ်မျိုးလုံးအတွက်သေချာရေးသင့်ပါတယ်။ ဒါမျိုး layout အမျိုးမျိုးချမယ်ဆိုရင် Fragment တွေကအသုံးဝင်ပါလိမ့်မယ်။

Fragment ဆိုတာကတော့ Activity အသေးစား (sub-activity) တစ်ခုဖြစ်ပါတယ်။ Activity တစ်ခုမှာ Fragment များစွာပါဝင်နိုင်ပါတယ်။ အောက်ပုံကိုကြည့်ပါ Tablet မှာ Activity တစ်ခုပါပြီး Fragment A နဲ့ Fragment B ဆိုပြီး Fragment နှစ်ခုပါပါတယ်။ mobile မှာတော့ Activity A မှာ Fragment A, Activity B မှာ Fragment B ဆိုပြီး Activity နဲ့ Fragment နှစ်ခုဆီပါဝင်တာကိုတွေ့နိုင်ပါတယ်။

10_01

စမ်းသပ်ရန်အတွက် ပထမဆုံး EmptyActivity တစ်ခုယူပြီး FragmentActivity လို့နာမည်ပေးလိုက်ပါ။ activity_fragment.xml ထဲမှာ အောက်ကအတိုင်းရေးလိုက်ပါ။

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

    <Button
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="selectFrag"
        android:text="Green Fragment" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="selectFrag"
        android:text="Red Fragment" />

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

xml ကိုတော့ အကုန်ရင်းနှီးပြီးသား attribute တွေသုံးထားတာဖြစ်လို့ မရှင်းပြတော့ပါဘူး။ new > Fragment > Fragment (Blank) ကိုရွေးပါ။ Fragment Name ကို FragmentOne, Fragment Layout Name ကို fragment_one လို့ရွေးပါ။ create layout XML? ကိုအမှန်ခြစ်ပြီး ကျန်တဲ့ include fragment factory methods? နဲ့ include interface callbacks ကိုအမှန်ခြစ်ဖြုတ်ပါ Finish ကိုနှိပ်ပါ။ နောက်ထပ် Fragment တစ်ခုကိုအပေါ်ကအတိုင်းထပ်ယူပြီး FragmentTwo, fragment_two လို့နာမည်ပေးလိုက်ပါ။

10_02

FragmentOne.java ကိုဖွင့်ပြီးအောက်ကအတိုင်း ရေးလိုက်ပါ။

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

public class FragmentOne extends Fragment {
 public FragmentOne() {}
 
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  return inflater.inflate(R.layout.fragment_one, container, false);
 }
}

Fragment မှာလဲ ActivityLife Cycle ရှိပါတယ်။ onCreateView method မှာတော့ Fragment အသုံးပြုမဲ့ layout ကို View object အဖြစ် return ပြန်ရပါတယ်။ FragmentOne မှာတော့ R.layout.fragment_one ကို inflater.inflate() အသုံးပြုပြီး View အဖြစ်ပြောင်းကာ return ပြန်လိုက်ပါတယ်။ အောက်ကပုံကတော့ Fragment Activity Life Cycle ပါ။

10_03

FragmentTwo.java ကိုဖွင့်ပြီးအောက်ကအတိုင်းရေးလိုက်ပါ။ FragmentOne နဲ့တူတူပါပဲ ဒါပေမဲ့ return ပြန်တဲ့ View မှာ inflate လုပ်ထားတဲ့ layout မတူပါဘူး

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

public class FragmentTwo extends Fragment {
 public FragmentTwo() {}
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  return inflater.inflate(R.layout.fragment_two, container, false);
 }
}

fragment_one.xml ကိုအောက်ကအတိုင်းရေးလိုက်ပါ။ အလယ်မှာ This is green fragment ဆိုတဲ့ TextView တစ်ခုရှိပြီး background တော့ အစိမ်းရောင်နဲ့ပါ။

<?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="#4CAF50"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is green fragment"
        android:textColor="#FFFFFF"
        android:textSize="18sp" />
</LinearLayout>

fragment_two.xml ကိုအောက်ကအတိုင်းရေးလိုက်ပါ။ အလယ်မှာ This is red fragment ဆိုတဲ့ TextView တစ်ခုရှိပြီး background တော့ အနီရောင်နဲ့ပါ။

<?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="#F44336"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is red fragment"
        android:textColor="#FFFFFF"
        android:textSize="18sp" />
</LinearLayout>

FragmentActivity.java ကိုအောက်ကအတိုင်းရေးပါ။

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class FragmentActivity extends AppCompatActivity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_fragment);
 }
 
 public void selectFrag(View view) {
  Fragment myFragment = null;
  switch (view.getId()) {
   case R.id.btn1:
    myFragment = new FragmentOne();
    break;
   case R.id.btn2:
    myFragment = new FragmentTwo();
    break;
  }
  
  FragmentManager manager = getSupportFragmentManager();
  FragmentTransaction transaction = manager.beginTransaction();
  transaction.replace(R.id.fragment, myFragment);
  transaction.commit();
 }
}

button နှစ်ခုလုံးကို android:onClick=“selectFrag” လို့ attribute ပေးထားတဲ့အတွက် ခလုတ်နှိပ်လိုက်တဲ့အခါ selectFrag method ကအလုပ်လုပ်မှာဖြစ်ပါတယ်။ button နှစ်ခုကိုခွဲဖို့အတွက် switch နဲ့ခွဲထားပါတယ်။ FragmentManager နဲ့ FragmentTransaction အသုံးပြုပြီး fragment ကို replace လုပ်ထားတာပါ။ Run ကြည့်ပါ။ Button နှစ်ခုကိုနှိပ်ကြည့်ပါ။

Comment

  1. တစ်ကယ်ကိုလူတိုင်းနားလည်အောင်ရေးထားတာပဲ ဖတ်ရင်းနဲ့ ကိုကိုယ်တိုင် app တစ်ခု ရေးခဲ့တယ်လို့တောင် ထင်ရတယ် ကျေးဇူးပါပဲ ကိုမြတ်မင်းစိုး

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>