Menu từ thanh tab trong bảng phân cảnh

Question

Hiện tại tôi có thanh tab chuẩn, khi nhấn vào chế độ xem tương ứng của nó. Nhưng tôi muốn làm cho một menu bật ra từ thanh tab khi nhiều tab được chọn, như thể hiện trong hình dưới đây.

Có đề xuất nào để triển khai điều này không? Cảm ơn trước.

Answer 1

Giao diện người dùng không tốt nhưng mặc dù nếu bạn muốn.

Đầu tiên Bạn phải thực hiện phương pháp đại biểu của UITabbarControllerDelegate như sau

func tabBarController(_ tabBarController: UITabBarController, shouldSelect 
viewController: UIViewController) -> Bool { 

    if viewController.classForCoder == moreViewController.self 
    { 
     let popvc = MoreSubMenuViews(nibName: "MoreSubMenuViews", bundle: Bundle.main) 
     self.addChildViewController(popvc) 

     let tabbarHeight = tabBar.frame.height 
     let estimatedWidth:CGFloat = 200.0 
     let estimatedHeight:CGFloat = 300.0 
     popvc.view.frame = CGRect(x:self.view.frame.width - estimatedWidth, y: self.view.frame.height - estimatedHeight - tabbarHeight, width: estimatedWidth, height: estimatedHeight) 

     self.view.addSubview(popvc.view) 

     popvc.didMove(toParentViewController: self) 

     print("sorry stop here") 
     return true // if you want not to select return false here 

    }else{ 

     //remove popup logic here if opened 
     return true 
    } 
} 

Đây moreViewController là cuối cùng điều khiển tab & MoreSubMenuViews là ngòi tập tin/xib, trong đó có các nút thể hiện trong bạn hình ảnh.

Answer 2

Tôi khuyên bạn nên làm như vậy:

Trước tiên, bạn nên nghĩ đến tất cả các loại tab có thể ở trong thanh tab. Trên ảnh chụp màn hình của bạn có các tab, trình điều khiển hiện tại và tab, trình bày trình đơn đó. Vì vậy, chúng ta có thể tạo enum với tất cả các loại sau:

enum TabType { 
    case controller 
    case menu 
} 

Sau đó bạn có thể lưu trữ hàng loạt các loại tab theo thứ tự chúng được hiển thị trong thanh tab, cho ảnh chụp màn hình của bạn như vậy

let tabTypes: [TabType] = [.controller, .controller, .controller, .controller, .menu] 

Sau đó, bạn nên thực hiện phương thức func tabBarController(_:, shouldSelect:) -> Bool của UITabBarControllerDelegate, trả về true nếu thanh tab được phép chọn bộ điều khiển đã truyền và false nếu không.

Nếu bạn trả lại true so với tất cả các công việc khác (như trình điều khiển xem bộ điều khiển xem và công cụ khác), thanh điều khiển thanh tab sẽ làm cho bạn.

Trong trường hợp của bạn, bạn muốn thực hiện tác vụ tùy chỉnh khi nhấp vào tab, vì vậy bạn nên trả về false. Trước khi trở về bạn nên trình bày thực đơn của bạn.

func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool { 
    if let index = tabBarController.viewControllers?.index(of: viewController), 
     index < tabBarTypes.count { 
     let type = tabBarTypes[index] 
     switch type { 
     case .menu: 
      // perform your menu presenting here 
      return false 
     case .controller: 
      // do nothing, just return true, tab bar will do all work for you 
      return true 
     } 
    } 
    return true 
} 

Trong triển khai này, bạn có thể dễ dàng thay đổi thứ tự loại tab hoặc thêm một số loại tab khác và xử lý thích hợp.

Answer 3

Thay vì hiển thị menu, bạn có thể sử dụng chế độ xem tab có thể cuộn cho giao diện người dùng tốt hơn. Nếu bạn thích sử dụng thư viện, here's thanh tab đơn giản có thể cuộn mà bạn có thể triển khai.

Answer 4

Đây là lạm dụng bố cục mẫu giao diện người dùng trong Táo HIG. Cụ thể:

Sử dụng thanh tab để điều hướng. Các nút trên thanh tab không được sử dụng để thực hiện các thao tác. Nếu bạn cần cung cấp các điều khiển hoạt động trên các phần tử trong chế độ xem hiện tại, hãy sử dụng thanh công cụ thay thế.

Điều khiển này nên được sử dụng để làm phẳng phân cấp ứng dụng của bạn. Có vẻ như trong trường hợp này bạn đang trộn chức năng của nút. Đôi khi nó chọn một bộ điều khiển xem riêng biệt, đôi khi nó hiển thị một danh sách hành động. Đây là một tình huống khó hiểu cho người dùng và nên tránh.

Một cách bạn có thể đạt được điều này và vẫn tuân thủ HIG là bằng cách sử dụng thanh điều hướng hoặc thanh công cụ. Imbed điều khiển này trong một nút thanh công cụ. Trường hợp đơn giản nhất là gọi một số UIActionController với kiểu .actionSheet được chọn.

Answer 5

Theo sự hiểu biết của tôi những gì bạn muốn là, tab 1 được chọn và người dùng chuyển đến tab 5 thì nền sẽ là tab 1 & ngược lại cho tab 2,3 & 4 và sẽ có các nút như được hiển thị trong hình ảnh của bạn. Nêu tôi sai vui long chân chỉnh tôi.

Đối với điều này, bạn phải chụp ảnh trong khi người dùng điều hướng qua các tab.

Hãy tìm thấy bên dưới mã trong appdelegate,

var currentImage: UIImage! //It will be public variable

TabBar phương pháp đại biểu,

func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) { 
    if tabBarController.selectedIndex == 4 { 
     let moreVC = tabBarController.selectedViewController as! MoreVC 
     moreVC.currentImage = currentImage 
    } 
} 

func tabBarController(_ tabBarController: UITabBarController, shouldSelect viewController: UIViewController) -> Bool { 
    if tabBarController.selectedIndex != 4 { 
     let navController = tabBarController.selectedViewController as! UINavigationController 
     let viewController = navController.viewControllers.last 
     currentImage = Common.imageWithView(inView: (viewController?.navigationController?.view)!) //UIImage(view: (viewController?.navigationController?.view)!) 
    } 

    return true 
} 

Ở đây tôi đã lấy tĩnh 4 chỉ số tab như trước & MoreVC sẽ được các liên ViewController của chỉ mục tab 4.

Commo lớp n để có được hình ảnh từ xem,

class Common { 
    static func imageWithView(inView: UIView) -> UIImage? { 
     UIGraphicsBeginImageContextWithOptions(inView.bounds.size, inView.isOpaque, 0.0) 
     defer { UIGraphicsEndImageContext() } 
     if let context = UIGraphicsGetCurrentContext() { 
      inView.layer.render(in: context) 
      let image = UIGraphicsGetImageFromCurrentImageContext() 
      return image 
     } 
     return nil 
    } 
} 

Hãy tìm MoreVC,

@IBOutlet weak var imageView: UIImageView! 

var currentImage: UIImage! { 
    didSet { 
     imageView.image = currentImage 
    } 
} 

Hãy tìm thấy bên dưới hình ảnh cho MoreVC Storyboard. Nhìn nó không chứa NavigationController giống như tất cả các ViewControllers khác.

Hãy cho tôi biết trong trường hợp của bất kỳ truy vấn.

Answer 6

1) Tạo một "Tab5ViewController" và sử dụng này:

static func takeScreenshot(bottomPadding padding: CGFloat = 0) -> UIImage? { 
     let layer = UIApplication.shared.keyWindow!.layer 
     let scale = UIScreen.main.scale 
     UIGraphicsBeginImageContextWithOptions(CGSize(width: layer.frame.size.width, height: layer.frame.size.height - padding), false, scale) 

     guard let context = UIGraphicsGetCurrentContext() else { return nil } 
     layer.render(in: context) 
     let screenshot = UIGraphicsGetImageFromCurrentImageContext() 
     UIGraphicsEndImageContext() 
     return screenshot 
    } 

Sử dụng các ảnh chụp màn hình làm hình nền cho bạn "Tab5ViewController"

2) Trong bạn "Tab5ViewController" bạn có thể có thành phần ngăn xếp (các tab bổ sung) và sau đó chỉ cần thêm/xóa bộ điều khiển chế độ xem con dựa trên lựa chọn

3) trường hợp cạnh cố định (như đánh dấu chọn tab ...)