Thứ Tư, 27 tháng 7, 2016

Giới thiệu vệ khái niêm Fragment trong Android


Ở bài trước mình đã giới thiệu cho các bạn biết về Tabhost. Ở bài này mình sẽ tiếp tục giới thiệu cho các bạn 1 khái niệm mới nữa đó là Fragment trong lập trình Android.

1. Giới thiệu về Fragment trong Android.

Fragment có thể được hiểu như các “mảnh ghép” của giao diện ứng dụng – là một phần của Activity. Mỗi Activity có thể chứa một hoặc nhiều “mảnh ghép” này trong giao diện của mình và mỗi “mảnh ghép” lại có thể được chèn vào nhiều Activity khác nhau. Điều này cho phép giảm thiểu tối đa sự trùng lặp về mã nguồn trong việc tạo giao diện ứng dụng thích nghi được với nhiều loại kích cỡ và hướng màn hình. Các ứng dụng viết cho các phiên bản hệ điều hành thấp hơn cũng có thể sử dụng Fragment bằng cách sử dụng “thư viện hỗ trợ” của Android (Android Support Library). Thư viện này cung cấp các tính năng của các API mới cho các ứng dụng viết cho API mức thấp hơn, trong đó Android Support Library v4 cho phép các ứng dụng viết choAPI 4 (Android 1.6) trở lên sử dụng được Fragment và nhiều tính năng khác của các API mức cao hơn.

2. Ví dụ

sau đây mình sẽ hướng dẫn các bạn làm 1 demo về fragment như sau. Khi các bạn click vào button nào thì nó sẽ gọi ra fragment tương ứng để hiển thị lên màn hình


B1. Tạo 1 project mới có tên FragmentDemo với cấu trúc như sau.


B2. Các bạn thiết kế màn chính với 2 button là fragment1 và fragment2 như sau.




<LinearLayout xmlns:android="schemas.android.com/apk/res/android"
xmlns:tools="schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<TextView
android:textColor="#DD00"
android:layout_marginTop="20dp"
android:textSize="25sp"
android:layout_gravity="center"
android:text="Demo Fragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<LinearLayout
android:layout_marginTop="15dp"
android:gravity="center"
android:id="@+id/lnButton"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="50dp">

<Button
android:id="@+id/btnFragment1"
android:background="#15cc31"
android:text="Fragment1"
android:layout_width="100dp"
android:layout_height="fill_parent" />

<Button
android:id="@+id/btnFragment2"
android:background="#DD00"
android:layout_marginLeft="25dp"
android:text="Fragment2"
android:layout_width="100dp"
android:layout_height="fill_parent" />

</LinearLayout>

<FrameLayout
android:layout_marginTop="15dp"
android:id="@+id/fmContent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"></FrameLayout>

</LinearLayout>

Xem thêm: Tài liệu tu hoc lap trinh android ở nhà Cơ Bản

B3. Các bạn tạo 2 fragment. 1 fragment có tên là GreenFragment và 1 fragment có tên là RedFragment. Các bạn tạo fragment theo cách như sau.


sau đó các bạn đặt tên như mình đã nói ở trên. Chú ý bỏ chọn 2 phần Include như trong hình, và sau đó nhấn Finish để hoàn tất.


tiếp tục các bạn tạo RedFragment tương tự như trên. Sau khi đã tạo xong, bạn tiến hành thiết kế layout cho 2 fragment 1 cách bình thường và tùy ý các bạn. Ở trên mình chỉ để mỗi 1 fragment 1 màu khác nhau cho dễ phân biệt.

B4. Các bạn tiến hành sửa code trong main như sau.



package devpro.com.fragmentdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;


public class MainActivity extends FragmentActivity implements View.OnClickListener {
Button btnFragment1, btnFragment2;

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

// khởi tạo 2 button
btnFragment1 = (Button) findViewById(R.id.btnFragment1);
btnFragment2 = (Button) findViewById(R.id.btnFragment2);

// Gọi hàm này để khi chạy lần đầu tiên màn hình sẽ hiển thị GreenFragment có màu xanh
callFragment(new GreenFragment());

// Bắt sự kiện click cho 2 button
btnFragment1.setOnClickListener(this);
btnFragment2.setOnClickListener(this);
}

// Hàm gọi Fragment để khi click vào thì sẽ gọi Fragment tương ứng.
// Hàm này có tham số truyền vào 1 Fragment
public void callFragment(Fragment fragment) {
FragmentManager manager = getSupportFragmentManager();
FragmentTransaction transaction = manager.beginTransaction();
//Khi được goi, fragment truyền vào sẽ thay thế vào vị trí FrameLayout trong Activity chính
transaction.replace(R.id.fmContent, fragment);
transaction.commit();
}

// Hàm sự kiện onClick cho 2 button
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.btnFragment1:
callFragment(new GreenFragment());
break;
case R.id.btnFragment2:
callFragment(new RedFragment());
break;
}
}
}

Mình đã chú thích rất rõ ràng trong code. Cũng không quá khó hiểu đúng không. Sau khi hoàn thành, các bạn tiến hành chạy project và xem kết quả.

Trên đây mình đã giới thiệu và hướng dẫn các bạn hiểu hơn về fragment trong Android. Ở những phần tiếp theo mình sẽ hướng dẫn các bạn về ViewPager. Các bạn chú ý theo dõi và chúc các bạn thành công.

Gợi ý xem thêm:

1 nhận xét: