Tạo ứng dụng Thiệp sinh nhật

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.

1. Giới thiệu

Trong lớp học lập trình này, bạn sẽ tạo một ứng dụng Android đơn giản có khả năng hiển thị văn bản. Bạn có thể định vị văn bản trên màn hình bằng cách hiểu thêm về thành phần Giao diện người dùng (UI) trong Android.

Điều kiện tiên quyết

  • Cách tạo ứng dụng mới trong Android Studio.
  • Cách chạy ứng dụng trong trình mô phỏng hoặc trên thiết bị Android.

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

  • Ví dụ về phần tử giao diện người dùng: ViewsViewGroups.
  • Cách hiển thị văn bản trong TextView trong một ứng dụng.
  • Cách đặt thuộc tính, chẳng hạn như văn bản, phông chữ và lề trên TextView.

Sản phẩm bạn sẽ tạo ra

  • Ứng dụng Android hiển thị lời chào sinh nhật ở định dạng văn bản.

Đây là giao diện của ứng dụng khi bạn hoàn tất.

dec50a075480d2ff.png

Bạn cần có

  • Một máy tính đã cài đặt Android Studio.

2. Thiết lập ứng dụng Chúc mừng sinh nhật

Tạo dự án Hoạt động trống (Empty Activity)

  1. Để bắt đầu, hãy tạo một dự án Kotlin mới trong Android Studio bằng mẫu Empty Activity (Hoạt động trống).
  2. Đặt tên ứng dụng là "Happy Birthday" (Chúc mừng sinh nhật) với cấp độ API tối thiểu là 19 (KitKat).

Quan trọng: Nếu bạn chưa quen tạo dự án mới trong Android Studio, vui lòng xem phần Tạo và chạy ứng dụng Android đầu tiên để biết thông tin chi tiết.

30a171ff53cba940.png

  1. Chạy ứng dụng. Ứng dụng sẽ giống như ảnh chụp màn hình dưới đây.

7253111e53c87473.png

Khi bạn tạo ứng dụng Happy Birthday (Chúc mừng sinh nhật) này bằng mẫu Empty Activity (Hoạt động trống), Android Studio đã thiết lập tài nguyên cho ứng dụng Android cơ bản, bao gồm cả thông báo "Hello, World!" (Xin chào thế giới!) ở giữa màn hình. Trong lớp học lập trình này, bạn sẽ tìm hiểu cách thông điệp này có mặt ở đó, cách thay đổi nội dung thông điệp để trở thành lời chào mừng sinh nhật, cũng như cách thêm và định dạng các thông điệp bổ sung.

Giới thiệu giao diện người dùng

Giao diện người dùng (UI) của một ứng dụng là những gì bạn thấy trên màn hình: văn bản, hình ảnh, nút lệnh và nhiều loại thành phần khác. Đó là cách ứng dụng hiển thị nội dung cho người dùng và cách người dùng tương tác với ứng dụng.

Mỗi phần tử trong số này được gọi là View. Hầu hết nội dung bạn thấy trên màn hình ứng dụng là một View. Views có thể mang tính tương tác, chẳng hạn như nút có thể nhấp hoặc trường nhập có thể chỉnh sửa.

Trong lớp học lập trình này, bạn sẽ làm việc với một loại View dùng để hiển thị văn bản và được gọi là TextView.

Views trong ứng dụng Android không chỉ tự nổi trên màn hình. Views có mối liên hệ với nhau. Ví dụ: hình ảnh có thể nằm cạnh văn bản và các nút có thể tạo thành một hàng. Để sắp xếp Views, hãy đưa chúng vào một vùng chứa. ViewGroup là một vùng chứa của các đối tượng View và chịu trách nhiệm sắp xếp Views bên trong đó. Cách sắp xếp hay còn gọi là bố cục có thể thay đổi tuỳ vào kích thước và tỷ lệ khung hình của màn hình thiết bị Android mà ứng dụng đang chạy và bố cục có thể điều chỉnh để thích hợp với thiết bị ở chế độ dọc hoặc ngang.

Một loại ViewGroupConstraintLayout, giúp bạn sắp xếp Views bên trong thẻ theo cách linh hoạt.

b02cb13e267730fc.png

Giới thiệu Trình chỉnh sửa bố cục

Việc tạo giao diện người dùng bằng cách sắp xếp ViewsViewGroups là một phần quan trọng trong quá trình tạo Ứng dụng Android. Android Studio cung cấp một công cụ giúp bạn thực hiện việc này, được gọi là Layout Editor (Trình chỉnh sửa bố cục). Bạn sẽ sử dụng Layout Editor (Trình chỉnh sửa bố cục) để thay đổi văn bản "Hello World!" (Xin chào thế giới!) thành "Happy Birthday" (Chúc mừng sinh nhật!) sau đó tạo kiểu cho văn bản.

Khi Layout Editor (Trình chỉnh sửa bố cục) mở ra, nó sẽ có nhiều phần. Bạn sẽ tìm hiểu cách sử dụng hầu hết những nội dung đó trong lớp học lập trình này. Sử dụng ảnh chụp màn hình có chú thích bên dưới để giúp nhận dạng lại các cửa sổ trong Layout Editor (Trình chỉnh sửa bố cục). Bạn sẽ tìm hiểu thêm về từng phần trong quá trình thay đổi ứng dụng.

  • Ở bên trái (1) là cửa sổ Project (Dự án) mà bạn đã thấy trước đó. Nó liệt kê tất cả các tệp tạo nên dự án của bạn.
  • Ở chính giữa, bạn có thể thấy 2 bản vẽ (4) và (5) thể hiện bố cục màn hình cho ứng dụng của bạn. Bản vẽ (4) ở bên trái là bố cục gần đúng của giao diện màn hình khi ứng dụng chạy. Nó được gọi là chế độ xem Design (Thiết kế).
  • Đại diện bên phải (5) là chế độ xem Blueprint (Bản vẽ thiết kế), có thể hữu ích cho các thao tác cụ thể.
  • Palette (Bảng chế độ xem) (2) chứa các danh sách gồm các loại Views mà bạn có thể thêm vào ứng dụng.
  • Component Tree (Cây thành phần) (3) là một đại diện khác thể hiện chế độ xem của màn hình. Nó liệt kê tất cả các chế độ xem của màn hình.
  • Ở phía xa bên phải (6) là các Attributes (Thuộc tính). Nó cho biết các thuộc tính của View và cho phép bạn thay đổi các thuộc tính đó.

Hãy đọc thêm về Layout Editor (Trình chỉnh sửa bố cục) và cách định cấu hình Trình chỉnh sửa này trong hướng dẫn tham khảo dành cho nhà phát triển.

Ảnh chụp màn hình có chú thích của toàn bộ Layout Editor (Trình chỉnh sửa bố cục):

fc4828e6a783234.png

Hãy thực hiện một số thay đổi trong Layout Editor (Trình chỉnh sửa bố cục) để làm cho ứng dụng của bạn giống với thiệp sinh nhật hơn!

Thay đổi tin nhắn Xin chào Thế giới

  1. Trong Android Studio, tìm cửa sổ Project (Dự án) ở bên trái.
  2. Ghi lại những thư mục và tệp này: Thư mục app (ứng dụng) có hầu hết các tệp dành cho ứng dụng mà bạn sẽ thay đổi. Thư mục res là dành cho tài nguyên, chẳng hạn như hình ảnh hoặc bố cục màn hình. Thư mục layout (bố cục) là dành cho các bố cục màn hình. Tệp activity_main.xml chứa nội dung mô tả bố cục màn hình.
  3. Mở rộng thư mục app (ứng dụng, sau đó là thư mục res sau đó mở thư mục layout (bố cục).
  4. Nhấp đúp vào activity_main.xml. Thao tác này sẽ mở activity_main.xml trong Layout Editor (Trình chỉnh sửa bố cục) và hiển thị bố cục mà nó mô tả trong chế độ xem Design (Thiết kế).

1f64a0a2623c9380.png

  1. Xem danh sách chế độ xem trong Component Tree (Cây thành phần). Lưu ý có ConstraintLayoutTextView bên dưới đó. Các mã này đại diện cho giao diện người dùng của ứng dụng. Đã thụt lề TextView vì nó ở bên trong ConstraintLayout. Khi bạn thêm Views vào ConstraintLayout, chúng sẽ được thêm vào danh sách này.
  2. Lưu ý rằng TextView chứa nội dung "Hello World!" (Xin chào mọi người!) bên cạnh văn bản mà bạn thấy khi chạy ứng dụng.

9f483ad72607f3b6.png

  1. Trong Component Tree (Cây thành phần), hãy nhấp vào TextView.
  2. Tìm Attributes (Thuộc tính) ở bên phải.
  3. Tìm mục Declared Attributes (Thuộc tính đã khai báo).
  4. Lưu ý thuộc tính text (văn bản) trong phần Declared Attributes (Thuộc tính đã khai báo) chứa thông điệp Hello World! (Xin chào mọi người!).

de37fe1f5ed1507e.png

Thuộc tính text (văn bản) hiển thị văn bản được in bên trong một TextView.

  1. Nhấp vào thuộc tính text (văn bản) nơi có văn bản Hello World! (Xin chào thế giới!).
  2. Hãy thay đổi văn bản này để nói Hello World! (Chúc mừng sinh nhật!), sau đó nhấn phím Enter. Nếu thấy cảnh báo về một chuỗi được mã hoá cứng, thì bạn cũng đừng lo lắng về việc này. Bạn sẽ tìm hiểu cách loại bỏ cảnh báo đó trong lớp học lập trình tiếp theo.
  3. Lưu ý văn bản đã thay đổi trong Design View (Chế độ xem thiết kế).....(điều này thật tuyệt, bạn có thể thấy ngay những thay đổi của mình!)
  4. Chạy ứng dụng và hiện ứng dụng sẽ thông báo Happy Birthday! (Chúc mừng sinh nhật!)

233655306db5a589.png

Làm tốt lắm! Bạn đã thực hiện những thay đổi đầu tiên đối với một ứng dụng Android.

3. Thêm Chế độ xem văn bản vào bố cục

Thiệp sinh nhật bạn đang tạo có vẻ khác so với thiệp hiện có trong ứng dụng. Thay vì chữ nhỏ ở giữa, bạn cần hai thông điệp lớn hơn, một ở góc trên bên trái và một ở góc dưới bên phải. Trong tác vụ này, bạn sẽ xoá TextView hiện có và thêm hai TextViews mới, đồng thời tìm hiểu cách định vị chúng trong ConstraintLayout.

Xoá TextView hiện tại

  1. Trong Layout Editor (Trình chỉnh sửa bố cục), hãy nhấp để chọn TextView ở giữa bố cục.

105cee362aaaceb0.png

  1. Nhấn phím Delete (Xoá). Android Studio sẽ xoá TextView và ứng dụng của bạn hiện chỉ hiển thị một ConstraintLayout trong Layout Editor (Trình chỉnh sửa bố cục) và Component Tree (Cây thành phần).

d39283af7f165541.png

Thêm Chế độ xem văn bản

Trong bước này, bạn sẽ thêm TextView vào phía trên bên trái của ứng dụng để yêu cầu lưu giữ lời chào sinh nhật.

452cf299739cfef7.png

Palette (Bảng chế độ xem) ở phía trên bên trái Layout Editor (Trình chỉnh sửa bố cục) có chứa danh sách các loại Views khác nhau được sắp xếp theo danh mục và bạn có thể thêm vào ứng dụng của mình.

  1. Tìm TextView. Nó hiển thị ở cả trong danh mục Common (Phổ biến) và danh mục Text (Văn bản).

e23ce742cec0ab41.png

  1. Kéo TextView từ Palette (Bảng chế độ xem) lên bên trái phía trên của bề mặt thiết kế trong Layout Editor (Trình chỉnh sửa bố cục) rồi thả nó. Bạn không cần chính xác, chỉ cần thả gần góc trên bên trái.

6bbcb1bbc39df93a.gif

  1. Lưu ý bạn đã thêm TextView và thấy một dấu chấm than đỏ trong Component Tree (Cây thành phần).
  2. Di con trỏ qua dấu chấm than, bạn sẽ thấy một cảnh báo rằng khung hiển thị không bị ràng buộc và sẽ chuyển sang một vị trí khác khi bạn chạy ứng dụng. Bạn sẽ khắc phục lỗi đó trong bước tiếp theo.

82be9743106923ab.png

Định vị Chế độ xem văn bản

Đối với thẻ sinh nhật, TextView cần phải ở gần góc trên bên trái và có một chút khoảng trống xung quanh. Để khắc phục cảnh báo, bạn sẽ thêm một số ràng buộc vào TextView, mã này chỉ dẫn ứng dụng của bạn cách định vị thông báo. Ràng buộc chỉ đường đi và giới hạn đối với vị trí của View trong bố cục.

Các ràng buộc bạn thêm vào trên và bên trái sẽ có lề. Lề xác định khoảng cách từ View đến cạnh của vùng chứa.

76b7a03f2e03922d.png

  1. Trong Attributes (Thuộc tính) ở bên phải, hãy tìm Constraint Widget (Tiện ích ràng buộc) trong mục Layout (Bố cục). Hình vuông biểu thị chế độ xem của bạn.

b8811ae0b8d7acdf.png

  1. Nhấp vào dấu + ở đầu hình vuông. Thao tác này dành cho ràng buộc giữa phần đầu của chế độ xem văn bản và cạnh trên của bố cục ràng buộc.
  2. Một trường có số xuất hiện để đặt lề trên. Lề là khoảng cách từ TextView đến cạnh của vùng chứa ConstraintLayout. Số bạn thấy sẽ khác, tuỳ thuộc vào nơi bạn thả TextView. Khi đặt lề trên, Android Studio cũng sẽ tự động thêm một ràng buộc từ đầu chế độ xem văn bản lên đầu ConstraintLayout.

ec09d6fe6c58407.png

  1. Thay đổi lề trên cùng thành 16.
  1. Làm tương tự với lề trái.

ea087eb3bdbc771b.png

  1. Đặt text (văn bản) để chúc mừng sinh nhật người bạn của bạn, ví dụ "Happy Birthday, Sam!" (Chúc mừng sinh nhật, Sam!) sau đó nhấn phím Enter.

106f43119170e8a7.png

  1. Lưu ý chế độ xem Design (Thiết kế) sẽ cập nhật để hiển thị giao diện của ứng dụng.

452cf299739cfef7.png

Thêm và định vị một Chế độ xem văn bản khác

Thẻ sinh nhật của bạn cần dòng văn bản thứ hai ở gần góc dưới cùng bên phải. Bạn sẽ thêm dòng này ở bước này theo cách tương tự như trong tác vụ trước đó. Bạn nghĩ lề của TextView này nên như thế nào?

  1. KéoTextView mới từPalette (Bảng chế độ xem) và thả nó vào gần phía dưới cùng bên phải của chế độ xem ứng dụng trong Layout Editor (Trình chỉnh sửa bố cục).

7006f342897bf9d1.png

  1. Đặt lề phải là 16.
  2. Đặt lề dưới là 16.

26482fb78346f8b.png

  1. Trong Attributes (Thuộc tính), hãy đặt thuộc tính text (văn bản) để ký thiệp của bạn, ví dụ: "From Emma" (Từ Emma).
  2. Chạy ứng dụng. Bạn sẽ thấy ngày sinh của mình ở phía trên bên trái và chữ ký của bạn ở phía dưới bên phải.

f547c1b45045984a.png

Xin chúc mừng! Bạn đã thêm và định vị một số thành phần giao diện người dùng trong ứng dụng của mình.

4. Thêm kiểu cho văn bản

Bạn đã thêm văn bản vào giao diện người dùng, nhưng văn bản này có vẻ chưa giống hoàn toàn với ứng dụng cuối cùng. Trong nhiệm vụ này, bạn sẽ tìm hiểu cách thay đổi kích thước, màu văn bản và các thuộc tính khác có ảnh hưởng đến giao diện của TextView. Bạn cũng có thể thử nghiệm các phông chữ khác nhau.

  1. Nhấp vào TextView đầu tiên trong Component Tree (Cây thành phần) và tìm phần Common Attributes (Thuộc tính chung) của cửa sổ Attributes (Thuộc tính). Bạn có thể phải kéo xuống mới thấy tuỳ chọn này.
  2. Lưu ý các thuộc tính khác nhau, bao gồm fontFamily, textSizetextColor.

26afd9402e32543b.png

  1. Tìm textAppearance.
  2. Nếu textAppearance không được mở rộng, hãy nhấp vào hình tam giác hướng xuống.
  3. Trong textSize, hãy đặt textSize thành 36sp.

abfd83a8ec1f44dd.png

  1. Hãy lưu ý sự thay đổi trong Layout Editor (Trình chỉnh sửa bố cục).

ce3e0956cad6413a.png

  1. Thay đổi fontFamily thành casual.
  2. Hãy thử một số phông chữ khác để xem hình thức hiển thị của chúng. Bạn có thể tìm thấy nhiều lựa chọn hơn về phông chữ ở cuối danh sách, trong mục More Fonts… (Thêm phông chữ…)
  3. Khi bạn thử xong các phông chữ khác, hãy đặt fontFamily thành sans-serif-light.
  4. Nhấp vào hộp chỉnh sửa của thuộc tính textColor và bắt đầu nhập black (đen). Lưu ý khi nhập, Android Studio sẽ hiển thị một danh sách các màu có chứa văn bản mà bạn đã nhập.

88b7985332d38f90.png

  1. Chọn @android:color/black từ danh sách các màu và nhấn phím Enter.
  2. Trong TextView có chữ ký của bạn, hãy thay đổi các thuộc tính textSize, textColorfontFamily sao cho khớp.
  3. Hãy chạy chương trình của bạn và xem kết quả.

ab46eb841980bc5b.png

Xin chúc mừng! Bạn đã thực hiện các bước đầu tiên để tạo ứng dụng thiệp sinh nhật!

5. Giải pháp

  1. Chuyển đến trang kho lưu trữ GitHub được cung cấp cho dự án.
  2. Xác minh rằng tên chi nhánh khớp với tên chi nhánh được chỉ định trong lớp học lập trình. Ví dụ: trong ảnh chụp màn hình sau đây, tên nhánh là main (chính).

1e4c0d2c081a8fd2.png

  1. Trên trang GitHub cho dự án này, hãy nhấp vào nút Code (Mã nguồn), một cửa sổ bật lên sẽ hiện ra.

1debcf330fd04c7b.png

  1. Trong cửa sổ bật lên, nhấp vào nút Download ZIP (Tải tệp ZIP xuống) để lưu dự án vào máy tính. Chờ quá trình tải xuống hoàn tất.
  2. Xác định vị trí của tệp trên máy tính (có thể trong thư mục Tải xuống (Tệp đã tải xuống)).
  3. Nhấp đúp vào tệp ZIP để giải nén. Thao tác này sẽ tạo một thư mục mới chứa các tệp dự án.

Mở dự án trong Android Studio

  1. Khởi động Android Studio.
  2. Trong cửa sổ Welcome to Android Studio (Chào mừng bạn đến với Android Studio), hãy nhấp vào Open (Mở).

d8e9dbdeafe9038a.png

Lưu ý: Nếu Android Studio đã mở sẵn thì hãy chuyển sang chọn tuỳ chọn File (Tệp) > Open (Mở) trên trình đơn.

8d1fda7396afe8e5.png

  1. Trong trình duyệt tệp, hãy chuyển đến vị trí của thư mục dự án chưa giải nén (có thể nằm trong thư mục Downloads (Tệp đã tải xuống)).
  2. Nhấp đúp vào thư mục dự án đó.
  3. Chờ Android Studio mở dự án.
  4. Nhấp vào nút Run (Chạy) 8de56cba7583251f.png để tạo bản dựng và chạy ứng dụng. Đảm bảo ứng dụng được xây dựng như mong đợi.

6. Tóm tắt

  • Layout Editor (Trình chỉnh sửa bố cục) giúp bạn tạo giao diện người dùng cho ứng dụng Android.
  • Hầu hết nội dung bạn thấy trên màn hình ứng dụng là một View.
  • TextView là một thành phần trên giao diện người dùng để hiển thị văn bản trong ứng dụng.
  • ConstraintLayout là vùng chứa cho các phần tử giao diện người dùng khác.
  • Views cần được giới hạn theo chiều ngang và chiều dọc trong ConstraintLayout.
  • Một cách để định vị View là sử dụng lề.
  • Lề cho biết khoảng cách từ View là từ cạnh của vùng chứa mà nó nằm trong.
  • Bạn có thể đặt thuộc tính trên TextView như phông chữ, kích thước văn bản và màu sắc.

7. Tìm hiểu thêm