Fragment trong Android


Fragment là một phần giao diện người dùng hoặc hành vi của một ứng dụng. Fragment có thể được đặt trong Activity, nó có thể cho phép thiết kế activity với nhiều mô-đun. Có thể nói Fragment là một loại sub-Activity.

  • Fragment cũng có layout của riêng của nó, cũng có các hành vi và vòng đời riêng.
  • Chúng ta có thể thêm hoặc xóa Fragment trong một Activity trong khi Activity này đang chạy.
  • Có thể kết hợp nhiều Fragment trong một Activity để xây dựng giao diện người dùng đa khung.
  • Một Fragment có thể được sử dụng trong nhiều Activities.
  • Vòng đời của Fragment có quan hệ chặt chẽ với vòng đời của Activity đang dùng nó điều này có nghĩa là khi Activity bị tạm dừng thì các Fragment sẽ dừng lại.
  • Fragment có thể thực hiện một hành vi mà không có trong thành phần giao diện người dùng.
  • Fragment được thêm vào API 11 trở lên.
  • Bạn có thể tạo các Fragments bằng cách kế thừa lớp FragmentFragment được thêm vào layout bởi thẻ <fragment>

Trước khi giới thiệu về Fragment, thì có một hạn chế là tại cùng một thời điểm chúng ta chỉ có thể hiển thị một Activity duy nhất trên màn hình. Vì thế chúng ta không thể chia màn hình thiết bị ra thành nhiều phần và kiểm soát các thành phần khác nhau này một cách riêng biệt. Nhưng với Fragment thì màn hình được linh hoạt hơn, xóa bỏ việc chỉ có duy nhất 1 Activity trên màn hình tại một thời điểm. Bây giờ chúng ta cũng chỉ có một Activity duy nhất nhưng Activity này có thể chứa nhiều Fragment với layout, sự kiện, và vòng đời. Dưới đây là một ví dụ cụ thể về sử dụng Fragment. Thiết bị máy tính bảng với màn hình lớn thì một Activity có thể chứ 2 Fragment, còn thiết bị cầm tay với màn hình nhỏ thì có thể có 2 Activities với mỗi Activity là một Fragment. Vòng đời của một Fragment Mỗi Fragment có vòng đời riêng của nó, và vòng đời này giống với vòng đời của một Activity. Giai đoạn 1: Khi một Fragment được tạo, nó sẽ đi qua một số trạng thái:

  1. onAttach()
  2. onCreate()
  3. onCreateView()
  4. onActivityCreated()

Giai đoạn 2: Khi một Fragment được hiển thị:

  1. onStart()
  2. onResume()

Giai đoạn 3: Khi Fragment chạy ẩn dưới nền:

  1. onPause()
  2. onStop()

Giai đoạn 4: Khi hủy một Fragment:

  1. onPause()
  2. onStop()
  3. onDestroyView()
  4. onDestroy()
  5. onDetach()

Cách tạo một Fragment Sau đây là một số bước để tạo một Fragment đơn giản:

  1. Đầu tiên bạn phải nghĩ xem cần bao nhiêu Fragment trong một Activity. VD: Bạn muốn 2 Fragment cho trường hợp màn hình nằm ngang, và 1 Fragment trong trường hợp màn hình đứng.
  2. Tiếp theo, dựa trên số Fragment đã tính, tạo các lớp kế thừa lớp Fragment. Lớp Fragment có nhiều phương thức callback, bạn có thể override bất kỳ phương thức nào dựa trên yêu cầu.
  3. Tương ứng với mỗi Fragment, bạn cần phải tạo các file Layout (XML file).
  4. Cuối cùng, chỉnh sửa file Activity, để xác định vị trí của các Fragment theo yêu cầu.

Đây là một số phương thức quan trọng bạn có thể Override trong lớp Fragment của bạn.

  • onCreate(): Hệ thống gọi phương thức này khi tạo Fragment. Bạn nên khởi tạo các thành phần thiết yếu của Fragment  mà bạn muốn giữ lại khi Fragment được tạm dừng, dừng lại hoặc tiếp tục.
  • onCreateView(): Hệ thống gọi phương thức này khi Fragment vẽ giao diện của nó lần đầu tiên. Để vẽ giao diện cho Fragment bạn cần phải return View từ phương thức này. Bạn có thể return null nếu Fragment không cung cấp giao diện.
  • onPause(): Hệ thống gọi phương thức này như là để đánh dấu lần đầu người dùng rời Fragment. Đây là nơi bạn ghi lại bất kỳ thay đổi nào và thay đổi cần tiếp tục tồn tại ngoài lần dùng này.

Ví dụ: Trong ví dụ này sẽ hướng dẫn bạn cách tạo và sử dụng Fragments. Chúng ta sẽ tạo 2 Fragments, một trong số chúng được dùng khi màn hình điện thoại nằm ngang và một cái còn lại được dùng khi màn hình đứng. Tạo project với tên: FragmentExample File: res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">FragmentExample</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="landscape_message">This is Landscape mode fragment</string>
    <string name="portrait_message">This is Portrait mode fragment</string>

</resources>

File: res/layout/lm_fragment.xml

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/landscape_message"
        android:textColor="#000000"
        android:textSize="20px"/>

</LinearLayout>

File: res/layout/pm_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:background="#666666">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/portrait_message"
        android:textColor="#000000"
        android:textSize="20px"/>

</LinearLayout>

File: res/layout/activity_main.xml

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

    <fragment
        android:name="com.laptrinhtuduy.fragments"
        android:id="@+id/lm_fragment"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_width="0dp"/>

    <fragment
        android:name="com.laptrinhtuduy.fragments"
        android:id="@+id/pm_fragment"
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="2"/>

</LinearLayout>

File: src/com.laptrinhtuduy.fragments/LM_Fragment.java

package com.laptrinhtuduy.fragments;

import com.laptrinhtuduy.fragmentexample.R;

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

public class LM_Fragment extends Fragment{

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.lm_fragment, container, false);
	}

}

File: src/com.laptrinhtuduy.fragments/PM_Fragment.java

package com.laptrinhtuduy.fragments;

import com.laptrinhtuduy.fragmentexample.R;

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

public class PM_Fragment extends Fragment{

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.pm_fragment, container, false);
	}

}

File: src/com.laptrinhtuduy.fragmentexample/MainActivity

package com.laptrinhtuduy.fragmentexample;

import com.laptrinhtuduy.fragments.LM_Fragment;
import com.laptrinhtuduy.fragments.PM_Fragment;

import android.os.Bundle;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.content.res.Configuration;
import android.view.Menu;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		Configuration config = getResources().getConfiguration();

		FragmentManager fragmentManager = getFragmentManager();
		FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

		if(config.orientation == Configuration.ORIENTATION_LANDSCAPE){
			LM_Fragment lm_Fragment = new LM_Fragment();
			fragmentTransaction.replace(android.R.id.content, lm_Fragment);
		}else{
			PM_Fragment pm_Fragment = new PM_Fragment();
			fragmentTransaction.replace(android.R.id.content, pm_Fragment);
		}

		fragmentTransaction.commit();
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

 

Kết quả:

Khi để đứng màn hình:

 

Sau đó: ctrl + F11 => Màn hình nằm ngang:

 

DOWNLOAD: SOURCE CODE

 

 

 

Dựa trên: tutorialspoint

Leave a comment