Hướng dẫn sử dụng Android Fragment
Công ty Vĩnh Cửu tuyển dụng lập trình viên Java
Chú ý: Bài viết này hướng dẫn về AndroidFragment, trước nó là một phần trong tài liệu "Hướng dẫn lập trình android cho người mới bắt đầu - Các ví dụ cơ bản". Tôi quyết định tách nó ra thành một tài liệu riêng.

1- Android Fragment là gì?

Để thiết kế một giao diện, bạn có thể thiết kế nhiều mảnh (fragment) và ghép lại với nhau. Trong ví dụ này tôi sẽ hướng dẫn bạn làm việc với fragment.
Và sử lý sự kiện tương tác giữa 2 fragment

2- Ví dụ sử dụng fragment

Tạo mới một Project có tên " AndroidFragment"
Chuẩn bị một file ảnh, chẳng hạn andrea.jpg.
  • andrea.jpg
Copy và paste file andrea.jpg vào thư mục mipmap của project.
Android Studio sẽ bắt bạn chọn chất lượng ảnh sẽ được tạo ra. Chọn mipmap-mdpi đây là các ảnh với chất lượng trung bình.
Tiếp theo chúng ta tạo file activity_top.xml:
Trên Android Studio chọn:
  • File/New/Layout resource file
Nhập vào:
  • File name: activity_top.xml
  • Root element: RelativeLayout
  • Directory name: layout
Tương tự tạo file activity_bottom.xml

Thiết kế giao diện trên activity_top.xml

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

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/input_top_image_text"
        android:layout_alignParentTop="true"
        android:layout_marginTop="15dp"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/input_bottom_image_text"
        android:layout_below="@+id/input_top_image_text"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="15dp"
        android:layout_marginRight="10dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Apply"
        android:id="@+id/button_apply"
        android:layout_below="@+id/input_bottom_image_text"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

Thiết kế giao diện trên activity_bottom.xml

SLIDER thiết kế:
activity_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="@mipmap/andrea">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/top_image_text"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:textColor="#fff" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/bottom_image_text"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:textColor="#fff" />


</RelativeLayout>
Mỗi Fragment sẽ tương ứng với một Java class. Class này mở rộng từ class Fragment.
Tạo 2 class TopFragmentBottomFragment và sửa code của nó.
TopFragment .java
package org.o7planning.androidfragment;


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 TopFragment  extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        // Đọc file xml tạo ra đối tượng View.

        // inflate(@LayoutRes int resource, @Nullable ViewGroup root, boolean attachToRoot)

        View view= inflater.inflate(R.layout.activity_top, container, false);
        return view;
    }

}
BottomFragment.java
package org.o7planning.androidfragment;

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 BottomFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        // Đọc file xml tạo ra đối tượng View.


        // inflate(@LayoutRes int resource, @Nullable ViewGroup root, boolean attachToRoot)
        View view= inflater.inflate(R.layout.activity_bottom, container, false);
        return view;
    }

}
Và bây giờ, bạn cần bố trí các fragment trên giao diện chính của Activity. Mở file activity_main.xml
Chọn TopFragment:
Tiếp theo kéo thả BottomFragment vào màn hình chính.
Thay đổi ID cho các fragment.
  • top_fragment
  • bottom_fragment
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
   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="org.o7planning.androidfragment.MainActivity">

   <fragment
       android:layout_width="fill_parent"
       android:layout_height="170dp"
       android:name="org.o7planning.androidfragment.TopFragment"
       android:id="@+id/top_fragment"
       android:layout_alignParentTop="true"
       android:layout_centerHorizontal="true" />

   <fragment
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:name="org.o7planning.androidfragment.BottomFragment"
       android:id="@+id/bottom_fragment"
       android:layout_alignParentBottom="true"
       android:layout_alignParentLeft="true"
       android:layout_alignParentStart="true"
       android:layout_alignRight="@+id/top_fragment"
       android:layout_alignEnd="@+id/top_fragment"
       android:layout_below="@+id/top_fragment" />
   
</RelativeLayout>
OK, bây giờ bạn cần phải sửa đổi code của 3 class MainActivity, TopFragment, BottomFragment để sử lý các sự kiện
MainActivity.java
package org.o7planning.androidfragment;

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.activity_main);

    }


    public void showText(String topImageText, String bottomImageText) {
        BottomFragment bottomFragment
                = (BottomFragment) this.getSupportFragmentManager()
                .findFragmentById(R.id.bottom_fragment);
        bottomFragment.showText(topImageText, bottomImageText);
    }

}
TopFragment.java
package org.o7planning.androidfragment;


import android.content.Context;
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;
import android.widget.Button;
import android.widget.EditText;

public class TopFragment extends Fragment {

    private EditText inputTopImageText;
    private EditText inputBottomImageText;

    private MainActivity mainActivity;


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

 
        // Đọc file xml tạo ra đối tượng View.

        // inflate(@LayoutRes int resource, @Nullable ViewGroup root, boolean attachToRoot)
        View view = inflater.inflate(R.layout.activity_top, container, false);

        inputTopImageText = (EditText) view.findViewById(R.id.input_top_image_text);
        inputBottomImageText = (EditText) view.findViewById(R.id.input_bottom_image_text);

        Button applyButton = (Button) view.findViewById(R.id.button_apply);

        applyButton.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                applyText();
            }
        });

        return view;
    }


    //  Phương thức này được gọi sau khi Fragment được ghép vào Activity.
    @Override
    public void onAttach(Context context) {
        super.onAttach(context);

        if (context instanceof MainActivity) {
            this.mainActivity = (MainActivity) context;
        }
    }


    private void applyText() {
        String topText = this.inputTopImageText.getText().toString();
        String bottomText = this.inputBottomImageText.getText().toString();

        this.mainActivity.showText(topText, bottomText);
    }
}
BottomFragment.java
package org.o7planning.androidfragment;

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;
import android.widget.TextView;

public class BottomFragment extends Fragment {

    private TextView topText;
    private TextView bottomText;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

 
        // Đọc file xml tạo ra đối tượng View.

        // inflate(@LayoutRes int resource, @Nullable ViewGroup root, boolean attachToRoot)
        View view = inflater.inflate(R.layout.activity_bottom, container, false);

        topText = (TextView) view.findViewById(R.id.top_image_text);
        bottomText = (TextView) view.findViewById(R.id.bottom_image_text);

        return view;
    }


    public void showText(String topImageText, String bottomImageText) {
        topText.setText(topImageText);
        bottomText.setText(bottomImageText);
    }
}
Chạy ứng dụng: