Trang này được dịch bởi Cloud Translation API.

Kiến thức cơ bản về Kotlin cho Android 03.1: Tạo một mảnh

Lớp học lập trình này thuộc khoá học Kiến thức cơ bản về Kotlin cho Android. Bạn sẽ nhận được nhiều giá trị nhất qua khoá học này nếu thực hiện các lớp học lập trình theo trình tự. Tất cả lớp học lập trình của khoá học đều được liệt kê trên trang đích của lớp học lập trình Kiến thức cơ bản về cách tạo ứng dụng Android bằng Kotlin.

Trong lớp học lập trình này, bạn sẽ tìm hiểu về các mảnh và tạo một mảnh trong ứng dụng khởi động có tên là AndroidTrivia. Trong lớp học lập trình tiếp theo, bạn sẽ tìm hiểu thêm về hoạt động điều hướng và tiếp tục làm việc trên ứng dụng AndroidTrivia.

Kiến thức bạn cần có

Kiến thức cơ bản về Kotlin
Cách tạo các ứng dụng Android cơ bản trong Kotlin
Cách sử dụng bố cục

Kiến thức bạn sẽ học được

Cách thêm một Mảnh tĩnh vào ứng dụng

Bạn sẽ thực hiện

Tạo một mảnh bên trong một hoạt động.

Trong 3 lớp học lập trình tạo nên bài học này, bạn sẽ làm việc trên một ứng dụng có tên là AndroidTrivia. Ứng dụng hoàn chỉnh là một trò chơi mà người dùng trả lời 3 câu hỏi đố vui về hoạt động lập trình Android. Nếu trả lời đúng cả 3 câu hỏi, người dùng sẽ thắng trò chơi và có thể chia sẻ kết quả.

Ứng dụng AndroidTrivia minh hoạ các mẫu và chế độ điều khiển điều hướng. Ứng dụng này có một số thành phần:

Trong màn hình tiêu đề (xuất hiện ở bên trái trong ảnh chụp màn hình ở trên), người dùng bắt đầu chơi trò chơi.
Trong màn hình trò chơi có câu hỏi (xuất hiện ở giữa phía trên), người dùng chơi trò chơi và gửi câu trả lời.
Ngăn điều hướng (xuất hiện ở bên phải phía trên) trượt ra từ bên cạnh ứng dụng và chứa một trình đơn có tiêu đề. Biểu tượng ngăn sẽ mở ngăn điều hướng. Trình đơn ngăn kéo điều hướng chứa một đường liên kết đến trang Giới thiệu và một đường liên kết đến các quy tắc của trò chơi.

Phần trên cùng của ứng dụng hiển thị một khung hiển thị có màu gọi là thanh ứng dụng, còn được gọi là thanh thao tác.

Trong lớp học lập trình này, bạn sẽ làm việc với một ứng dụng khởi đầu cung cấp mã mẫu và các lớp mảnh mà bạn cần khi hoàn tất ứng dụng Trivia.

Tải dự án AndroidTrivia-Starter của Android Studio xuống.
Mở dự án trong Android Studio rồi chạy ứng dụng. Khi mở, ứng dụng này không làm gì ngoài việc hiển thị tên ứng dụng và một màn hình trống.
Trong ngăn Dự án của Android Studio, hãy mở chế độ xem Dự án: Android để khám phá các tệp dự án. Mở thư mục app > java để xem lớp MainActivity và các lớp phân đoạn.
Mở thư mục res > layout rồi nhấp đúp vào activity_main.xml. Tệp activity_main.xml sẽ xuất hiện trong Layout Editor.
Nhấp vào thẻ Thiết kế. Component Tree (Cây thành phần) cho tệp activity_main.xml cho thấy bố cục gốc dưới dạng LinearLayout dọc.

Trong một bố cục tuyến tính dọc, tất cả khung hiển thị con trong bố cục đều được căn chỉnh theo chiều dọc.

Một mảnh biểu thị một hành vi hoặc một phần giao diện người dùng (UI) trong một hoạt động. Bạn có thể kết hợp nhiều mảnh trong một hoạt động để tạo giao diện người dùng nhiều ngăn và có thể sử dụng lại một mảnh trong nhiều hoạt động.

Hãy coi mỗi mảnh là một phần mô-đun của hoạt động, như một "hoạt động phụ" mà bạn cũng có thể sử dụng trong các hoạt động khác:

Mỗi mảnh có vòng đời riêng và nhận các sự kiện đầu vào riêng.
Bạn có thể thêm hoặc xoá mảnh trong khi hoạt động đang chạy.
Mỗi mảnh được xác định trong một lớp (class) Kotlin.
Giao diện người dùng của một mảnh được xác định trong tệp bố cục XML.

Ứng dụng AndroidTrivia có một hoạt động chính và một số mảnh. Hầu hết các mảnh và tệp bố cục của chúng đã được xác định cho bạn. Trong nhiệm vụ này, bạn sẽ tạo một mảnh và thêm mảnh đó vào hoạt động chính của ứng dụng.

Bước 1: Thêm một lớp mảnh

Ở bước này, bạn sẽ tạo một lớp TitleFragment trống. Bắt đầu bằng cách tạo một lớp Kotlin cho một mảnh mới:

Trong Android Studio, hãy nhấp vào bất kỳ vị trí nào bên trong ngăn Project (Dự án) để lấy lại tiêu điểm cho các tệp dự án. Ví dụ: nhấp vào thư mục com.example.android.navigation.
Chọn File > New > Fragment > Fragment (Blank) (Tệp > Mới > Mảnh > Mảnh (Trống)).
Đối với tên mảnh, hãy sử dụng TitleFragment. Xoá tất cả hộp đánh dấu, bao gồm cả create Layout XML (tạo XML bố cục), include fragment factory methods (bao gồm các phương thức của nhà máy mảnh) và include interface callbacks (bao gồm các lệnh gọi lại giao diện).
Nhấp vào Hoàn tất.
Mở tệp mảnh TitleFragment.kt nếu tệp này chưa được mở. Lớp này chứa phương thức onCreateView(). Đây là một trong những phương thức được gọi trong vòng đời của một mảnh.
Trong onCreateView(), hãy xoá phần return TextView(activity).apply, bao gồm cả dòng bắt đầu bằng setText. Hàm onCreateView() chỉ còn lại mã sau:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

Tạo một đối tượng liên kết

Đoạn mã này sẽ không được biên dịch ngay. Để biên dịch mảnh, bạn cần tạo một đối tượng liên kết và tăng cường khung hiển thị của mảnh (tương đương với việc sử dụng setContentView() cho một hoạt động).

Trong phương thức onCreateView() trong TitleFragment.kt, hãy tạo một biến binding (val binding).
Để mở rộng khung hiển thị của mảnh, hãy gọi phương thức DataBindingUtil.inflate() trên đối tượng Binding của mảnh (là FragmentTitleBinding).

Truyền 4 tham số vào phương thức:

inflater, là LayoutInflater dùng để tăng cường bố cục liên kết.
Tài nguyên bố cục XML của bố cục cần tăng cường. Sử dụng một trong những bố cục đã được xác định cho bạn, R.layout.fragment_title.
container cho đối tượng là cha mẹ ViewGroup. (Tham số này không bắt buộc.)
false cho giá trị attachToParent.

Chỉ định giá trị liên kết mà DataBindingUtil.inflate trả về cho biến binding.
Trả về binding.root từ phương thức này, trong đó có khung hiển thị được tăng cường. Giờ đây, phương thức onCreateView() của bạn có dạng như đoạn mã sau:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
   val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
           R.layout.fragment_title,container,false)
   return binding.root
   }

Bước 2: Thêm mảnh mới vào tệp bố cục chính

Trong bước này, bạn sẽ thêm TitleFragment vào tệp bố cục activity_main.xml của ứng dụng.

Mở res > layout > activity_main.xml rồi nhấp vào thẻ Text (Văn bản) để xem mã XML bố cục.
Trong phần tử LinearLayout hiện có, hãy thêm một phần tử fragment.
Đặt mã nhận dạng của mảnh thành titleFragment.
Đặt tên của mảnh thành đường dẫn đầy đủ của lớp mảnh, trong trường hợp này là com.example.android.navigation.TitleFragment.
Đặt chiều rộng và chiều cao của bố cục thành match_parent.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <fragment
                android:id="@+id/titleFragment"
                android:name="com.example.android.navigation.TitleFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />
        </LinearLayout>

</layout>

Chạy ứng dụng. Mảnh này đã được thêm vào màn hình chính.

Dự án Android Studio: AndroidTriviaFragment

Trong lớp học lập trình này, bạn đã thêm một mảnh vào ứng dụng AndroidTrivia. Bạn sẽ tiếp tục làm việc trên ứng dụng này trong 2 lớp học lập trình tiếp theo của bài học này.

Mảnh là một phần mô-đun của một hoạt động.
Mỗi mảnh có vòng đời riêng và nhận các sự kiện đầu vào riêng.
Sử dụng thẻ <fragment> để xác định bố cục cho mảnh trong tệp bố cục XML.
Tăng cường bố cục cho một mảnh trong onCreateView().
Bạn có thể thêm hoặc xoá mảnh trong khi hoạt động đang chạy.

Khoá học của Udacity:

Phát triển ứng dụng Android bằng Kotlin

Tài liệu dành cho nhà phát triển Android:

Phần này liệt kê các bài tập về nhà cho học viên của lớp học lập trình này trong phạm vi khoá học có người hướng dẫn. Người hướng dẫn phải thực hiện các việc sau đây:

Giao bài tập về nhà nếu cần.
Trao đổi với học viên về cách nộp bài tập về nhà.
Chấm điểm bài tập về nhà.

Người hướng dẫn có thể sử dụng các đề xuất này ít hoặc nhiều tuỳ ý và nên giao cho học viên bất kỳ bài tập về nhà nào khác mà họ cảm thấy phù hợp.

Nếu bạn đang tự học các lớp học lập trình, hãy sử dụng những bài tập về nhà này để kiểm tra kiến thức của mình.

Trả lời các câu hỏi sau

Câu hỏi 1

Đâu là một số điểm khác biệt giữa mảnh và hoạt động? Chọn tất cả những nhận định đúng.

Khi tạo một mảnh, bạn sẽ mở rộng bố cục trong phương thức onCreateView(). Khi tạo một hoạt động, bạn sẽ tăng cường bố cục trong onCreate().
Một hoạt động có bố cục riêng, nhưng một mảnh không thể có bố cục riêng.
Một hoạt động có vòng đời riêng, nhưng một mảnh thì không.
Khi mở rộng bố cục cho một mảnh hoặc một hoạt động, bạn có thể tham chiếu bố cục đó dưới dạng R.layout.layoutname.

Câu hỏi 2

Câu nào sau đây là đúng về các mảnh? Hãy chọn mọi câu trả lời phù hợp.

Bạn có thể sử dụng một mảnh trong nhiều hoạt động.
Một hoạt động có thể có nhiều mảnh.
Sau khi bạn xác định một mảnh trong một lớp Kotlin, mảnh đó sẽ tự động được thêm vào tệp bố cục activity_main.xml.
Sử dụng thẻ <fragment> để xác định vị trí chèn mảnh trong tệp bố cục.

Bắt đầu bài học tiếp theo: 3.2 Xác định đường dẫn điều hướng

Để biết đường liên kết đến các lớp học lập trình khác trong khoá học này, hãy xem trang đích của lớp học lập trình Kiến thức cơ bản về cách tạo ứng dụng Android bằng Kotlin.

Kiến thức cơ bản về Kotlin cho Android 03.1: Tạo một mảnh Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.