Kiến thức cơ bản về Kotlin trên Android 10.1: Kiểu và giao diện

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.

Lớp học lập trình này nằm trong một loạt nội dung hướng dẫn bạn kiến thức cơ bản về thiết kế ứng dụng Android và hướng dẫn bạn cách tạo một ứng dụng tìm các buổi gặp mặt của Google Developer Group (GDG). Ứng dụng này hiển thị thông tin về các buổi gặp mặt sắp tới một cách đẹp mắt và dễ tiếp cận.

Bạn nên thực hiện 3 lớp học lập trình trong loạt bài này theo thứ tự, vì chúng sẽ hướng dẫn bạn từng bước thực hiện các tác vụ:

• 10.1 Kiểu và giao diện
• 10.2 Material Design, kích thước và màu sắc
• 10.3 Thiết kế cho mọi người

Giới thiệu về thiết kế

Loạt lớp học lập trình này tập trung vào một trong những khía cạnh quan trọng nhất của quá trình phát triển Android, đó là thiết kế ứng dụng. Các khía cạnh rõ ràng của thiết kế ứng dụng là khung hiển thị, văn bản và nút, cũng như vị trí của chúng trên màn hình, cũng như màu sắc và phông chữ mà chúng sử dụng. Gợi ý cho người dùng về việc cần làm tiếp theo cũng là một khía cạnh thiết yếu của thiết kế. Người dùng cần có thể biết ngay họ đang xem gì, điều gì là quan trọng và họ có thể làm gì.

So sánh hai màn hình bên dưới. Lưu ý rằng bằng cách di chuyển các phần tử xung quanh và tập trung vào những gì quan trọng, bạn có thể giúp người dùng hiểu được những gì đang diễn ra. Đối với các màn hình đơn giản, thiết kế hiệu quả thường có nghĩa là hiển thị ít nội dung hơn. Đối với những màn hình có nhiều thông tin quan trọng, thiết kế phù hợp sẽ giúp người dùng hiểu được thông tin dày đặc trong nháy mắt. Khi làm việc trên các ứng dụng Android, bạn có thể nghe thấy khái niệm này được gọi là kiến trúc thông tin (IA).

Một cấp độ thiết kế khác là xây dựng luồng người dùng nhất quán, hay trường hợp sử dụng, cho phép người dùng hoàn thành các thao tác. Hình thức thiết kế này được gọi là thiết kế trải nghiệm người dùng (UXD) và một số nhà thiết kế chuyên về lĩnh vực này.

Nếu bạn không có quyền truy cập vào một nhà thiết kế, thì dưới đây là một số mẹo giúp bạn bắt đầu:

• Xác định các trường hợp sử dụng. Viết ra những việc người dùng cần làm với ứng dụng của bạn và cách thực hiện.
• Triển khai một thiết kế. Đừng quá chú trọng vào bản nháp đầu tiên và chỉ cần tạo ra một bản "đủ tốt", vì bạn sẽ thay đổi bản nháp đó sau khi xem cách người dùng thực tương tác với bản nháp.
• Nhận ý kiến phản hồi. Tìm bất kỳ ai mà bạn có thể thuyết phục họ thử nghiệm ứng dụng của bạn – gia đình, bạn bè hoặc thậm chí là những người bạn vừa gặp tại một Nhóm nhà phát triển của Google. Yêu cầu họ sử dụng ứng dụng của bạn để thực hiện một trường hợp sử dụng trong khi bạn quan sát và ghi chú chi tiết.
• Tinh chỉnh! Với tất cả thông tin đó, hãy cải thiện ứng dụng rồi thử nghiệm lại.

Sau đây là một số câu hỏi khác bạn nên tự hỏi mình khi thiết kế một trải nghiệm tuyệt vời trong ứng dụng. Bạn đã tìm hiểu các kỹ thuật để giải quyết những vấn đề này trong các lớp học lập trình trước:

• Ứng dụng có mất trạng thái khi người dùng xoay thiết bị không?
• Điều gì xảy ra khi người dùng mở ứng dụng? Người dùng có thấy biểu tượng tải hay dữ liệu đã sẵn sàng trong bộ nhớ đệm ngoại tuyến?
• Ứng dụng có được mã hoá theo cách hiệu quả và đảm bảo rằng ứng dụng luôn phản hồi thao tác chạm của người dùng không?
• Ứng dụng có tương tác với các hệ thống phụ trợ theo cách không bao giờ dẫn đến việc người dùng nhìn thấy dữ liệu không chính xác, không phù hợp hoặc lỗi thời không?

Khi phát triển ứng dụng cho nhiều đối tượng, bạn cần đảm bảo ứng dụng của mình có thể tiếp cận nhiều loại người dùng nhất có thể. Ví dụ:

• Nhiều người dùng tương tác với hệ thống máy tính theo nhiều cách. Nhiều người dùng bị mù màu và màu tương phản đối với một người dùng có thể không phù hợp với người dùng khác. Nhiều người dùng bị suy giảm thị lực, từ việc cần kính đọc sách cho đến mù loà.
• Một số người dùng không thể sử dụng màn hình cảm ứng và họ tương tác thông qua các thiết bị đầu vào khác, chẳng hạn như nút bấm.

Thiết kế đẹp là cách quan trọng nhất để thu hút người dùng sử dụng ứng dụng của bạn.

Các lớp học lập trình này quá ngắn để dạy bạn mọi thứ về thiết kế cho Android, nhưng chúng sẽ giúp bạn bắt đầu đi đúng hướng và bạn có thể tiếp tục học hỏi và phát triển theo cách riêng của mình.

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

Bạn cần thông thạo:

• Cách tạo ứng dụng có các hoạt động và mảnh, đồng thời di chuyển giữa các mảnh để truyền dữ liệu
• Sử dụng các thành phần hiển thị và nhóm thành phần hiển thị để bố trí giao diện người dùng (UI), bao gồm cả RecyclerView
• Cách sử dụng các Thành phần cấu trúc, trong đó có ViewModel, với cấu trúc được đề xuất để tạo một ứng dụng có cấu trúc hợp lý và hiệu quả
• Liên kết dữ liệu, coroutine và cách xử lý lượt nhấp
• Cách kết nối với Internet và lưu dữ liệu vào bộ nhớ đệm cục bộ bằng cơ sở dữ liệu Room
• Cách thiết lập các thuộc tính của thành phần hiển thị
• Cách trích xuất tài nguyên vào và sử dụng tài nguyên từ tệp tài nguyên XML

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

• Kiến thức cơ bản về hệ thống định kiểu của Android
• Cách sử dụng các thuộc tính, kiểu và giao diện để tuỳ chỉnh ứng dụng

Bạn sẽ thực hiện

• Cải thiện thiết kế của một ứng dụng khởi động bằng các thuộc tính, kiểu và giao diện của khung hiển thị

Ứng dụng khởi động GDG-finder được xây dựng dựa trên mọi kiến thức bạn đã học được cho đến nay trong khoá học này.

Ứng dụng này dùng ConstraintLayout để bố trí 3 màn hình. Hai trong số các màn hình này chỉ là các tệp bố cục mà bạn sẽ dùng để khám phá màu sắc và văn bản trên Android.

Màn hình thứ ba là một công cụ tìm GDG. GDG (Google Developer Group) là cộng đồng nhà phát triển tập trung vào các công nghệ của Google, bao gồm cả Android. Các GDG trên khắp thế giới tổ chức các buổi gặp mặt, hội nghị, buổi học nhóm và các sự kiện khác.

Khi phát triển ứng dụng này, bạn sẽ làm việc trên danh sách thực tế của GDG. Màn hình công cụ tìm sử dụng thông tin vị trí của thiết bị để sắp xếp các GDG theo khoảng cách.

Nếu may mắn và có một GDG ở khu vực của bạn, bạn có thể truy cập trang web của họ và đăng ký tham gia các sự kiện của họ! Các sự kiện của GDG là cơ hội tuyệt vời để gặp gỡ những nhà phát triển Android khác và tìm hiểu các phương pháp hay nhất trong ngành mà khoá học này chưa đề cập đến.

Các ảnh chụp màn hình bên dưới cho thấy ứng dụng của bạn sẽ thay đổi như thế nào từ đầu đến cuối lớp học lập trình này.

Android cung cấp một hệ thống định kiểu phong phú cho phép bạn kiểm soát giao diện của mọi chế độ xem trong ứng dụng của mình. Bạn có thể dùng các giao diện, kiểu và thuộc tính chế độ xem để hỗ trợ việc định kiểu. Sơ đồ dưới đây tóm tắt mức độ ưu tiên của từng phương thức định kiểu. Sơ đồ kim tự tháp cho thấy thứ tự hệ thống áp dụng các phương thức định kiểu, từ dưới lên trên. Ví dụ: nếu bạn đặt kích thước văn bản trong giao diện, rồi đặt kích thước văn bản khác trong các thuộc tính chế độ xem, thì các thuộc tính chế độ xem sẽ ghi đè kiểu giao diện.

Thuộc tính khung nhìn

• Dùng các thuộc tính chế độ xem để đặt thuộc tính rõ ràng cho mỗi chế độ xem. (Bạn không thể dùng lại các thuộc tính khung hiển thị, vì các kiểu có thể dùng lại.)
• Bạn có thể dùng mọi thuộc tính có thể đặt được thông qua kiểu hoặc giao diện.

Dùng cho các thiết kế tuỳ chỉnh hoặc thiết kế một lần, chẳng hạn như lề, khoảng đệm hoặc các hạn chế.

Kiểu

• Dùng kiểu để tạo tập hợp thông tin định kiểu có thể tái sử dụng, chẳng hạn như màu hoặc kích thước phông chữ.
• Phù hợp để khai báo một số thiết kế phổ biến được dùng trên toàn ứng dụng của bạn.

Áp dụng một kiểu cho nhiều thành phần hiển thị, ghi đè kiểu mặc định. Ví dụ: bạn có thể dùng một kiểu để tạo các tiêu đề có kiểu nhất quán hoặc tạo một tập hợp các nút.

Kiểu mặc định

• Đây là kiểu mặc định do hệ thống Android cung cấp.

Giao diện

• Dùng một giao diện để xác định màu sắc cho toàn bộ ứng dụng.
• Dùng một giao diện để đặt phông chữ mặc định cho toàn bộ ứng dụng.
• Áp dụng cho tất cả các khung hiển thị, chẳng hạn như khung hiển thị văn bản hoặc nút chọn.
• Dùng để định cấu hình các thuộc tính mà bạn có thể áp dụng nhất quán cho toàn bộ ứng dụng.

TextAppearance

• Để tạo kiểu chỉ bằng các thuộc tính văn bản, chẳng hạn như fontFamily.

Khi định kiểu cho một khung hiển thị, Android sẽ áp dụng một tổ hợp các giao diện, kiểu và thuộc tính mà bạn có thể tuỳ chỉnh. Các thuộc tính luôn ghi đè mọi giá trị đã chỉ định trong một kiểu hoặc giao diện. Còn kiểu luôn ghi đè mọi giá trị đã chỉ định trong một giao diện.

Ảnh chụp màn hình bên dưới cho thấy ứng dụng GDG-finder có giao diện sáng (bên trái) và giao diện tối (bên phải), cũng như có phông chữ và kích thước tiêu đề tuỳ chỉnh. Bạn có thể triển khai việc này theo nhiều cách và bạn sẽ tìm hiểu một số cách trong lớp học lập trình này.

Trong nhiệm vụ này, bạn sẽ sử dụng các thuộc tính để tạo kiểu cho tiêu đề của văn bản trong bố cục ứng dụng.

1. Tải xuống và chạy ứng dụng GDG-finder khởi động.
2. Lưu ý rằng màn hình chính có nhiều văn bản được định dạng đồng nhất, khiến bạn khó biết được nội dung của trang và nội dung nào quan trọng.
3. Mở tệp bố cục home_fragment.xml.
4. Lưu ý rằng bố cục này sử dụng ConstraintLayout để định vị các phần tử bên trong một ScrollView.
5. Xin lưu ý rằng đối với mỗi khung hiển thị, các thuộc tính bố cục ràng buộc và lề được đặt trong khung hiển thị, vì các thuộc tính này thường được tuỳ chỉnh cho từng khung hiển thị và màn hình.
6. Trong khung hiển thị văn bản title, hãy thêm một thuộc tính textSize để thay đổi kích thước văn bản thành 24sp.
   
   Xin lưu ý rằng sp là viết tắt của pixel không phụ thuộc vào tỷ lệ, được chia tỷ lệ theo cả mật độ pixel và lựa chọn ưu tiên về cỡ chữ mà người dùng đặt trong phần cài đặt thiết bị. Android sẽ xác định kích thước văn bản trên màn hình khi vẽ văn bản. Luôn sử dụng sp cho kích thước văn bản.

<TextView
       android:id="@+id/title"
...

android:textSize="24sp"

7. Đặt textColor của khung hiển thị văn bản title thành màu xám đục bằng cách đặt thành giá trị aRGB là #FF555555.

<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"

8. Để mở thẻ Preview (Xem trước) trong Android Studio, hãy chọn View > Tool Windows > Preview (Xem > Cửa sổ công cụ > Xem trước) hoặc nhấp vào nút Preview (Xem trước) theo chiều dọc ở cạnh phải của Trình chỉnh sửa bố cục. Trong bản xem trước, hãy xác minh rằng tiêu đề có màu xám và lớn hơn trước, như minh hoạ bên dưới.

Lưu ý: Giá trị aRGB thể hiện độ trong suốt alpha, giá trị màu đỏ, giá trị màu xanh lục và giá trị màu xanh lam của một màu. Giá trị aRGB sử dụng số thập lục phân trong khoảng từ 00 đến FF cho mỗi thành phần màu.

#(alpha)(red)(green)(blue)

#(00-FF)(00-FF)(00-FF)(00-FF)

Ví dụ:

• #FFFF0000 cho màu đỏ đục
• #5500FF00 cho màu xanh lục nửa trong suốt
• #FF0000FF cho màu xanh dương đục

9. Tạo kiểu cho phụ đề có cùng màu với tiêu đề, với phông chữ nhỏ hơn, 18sp. (Alpha mặc định là FF, mờ đục. Bạn có thể bỏ qua giá trị alpha nếu không thay đổi giá trị này.)

<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

10. Trong lớp học lập trình này, mục tiêu là tạo kiểu cho ứng dụng sao cho vừa chuyên nghiệp vừa có chút độc đáo, nhưng bạn có thể tạo kiểu theo bất kỳ cách nào bạn muốn. Hãy thử các thuộc tính sau cho chế độ xem văn bản subtitle. Sử dụng thẻ Xem trước để xem giao diện ứng dụng của bạn thay đổi như thế nào. Sau đó, hãy xoá các thuộc tính này.

<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"

11. Đừng quên huỷ các thuộc tính textAllCaps, textStyle và background khỏi khung hiển thị subtitle trước khi tiếp tục.
12. Chạy ứng dụng của bạn, ứng dụng sẽ trông đẹp hơn.

Khi sử dụng phông chữ với ứng dụng, bạn có thể gửi các tệp phông chữ cần thiết trong tệp APK. Mặc dù đơn giản, nhưng giải pháp này thường không được khuyến khích vì khiến ứng dụng của bạn mất nhiều thời gian hơn để tải xuống và cài đặt.

Android cho phép các ứng dụng tải phông chữ xuống trong thời gian chạy bằng cách sử dụng API Phông chữ có thể tải xuống. Nếu ứng dụng của bạn sử dụng cùng một phông chữ với một ứng dụng khác trên thiết bị, thì Android chỉ tải phông chữ xuống một lần, giúp tiết kiệm bộ nhớ của thiết bị.

Trong nhiệm vụ này, bạn sẽ sử dụng phông chữ có thể tải xuống để đặt phông chữ cho mọi khung hiển thị trong ứng dụng sử dụng giao diện.

Bước 1: Áp dụng một phông chữ có thể tải xuống

1. Mở home_fragment.xml trong thẻ Design (Thiết kế).
2. Trong ngăn Component Tree (Cây thành phần), hãy chọn khung hiển thị văn bản title.
3. Trong ngăn Attributes (Thuộc tính), hãy tìm thuộc tính fontFamily. Bạn có thể tìm thấy thuộc tính này trong mục All Attributes (Tất cả thuộc tính) hoặc chỉ cần tìm kiếm.
4. Nhấp vào mũi tên thả xuống.
5. Di chuyển đến phần Phông chữ khác rồi chọn phần này. Cửa sổ Tài nguyên sẽ mở ra.

6. Trong cửa sổ Resources (Tài nguyên), hãy tìm kiếm lobster hoặc chỉ lo.
7. Trong phần kết quả, hãy chọn Lobster Two.
8. Ở bên phải, bên dưới tên phông chữ, hãy chọn nút chọn Tạo phông chữ có thể tải xuống. Nhấp vào OK.
9. Mở tệp Android Manifest.
10. Gần cuối tệp kê khai, hãy tìm thẻ <meta-data> mới có các thuộc tính name và resource được đặt thành "preloaded_fonts". Thẻ này cho Dịch vụ Google Play biết rằng ứng dụng này muốn sử dụng phông chữ đã tải xuống. Khi ứng dụng của bạn chạy và yêu cầu phông chữ Lobster Two, trình cung cấp phông chữ sẽ tải phông chữ xuống từ Internet nếu phông chữ đó chưa có trên thiết bị.

<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>

11. Trong thư mục res/values, hãy tìm tệp preloaded_fonts.xml. Tệp này xác định mảng liệt kê tất cả phông chữ có thể tải xuống cho ứng dụng này.
12. Tương tự, tệp res/fonts/lobster_two.xml có thông tin về phông chữ.
13. Mở home_fragment.xml và lưu ý trong mã cũng như bản xem trước rằng phông chữ Lobster Two được áp dụng cho title TextView, do đó được áp dụng cho tiêu đề.

14. Mở res/values/styles.xml và kiểm tra giao diện AppTheme mặc định đã được tạo cho dự án. Hiện tại, giao diện này có dạng như dưới đây. Để áp dụng phông chữ Lobster Two mới cho tất cả văn bản, bạn cần cập nhật giao diện này.
    
15. Trong thẻ <style>, hãy lưu ý đến thuộc tính parent. Mỗi thẻ kiểu đều có thể chỉ định một thẻ mẹ và kế thừa tất cả các thuộc tính của thẻ mẹ. Mã này chỉ định Theme do các thư viện Android xác định. Giao diện MaterialComponents chỉ định mọi thứ, từ cách hoạt động của các nút cho đến cách vẽ thanh công cụ. Giao diện này có các giá trị mặc định hợp lý, vì vậy bạn chỉ cần tuỳ chỉnh những phần mình muốn. Ứng dụng này sử dụng phiên bản Light của giao diện này mà không có thanh thao tác (NoActionBar), như bạn có thể thấy trong ảnh chụp màn hình ở trên.
    

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style>

16. Trong kiểu AppTheme, hãy đặt họ phông chữ thành lobster_two. Bạn cần thiết lập cả android:fontFamily và fontFamily, vì giao diện mẹ sử dụng cả hai. Bạn có thể đánh dấu vào home_fragment.xml trong thẻ Thiết kế để xem trước các thay đổi.

<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>

17. Chạy lại ứng dụng. Phông chữ mới sẽ được áp dụng cho tất cả văn bản! Mở ngăn điều hướng và chuyển đến các màn hình khác, bạn sẽ thấy phông chữ cũng được áp dụng ở đó.

Bước 2: Áp dụng giao diện cho tiêu đề

1. Trong home_fragment.xml, hãy tìm chế độ xem văn bản title có thuộc tính cho phông chữ lobster_two. Xoá thuộc tính fontFamily và chạy ứng dụng. Vì giao diện đặt cùng một họ phông chữ, nên không có gì thay đổi.
2. Đặt một thuộc tính fontFamily khác vào chế độ xem văn bản title:
   app:fontFamily="serif-monospace"
Đảm bảo thuộc tính này nằm trong không gian app!

<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"

3. Chạy ứng dụng và bạn sẽ thấy rằng thuộc tính cục bộ của khung hiển thị sẽ ghi đè giao diện.
   

4. Xoá thuộc tính fontFamily khỏi chế độ xem văn bản title.

Giao diện rất phù hợp để áp dụng giao diện chung cho ứng dụng của bạn, chẳng hạn như phông chữ mặc định và màu chính. Các thuộc tính rất phù hợp để tạo kiểu cho một khung hiển thị cụ thể và thêm thông tin bố cục như lề, khoảng đệm và các ràng buộc. Những thông tin này thường dành riêng cho từng màn hình.

Ở giữa kim tự tháp phân cấp kiểu là các kiểu. Kiểu là "nhóm" thuộc tính có thể dùng lại mà bạn có thể áp dụng cho các thành phần hiển thị mà bạn chọn. Trong nhiệm vụ này, bạn sẽ sử dụng một kiểu cho tiêu đề và tiêu đề phụ.

Bước 1: Tạo kiểu

1. Mở res/values/styles.xml.
2. Bên trong thẻ <resources>, hãy xác định một kiểu mới bằng thẻ <style>, như minh hoạ dưới đây.

<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

Bạn cần xem xét tên kiểu dưới dạng ngữ nghĩa khi đặt tên cho kiểu. Chọn tên kiểu dựa trên mục đích sử dụng kiểu chứ không dựa trên các thuộc tính mà kiểu đó ảnh hưởng. Ví dụ: gọi kiểu này là Title, chứ không phải kiểu như LargeFontInGrey. Mọi tiêu đề ở bất kỳ vị trí nào trong ứng dụng của bạn đều sẽ sử dụng kiểu này. Theo quy ước, các kiểu TextAppearance được gọi là TextAppearance.Name, vì vậy trong trường hợp này, tên là TextAppearance.Title.

Kiểu có một đối tượng mẹ, giống như giao diện có thể có một đối tượng mẹ. Nhưng lần này, thay vì mở rộng một giao diện, kiểu này sẽ mở rộng một kiểu, TextAppearance.MaterialComponents.Headline6. Kiểu này là kiểu văn bản mặc định cho giao diện MaterialComponents, vì vậy, bằng cách mở rộng kiểu này, bạn sẽ sửa đổi kiểu mặc định thay vì bắt đầu từ đầu.

3. Trong kiểu mới, hãy xác định 2 mục. Trong một mục, hãy đặt textSize thành 24sp. Trong mục khác, hãy đặt textColor thành cùng màu xám đậm đã dùng trước đó.

 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>

4. Xác định một kiểu khác cho phụ đề. Đặt tên tệp này là TextAppearance.Subtitle.
5. Vì điểm khác biệt duy nhất so với TextAppearance.Title sẽ nằm ở kích thước văn bản, hãy tạo kiểu này thành kiểu con của TextAppearance.Title.
6. Trong kiểu Subtitle, hãy đặt cỡ chữ thành 18sp. Sau đây là kiểu hoàn chỉnh:

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

Bước 2: Áp dụng kiểu mà bạn đã tạo

1. Trong home_fragment.xml, hãy thêm TextAppearance.kiểu Title cho khung hiển thị văn bản title. Xoá các thuộc tính textSize và textColor.
   
   Giao diện sẽ ghi đè mọi kiểu TextAppearance mà bạn đặt. (Sơ đồ kim tự tháp ở đầu lớp học lập trình cho thấy thứ tự áp dụng kiểu.) Sử dụng thuộc tính textAppearance để áp dụng kiểu dưới dạng TextAppearance để bộ phông chữ được đặt trong Theme sẽ ghi đè những gì bạn đặt ở đây.

<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"

2. Ngoài ra, hãy thêm kiểu TextAppearance.Subtitle vào chế độ xem văn bản subtitle, đồng thời xoá các thuộc tính textSize và textColor. Bạn cũng phải áp dụng kiểu này dưới dạng textAppearance để phông chữ được đặt trong giao diện ghi đè những gì bạn đặt ở đây.

<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"

Lưu ý quan trọng: Khi cả giao diện và kiểu đều thao tác với văn bản, bạn phải áp dụng các thuộc tính văn bản dưới dạng thuộc tính textAppearance nếu muốn các thuộc tính văn bản trong giao diện ghi đè những gì được đặt và kế thừa trong kiểu.

3. Chạy ứng dụng và văn bản của bạn hiện đã được tạo kiểu nhất quán.

Dự án Android Studio: GDGFinderStyles.

• Sử dụng giao diện, kiểu và thuộc tính trên các khung hiển thị để thay đổi giao diện của khung hiển thị.
• Giao diện ảnh hưởng đến kiểu dáng của toàn bộ ứng dụng và đi kèm với nhiều giá trị đặt sẵn cho màu sắc, phông chữ và cỡ chữ.
• Một thuộc tính áp dụng cho khung hiển thị mà thuộc tính đó được đặt. Sử dụng các thuộc tính nếu bạn có kiểu chỉ áp dụng cho một khung hiển thị, chẳng hạn như khoảng đệm, lề và các ràng buộc.
• Kiểu là các nhóm thuộc tính mà nhiều khung hiển thị có thể sử dụng. Ví dụ: bạn có thể có một kiểu cho tất cả tiêu đề nội dung, nút hoặc khung hiển thị văn bản.
• Giao diện và kiểu kế thừa từ giao diện hoặc kiểu gốc. Bạn có thể tạo một hệ phân cấp kiểu.
• Các giá trị thuộc tính (được đặt trong khung hiển thị) sẽ ghi đè các kiểu. Các kiểu sẽ ghi đè kiểu mặc định. Kiểu ghi đè giao diện. Giao diện sẽ ghi đè mọi kiểu được đặt bằng thuộc tính textAppearance.

• Xác định các kiểu trong tệp tài nguyên styles.xml bằng cách sử dụng thẻ <style> và <item>.

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

Việc sử dụng phông chữ có thể tải xuống giúp người dùng sử dụng phông chữ mà không làm tăng kích thước tệp APK. Cách thêm một phông chữ có thể tải xuống cho một khung hiển thị:

1. Chọn chế độ xem trong thẻ Thiết kế, rồi chọn Nhiều phông chữ trong trình đơn thả xuống của thuộc tính fontFamily.
2. Trong hộp thoại Tài nguyên, hãy tìm một phông chữ rồi chọn nút chọn Tạo phông chữ có thể tải xuống.
3. Xác minh rằng tệp kê khai Android có chứa thẻ siêu dữ liệu cho các phông chữ được tải sẵn.

Khi ứng dụng yêu cầu một phông chữ lần đầu và phông chữ đó chưa có sẵn, trình cung cấp phông chữ sẽ tải phông chữ đó xuống từ Internet.

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

• Kiểu và giao diện
• Phông chữ có thể tải xuống
• Phông chữ trong XML
• Tìm hiểu về sp
• TextView thuộc tính
• Tài nguyên kiểu
• MaterialComponentsgiao diện

Tài nguyên khác:

• Văn bản của bạn sẽ xuất hiện như thế nào
• Thập lục phân
• Phát triển ứng dụng Android bằng Kotlin (khóa học trên Udacity)
• Chương trình đào tạo về Kotlin dành cho lập trình viên (khoá học trên Udacity)
• Các lớp học lập trình trong Chương trình đào tạo về Kotlin dành cho lập trình viên

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

Thẻ nào dùng để xác định giao diện?

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

Câu hỏi 2

Cách nào KHÔNG phải là cách sử dụng phù hợp đối với các kiểu?

▢ Chỉ định các quy tắc ràng buộc của một khung hiển thị.

▢ Chỉ định màu nền cho tiêu đề.

▢ Hợp nhất cỡ chữ trên các khung hiển thị.

▢ Chỉ định màu văn bản cho một nhóm khung hiển thị.

Câu hỏi 3

Đâu là sự khác biệt giữa giao diện và kiểu?

▢ Giao diện áp dụng cho toàn bộ ứng dụng, trong khi bạn có thể áp dụng kiểu cho từng khung hiển thị cụ thể.

▢ Giao diện không thể kế thừa từ các giao diện khác, nhưng kiểu có thể kế thừa từ các kiểu khác.

▢ Kiểu không thể kế thừa từ các kiểu khác, nhưng giao diện có thể kế thừa từ các giao diện khác.

▢ Giao diện là do hệ thống Android cung cấp, còn kiểu là do nhà phát triển xác định.

Câu hỏi 4

Nếu một TextView trong ứng dụng của bạn có một Theme đặt kích thước phông chữ thành 12sp, một kiểu được xác định đặt kích thước phông chữ thành 14sp và một thuộc tính fontSize là 16sp, thì kích thước của phông chữ hiển thị trên màn hình là bao nhiêu?

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

Bắt đầu bài học tiếp theo: 10.2: Material Design, kích thước và màu sắc

Để 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.