Thư viện hỗ trợ tạo Reaction tuỳ biến như Facebook

74

Reactions là thư viện viết bằng Swift từ tác giả Yannick Loriot hỗ trợ việc chia sẻ các reactions với 1 giao diện tương tự như những gì bạn thấy trên Facebook.

Reactions hỗ trợ từng reactions tiêu chuẩn của Facebook (like, love, haha, wow, sad, angry) và cũng cho phép bạn thêm các reactions tuỳ biến. Bạn cũng có thể tuỳ biến kích thước và màu sắc của reaction. Các reactions sẽ có hiệu ứng sống động khi user lướt qua lại giữa các reactions và chọn 1 cái.

Reactions

Requirements

  • iOS 8.0+
  • Xcode 8.0+
  • Swift 3.0+

Usage

Reaction

1bc819f6-8d5a-11e6-81fc-555f02db2342

Một đối tượng Reaction là một model định nghĩa với các thuộc tính:

  • id: định danh duy nhất.
  • title: tiêu đề hiển thị trong 1 selector hoặc 1 button.
  • color: màu sắc để hiển thị cho title của button.
  • icon: icon của reaction.
  • alternativeIcon: icon thay thế tuỳ chọn được dùng với reaction button.

Thư viện đã gói những reactions tiêu chuẩn của Facebook: like, love, haha, wow, sad và angry. Và dĩ nhiên bạn có thể tạo cái riêng cho bạn:

ReactionSelector

8b9fe032-8d51-11e6-84c3-e2a026a31d72

ReactionSelector control cho phép mọi người chọn 1 reaction trong list này:

Các thành phần có thể được sử dụng độc lập (như trên) hoặc kết hợp với các ReactionButton (thảo luận sau). Bạn tất nhiên có thể tùy chỉnh các thành phần bằng cách sử dụng một đối tượng ReactionSelectorConfig:

ReactionButton

b43341d4-8d73-11e6-9696-5f10dcf6815d

Một ReactionButton cung cấp một cách đơn giản để chuyển đổi một reaction (ví dụ like / unlike). Một ReactionSelector cũng có thể được gắn vào để hiển thị nó khi một long press (nhấn giữ lâu) được thực hiện:

Bạn có thể cấu hình các thành phần bằng cách sử dụng 1 đối tượng ReactionButtonConfig:

ReactionSummary

709ff948-8d83-11e6-9155-1af925fb4dbe

ReactionSummary là 1 control mà hiển thị một danh sách các reactions như một tập hợp các biểu tượng độc đáo xếp chồng lên nhau. Bạn cũng có thể liên kết nó với một đoạn mô tả.

792e0b6c-9482-11e6-8410-c5522ca93fed

Bạn cũng có thể có các mô tả chi tiết cho mỗi reaction. Để làm điều này bạn sẽ cần phải tách chúng ra bằng cách thiết lập thuộc tính isAggregated về false.

Cũng giống như các thành phần khác mà bạn có thể thiết lập nó bằng cách sử dụng đối tượng ReactionSummaryConfig:

Installation

CocoaPods

Để cài đặt thư viện này bằng CocoaPods, bạn chỉ cần cấu hình Podfile như dưới này và sau đó chạy lệnh Pod install:

Nguồn IDE Academy via Github