Tạo Side Menu với transition tuỳ biến

85

SideMenuController từ Teodor Patras là thư viện các thành phần UI cung cấp một side menu đơn giản, gọn gàng hiển thị khi user kéo từ view chính.

smc_logo

SideMenuController cho phép việc tuỳ biến hiệu ứng chuyển đổi của các views, có thể hiển thị ở 2 bên, 1 cái phía trên hoặc 1 cái phía dưới và thanh status cũng thay đổi với tuỳ biến có sẵn.

SideMenuController

pan

Installation

Thêm dòng sau vào Podfile nếu bạn sử dụng CocoaPods:

Usage

Step 1

Đầu tiên, bạn nên thêm 1 menu button image và xác định vị trí của bảng điều khiển. Một cách tuỳ chọn, bạn có thể tuỳ biến theo sở thích. Điều này có thể thực hiện bằng 2 cách:

1) Nếu subclass SideMenuController được kế thừa thông qua main storyboard:

Override init(coder:) nơi bạn muốn thay đổi theo ý thích của bạn:

Tiếp theo, vào Storyboard và thay đổi class của SideMenuController bằng subclass tuỳ biến mà bạn vừa tạo.

2) Trong các trường hợp còn lại:

Trong func application:didFinishLaunchingWithOptions: của appdelegate:

Lưu ý: Nếu bạn không chỉ định một menu button image, SideMenuController sẽ không thêm một cách mặc định và bạn sẽ phải tự thêm một cái bất cứ khi nào chuyển sang một center view controller mới.

Step 2

SideMenuController có thể được dùng với storyboard segues hoặc bạn có thể chuyển đổi bằng code tới 1 center view controller mới.

Using storyboard segues

SideContainmentSegue: chuyển đổi tới side controller mới (embedSideController)

CenterContainmentSegue: chuyển đổi tới center controller mới (embedCenterController)

Trong storyboard, thêm 2 segues từ màn hình SideMenuController, 1 cái cho center view controller, cái còn lại cho side menu view controller. Sau đó, bạn có thể thêm nhiều CenterContainmentSeuges phụ thuộc vào số màn hình bạn muốn chuyển tới.

Hãy nhớ thiết lập tất cả các thuộc tính thích hợp của mỗi segue trong Attributes Inspector:

center_settings

side_settings

 

 

 

 

 

Để nhúng inital view controlles vào trong SideMenuController bạn sẽ phải gọi hàm performSegue(withIdentifier:sender:). Cách dễ nhất là tạo subclass SideMenuController và override viewDidLoad:

Programmatically

Bạn có thể tạo những chuyển đổi như ở trên bằng code mà không dùng đến segue, bằng cách gọi 1 trong 2 public methods:

Step 3

Bước cuối cùng là biết cách để chuyển đổi tới những center view controller mới.

Từ đây trở đi, bất cứ khi nào user chọn một tùy chọn trong side menu controller, bạn có thể dễ dàng thực hiện các segue như vậy:

Using storyboard segues

Programmatically

Nguồn IDE Academy via maniacdev via Github