Khi nào thì nên sử dụng Theme.AppCompat so với ThemeOverlay.AppCompat?


113

Có các lớp Theme.AppCompat sau:

Theme.AppCompat
Theme.AppCompat.Light
Theme.AppCompat.Light.DarkActionBar
Theme.AppCompat.NoActionBar
Theme.AppCompat.Light.NoActionBar
Theme.AppCompat.DialogWhenLarge
Theme.AppCompat.Light.DialogWhenLarge
Theme.AppCompat.Dialog
Theme.AppCompat.Light.Dialog
Theme.AppCompat.CompactMenu

và các lớp ThemeOverlay.AppCompat sau:

ThemeOverlay.AppCompat
ThemeOverlay.AppCompat.Light
ThemeOverlay.AppCompat.Dark
ThemeOverlay.AppCompat.ActionBar
ThemeOverlay.AppCompat.Dark.ActionBar

Tại sao người ta lại sử dụng ThemeOverlay.AppCompat.light so với Theme.AppCompat.Light chẳng hạn? Tôi thấy rằng có ít thuộc tính hơn được xác định cho ThemeOverlay - Tôi tò mò trường hợp sử dụng dự định cho ThemeOverlay là gì.

Câu trả lời:


71

Theo bài đăng trên blog Chủ đề và Phong cách này của người tạo ra AppCompat:

[ThemeOverlays] là các chủ đề đặc biệt phủ lên các chủ đề Theme.Material bình thường, ghi đè các thuộc tính có liên quan để làm cho chúng sáng / tối.

ThemeOverlay + ActionBar

Những người tinh mắt của bạn cũng sẽ thấy các dẫn xuất của ActionBar ThemeOverlay:

  • ThemeOverlay.Material.Light.ActionBar
  • ThemeOverlay.Material.Dark.ActionBar

Chúng chỉ nên được sử dụng với Thanh tác vụ thông qua actionBarTheme thuộc tính hoặc đặt trực tiếp trên Thanh công cụ của bạn.

Điều duy nhất mà những người này hiện đang làm khác với cha mẹ của họ là họ thay đổi colorControlNormalhiện hữu android:textColorPrimary, do đó làm cho bất kỳ văn bản và biểu tượng nào trở nên mờ đục.


155

Theme.AppCompat được sử dụng để đặt chủ đề chung cho toàn bộ ứng dụng. ThemeOverlay.AppCompat được sử dụng để ghi đè (hoặc "lớp phủ") chủ đề đó cho các dạng xem cụ thể, đặc biệt là Thanh công cụ.

Hãy xem một ví dụ tại sao điều này là cần thiết.

Chủ đề ứng dụng với ActionBar

ActionBar thường được hiển thị trong một ứng dụng. Tôi có thể chọn màu của nó bằng cách đặt colorPrimarygiá trị. Tuy nhiên, việc thay đổi chủ đề sẽ làm thay đổi màu của văn bản trên ActionBar.

<style name="AppTheme" parent="Theme.AppCompat">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

nhập mô tả hình ảnh ở đây

Vì màu chính của tôi là màu xanh lam đậm, có lẽ tôi nên sử dụng một trong những chủ đề sử dụng màu văn bản sáng trong thanh tác vụ vì văn bản màu đen rất khó đọc.

Ẩn Thanh hành động và sử dụng Thanh công cụ

Toàn bộ điểm của việc sử dụng Theme.AppCompat thay vì Theme.Material là để chúng tôi có thể cho phép các phiên bản Android cũ hơn sử dụng chủ đề material design của chúng tôi. Vấn đề là các phiên bản Android cũ hơn không hỗ trợ ActionBar. Do đó, tài liệu khuyên bạn nên ẩn ActionBar và thêm Thanh công cụ vào bố cục của bạn. Để ẩn ActionBar, chúng ta phải sử dụng một trong các NoActionBarchủ đề. Các hình ảnh sau đây hiển thị Thanh công cụ với Thanh hành động bị ẩn.

nhập mô tả hình ảnh ở đây

Nhưng nếu tôi muốn một thứ gì đó như chủ đề Ánh sáng với DarkActionBar thì sao? Vì tôi phải sử dụng NoActionBar, đó không phải là một tùy chọn.

Ghi đè Chủ đề ứng dụng

Đây là nơi ThemeOverlay xuất hiện. Tôi có thể chỉ định chủ đề Dark ActionBar trong bố cục xml trên Thanh công cụ của mình.

<android.support.v7.widget.Toolbar
    ...
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

Điều này cuối cùng cho phép chúng tôi có được hiệu ứng mà chúng tôi muốn. Chủ đề Dark.ActionBar phủ lên chủ đề ứng dụng Ánh sáng cho dịp đặc biệt này.

nhập mô tả hình ảnh ở đây

  • Chủ đề ứng dụng: Theme.AppCompat.Light.NoActionBar
  • Chủ đề Thanh công cụ: ThemeOverlay.AppCompat.Dark.ActionBar

Nếu bạn muốn menu bật lên sáng sủa, bạn có thể thêm cái này:

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

Học cao hơn

Tôi học được điều này thông qua thử nghiệm và thông qua việc đọc các bài báo sau.


Làm thế nào để làm cho thanh trạng thái trong suốt khi sử dụng Themeoverlay?
gegobyte

Tôi đang tự hỏi làm thế nào để đạt được điều này với MaterialToolbar mới
David

@David, hiện tại tôi chủ yếu làm việc với Flutter, vì vậy tôi chưa cập nhật được những phát triển mới của Android. Nếu bạn tìm thấy câu trả lời, vui lòng quay lại đây và để lại nhận xét, chỉnh sửa câu trả lời của tôi hoặc thêm câu trả lời của riêng bạn.
Suragch
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.