Share Button
Tùy Biến Các Action Bar
09
September
2013

Trung tâm đào tạo khóa học lập trình di động đà nẵng chia sẽ bài đăng về tùy biến các Action Bar.

Từ khi giới thiệu các mẫu thiết kế Bar Action, nhiều ứng dụng đã áp dụng nó như là một cách để cung cấp dễ dàng truy cập vào các hành động chung. Trong Android 3.0 (Honeycomb hoặc cho phiên bản tương tự của nó) mô hình này đã được làm nóng lên trong như mô hình điều hướng mặc định và mở rộng để tận dụng lợi thế trong những bổ sung có sẵn trên máy tính bảng. Bằng việc sử dụng Action Bar trong các ứng dụng Honeycomb được nhắm mục tiêu của bạn, bạn sẽ cung cấp cho người dùng của bạn một cách quen thuộc để tương tác với các ứng dụng của bạn. Ngoài ra, ứng dụng của bạn sẽ được chuẩn bị tốt hơn để mở rộng trên phạm vi của các thiết bị Android sẽ đến bắt đầu trong thời đại Honeycomb.

Chỉ vì Action Bars  quen thuộc, không có nghĩa là chúng phải được giống hệt nhau! Các mẫu mã sau và dự án kèm theo chứng minh làm thế nào để phong cách Action Bar để phù hợp với xây dựng thương hiệu của ứng dụng. Tôi sẽ chứng minh làm thế nào để tùy chỉnh theme Holo.Light Honeycomb và  tùy chỉnh nó để phù hợp với màu sắc trong blog này.

<style name=”Theme.AndroidDevelopers” parent=”android:style/Theme.Holo.Light”>

</style>

ICON
Bước này là dễ dàng, tôi sẽ sử dụng tuyệt vời Android  Asset Studio để tạo ra một biểu tượng trong màu sắc lựa chọn của tôi. Đối với tín dụng bổ sung, tôi sẽ sử dụng hình ảnh này như là một điểm khởi đầu để tạo ra một logo thương hiệu hơn.

logo1

Navigation
Tiếp theo, phần chuyển hướng của Action Bar hoạt động trong ba chế độ khác nhau, tôi sẽ giải quyết lần lượt.

Standard
Chế độ chuyển hướng tiêu chuẩn Action Bar chỉ đơn giản là hiển thị tiêu đề của hoạt động này. Không đòi hỏi bất kỳ phong cách … tiếp tục!

List
Bên trái, một danh sách các thả xuống, sang phải, có hiệu ứng mà chúng tôi muốn đạt được.

android1

Phong cách mặc định trong chế độ chuyển hướng danh sách có màu sắc xanh. Điều này là hiển nhiên khi chạm vào điều khiển thu gọn ở cả hai thanh trên, và đánh dấu lựa chọn trong danh sách mở rộng. Chúng ta có thể thay theme thành phần này bằng cách ghi đè Android: actionDropDownStyle với một phong cách tùy chỉnh để thực hiện màu sắc của chúng tôi:

<!-- style the list navigation -->
<style name="MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar">
    <item name="android:background">@drawable/ad_spinner_background_holo_light</item>
    <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item>
    <item name="android:dropDownSelector">@drawable/ad_selectable_background</item>
</style>

Trên đây sử dụng một sự kết hợp của danh sách drawables nhà nước và 9 bản vá hình ảnh với phong cách spinner sổ xuống, thanh trên cùng của danh sách mở rộng và thiết lập các màu sắc nổi bật khi chọn một mục.

P/S: cùng với cách thêm giao diện android, sẽ hỗ trợ các bạn

Tabs

Đây là trước và sau khi bức ảnh trên bộ điều khiển điều hướng tab:

android2

Trung tâm đào tạo khóa học seo đà nẵngKiểm soát điều hướng tab sử dụng màu xanh tiêu chuẩn. Chúng ta có thể áp dụng một phong cách tùy chỉnh để Android: actionBarTabStyle để thiết lập thể vẽ được riêng tùy chỉnh của chúng tôi sử dụng bảng màu mong muốn của chúng tôi: 

<!-- style for the tabs -->
<style name="MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBarView_TabView">
    <item name="android:background">@drawable/actionbar_tab_bg</item>
    <item name="android:paddingLeft">32dp</item>
    <item name="android:paddingRight">32dp</item>
</style>

Action 
Trước và sau khi vào các mục riêng trong Action Bar:

android3

Các mục hành động cá nhân kế thừa nền màu xanh mặc định khi lựa chọn. Chúng tôi có thể tùy chỉnh Action này bằng cách ghi đè Android: selectableItemBackground và thiết lập một hình thể vẽ được với màu sắc mong muốn của chúng tôi:

<item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>

Menu overflow cũng cần được chăm sóc như khi mở rộng nó cho thấy một thanh màu xanh ở đầu danh sách. Chúng ta có thể ghi đè lên Android: popupMenuStyle và thiết lập một drawable tùy biến (trong thực tế, thể vẽ được rất giống chúng tôi trước đây được sử dụng để điều hướng danh sách) cho trên của menu tràn:

<!-- style the overflow menu -->
<style name="MyPopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow">
    <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item> 
</style>

Lựa chọn các mục trong menu overflow cũng hiển thị màu sắc lựa chọn mặc định. Chúng ta có thể thiết lập màu lựa chọn tùy chỉnh của chúng tôi bằng cách ghi đè Android: dropDownListViewStyle:

<!-- style the items within the overflow menu -->
<style name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">
    <item name="android:listSelector">@drawable/ad_selectable_background</item>
</style>

Những thay đổi này được chúng tôi hầu hết các con đường đó nhưng đó là sự chú ý đến từng chi tiết mà làm cho một ứng dụng. Kiểm tra hộp và nút radio trong mục trình đơn trong phần overflow vẫn còn sử dụng các tài sản mặc định mà có điểm nhấn màu xanh. Chúng ta hãy ghi đè lên chúng để phù hợp với theme của chúng tôi:

<item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
<item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>

Nền

Tôi đã rời khỏi nền trong suốt như kế thừa hình thức Holo.Light hoạt động tốt cho bảng màu mong muốn của chúng tôi. Nếu bạn muốn tùy chỉnh nó, bạn dễ dàng ghi đè lên Android: nền mục trên Android: actionBarStyle phong cách:

<style name="MyActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@drawable/action_bar_background</item>
</style>

Đưa nó tất cả cùng nhau

Đặt tất cả các thành phần này lại với nhau chúng ta có thể tạo ra một phong cách riêng:

<style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light">
    <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>
    <item name="android:popupMenuStyle">@style/MyPopupMenu</item>
    <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
    <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
    <item name="android:actionDropDownStyle">@style/MyDropDownNav</item>
    <item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
    <item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>
</style>

Sau đó chúng ta có thể áp dụng phong cách này hoặc là một hoạt động cá nhân hoặc toàn bộ ứng dụng:

<activity android:name=".MainActivity" 
          android:label="@string/app_name"
          android:theme="@style/Theme.AndroidDevelopers"
          android:logo="@drawable/ad_logo">

Lưu ý rằng một số các phong cách hệ thống mà chúng tôi đã ghi đè trong ví dụ này sẽ ảnh hưởng nhiều hơn so với Action Bar. Ví dụ trọng Android: selectableItemBackground sẽ ảnh hưởng rất nhiều vật dụng có hỗ trợ một nhà nước lựa chọn. Điều này rất hữu ích cho việc định dạng toàn bộ ứng dụng của bạn, nhưng hãy chắc chắn để kiểm tra rằng tuỳ chỉnh của bạn được áp dụng nhất quán. Trung tâm đào tạo khóa hoc lap trinh android tại da nang chúc các bạn có những giây phút thú vị với những giao diện mới.

 

Đăng bình luận

Thành viên bình luận

  • 3317 View