Advertisement
  1. Code
  2. Android SDK
Code

Tạo compound views trên Android

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Khi xây dựng các ứng dụng phức tạp, bạn thường muốn sử dụng lại cùng một nhóm views ở nhiều nơi khác nhau của ứng dụng. Một cách để giải quyết vấn đề này là bằng cách tạo một view đóng gói logic và bố cục của một nhóm các view để bạn có thể sử dụng chúng lại mà không cần sao chép code ở nhiều nơi khác nhau của dự án. Trong hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng compound views để tạo views tùy chỉnh có thể dễ dàng sử dụng lại.

1. Giới thiệu

Ở Android, một view gồm một nhóm views được gọi là compound views hoặc compound component. Trong hướng dẫn này, bạn sẽ xây dựng một điều khiển để chọn một giá trị từ danh sách có thể cuộn từ bên này sang bên kia. Chúng tôi sẽ đặt tên cho compound là side spinner vì view mặc định của SDK Android để chọn một giá trị từ danh sách được gọi là spinner. Ảnh chụp màn hình sau đây minh họa điều chúng ta sẽ tạo ra trong hướng dẫn này.

2. Thiết lập dự án

Để bắt đầu, bạn phải tạo một dự án Android mới với Android 4.0 là SDK yêu cầu tối thiểu. Dự án này chỉ nên chứa một activity trống có tên MainActivity. Activity chỉ dùng để khởi tạo bố cục như bạn thấy trong đoạn code sau.

Bố cục cho MainActivity nằm trong file /res/layout/activity_main.xml và chỉ nên chứa một RelativeLayout trống trong đó compound view sẽ được hiển thị sau.

3. Tạo compound view

Để tạo compound view, bạn phải tạo một class mới quản lý các views trong compound view. Đối với side spinner, bạn cần hai view Button cho mũi tên và view TextView để hiển thị giá trị đã chọn.

Để bắt đầu, hãy tạo file layout /res/layout/sidespinner_view.xml mà chúng tôi sẽ sử dụng cho class side spinner, đảm bảo bọc ba views này trong thẻ <merge>.

Tiếp theo, chúng ta cần tạo class SideSpinner làm tăng bố cục này và đặt các mũi tên làm hình nền cho các button. Tại thời điểm này, compound view không làm gì cả vì chưa có gì để hiển thị.

Bạn sẽ nhận thấy rằng compound view mở rộng nhóm views LinearLayout. Điều này có nghĩa là bất kỳ bố cục nào sử dụng compound view đều có quyền truy cập vào các thuộc tính của linear layout. Do đó, bố cục cho compound view hơi khác so với thông thường, thẻ gốc là thẻ  <merge> thay vì thẻ cho view group như hoặc <LinearLayout> hoặc <RelativeLayout>.

Khi bạn thêm compound view vào bố cục của MainActivity, thẻ cho compound view sẽ activity như một thẻ <LinearLayout>. Một class compound view có thể băt nguồn từ bất kỳ class nào có bắt nguồn từ ViewGroup, nhưng trong trường hợp này, linear layout là phù hợp nhất vì các view được đặt theo chiều ngang.

4. Bổ sung một compound view vào layout

Tại thời điểm này, dự án biên dịch nhưng chưa hiển thị gì do compound view không nằm trong bố cục của MainActivity. View side spinner được thêm vào bố cục của activity như bất kỳ view nào khác. Tên của thẻ là tên đầy đủ của class SideSpinner, bao gồm cả namespace.

Để thêm side spinner vào MainActivity, hãy bổ sung phần sau vào relative layout trong file /res/layout/activity_main.xml.

Các thuộc tính có sẵn trong thẻ <SideSpinner> là các thuộc tính của linear layout do class SideSpinner chúng tôi đã extend class LinearLayout. Nếu bạn khởi chạy dự án, side spinner sẽ hiển thị, nhưng chưa có giá trị nào.

5. Thêm các phương thức vào compound view

Vẫn còn cần bổ sung một vài thứ nếu chúng ta thực sự muốn sử dụng side spinner. Chúng ta sẽ có thể bổ sung các giá trị mới vào spinner, chọn một giá trị và nhận giá trị đã chọn.

Cách dễ nhất để bổ sung các behaviors mới vào compound view là thêm các phương thức public mới vào class SideSpinner. Các phương thức này có thể được sử dụng bởi bất kỳ Activity nào có tham chiếu đến views.

Phương thức onFinishInflate của compound view được gọi khi tất cả các views trong layout được inflate và sẵn sàng sử dụng. Đây là nơi bổ sung code của bạn nếu bạn cần chỉnh sửa các view trong compound view.

Với các phương thức bạn vừa thêm vào class SideSpinner, behavior cho các button chọn giá trị trước đó và tiếp theo giờ có thể được bổ sung vào. Thay thế code hiện có trong phương thức onFinishInflate bằng nôi dung sau:

Với các phương thức setValues và setSelectedIndex vừa tạo, giờ đây chúng ta có thể khởi tạo side spinner từ code của mình. Như với bất kỳ view nào khác, bạn cần tìm view của side spinner trong layout với phương thức findViewById. Sau đó, chúng ta có thể gọi bất kỳ phương thức công khai nào trên view từ đối tượng được trả về, bao gồm cả phương thức chúng ta vừa tạo.

Đoạn code sau đây cho thấy cách cập nhật phương thức onCreate của class MainActivity để hiển thị danh sách các giá trị trong side spinner, sử dụng phương thức setValues. Theo mặc định, chúng ta cũng có thể chọn giá trị thứ hai trong danh sách bằng cách gọi phương thức setSelectedIndex.

Nếu bạn khởi chạy ứng dụng, side spinner sẽ hoạt động như mong đợi. Danh sách các giá trị được hiển thị và giá trị Orange được chọn theo mặc định.

6. Thêm thuộc tính layout vào compound view

Các views có sẵn trong SDK Android có thể được sửa đổi thông qua code, nhưng một số thuộc tính cũng có thể được thiết lập trực tiếp trong relative layout. Chúng ta hãy bổ sung một thuộc tính cho side spinner để đặt các giá trị mà side spinner cần hiển thị.

Để tạo một thuộc tính tùy chỉnh cho compound view, trước tiên chúng ta cần xác định thuộc tính trong file /res/values/attr.xml. Mọi thuộc tính của compound view phải được nhóm theo một kiểu có thể điều chỉnh bằng thẻ <declare-styleable>. Đối với side spinner, tên của class được sử dụng như hiển thị bên dưới.

Trong thẻ <attr>, thuộc tính name chứa định danh được sử dụng để chỉ thuộc tính mới trong bố cục và thuộc tính format chứa loại thuộc tính mới.

Đối với danh sách các giá trị, kiểu reference được sử dụng khi thuộc tính sẽ tham chiếu danh sách các chuỗi được xác định là một resource. Các loại giá trị thường được sử dụng trong bố cục có thể được sử dụng cho các thuộc tính tùy chỉnh của bạn, bao gồm boolean, color, dimension, enum, integer, float và string.

Dưới đây là cách xác định tài nguyên cho danh sách các chuỗi mà thuộc tính values của side spinner sẽ tham chiếu. Nó phải được thêm vào file /res/values/strings.xml như hiển thị bên dưới.

Để kiểm tra thuộc tính mới values, hãy tạo view cho side spinner trong layout MainActivity bên dưới side spinner hiện có. Thuộc tính phải được thêm tiền tố với một namespace được bổ sung vào RelativeLayout, chẳng hạn như xmlns:sidepinner="http://schemas.android.com/apk/res-auto". Đây là kết quả cho bố cục cuối cùng trong /res/layout/activity_main.xml.

Cuối cùng, class SideSpinner cần được sửa đổi để đọc thuộc tính values. Giá trị của mọi thuộc tính của view có sẵn trong đối tượng AttributeSet được truyền vào dưới dạng tham số của hàm constructor của view.

Để có được giá trị của thuộc tính tùy chỉnh values của bạn, trước tiên, chúng tôi gọi phương thức obtainStyledAttributtes của đối tượng AttributionSet với tên của kiểu chứa thuộc tính. Phương thức này trả về danh sách các thuộc tính có thể tạo kiểu như một đối tượng TypedArray.

Sau đó, chúng ta gọi phương thức getter của đối tượng TypedArray có kiểu đúng với thuộc tính bạn muốn, chuyển identifier của thuộc tính làm một tham số. Code sau đây cho thấy cách sửa đổi hàm constructor của side spinner để lấy danh sách các giá trị và đưa chúng vào side spinner.

Nếu bạn khởi chạy ứng dụng, bạn sẽ thấy hai side spinner bên activity hoạt động độc lập với nhau.

7. Lưu và khôi phục state

Bước cuối cùng chúng ta cần hoàn thành là lưu và khôi phục state của compound view. Khi một activity bị hủy và được tạo lại, ví dụ, khi thiết bị xoay, các giá trị của các native view với một identifier duy nhất sẽ tự động được lưu và khôi phục. Điều này hiện không đúng với side spinner.

State của các view không được lưu. Các identier của các view trong class SideSpinner không phải là duy nhất vì nó có thể được sử dụng lại nhiều lần. Điều này có nghĩa là chúng tôi có trách nhiệm lưu và khôi phục các giá trị của các view trong compound view. Chúng tôi thực hiện điều này bằng cách triển khai các phương thức onSaveInstanceState, onRestoreInstanceState và ftimeSaveInstanceState. Code sau đây cho thấy cách thực hiện cho side spinner.

Tổng kết

Side spinner đã hoàn thành. Cả hai side spinner activity như mong đợi và giá trị của chúng được phục hồi nếu activity bị hủy và tạo lại. Bây giờ bạn có thể áp dụng những gì bạn đã học để tái sử dụng bất kỳ nhóm views nào trong ứng dụng Android bằng cách sử dụng compound views.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.