[Android căn bản] Bài 6: Fragment trong Android.

Xin chào các bạn chúng ta lại gặp nhau trong series Android truyền kì. Buổi trước tôi đã giới thiệu với các bạn về vòng đời của Activity hôm nay tôi xin giới thiệu với các bạn về Fragment.

Fragment là gì

Fragment trong Android

Nhìn vào hình trên bạn có thấy điều gì khác biệt không nào. Như các bạn thấy trên hình hay ngoài thực tế thì có một số ứng dụng sẽ không chỉ có một khung hiển thị nội dung mà có nhiều khung để hiện thị nội dung khác nhau trên một màn hình với những tác vụ của mỗi màn hình là khác nhau. Như hình trên cái mấy tình bảng ta thấy có hai khung hiển thị là một khung chứa danh sách Item và một khung hiển thị chi tiết của các Item đươc chọn(tôi đoán thế =))) ) vậy là trên một màn hình hay một Activity sẽ chứ hai Fragnent là A và B. Fragment A và B sẽ có những nhiệm vụ khác nhau và sẽ cùng hiển thị và chạy trên một màn hình vì vậy có thể nói Fragment là Sub Activity. Các Fragment đều có file Java và file giao diện XML riêng như Activity và các Fragment không có file Java thì sẽ được gọi là headless fragments.

Vòng đời của Fragment.

Như tôi đã nói ở trên Fragment có thể coi là một Activity con nên nó cũng có một số tính chất của Activity và cũng như Activity nó cũng có vòng đời của nó và sơ đồ dưới đây chính là sơ đồ vòng đời của Fragment.

Vòng đời của Fragment

Như các bạn thấy nó cũng có các hàm giống với Activity đúng không nào. Tôi xin nói sơ qua về chức năng của các hàm:

onAttach(): hàm này thực hiện tạo tham chiếu từ một fragment đến activity đã khởi tạo nó, và thực hiện một số bước trong quá trình khởi tạo.

onCreate(): thực hiện khởi tạo fragment.

onCreateView(): thực hiện tạo giao diện(view), trả về view là giao diện file xml tương ứng fragment. ko nên tương tác với activity trong hàm này bởi vì activity chưa được khởi tạo đầy đủ. Không cần thực hiện hàm này với các fragment không có header.

onActivityCreated(): thực hiện hoàn thành nốt việc khởi tạo activity và fragment. Trong bước này chúng ta có thể gọi findViewById().

onStart(): thực hiện việc hiển thị fragment lên màn hình.

onResume(): fragment chính thức hoạt động hoàn toàn.

onPause(): fragment bị tạm dừng hoạt động, nó vẫn có thể được nhìn thấy.

onStop(): fragment bị ẩn.

onDestroyView(): giao diện(view) của fragment bị hủy. Nếu nó được gọi quay lại, nó sẽ quay trở lại thực hiện hàm onCreateView().

onDestroy(): bị hủy.

onDetach(): bị hủy hoàn toàn.

Cách sử dụng Fragment.

Fragment có hai loại chính là Frament tĩnh và Fragment động

A. Fragment tĩnh.

Static Fragment là kiểu fragment được khai báo (định nghĩa) trực tiếp trong file XML của Activity.

Ví dụ ta có 2 static fragment là MyFragment1.java(fragment1.xml) và MyFragment2.java(fragment2.xml) .

Trong file activity_main.xml ta sẽ khai báo thành phần Fragment như sau:

<fragment
android:id="@+id/listFragment"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
class="com.example.android.fragment3.MyFragment1"
tools:layout="@layout/fragment1">
</fragment>

Lưu ý: Thuộc tính class chỉ đến file Java tương ứng. Bắt buộc phải có thuộc tính android:id. Nếu không sẽ gây lỗi.

Trong hai class MyFragment1.java và MyFragment2.java phải kế thừa(extends ) lớp Fragment.

File MyFragment1

package com.tuandc.aknosora.fragmentdemo;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MyFragment1 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
View view = inflater.inflate(R.layout.fragment1, container, false);
return view;
}
}

File MyFragment2

package com.tuandc.aknosora.fragmentdemo;

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

public class MyFragment2 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        View view = inflater.inflate(R.layout.fragment2, container, false);
        return view;
    }
}

File MainActivity

package com.tuandc.aknosora.fragmentdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

File Fragment1.xml

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="match_parent"
 android:background="#FF0000"
 android:layout_height="match_parent">
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="fragment 1"
 android:textSize="30dp"
 android:layout_gravity="center"
 />
 </LinearLayout>

File Fragment2.xml

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="match_parent"
 android:background="#AA0099"
 android:layout_height="match_parent">
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="fragment 2"
 android:textSize="30dp"
 android:layout_gravity="center"
 />
 </LinearLayout>

File main_activity.xml

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

<fragment
 android:id="@+id/listFragment"
 class="com.tuadc.akinosora.fragmentdemo.MyFragment1"
 android:layout_width="0dp"
 android:layout_height="match_parent"
 android:layout_weight="1"
 tools:layout="@layout/fragment1">

</fragment>

<fragment
 android:id="@+id/detailFragment"
 class="com.tuadc.akinosora.fragmentdemo.MyFragment2"
 android:layout_width="0dp"
 android:layout_height="match_parent"
 android:layout_weight="1"
 tools:layout="@layout/fragment2">

</fragment>

</LinearLayout>

Kết quả

Kết quả khi chạy

B. Fragment động

• Lớp FragmentManager cho phép thêm, xóa, thay thế fragment trong layout của activity. Sử dụng phương thức getFragmentManager() hoặc getSupportFragmentManager() để lấy ra một đối tượng FragmentManager
• Việc sửa đổi phải được thực hiện trong một giao dịch thông qua lớp FragmentTransaction
• Để làm như thế, thông thường, chúng ta định nghĩa một FrameLayout giữ chỗ trong file layout, sau đó dùng FragmentManager để ghi đè một fragment vào FrameLayout giữ chỗ đó

FragmentManager fm = getFragmentManager();

// Thêm
FragmentTransaction ft_add = fm.beginTransaction();
ft_add.add(R.id.your_placehodler,new YourFragment());
ft_add.commit();

// Thay thế
FragmentTransaction ft_rep = fm.beginTransaction();
ft_rep.replace(R.id.your_placehodler, new YourFragment());
ft_rep.commit();

// Gỡ bỏ
Fragment fragment = fm.findFragmentById(R.id.your_placehodler);
FragmentTransaction ft_remo = fm.beginTransaction();
ft_remo.remove(fragment);
ft_remo.commit();

Chú ý: Ta có thể sử dụng phương thức addToBackStack() để quay lại fragment trước đó (giống như undo).

File MainActivity.java

package com.tuandc.akinosora.fragmentdemo;

import android.os.Bundle;
 import android.support.v7.app.AppCompatActivity;
 import android.view.View;
 import android.widget.Button;

public class MainActivity extends AppCompatActivity {

Button btn;
 android.support.v4.app.FragmentManager fm;

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

fm = getSupportFragmentManager();

btn = (Button) findViewById(R.id.btn_add);
 btn.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 android.support.v4.app.FragmentTransaction ft_add = fm.beginTransaction();
 ft_add.add(R.id.frame_layout, new MyFragment1());
 ft_add.commit();
 }
 });
 }
 }

File main_activity.xml

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

<FrameLayout
 android:id="@+id/frame_layout"
 android:layout_width="match_parent"
 android:layout_height="300dp">
 </FrameLayout>

<Button
 android:id="@+id/btn_add"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="add fragment" />

</LinearLayout>

Kết quả khi nhấn nút Add button thì Fragment1 sẽ được thêm vào.

Kết quả Fragment độngKết quả Fragment động

Như vậy tôi đã giới thiệu với các bạn về Fragment cũng như các sử dụng Fragment trong Android. Cảm ơn các bạn đã theo dõi và hẹn gặp lại các bạn ở các bài tiếp theo.