Tự tùy chỉnh thanh tab trong iOS

Tram Ho

Đã bao giờ khi nhận một dự án iOS mới mà nhìn qua mockup và design spec thì bạn thấy những UI component cực kỳ dị, không theo các tiêu chuẩn guideline thông thường của Apple chưa? Ví dụ những yêu cầu oái oăm về tab bar của app chẳng hạn. Lúc này thì tab bar mặc định của iOS sẽ rất khó để customize và bạn phải tự tạo một tab bar cho riêng mình để có thể thỏa sức thay đổi mọi thứ.

UITabBarController mặc định của hệ thống rất ít tùy chọn để có thể customize. Mặc định thì thường có 5 item với cách bố trí icon, màu sắc selected, unselected như sau:

Chuyện gì xảy ra khi bạn bị yêu cầu phải làm một tab bar khác biệt như này:

Đầu tiên, mở Xcode lên và tạo project mới, mở file Main.storyboard và embed initial view controller vào một tab bar controller bằng menu Editor > Embed In > Tab Bar Controller.

Tiếp theo, chúng ta cần tạo một enum để chứa thông tin về các tab item trong tab bar. Tạo mới file TabItem.swift với đoạn code sau:

Đoạn enum trên khá đơn giản, nó chứa các thông tin cơ bản về các tab như: title, ảnh icon, view controller. Sau đó hãy tạo các view controller tương ứng cho mỗi tab tương ứng.

Tiếp theo, tạo mới file BaseTabBarController.swift, chứa class BaseTabBarController kế thừa class UITabBarController. Đây sẽ là class tab bar controller mặc định mới và có thể customize tùy ý.

Mở lại Main.storyboard và set class cho tab bar controller thành BaseTabBarController.

File BaseTabBarController.swift được implement như sau:

Trong file này, chúng ta đã mở rộng height mặc định của tab bar controller lên một chút từ 48.0 lên 67.0.

Tiếp tục, hãy tạo file CustomTabBar.swift mới:

Class CustomTabBar này implement thành phần chủ đạo của tab bar controller của chúng ta. Trong method loadTabBar của class BaseTabBarController, thêm đoạn code sau:

Tiếp tục implement method setupCustomTabMenu:

Sau đó, implement convenience init method của CustomTabBar:

Chỉnh sửa lại method createTabItem là chúng ta có thể tự do thoải mái customize từng tab bar item theo ý muốn.

Cuối cùng, hoàn thiện các method xử lý khác như: handleTap, deactiveTab, switchTabactivateTab:

Run app và chúng ta sẽ có một tab bar mới với hiệu ứng chuyển tab được customize như sau:

Source article: https://medium.com/sprinthub/creating-a-customized-tab-bar-in-ios-with-swift-41ed380f2a30

Complete source: https://github.com/oNguyenXuanThanh/StudyReport112020

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo