Fragment trong Android

Trong bài này chúng ta sẽ tìm hiểu một khái niệm mới trong lập trình Android, đó là Fragments. Đây là module được sử dụng rất thường xuyên khi bạn xây dựng một ứng dụng Android thực tiễn, giúp chia màn hình ra thành nhiều phần riêng biệt.

Đầu tiên hãy xem khái niệm flagment là gì đã nhé.

I. Android Fragments là gì?

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

Ta có thể xây dựng multi-pane UI bằng cách kết hợp nhiều fragment. Fragment có riêng các phương thức callback trong vòng đời và chấp nhận các sự kiện đầu vào của chính nó.

Bài viết này được đăng tại [free tuts .net]

Ngoài ra, ta cũng có thể thêm hoặc xóa các fragment trong một activity trong khi activity đang chạy. Trong Android, fragment sẽ hoạt động như một activity phụ và chúng ta có thể sử dụng lại nó trong nhiều activity.

Nói chung, fragment trong Android phải được đưa vào một activity do vòng đời của fragment đó sẽ luôn luôn bị ảnh hưởng bởi vòng đời của activity. Trong trường hợp nếu chúng ta tạm dừng một activity thì tất cả các fragment liên quan đến activity đó cũng sẽ bị dừng lại.

Trong Android có thể chèn fragment vào bố cục activity bằng cách sử dụng phần tử <fragment> và chia bố cục của activity thành các fragment. Ta có thể sửa đổi giao diện của thiết kế ứng dụng khi chạy, và cũng có thể thực hiện một fragment mà không có bất kỳ giao diện người dùng (UI) nào.

Có thể chọn sử dụng hoặc không sử dụng các fragment vào activity. Nhưng nếu sử dụng, nó sẽ cải thiện tính linh hoạt của giao diện người dùng ứng dụng, và giúp điều chỉnh thiết kế ứng dụng dựa trên kích thước thiết bị dễ dàng hơn.

Sau đây là ví dụ về sự khác nhau khi thiết kế nhiều fragment trong một activity để hiển thị chi tiết của một mục trên thiết bị máy tính bảng, và trên thiết bị di động.

Nếu bạn quan sát ví dụ trên cho Máy tính bảng, chúng ta đã xác định activity A có hai fragment. Fragment đầu tiên là hiển thị danh sách các mục và fragment thứ hai là hiển thị chi tiết về mục mà chúng ta đã chọn trong fragment đầu tiên.

Đối với thiết bị cầm tay kích thước nhỏ sẽ không có đủ không gian để hiển thị cả các fragment trong một activity, vì vậy activity A bao gồm fragment đầu tiên để hiển thị danh sách các mục, và activity B bao gồm một fragment khác để hiển thị chi tiết của một mục được chọn trong activity A .

Ví dụ: App GMAIL được thiết kế với nhiều fragment, do đó thiết kế của nó sẽ được thay đổi dựa trên kích thước của thiết bị như máy tính bảng hoặc thiết bị di động.

Table View

Mobile View

II. Vòng đời của Android Fragment

Sau đây là hình ảnh biểu diễn vòng đời của Android fragment trong khi activity đang chạy.

Sau đây là danh sách các phương thức sẽ thực hiện trong vòng đời của fragment trong Android.

III. Ví dụ về Fragment trong Android

Sau đây là ví dụ về việc tạo hai fragment, hai button và hiển thị fragment tương ứng khi nhấp vào button trong ứng dụng Android.

Tạo một ứng dụng Android mới bằng cách sử dụng android studio và đặt tên là Fragment. Nếu bạn chưa biết cách tạo thì hãy xem bài Hello World Android.

Bây giờ ta cần tạo các file layout của fragment ( listitems_info.xml , detail_info.xml ) trong đường dẫn \ res \ layout để hiển thị các fragment đó trong layout chính. Hãy nhấp chuột phải vào folder Layout -> New -> chọn Layout resource file và đặt tên là listitems_info.xml .

Mở file listitems_info.xml và viết code như dưới đây:

Listitems_info.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:layout_height="match_parent">
    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@android:id/list" />
</LinearLayout>

Tạo một file khác tên details_info.xml, mở nó và viết code như dưới đây

details_info.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:layout_height="match_parent"
    android:background="#0079D6">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:layout_marginTop="200px"
        android:layout_marginLeft="200px"
        android:id="@+id/Name"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="200px"
        android:textColor="#ffffff"
        android:id="@+id/Location"/>
</LinearLayout>

package com.tutlane.fragmentsexample;

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

/**
 * Created by tutlane on 06-08-2017.
 */

public class DetailsFragment extends Fragment {
    TextView name,location;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.details_info, container, false);
        name = (TextView)view.findViewById(R.id.Name);
        location = (TextView)view.findViewById(R.id.Location);
        return view;
    }
    public void change(String uname, String ulocation){
        name.setText(uname);
        location.setText(ulocation);
    }
}

package com.tutlane.fragmentsexample;
import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;

/**
 * Created by tutlane on 06-08-2017.
 */
public class ListMenuFragment extends ListFragment {
    String[] users = new String[] { "Suresh","Rohini","Trishika","Praveen","Sateesh","Madhav" };
    String[] location = new String[]{"Hyderabad","Guntur","Hyderabad","Bangalore","Vizag","Nagpur"};
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view =inflater.inflate(R.layout.listitems_info, container, false);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(),
                android.R.layout.simple_list_item_1, users);
        setListAdapter(adapter);
        return view;
    }
    @Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        DetailsFragment txt = (DetailsFragment)getFragmentManager().findFragmentById(R.id.fragment2);
        txt.change("Name: "+ users[position],"Location : "+ location[position]);
        getListView().setSelector(android.R.color.holo_blue_dark);
    }
}

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context="com.tutlane.fragmentsexample.MainActivity">

    <fragment
        android:layout_height="match_parent"
        android:layout_width="350px"
        class="com.tutlane.fragmentsexample.ListMenuFragment"
        android:id="@+id/fragment"/>
    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.tutlane.fragmentsexample.DetailsFragment"
        android:id="@+id/fragment2"/>
</LinearLayout>