2012-12-18 43 views
15

目前我有一个标准的标签栏,当点击时它会转到相应的viewController。但是,如果选择了更多选项卡,我想从选项卡中弹出一个菜单,如下图所示。故事板中标签栏的菜单

enter image description here

是任何建议,以实现这个? 在此先感谢。

+0

您是否找到了解决方案?我需要相同 –

+0

它确实看起来很丑并且有点反模式。通常,使第五个选项卡“push”一个newViewController会更好,因为这个选项会有更多的选项。 – Honey

+0

在选项卡5上,背景中会有什么? (白色部分),它会是以前选择的屏幕? –

回答

0

它不是很好的用户界面,但如果你想。

首先,你必须实现UITabbarControllerDelegate的委托方法如下

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 
    } 
} 

这里moreViewController是最后一个选项卡控制器& MoreSubMenuViews是笔尖/厦门国际银行文件,其中包含在你的图像显示的按钮。

4

我建议你这样做:

首先,你应该考虑所有的选项卡类型,可能是在标签栏。在你的屏幕截图上有一些标签,表示控制器和标签,表示菜单。因此,我们可以用这些类型创建枚举:

enum TabType { 
    case controller 
    case menu 
} 

在此之后,你可以存储标签类型的数组,以便它们显示在标签栏,为您的截图,像这样

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

那么你应该执行UITabBarControllerDelegatefunc tabBarController(_:, shouldSelect:) -> Bool方法,如果允许选项卡栏选择传递的控制器,则返回true,否则返回false

如果您返回true比其他所有工作(如呈现视图控制器和其他东西)标签栏控制器将为您做。

在你的情况下,你想执行自定义操作选项卡单击,所以你应该返回false。在返回之前,您应该出示您的菜单。

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 
} 

在此实现,你可以很容易地改变标签类型订货或添加一些其他标签类型和处理它合适。

0

您可以使用可滚动的选项卡视图来获得更好的用户界面,而不是显示菜单。如果您更喜欢使用库,您可以实现一个简单的可滚动标签栏。

+0

张贴一些示例代码供作者理解。如果链接中断,那么没有人可以从中受益 –

+0

此答案需要更多内容 – davidfrancis

0

这是对Apples HIG中UI模式布局的滥用。具体来说:

严格使用标签栏进行导航。标签栏按钮不应该用于执行操作。如果您需要提供对当前视图中的元素起作用的控件,请改为使用工具栏。

此控件应该用于扁平化您的应用程序层次结构。在这种情况下,您似乎在混合按钮的功能。有时它会选择一个单独的视图控制器,有时会显示一个操作列表。这对用户来说是一个令人困惑的情况,应该避免。

您可以通过导航或工具栏来实现这一目标并仍然坚持使用HIG。将此控件嵌入工具栏按钮中。最简单的情况是调用UIActionController并选择.actionSheet风格。

0

按我的理解,你想那是什么,标签1被选择,用户进入选项卡,然后5后台将标签1 &反之亦然为标签2,3 & 4应该有弹出如按钮为显示在你的图片中。如果我错了,请纠正我。

为此,您必须捕捉图像,而用户浏览标签。

请从下面的代码的AppDelegate

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

的TabBar的委托方法,

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 
} 

在这里,我已经采取了静态4的最后一个标签指数& MoreVC将相关标签索引4的ViewController。

Commo n个等级,从视图获取图像,

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 
    } 
} 

请找MoreVC,

@IBOutlet weak var imageView: UIImageView! 

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

请在下面找到图像MoreVC故事板。看起来它不像所有其他ViewControllers一样包含NavigationController。

enter image description here

让我知道任何疑问的情况下。

0

1) 创建一个 “Tab5ViewController”,并使用此:

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 
    } 

使用截图作为背景图像为贵 “Tab5ViewController”

2)在你的 “Tab5ViewController”您可以拥有堆栈组件(附加选项卡),然后根据所选内容添加/删除子视图控制器

3) 修复边缘情况(如标签选择高亮等...)