Tìm hiểu Fragment trong Android

Trong Android, Fragment là một phần của hoạt động cho phép thiết kế hoạt động theo mô-đun hơn. Sẽ không sai nếu chúng ta nói rằng một phân mảnh là một loại hoạt động con. Nó đại diện cho một hành vi hoặc một phần của giao diện người dùng trong một Hoạt động. Chúng ta có thể kết hợp nhiều Phân đoạn trong Hoạt động đơn lẻ để tạo giao diện người dùng nhiều bảng và sử dụng lại Phân đoạn trong nhiều Hoạt động. Chúng tôi luôn cần nhúng Phân đoạn vào một hoạt động và vòng đời của phân đoạn bị ảnh hưởng trực tiếp bởi vòng đời của hoạt động máy chủ.

Fragment trong Android là phần mô-đun của thiết kế hoạt động và chúng được sử dụng để thể hiện hành vi của giao diện người dùng (UI) trong một hoạt động. Bằng cách sử dụng các phân mảnh, chúng ta có thể tạo ra các thiết kế UI linh hoạt có thể điều chỉnh dựa trên kích thước màn hình thiết bị như máy tính bảng, điện thoại thông minh.

Chúng tôi có thể xây dựng giao diện người dùng nhiều ngăn bằng cách kết hợp nhiều phân đoạn trong một hoạt động duy nhất và chúng tôi có thể sử dụng lại cùng một phân đoạn trong nhiều hoạt động . Đoạn có các cuộc gọi lại vòng đời của riêng nó và chấp nhận các sự kiện đầu vào của riêng nó.

Chúng tôi có thể thêm hoặc xóa các phân đoạn trong một hoạt động khi  hoạt động  đang chạy. Trong android, phân mảnh sẽ hoạt động như một hoạt động con và chúng ta có thể sử dụng lại nó trong nhiều  hoạt động .

Nói chung lập trình android cơ bản, phân mảnh phải được bao gồm trong một  hoạt động  do đó vòng đời của phân mảnh sẽ luôn bị ảnh hưởng bởi  vòng đời hoạt động của máy chủ  . Trong trường hợp nếu chúng tôi tạm dừng một  hoạt động , tất cả các đoạn liên quan đến một  hoạt động  cũng sẽ bị dừng lại.

Trong android, chúng ta có thể chèn phân đoạn vào bố cục hoạt động bằng cách sử dụng phần tử <fragment> và bằng cách chia bố cục hoạt động thành các đoạn, chúng ta có thể sửa đổi giao diện của thiết kế ứng dụng trong thời gian chạy. Chúng tôi cũng có thể triển khai một phân đoạn mà không cần có bất kỳ giao diện người dùng (UI) nào.

Việc sử dụng các phân đoạn vào hoạt động là tùy chọn nhưng bằng cách làm này, nó sẽ cải thiện tính linh hoạt của giao diện người dùng ứng dụng của chúng tôi và giúp điều chỉnh thiết kế ứng dụng của chúng tôi dựa trên kích thước thiết bị dễ dàng hơn.

Sau đây là ví dụ về việc xác định nhiều phân đoạn trong một hoạt động đơn lẻ cho thiết kế máy tính bảng để hiển thị chi tiết của một mục mà chúng tôi đã chọn trong ứng dụng, nhưng được tách riêng cho thiết kế di động.

• Tìm hiểu Activity trong Android
• Tìm hiểu Service trong Android

Chúng ta có thể tạo Fragment bằng cách mở rộng lớp Fragment hoặc bằng cách chèn Fragment vào bố cục Activity của mình bằng cách khai báo Fragment trong tệp bố cục của hoạt động, dưới dạng phần tử <fragment>. Chúng ta có thể thao tác từng Fragment một cách độc lập, chẳng hạn như thêm hoặc bớt chúng.

Trong khi thực hiện Giao dịch phân mảnh, chúng ta có thể thêm Phân mảnh vào ngăn xếp phía sau do Hoạt động quản lý. back stack cho phép chúng tôi đảo ngược giao dịch Fragment khi nhấn nút Back của thiết bị. Ví dụ, nếu chúng ta thay thế một Fragment và thêm nó vào back stack thì khi nhấn nút Back trên thiết bị, nó sẽ hiển thị Fragment trước đó.

Một số tính chất về Fragment trong Android

• Fragment được phát triển từ Api 11 trở lên
• Chúng tôi có thể thêm, thay thế hoặc xóa Fragment trong một Activity khi hoạt động đang chạy. Để thực hiện các thao tác này, chúng ta cần một Bố cục (Bố cục Tương đối, FrameLayout hoặc bất kỳ bố cục nào khác) trong tệp xml và sau đó thay thế bố cục đó bằng Fragment được yêu cầu.
• Các phân đoạn có bố cục riêng và hành vi riêng với các lệnh gọi lại vòng đời của chính nó.
• Fragment có thể được sử dụng trong nhiều hoạt động.
• Chúng tôi cũng có thể kết hợp nhiều Phân đoạn trong một hoạt động để xây dựng giao diện người dùng đa mặt phẳng.

Ví dụ cơ bản sử dụng Fragment trong Android

Bước 1: Tạo layout chứa fragment

<fragment

android:id="@+id/fragments"

android:layout_width="match_parent"

android:layout_height="match_parent" />

Bước 2: Tạo một class kế thừa từ Fragment

public class FirstFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// Inflate the layout for this fragment

return inflater.inflate(R.layout.fragment_first, container, false);

}

}

Ở đây, tham số phồng là một LayoutInflater được sử dụng để thổi phồng bố cục, tham số vùng chứa là ViewGroup mẹ (từ bố cục của hoạt động) trong đó bố cục Fragment của chúng tôi sẽ được chèn vào.

Tham số saveInstanceState là một Gói cung cấp dữ liệu về phiên bản trước của Fragment. Phương thức Inflate () có ba đối số, thứ nhất là bố cục tài nguyên mà chúng ta muốn thổi phồng, thứ hai là ViewGroup là đối tượng gốc của bố cục tăng cao. Việc chuyển vùng chứa là quan trọng để hệ thống áp dụng các tham số bố cục cho chế độ xem gốc của bố cục được thổi phồng, được chỉ định bởi chế độ xem gốc mà nó sẽ đi và tham số thứ ba là một giá trị boolean cho biết liệu bố cục được thổi phồng có nên được đính kèm với ViewGroup (tham số thứ hai) trong thời gian lạm phát.

Tạo một project với Fragment

Bước 1: Tạo một dự án mới và đặt tên là FragmentExample

Bước 2: Mở res -> layout -> activity_main.xml (hoặc) main.xml và thêm mã sau:

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

android:orientation="vertical"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity">

<!-- display two Button's and a FrameLayout to replace the Fragment's  -->

<Button

android:id="@+id/firstFragment"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/button_background_color"

android:text="First Fragment"

android:textColor="@color/white"

android:textSize="20sp" />

<Button

android:id="@+id/secondFragment"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:background="@color/button_background_color"

android:text="Second Fragment"

android:textColor="@color/white"

android:textSize="20sp" />

<FrameLayout

android:id="@+id/frameLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginTop="10dp" />

</LinearLayout>

Bước 3: Open   src -> package -> MainActivity.java

Trong bước này, chúng tôi mở MainActivity và thêm mã để bắt đầu Nút. Sau đó, chúng tôi thực hiện sự kiện setOnClickListener trên cả hai nút. Khi nhấp vào Nút đầu tiên, chúng tôi thay thế Phân đoạn đầu tiên và khi nhấp vào Nút thứ hai, chúng tôi thay thế Phân đoạn thứ hai bằng bố cục (FrameLayout). 

Để thay thế một Fragment bằng FrameLayout, trước hết chúng ta tạo một Fragment Manager và sau đó bắt đầu giao dịch bằng Fragment Transaction và cuối cùng là thay thế Fragment bằng bố cục tức là FrameLayout.

public class MainActivity extends AppCompatActivity {

Button firstFragment, secondFragment;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// get the reference of Button's

firstFragment = (Button) findViewById(R.id.firstFragment);

secondFragment = (Button) findViewById(R.id.secondFragment);

// perform setOnClickListener event on First Button

firstFragment.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// load First Fragment

loadFragment(new FirstFragment());

}

});

// perform setOnClickListener event on Second Button

secondFragment.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// load Second Fragment

loadFragment(new SecondFragment());

}

});

}

private void loadFragment(Fragment fragment) {

// create a FragmentManager

FragmentManager fm = getFragmentManager();

// create a FragmentTransaction to begin the transaction and replace the Fragment

FragmentTransaction fragmentTransaction = fm.beginTransaction();

// replace the FrameLayout with new Fragment

fragmentTransaction.replace(R.id.frameLayout, fragment);

fragmentTransaction.commit(); // save the changes

}

}

Bước 4: Bây giờ chúng ta cần 2 phân mảnh và 2 bố cục xml. Vì vậy, hãy tạo hai phân đoạn bằng cách nhấp chuột phải vào thư mục gói của bạn và tạo các lớp và đặt tên chúng là FirstFragment và SecondFragment và thêm mã sau tương ứng.

FirstFragment.class

public class FirstFragment extends Fragment {

View view;

Button firstButton;

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// Inflate the layout for this fragment

view = inflater.inflate(R.layout.fragment_first, container, false);

// get the reference of Button

firstButton = (Button) view.findViewById(R.id.firstButton);

// perform setOnClickListener on first Button

firstButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// display a message by using a Toast

Toast.makeText(getActivity(), "First Fragment", Toast.LENGTH_LONG).show();

}

});

return view;

}

}

SecondFragment.class

public class SecondFragment extends Fragment {

View view;

Button secondButton;

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// Inflate the layout for this fragment

view = inflater.inflate(R.layout.fragment_second, container, false);

// get the reference of Button

secondButton = (Button) view.findViewById(R.id.secondButton);

// perform setOnClickListener on second Button

secondButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// display a message by using a Toast

Toast.makeText(getActivity(), "Second Fragment", Toast.LENGTH_LONG).show();

}

});

return view;

}

}

Bước 5: Bây giờ tạo 2 bố cục xml bằng cách nhấp chuột phải vào res / layout -> New -> Layout Resource File và đặt tên cho chúng là segment_first vàgment_second và thêm đoạn mã sau vào các tệp tương ứng.

Ở đây, chúng tôi sẽ thiết kế giao diện người dùng đơn giản cơ bản bằng cách sử dụng TextView và Button trong cả xml’s.

fragment_first.xml

<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="com.abhiandroid.fragmentexample.FirstFragment">

<!--TextView and Button displayed in First Fragment -->

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_marginTop="100dp"

android:text="This is First Fragment"

android:textColor="@color/black"

android:textSize="25sp" />

<Button

android:id="@+id/firstButton"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:layout_marginLeft="20dp"

android:layout_marginRight="20dp"

android:background="@color/green"

android:text="First Fragment"

android:textColor="@color/white"

android:textSize="20sp"

android:textStyle="bold" />

</RelativeLayout>

fragment_second.xml

<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="com.abhiandroid.fragmentexample.SecondFragment">

<!--TextView and Button displayed in Second Fragment -->

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_marginTop="100dp"

android:text="This is Second Fragment"

android:textColor="@color/black"

android:textSize="25sp" />

<Button

android:id="@+id/secondButton"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:layout_marginLeft="20dp"

android:layout_marginRight="20dp"

android:background="@color/green"

android:text="Second Fragment"

android:textColor="@color/white"

android:textSize="20sp"

android:textStyle="bold" />

</RelativeLayout>