Kiểu và giao diện trên maylanhchuyennghiep.com cho phép bạn tách riêng các chi tiết của thiết kế ứng dụng khỏi cấu trúc và hành vi trên giao diện người dùng, tương tự như các biểu định kiểu trong thiết kế web.
Đang xem: Bạn có thể tùy biến giao diện cho thiết bị android bằng những cách nào?
Kiểu (style) là một tập hợp thuộc tính chỉ định giao diện của một View.Kiểu có thể chỉ định các thuộc tính như màu phông chữ, kích thước phông chữ, màu nền, v.v.
Giao diện (theme) là một tập hợp thuộc tính được áp dụng cho toàn bộ ứng dụng, hoạt động hoặc hệ phân cấp thành phần hiển thị, chứ không chỉ một thành phần hiển thị riêng lẻ. Khi bạn áp dụng một giao diện, mọi thành phần hiển thị trong ứng dụng hoặc hoạt động sẽ áp dụng từng thuộc tính mà giao diện đó hỗ trợ. Giao diện cũng có thể áp dụng kiểu cho các thành phần không phải thành phần hiển thị, chẳng hạn như thanh trạng thái và nền cửa sổ.
Kiểu và giao diện được khai báo trong tệp tài nguyên kiểu trong res/values/, thường tên là styles.xml.
Hình 1. Hai giao diện được áp dụng cho cùng một hoạt động: Theme.AppCompat (bên trái) và Theme.AppCompat.Light (bên phải)
So sánh giao diện và kiểu
Giao diện và kiểu có nhiều điểm tương đồng nhưng chúng lại được sử dụng cho các mục đích riêng. Giao diện và kiểu có cùng cấu trúc cơ bản: một cặp khoá-giá trị ánh xạ thuộc tính với tài nguyên.
Kiểu chỉ định thuộc tính cho một loại thành phần hiển thị cụ thể.Ví dụ: kiểu có thể chỉ định các thuộc tính của một nút. Thuộc tính bạn chỉ định trong một kiểu là thuộc tính bạn có thể đặt trong tệp bố cục. Bằng cách trích xuất tất cả thuộc tính cho một kiểu, bạn có thể dễ dàng sử dụng và duy trì các thuộc tính đó trên nhiều tiện ích.
Giao diện xác định một tập hợp tài nguyên có tên mà bạn có thể tham chiếu theo kiểu, bố cục, tiện ích, v.v. Giao diện chỉ định tên ngữ nghĩa (chẳng hạn như colorPrimary) cho tài nguyên maylanhchuyennghiep.com.
Các kiểu và giao diện sẽ phối hợp với nhau. Ví dụ: bạn có thể có một kiểu chỉ định rằng một phần của nút là colorPrimary và một phần khác là colorSecondary. Định nghĩa thực tế về các màu đó được đưa ra trong giao diện. Khi thiết bị chuyển sang chế độ ban đêm, ứng dụng của bạn có thể chuyển từ giao diện “sáng” sang giao diện “tối”, thay đổi giá trị cho tất cả tên tài nguyên đó. Bạn không cần phải thay đổi kiểu, vì kiểu đang sử dụng tên ngữ nghĩa chứ không phải phần định nghĩa màu cụ thể.
Để biết thêm thông tin về cách thức phối hợp giữa giao diện và kiểu, hãy xem bài đăng Định kiểu cho maylanhchuyennghiep.com: Giao diện và kiểu trên blog.
Tạo và áp dụng kiểu
Để tạo một kiểu hoặc giao diện mới, hãy mở tệp res/values/styles.xml của dự án. Đối với mỗi kiểu bạn muốn tạo, hãy làm theo các bước sau:
Thêm một thành phần
Bạn có thể áp dụng kiểu cho thành phần hiển thị như sau:
Mỗi thuộc tính được chỉ định trong kiểu sẽ áp dụng cho một thành phần hiển thị nếu thành phần hiển thị đó chấp nhận. Thành phần hiển thị chỉ đơn giản bỏ qua mọi thuộc tính mà nó không chấp nhận.
Lưu ý: Chỉ phần tử mà bạn thêm thuộc tính style mới nhận được các thuộc tính kiểu như vậy – mọi thành phần hiển thị con sẽ không áp dụng các kiểu đó. Nếu bạn muốn thành phần hiển thị con kế thừa kiểu, hãy áp dụng kiểu đó bằng thuộc tính maylanhchuyennghiep.com:theme.
Tuy nhiên, thay vì áp dụng một kiểu cho từng thành phần hiển thị, thường thì bạn sẽ áp dụng kiểu dưới dạng giao diện cho toàn bộ ứng dụng, hoạt động hoặc bộ sưu tập thành phần hiển thị.
Mở rộng và tuỳ chỉnh kiểu
Khi tự tạo kiểu, bạn phải luôn mở rộng kiểu hiện tại trên thư viện hỗ trợ hoặc khung để duy trì khả năng tương thích với kiểu giao diện người dùng của nền tảng.Để mở rộng một kiểu, hãy chỉ định kiểu bạn muốn mở rộng bằng thuộc tính parent.Sau đó, bạn có thể ghi đè các thuộc tính kiểu kế thừa và thêm thuộc tính mới.
Ví dụ: bạn có thể kế thừa giao diện văn bản mặc định của nền tảng maylanhchuyennghiep.com và sửa đổi giao diện đó như sau:
Tuy nhiên, bạn phải luôn kế thừa các kiểu ứng dụng cốt lõi trên Thư viện hỗ trợ maylanhchuyennghiep.com.Các kiểu trong thư viện hỗ trợ cung cấp khả năng tương thích với maylanhchuyennghiep.com 4.0 (API cấp 14) trở lên bằng cách tối ưu hoá từng kiểu cho các thuộc tính giao diện người dùng có sẵn trong mỗi phiên bản.Kiểu thư viện hỗ trợ thường có tên tương tự như kiểu trên nền tảng, nhưng trong đó có AppCompat.
Để kế thừa kiểu trên thư viện hoặc dự án của riêng bạn, hãy khai báo tên kiểu gốc không có phần
maylanhchuyennghiep.com:style/ như trên.Ví dụ: ví dụ sau kế thừa các kiểu giao diện văn bản trên thư viện hỗ trợ:
Bạn cũng có thể kế thừa kiểu (ngoại trừ các kiểu trên nền tảng) bằng cách mở rộng tên của kiểu bằng ký hiệu dấu chấm, thay vì sử dụng thuộc tính parent.Tức là hãy đặt tên kiểu bạn muốn kế thừa vào trước tên kiểu của bạn, phân tách bằng dấu chấm. Bạn chỉ nên thực hiện việc này khi mở rộng kiểu của riêng bạn, chứ không phải kiểu trên các thư viện khác. Ví dụ: kiểu sau đây kế thừa mọi kiểu của kiểu GreenText ở trên, sau đó tăng kích thước văn bản:
Bạn có thể tiếp tục kế thừa các kiểu như vậy bao nhiêu lần tuỳ thích bằng cách đưa chuỗi này vào thêm nhiều tên.
Lưu ý: Nếu bạn sử dụng ký hiệu dấu chấm để mở rộng một kiểu đồng thời thêm thuộc tính parent, thì kiểu gốc sẽ ghi đè mọi kiểu được kế thừa thông qua ký hiệu dấu chấm đó.
Để tìm những thuộc tính bạn có thể khai báo bằng thẻ , hãy tham khảo bảng “thuộc tính XML” trong nhiều mã tham chiếu lớp. Tất cả thành phần hiển thị đều hỗ trợ thuộc tính XML trên lớp View cơ sở; nhiều thành phần hiển thị cũng thêm thuộc tính riêng của chính nó.Ví dụ: thuộc tính TextView XML bao gồm cả thuộc tính maylanhchuyennghiep.com:inputType mà bạn có thể áp dụng cho thành phần hiển thị văn bản nhận được giá trị nhập, chẳng hạn như dưới dạng một tiện ích EditText.
Áp dụng kiểu dưới dạng giao diện
Bạn có thể tạo một giao diện giống như cách bạn tạo kiểu. Điểm khác biệt là cách bạn áp dụng kiểu đó: thay vì áp dụng một kiểu bằng thuộc tính style trên một thành phần hiển thị, bạn áp dụng một giao diện bằng thuộc tính maylanhchuyennghiep.com:theme trên thẻ hoặc thẻ trong tệp maylanhchuyennghiep.comManifest.xml.
Ví dụ: sau đây là cách áp dụng giao diện “tối” trong Material Design của Thư viện hỗ trợ maylanhchuyennghiep.com cho toàn bộ ứng dụng:
Và sau đây là cách áp dụng giao diện “sáng” chỉ cho một hoạt động:
Bây giờ, mọi thành phần hiển thị trong ứng dụng hoặc hoạt động sẽ áp dụng kiểu được xác định trong giao diện đã cho. Nếu một thành phần hiển thị chỉ hỗ trợ một số thuộc tính được khai báo trong kiểu, thì thành phần hiển thị đó chỉ áp dụng các thuộc tính đó và bỏ qua các thuộc tính không được hỗ trợ.
Xem thêm: Bí Quyết Thi Bằng Lái Xe Máy Ở Thủ Đức Tphcm, Thi Bằng Lái Xe Máy Quận Thủ Đức Tphcm
Kể từ maylanhchuyennghiep.com 5.0 (API cấp 21) và Thư viện hỗ trợ maylanhchuyennghiep.com phiên bản 22.1, bạn cũng có thể chỉ định thuộc tính maylanhchuyennghiep.com:theme cho một thành phần hiển thị trong tệp bố cục.Thao tác này sẽ sửa đổi giao diện của thành phần hiển thị đó và mọi thành phần hiển thị con. Điều này rất hữu ích khi thay đổi bảng màu của giao diện trong một phần cụ thể trên giao diện.
Các ví dụ trước cho thấy cách áp dụng một giao diện, chẳng hạn như Theme.AppCompat do Thư viện hỗ trợ maylanhchuyennghiep.com cung cấp. Tuy nhiên, thường thì bạn nên tuỳ chỉnh giao diện để phù hợp với thương hiệu của ứng dụng. Cách tốt nhất để làm như vậy là mở rộng các kiểu này trên thư viện hỗ trợ và ghi đè một số thuộc tính, như mô tả trong phần tiếp theo.
Hệ thống phân cấp kiểu
maylanhchuyennghiep.com cung cấp nhiều cách để đặt giá trị cho thuộc tính trong ứng dụng maylanhchuyennghiep.com. Ví dụ: bạn có thể trực tiếp đặt giá trị cho các thuộc tính trong bố cục, áp dụng kiểu cho thành phần hiển thị, áp dụng giao diện cho bố cục và thậm chí có thể đặt giá trị cho thuộc tính theo phương thức lập trình.
Khi chọn cách định kiểu cho ứng dụng, hãy lưu ý đến hệ thống phân cấp kiểu của maylanhchuyennghiep.com. Nhìn chung, bạn nên sử dụng càng nhiều giao diện và kiểu càng tốt để đảm bảo tính nhất quán. Nếu bạn chỉ định cùng thuộc tính cho nhiều vị trí, thì danh sách sau đây xác định những thuộc tính cuối cùng cũng được áp dụng. Danh sách được sắp xếp theo thứ tự ưu tiên từ cao nhất đến thấp nhất:
Áp dụng kiểu cấp ký tự hoặc cấp đoạn văn bản trong khoảng văn bản đối với các lớp bắt nguồn từ TextView Áp dụng các thuộc tính theo phương thức lập trình Áp dụng trực tiếp từng thuộc tính riêng lẻ cho thành phần hiển thị Áp dụng kiểu cho thành phần hiển thị (View) Kiểu mặc định Áp dụng một giao diện cho một bộ sưu tập thành phần hiển thị (View), một hoạt động hoặc toàn bộ ứng dụng
Hình 2. Kiểu trên span ghi đè kiểu trên textAppearance.
Nếu bạn đang cố gắng định kiểu cho ứng dụng nhưng không thấy kết quả như mong đợi, thì có khả năng là kiểu khác đang ghi đè thay đổi của bạn. Ví dụ: nếu bạn áp dụng một giao diện cho ứng dụng cùng với một kiểu cho một View riêng lẻ, thì các thuộc tính kiểu sẽ ghi đè mọi thuộc tính giao diện trùng khớp của View đó. Tuy nhiên, hãy lưu ý rằng hệ thống vẫn sử dụng mọi thuộc tính giao diện không bị kiểu ghi đè.
TextAppearance
Một hạn chế về kiểu là bạn chỉ có thể áp dụng một kiểu cho mỗi View. Tuy nhiên, trong thuộc tính TextView, bạn cũng có thể chỉ định thuộc tính TextAppearance. Thuộc tính này hoạt động tương tự như kiểu, như minh hoạ trong ví dụ sau:
TextAppearance cho phép bạn xác định kiểu văn bản cụ thể trong khi vẫn để nguyên kiểu của View cho các mục đích sử dụng khác. Tuy nhiên, hãy lưu ý rằng nếu bạn trực tiếp xác định một thuộc tính văn bản nào đó trên View hoặc ở một kiểu nào đó, thì các giá trị đó sẽ ghi đè các giá trị TextAppearance.
TextAppearance hỗ trợ một số thuộc tính định kiểu mà TextView cung cấp. Để nắm được danh sách thuộc tính đầy đủ, hãy xem TextAppearance.
Có một số thuộc tính TextView phổ biến không được bao gồm, đó là lineHeight
Tuỳ chỉnh giao diện mặc định
Khi bạn tạo một dự án bằng maylanhchuyennghiep.com Studio, maylanhchuyennghiep.com Studio sẽ áp dụng giao diện Material Design cho ứng dụng của bạn theo mặc định, như định nghĩa trong tệp styles.xml của dự án. Kiểu AppTheme này mở rộng một giao diện trên thư viện hỗ trợ và có lệnh ghi đè cho các thuộc tính màu mà các thành phần trên giao diện người dùng sử dụng, chẳng hạn như thanh ứng dụng và nút hành động nổi (nếu có sử dụng).Vì vậy, bạn có thể nhanh chóng tuỳ chỉnh thiết kế màu của ứng dụng bằng cách cập nhật màu được cung cấp.
Ví dụ: tệp styles.xml của bạn sẽ có dạng như sau:
Hãy lưu ý rằng thực ra thì các giá trị kiểu tham chiếu đến các tài nguyên màu khác, được xác định trong tệp res/values/colors.xml của dự án. Vì vậy, đó là tệp bạn nên chỉnh sửa để thay đổi màu.Nhưng trước khi bạn bắt đầu thay đổi những màu này, hãy xem trước màu qua Công cụ màu của Material. Công cụ này giúp bạn chọn màu trong bảng màu của Material cũng như xem trước các màu đó trong ứng dụng.
Sau khi bạn chọn xong màu, hãy cập nhật giá trị trong res/values/colors.xml:
#3F51B5 #303F9F #FF4081Sau đó, bạn có thể ghi đè bất kỳ kiểu nào khác mà bạn muốn. Ví dụ: bạn có thể thay đổi màu nền của hoạt động như sau:
Để biết danh sách các thuộc tính mà bạn có thể sử dụng trong giao diện, hãy xem bảng thuộc tính tại R.styleable.Theme. Và khi thêm kiểu cho các thành phần hiển thị trong bố cục, bạn cũng có thể tìm thấy các thuộc tính bằng cách xem bảng “XML attributes” (“thuộc tính XML”) trong tham chiếu đến lớp thành phần hiển thị. Ví dụ: tất cả thành phần hiển thị đều hỗ trợ các thuộc tính XML trên lớp View cơ sở.
Hầu hết thuộc tính được áp dụng cho một số loại thành phần hiển thị cụ thể, còn một số khác áp dụng cho tất cả thành phần hiển thị.Tuy nhiên, một số thuộc tính giao diện nêu tại R.styleable.Theme sẽ áp dụng cho cửa sổ hoạt động, không áp dụng cho thành phần hiển thị trong bố cục.Ví dụ: windowBackground thay đổi nền cửa sổ và windowEnterTransition xác định ảnh động chuyển đổi được sử dụng khi hoạt động bắt đầu (để biết thông tin chi tiết, hãy xem nội dung Bắt đầu Hoạt động bằng Ảnh động).
Thư viện hỗ trợ maylanhchuyennghiep.com cũng cung cấp các thuộc tính khác mà bạn có thể sử dụng để tuỳ chỉnh giao diện được mở rộng trên Theme.AppCompat (chẳng hạn như thuộc tính colorPrimary nêu trên). Bạn có thể xem các phương pháp hay nhất này trong tệp attrs.xml của thư viện
Lưu ý: Tên thuộc tính trong thư viện hỗ trợ không sử dụng tiền tố maylanhchuyennghiep.com:. Lệnh này chỉ được dùng cho các thuộc tính trên khung maylanhchuyennghiep.com.
Thư viện hỗ trợ cũng có nhiều giao diện khác mà có thể bạn muốn mở rộng thay cho các giao diện nêu trên. Nơi tốt nhất để xem các giao diện có sẵn là tệp themes.xml của thư viện.
Thêm kiểu cho phiên bản cụ thể
Nếu phiên bản maylanhchuyennghiep.com mới bổ sung một số thuộc tính giao diện mà bạn muốn sử dụng, thì bạn có thể thêm các thuộc tính đó vào giao diện mà vẫn tương thích với phiên bản cũ. Bạn chỉ cần lưu một tệp styles.xml khác trong thư mục values, trong đó có bộ hạn định phiên bản tài nguyên. Ví dụ:
res/values/styles.xml # themes for all versionsres/values-v21/styles.xml # themes for API level 21+ onlyVì mọi phiên bản đều dùng được các kiểu trong tệp values/styles.xml nên giao diện trong values-v21/styles.xml có thể kế thừa các kiểu đó.Do vậy, bạn có thể tránh tình trạng sao chép kiểu bằng cách bắt đầu qua giao diện “cơ sở” rồi mở rộng giao diện đó trong các kiểu dành riêng cho phiên bản của bạn.
Ví dụ: để khai báo hiệu ứng chuyển đổi cửa sổ cho maylanhchuyennghiep.com 5.0 (API cấp 21) trở lên, bạn cần sử dụng một số thuộc tính mới. Giao diện cơ sở của bạn trong res/values/styles.xml có thể có dạng như sau:
Bây giờ, bạn có thể áp dụng AppTheme trong tệp kê khai và hệ thống sẽ chọn các kiểu hiện có cho từng phiên bản hệ thống.
Để biết thêm thông tin về cách sử dụng tài nguyên thay thế cho nhiều thiết bị, hãy đọc nội dung Cung cấp tài nguyên.
Tuỳ chỉnh kiểu tiện ích
Mỗi tiện ích trong khung và thư viện hỗ trợ đều có một kiểu mặc định. Ví dụ: khi bạn tạo kiểu cho ứng dụng bằng một giao diện trên thư viện hỗ trợ, thực thể của Button sẽ được định kiểu bằng kiểu Widget.AppCompat.Button. Nếu muốn áp dụng kiểu tiện ích khác cho một nút (button), thì bạn có thể thực hiện bằng thuộc tính style trong tệp bố cục. Ví dụ: mã sau đây áp dụng kiểu nút không đường viền của thư viện:
Và nếu muốn áp dụng kiểu này cho mọi nút, thì bạn có thể khai báo kiểu này trong buttonStyle của giao diện như sau:
Bạn cũng có thể mở rộng kiểu tiện ích, giống như khi mở rộng bất kỳ kiểu nào khác, rồi áp dụng kiểu tiện ích tuỳ chỉnh trong bố cục hoặc giao diện của mình.