Mở rộng CollectionViewCell với transition

65

Expanding-collection được submit bởi RAMotion là 1 UICollectionView tuỳ biến tính năng mở rộng các cells.

Với Expanding-Collection, 1 collectionview với các tấm hình được hiển thị cho user và khi user chọn 1 cell thì cell đó được mở rộng để hiển thị nhiều thông tin hơn.

 

Expanding-Collection

Requirements

  • iOS 8.0+
  • Xcode 7.3

Installation

Kéo Source folder vào project.

Hoặc dùng CocoaPods với Podfile:

Usage

Khởi tạo CollectionViewCell

image2

1) Khởi UICollectionViewCell kế thừa từ BasePageCollectionCell (lời khuyên là khởi tạo cell với file xib)

2) Thêm FrontView

  • Thêm 1 view vào YOURCELL.xib và kết nối thành @IBOutlet weak var frontContainerView: UIView!
  • Thêm chiều ngang, chiều cao, centerX và centerY constraints (constraints của chiều ngang và chiều cao phải bằng với cellSize)

image1

 

  • kết nối centerY constraint thành @IBOutlet weak var frontConstraintY: NSLayoutConstraint!
    Thêm bất kỳ UIView nào mà bạn muốn vào frontView

3) Thêm BackView

  • lặp lại bước 2 (kết nối outlets thành @IBOutlet weak var backContainerView: UIView!, @IBOutlet weak var backConstraintY: NSLayoutConstraint!)

Create CollectionViewController

1) Khởi tạo 1 UIViewController kế thừa từ ExpandingViewController

2) Register Cell và set kích thước Cell:


3) Thêm các hàm sau của UICollectionViewDataSource:

4) Open Cell animation:

Nếu bạn sử dụng những method delegates này:

phải gọi những super method:

Transition animation

1) Tạo 1 UITableViewController kế thừa từ ExpandingTableViewController

2) Set chiều cao header mặc định là 236:

3) Gọi method push method trong YourViewController tới YourTableViewController:

4) Để quay trở lại view trước đó mà có transition thì sử dụng popTransitionAnimation()

Nguồn IDE Academy via maniacdev via Github