Kí hiệu 50dp trong bản vẽ xây dựng là gì
Material Design là một hệ thống thiết kế do những nhà thiết kế và nhà phát triển của Google xây dựng và hỗ trợ nhằm tạo ra trải nghiệm kỹ thuật số chất lượng cao cho Android, cũng như cho các nền tảng web và di động khác. Hệ thống này đưa ra hướng dẫn về cách xây dựng giao diện người dùng của ứng dụng sao cho dễ đọc, hấp dẫn và nhất quán. Show
Trong lớp học lập trình này, bạn sẽ tìm hiểu về cách Tuỳ chỉnh giao diện Material để sử dụng Material Design trong ứng dụng của mình, kèm theo hướng dẫn về cách tuỳ chỉnh màu sắc, kiểu chữ và hình dạng. Bạn có thể tuỳ chỉnh ít hoặc nhiều tuỳ thích cho ứng dụng của mình. Bạn cũng sẽ tìm hiểu cách thêm thanh ứng dụng trên cùng để cho thấy tên và biểu tượng của ứng dụng. Điều kiện tiên quyết
Kiến thức bạn sẽ học được
Sản phẩm bạn sẽ tạo ra
Bạn cần có
2. Tổng quan về ứng dụngTrong lớp học lập trình này, bạn sẽ tạo Woof, một ứng dụng cho thấy danh sách các chú chó và dùng Material Design để mang lại một trải nghiệm đẹp mắt cho ứng dụng. Qua lớp học lập trình này, chúng ta sẽ tìm hiểu một số việc có thể thực hiện qua tính năng Tuỳ chỉnh giao diện Material. Hãy tham gia lớp học lập trình này để có ý tưởng về cách sử dụng tính năng Tuỳ chỉnh giao diện Material nhằm cải thiện giao diện các ứng dụng mà bạn sẽ tạo ra sau này. Bảng màuDưới đây là các bảng màu cho cả giao diện sáng và tối mà chúng ta sẽ tạo. Dưới đây là ứng dụng hoàn thiện trong cả giao diện sáng lẫn giao diện tối. Giao diện sáng Giao diện tối Kiểu chữDưới đây là các kiểu chữ bạn sẽ sử dụng trong ứng dụng. Tệp giao diệnTệp Theme.kt là tệp chứa toàn bộ thông tin về giao diện (theme) của ứng dụng, được xác định thông qua màu sắc, kiểu chữ và hình dạng. Đây là tệp quan trọng mà bạn cần biết. Bên trong tệp này là thành phần kết hợp
8, giúp thiết lập màu sắc, kiểu chữ và hình dạng của ứng dụng.
Trong MainActivity.kt,
8 được thêm vào để cung cấp tính năng Tuỳ chỉnh giao diện Material cho toàn bộ ứng dụng.
Hãy cùng xem
0.
8 được thêm vào để cung cấp tính năng Tuỳ chỉnh giao diện Material mà bạn thấy trong
0.
3. Lấy mã khởi đầu
Khám phá mã khởi đầu
Đảm bảo trình mô phỏng/thiết bị ở giao diện sángỞ lớp học lập trình này, bạn sẽ tìm hiểu cả giao diện sáng lẫn tối, tuy nhiên, hầu hết các lớp học lập trình đều chỉ tập trung vào giao diện sáng. Trước khi bắt đầu, hãy đảm bảo thiết bị/trình mô phỏng của bạn ở giao diện sáng. Để xem ứng dụng của bạn ở giao diện sáng, trên trình mô phỏng hoặc thiết bị thực, hãy thao tác như sau:
Chạy mã khởi đầu để xem bạn đang bắt đầu từ đâu; đó là một danh sách hiển thị các chú chó cùng với hình ảnh, tên và tuổi của chúng. Chức năng này hoạt động nhưng trông không ổn lắm, thế nên chúng ta sẽ khắc phục việc đó. 4. Thêm màu sắcThành phần đầu tiên bạn cần sửa đổi trong ứng dụng Woof là bảng phối màu. Bảng phối màu là tổ hợp màu mà ứng dụng của bạn sử dụng. Mỗi kiểu kết hợp màu sắc lại gợi lên tâm trạng riêng, điều này ảnh hưởng đến cảm nhận của mọi người khi họ sử dụng ứng dụng của bạn. Màu trong hệ thống Android được biểu thị bằng giá trị màu thập lục phân (mã màu hex). Mã màu hex bắt đầu bằng ký tự dấu thăng (#), theo sau là 6 chữ cái và/hoặc số đại diện cho các thành phần màu đỏ, xanh lục và xanh dương (RGB) của màu đó. Hai chữ cái/số đầu tiên đề cập đến màu đỏ, hai chữ cái tiếp theo đề cập đến màu xanh lục và hai chữ cái cuối cùng đề cập đến màu xanh lam. Một màu cũng có thể bao gồm giá trị alpha — chữ cái và/hoặc số — thể hiện độ trong suốt của màu ( 00 là độ mờ 0% (trong suốt hoàn toàn),FF là độ mờ 100% (mờ hoàn toàn). Khi được đưa vào, giá trị alpha là 2 ký tự đầu tiên của mã màu hex sau ký tự dấu thăng (#). Nếu giá trị alpha không được đưa vào thì giá trị này được giả định làFF, nghĩa là độ mờ 100% (mờ hoàn toàn).Dưới đây là một số ví dụ về màu và giá trị hex tương ứng. Sử dụng Material Theme Builder để tạo bảng phối màuĐể tạo bảng phối màu tuỳ chỉnh cho ứng dụng, chúng ta sẽ sử dụng Material Theme Builder (Trình tạo giao diện Material).
Hãy lưu ý cách tính năng này cập nhật các ứng dụng trên màn hình để áp dụng bảng phối màu xanh lục.
Có thể bạn sẽ thắc mắc về những vai trò này và cách sử dụng những vai trò này, sau đây là một số vai trò chính:
Tất cả cùng tạo ra một hệ thống thiết kế thống nhất, nơi các thành phần liên quan được tô màu tương đồng với nhau. Vậy là đủ lý thuyết về màu sắc — đã đến lúc thêm bảng màu đẹp mắt này vào ứng dụng! Thêm bảng màu vào giao diệnTrên trang Material Theme Builder (Trình tạo giao diện Material), bạn có thể nhấp vào nút Export (Xuất) để tải tệp Color.kt và tệp Theme.kt xuống giao diện tuỳ chỉnh đã tạo trong Trình tạo giao diện. Thao tác này sẽ thực hiện việc thêm giao diện tuỳ chỉnh mà chúng ta tạo vào ứng dụng của bạn. Tuy nhiên, vì tệp Theme.kt đã tạo không chứa đoạn mã cho màu động mà sau đó chúng ta sẽ đề cập đến trong lớp học lập trình này, hãy sao chép các tệp đó.
Trong
8,
3 sẽ sử dụng câu lệnh
4
Nội dung được sao chép trong tệp Theme.kt có giá trị
5 được thiết lập thành false và các thiết bị mà chúng ta đang xử lý đang ở chế độ sáng, nên
7 sẽ được thiết lập thành
5.
Ánh xạ màuCác thành phần Material sẽ được tự động ánh xạ tới ô màu. Đây là cách thanh trạng thái thay đổi thành Màu chính mà không cần thay đổi đoạn mã nào. Các thành phần chính khác trên giao diện người dùng như Nút hành động nổi cũng được thiết lập thành màu chính theo mặc định. Tức là bạn không cần chỉ định rõ ràng màu cho một thành phần; nó sẽ tự động được liên kết với ô màu khi bạn thiết lập chủ đề màu sắc trong ứng dụng của mình. Bạn có thể ghi đè giá trị này bằng cách thiết lập rõ ràng một màu sắc trong đoạn mã. Đọc thêm về vai trò của màu sắc tại đây. Trong phần này, chúng ta sẽ gói
8 chứa
9 và
0 bằng
2 để phân biệt màu của mục trong danh sách với màu nền.
Tệp kích thướcGiống như việc bạn sử dụng strings.xml để lưu trữ các chuỗi trong ứng dụng, bạn cũng nên sử dụng tệp dimens.xml để lưu trữ các giá trị kích thước. Cách này rất hữu ích để bạn không phải cố định các giá trị trong đoạn mã. Vì vậy, nếu cần, bạn có thể thay đổi chúng ở một nơi duy nhất. Chuyển đến app > res > values > dimens.xml rồi xem tệp. Tệp này lưu trữ các giá trị kích thước cho
4,
5 và
6. Các tham số này sẽ được sử dụng trên toàn ứng dụng.
Để thêm giá trị từ tệp dimens.xml, hãy định dạng đúng như sau: Ví dụ: để thêm
4, bạn sẽ truyền vào
8
4
0.
Trong
0, giờ đây sẽ có thêm định nghĩa giữa các mục danh sách. Giao diện tốiTrong hệ thống Android, bạn có thể chuyển đổi thiết bị sang giao diện tối. Giao diện tối sử dụng màu tối hơn, dịu hơn và:
Ứng dụng của bạn có thể chọn , nghĩa là hệ thống sẽ triển khai giao diện tối cho bạn. Tuy nhiên, người dùng sẽ có trải nghiệm tốt hơn nếu bạn triển khai giao diện tối. Theo đó, bạn vẫn có toàn quyền kiểm soát đối với giao diện ứng dụng. Khi bạn chọn giao diện tối, điều quan trọng cần lưu ý là màu sắc cần phải đáp ứng các tiêu chuẩn về độ tương phản cùng với tính năng hỗ trợ tiếp cận. Giao diện tối sử dụng một màu tối cho bề mặt, có các điểm nhấn màu sắc hạn chế. Xem giao diện tối trong bản xem trướcBạn đã thêm màu cho giao diện tối trong bước trước. Để xem giao diện tối đang hoạt động, bạn sẽ thêm một thành phần kết hợp Xem trước khác vào MainActivity.kt. Nhờ đó, khi thay đổi bố cục giao diện người dùng trong mã của mình, bạn có thể thử bản xem trước của giao diện sáng và giao diện tối cùng lúc.
0
1
2 Bây giờ, hãy di chuyển xuống ngăn Design (Thiết kế) để xem ứng dụng ở giao diện tối, bao gồm cả nền ứng dụng/danh sách mục có màu tối hơn và văn bản sáng hơn. So sánh sự khác biệt giữa giao diện tối và sáng. Giao diện tối Giao diện sáng Xem giao diện tối trên thiết bị hoặc trình mô phỏngĐể xem ứng dụng của bạn ở giao diện tối, trên trình mô phỏng hoặc thiết bị thực, bạn hãy thao tác như sau:
Lớp học lập trình này tập trung nhiều hơn vào giao diện sáng. Vì vậy, trước khi tiếp tục sử dụng ứng dụng, hãy tắt giao diện tối.
So sánh giao diện hiện tại của ứng dụng so với ban đầu. Các mục và văn bản trong danh sách được xác định rõ hơn, đồng thời, bảng phối màu cũng bắt mắt hơn. Không màu Có màu (giao diện sáng) Có màu (giao diện tối) Màu độngMaterial 3 tập trung chủ yếu vào hoạt động cá nhân hoá của người dùng. Một tính năng mới trong Material 3 là Màu động – tạo một giao diện cho ứng dụng dựa trên hình nền của người dùng. Theo đó, nếu người dùng yêu thích màu xanh lục và có nền điện thoại màu xanh dương, thì ứng dụng Woof cũng sẽ có màu xanh dương để phản ánh điều đó. Tính năng tuỳ chỉnh giao diện động chỉ có trên một số thiết bị chạy Android 12 trở lên. Bạn có thể dùng giao diện tuỳ chỉnh cho các ứng dụng có màu sắc mang đặc trưng thương hiệu mạnh và cũng cần triển khai giao diện này cho các thiết bị không hỗ trợ tuỳ chỉnh giao diện động để ứng dụng vẫn được tuỳ chỉnh giao diện.
3
4 5. Thêm hình dạngViệc áp dụng hình dạng có thể làm thay đổi giao diện của thành phần kết hợp rất nhiều. Hình dạng thường chi phối sự chú ý, cách xác định các thành phần, trạng thái giao tiếp và thể hiện thương hiệu. Nhiều hình dạng được xác định bằng cách sử dụng
09 để mô tả một hình chữ nhật có góc được bo tròn. Số được truyền vào sẽ xác định độ tròn của các góc. Nếu bạn dùng
10, hình chữ nhật đó sẽ không có góc tròn; nếu bạn dùng
11, các góc sẽ hoàn toàn tròn. Bạn cũng có thể tuỳ chỉnh hình dạng hơn nữa bằng cách thêm tỷ lệ bo tròn cho từng góc. Sẽ rất thú vị khi thay đổi các hình dạng! Trên cùng bên trái: 50.dp Dưới cùng bên trái: 25.dp Trên cùng bên phải: 0.dp Dưới cùng bên phải: 15.dp Trên cùng bên trái: 15.dp Dưới cùng bên trái: 50.dp Trên cùng bên phải: 50.dp Dưới cùng bên phải: 15.dp Trên cùng bên trái: 0.dp Dưới cùng bên trái: 50.dp Trên cùng bên phải: 0.dp Dưới cùng bên phải: 50.dp Tệp Shape.kt dùng để xác định hình dạng của các thành phần trong Compose. Có 3 loại thành phần: nhỏ, trung bình và lớn. Trong phần này, bạn sẽ sửa đổi thành phần
2, được xác định là kích thước
13. Các thành phần được nhóm thành dựa trên kích thước của các thành phần đó. Trong phần này, bạn sẽ định dạng hình ảnh của chú chó thành một hình tròn và sửa đổi hình dạng của mục trong danh sách. Sửa hình ảnh chú chó thành hình tròn
5
6 Khi nhìn vào
0, bạn sẽ thấy các biểu tượng chú chó có hình tròn! Tuy nhiên, một số ảnh bị cắt bớt ở hai bên và không thể hiện dưới dạng hình tròn hoàn toàn.
7 Đây là thành phần kết hợp
9 đầy đủ.
8 Giờ đây, trong
0, các biểu tượng có hình tròn. Thêm hình dạng vào mục trong danh sáchTrong phần này, bạn sẽ thêm một hình dạng vào mục trong danh sách. Mục này đang được hiển thị thông qua
2.
2 là nơi chứa một thành phần kết hợp duy nhất và các tuỳ chọn trang trí. Bạn có thể biến tấu giao diện thông qua đường viền, hình dạng, v.v. Trong phần này, bạn sẽ sử dụng
2 để thêm hình dạng vào mục trong danh sách.
9 Vì theo mặc định,
2 đã sử dụng hình dạng trung gian, nên bạn không cần phải thiết lập rõ ràng thành hình dạng trung gian. Hãy xem Bản xem trước và xem hình dạng mới của
2! Nếu quay lại tệp Theme.kt trong
8 và nhìn vào
38, bạn sẽ thấy thuộc tính
39 được thiết lập thành
32
41 mà bạn vừa cập nhật.
0 Dưới đây là hình ảnh so sánh các mục danh sách trước và sau khi tạo hình. Vui lòng lưu ý tác động của việc thêm hình dạng đối với việc làm cho giao diện của ứng dụng trở nên bắt mắt hơn. Không tạo hình Có tạo hình 6. Thêm kiểu chữKiểu chữ trong Material DesignKiểu chữ là tập hợp kiểu phông chữ được sử dụng trên ứng dụng, đảm bảo tính linh hoạt nhưng nhất quán. Kiểu chữ trong Material Design bao gồm 15 kiểu phông chữ mà hệ thống hỗ trợ. Cách đặt tên và phân nhóm đã được đơn giản hoá thành: hiển thị, dòng tiêu đề, tiêu đề, nội dung và nhãn, với kích thước lớn, trung bình và nhỏ cho mỗi nhóm. Bạn chỉ cần sử dụng các lựa chọn này nếu muốn tuỳ chỉnh ứng dụng của mình. Nếu bạn không biết nên đặt kiểu nào cho mỗi danh mục kiểu chữ, hãy nhớ là bạn luôn có thể sử dụng kiểu chữ mặc định. Kiểu chữ chứa các danh mục văn bản có thể tái sử dụng, mỗi loại đều có cách ứng dụng và ý nghĩa riêng. Màn hìnhLà văn bản lớn nhất trên màn hình, kiểu hiển thị được dành riêng cho văn bản/chữ số ngắn hoặc quan trọng. Các kiểu này hoạt động tốt nhất trên màn hình lớn. Dòng tiêu đềDòng tiêu đề là phù hợp nhất với văn bản ngắn, có mức độ nhấn mạnh cao trên màn hình nhỏ hơn. Có thể các kiểu này sẽ phù hợp để đánh dấu các đoạn văn bản chính hoặc vùng nội dung quan trọng. Tiêu đềKiểu Tiêu đề nhỏ hơn kiểu dòng tiêu đề và nên được sử dụng cho văn bản tương đối ngắn có mức độ nhấn mạnh trung bình. Nội dungKiểu Nội dung được sử dụng cho các đoạn văn bản dài hơn trong ứng dụng. NhãnKiểu Nhãn là những kiểu nhỏ hơn, thực dụng, được sử dụng cho những nội dung như văn bản bên trong thành phần hoặc cho văn bản rất nhỏ trong nội dung, chẳng hạn như chú thích. Phông chữNền tảng Android cung cấp nhiều phông chữ, nhưng bạn có thể tuỳ chỉnh ứng dụng của mình bằng các phông chữ không được cung cấp theo mặc định. Phông chữ tuỳ chỉnh có thể khiến văn bản trở nên cá tính và được dùng để thể hiện thương hiệu. Trong phần này, bạn sẽ thêm phông chữ tuỳ chỉnh có tên là Abril Fatface, Montserrat Bold và Montserrat Regular. Bạn sẽ sử dụng dòng tiêu đề displayLarge và displayMedium, và văn bản bodyLarge trong hệ thống kiểu chữ của Material, đồng thời thêm các dòng tiêu đề này vào văn bản trong ứng dụng. Tạo thư mục tài nguyên Android cho phông chữ.Trước khi thêm phông chữ vào ứng dụng, bạn cần thêm một thư mục phông chữ.
Tải phông chữ tuỳ chỉnh xuốngVì đang dùng phông chữ không phải do nền tảng Android cung cấp, nên bạn cần tải phông chữ tuỳ chỉnh xuống.
Dưới đây là giao diện của thư mục tài nguyên phông chữ tương ứng với 3 tệp phông chữ tuỳ chỉnh: Chạy phông chữ
1
2 Tiếp theo, bạn đặt các kiểu dòng tiêu đề khác nhau thành phông chữ mà bạn vừa thêm vào. Đối tượng
42 có các tham số cho 13 kiểu chữ được thảo luận ở trên. Bạn có thể xác định bao nhiêu tuỳ ý. Trong ứng dụng này, chúng ta sẽ thiết lập
54,
55 và
56. Trong phần tiếp theo của ứng dụng này, bạn sẽ sử dụng
57 để thêm tại đây. Dưới đây là bảng cho bạn thấy phông chữ, độ đậm và kích thước của mỗi dòng tiêu đề mà bạn sẽ thêm.
Lặp lại quá trình này đối với
55,
57 và
56.
3 Nếu bạn chuyển đến tệp Theme.kt trong
8 và xem
38, thì tham số
71 sẽ bằng
72 mà bạn vừa cập nhật.
0 Thêm kiểu chữ vào văn bản ứng dụngGiờ bạn sẽ thêm các kiểu dòng tiêu đề vào từng mục văn bản trong ứng dụng.
5
Dưới đây là hình ảnh so sánh các mục danh sách trước và sau khi thêm kiểu chữ. Hãy để ý đến sự khác biệt về phông chữ giữa tên chú chó và độ tuổi của chú chó. Không áp dụng kiểu chữ Có áp dụng kiểu chữ 7. Thêm thanh trên cùnglà một bố cục cung cấp các ô cho nhiều thành phần và thành phần trên màn hình, chẳng hạn như
18,
8 hoặc
83.
80 cũng cung cấp một ô cho mà bạn sẽ dùng trong phần này.
85 có thể được sử dụng cho nhiều mục đích, nhưng trong trường hợp này, bạn sẽ dùng nó để thể hiện thương hiệu cũng như bản sắc của ứng dụng. Có 4 loại
85: chính giữa, nhỏ, trung bình và lớn. Trong lớp học lập trình này, bạn sẽ triển khai thanh ứng dụng trên cùng chính giữa. Bạn sẽ tạo một thành phần kết hợp giống như ảnh chụp màn hình dưới đây rồi đặt vào phần
88 của
80. Đối với ứng dụng này, thanh trên cùng bao gồm
8 có hình ảnh biểu trưng và văn bản của tên ứng dụng. Biểu trưng có hình bàn chân chuyển màu dễ thương và tên ứng dụng! Thêm hình ảnh và văn bản vào thanh trên cùng
6
7
Giá trị
98 được truyền cho
5 dưới dạng
03.
8
9 Dưới đây là giao diện của thành phần kết hợp
4:
0 Không có gì thay đổi trong
0 do không có gì trong
91. Hãy thay đổi điều đó!
1
2
3
4 Đây là nội dung hiển thị trong
0, có vẻ hơi lệch vì biểu tượng và văn bản chưa được căn chỉnh theo chiều dọc.
5 Như vậy trông đẹp hơn nhiều! Đây là thành phần kết hợp
91 đầy đủ:
6 Chạy ứng dụng và chiêm ngưỡng cách
85 liên kết các thành phần của ứng dụng lại với nhau đẹp như thế nào. Không có thanh ứng dụng trên cùng Có thanh ứng dụng trên cùng Bây giờ, hãy xem ứng dụng hoàn thiện ở giao diện tối! Xin chúc mừng, bạn đã đến phần cuối của lớp học lập trình! 8. Lấy mã nguồn giải phápĐể tải mã này xuống khi lớp học lập trình đã kết thúc, bạn có thể sử dụng các lệnh git sau:
7 Ngoài ra, bạn có thể tải kho lưu trữ xuống dưới dạng tệp zip rồi giải nén và mở trong Android Studio. Nếu bạn muốn xem mã giải pháp, hãy xem mã đó trên GitHub. 9. Kết luậnĐây là ứng dụng đầu tiên bạn tạo ra bằng Material! Bạn đã tạo một bảng màu tuỳ chỉnh cho cả giao diện sáng lẫn tối, tạo hình cho các thành phần, tải phông chữ xuống và thêm chúng vào ứng dụng, đồng thời tạo một thanh trên cùng tuyệt đẹp để liên kết chúng lại với nhau. Hãy dùng những kỹ năng bạn đã học được ở lớp học lập trình này để điều chỉnh màu, hình dạng và kiểu chữ nhằm tạo một ứng dụng hoàn toàn theo ý bạn! Tóm tắt
10. Tìm hiểu thêm
Trừ khi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle. [{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Thiếu thông tin tôi cần" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Quá phức tạp/quá nhiều bước" },{ "type": "thumb-down", "id": "outOfDate", "label":"Đã lỗi thời" },{ "type": "thumb-down", "id": "translationIssue", "label":"Vấn đề về bản dịch" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Vấn đề về mẫu/mã" },{ "type": "thumb-down", "id": "otherDown", "label":"Khác" }] [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Dễ hiểu" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Giúp tôi giải quyết được vấn đề" },{ "type": "thumb-up", "id": "otherUp", "label":"Khác" }] |