Développement iOS
  1. Développement iOS
  3. Faire un button personnalisé sur la barre d'tabs arrondi
Intereting Posts
Afficher la list des sonneries par défaut dans iOS touchesBegan n'est pas appelé dans une sous-class UIView Pourquoi notre application MonoTouch se brise-t-elle dans le garbage collector? Ce n'est pas hors de la memory iOS Sandbox Test Compte user Gestion des abonnements Intégration et deployment continus: Bots + Testflight Api sur Itunes Connect Comment puis-je récupérer un numéro de page ou une reference de page pour une destination Outline dans un file PDF sur iOS? Prise en charge iOS 3.x dans Xcode 4 Noms de file uniques NSFileManager iOS 9 et iOS 10 CoreData simultanément Y at-il une limite de longueur de string stockée dans Keychain? Facebook SDK 3.5 ne peut pas se connecter, plante l'application Obtention de l'erreur OSStatus 100021 lors de la tentative de dissortingbution ad hoc de l'application ios didChangeCameraPosition obtient une boîte englobante / rectangle des coordonnées disponibles append UIViewController dans la sous-vue Protocoles Swift avec exigence de type associée et implémentation par défaut

Faire un button personnalisé sur la barre d'tabs arrondi

Voici ce que j'essaie de faire: entrez la description de l'image ici

Remarque: la capture d'écran provient d'une version antérieure d'iOS

Ce que j'ai pu réaliser: entrez la description de l'image ici

Code: 

override func viewWillAppear(animated: Bool) { // Creates image of the Button let imageCameraButton: UIImage! = UIImage(named: "cameraIcon") // Creates a Button let cameraButton = UIButton(type: .Custom) // Sets width and height to the Button cameraButton.frame = CGRectMake(0.0, 0.0, imageCameraButton.size.width, imageCameraButton.size.height); // Sets image to the Button cameraButton.setBackgroundImage(imageCameraButton, forState: .Normal) // Sets the center of the Button to the center of the TabBar cameraButton.center = self.tabBar.center // Sets an action to the Button cameraButton.addTarget(self, action: "doSomething", forControlEvents: .TouchUpInside) // Adds the Button to the view self.view.addSubview(cameraButton) }

J'ai essayé de créer un button arrondi de la manière normale, mais c'était le résultat:

entrez la description de l'image ici

Extrait de code pour button arrondi: 

 //Creation of Ronded Button cameraButton.layer.cornerRadius = cameraButton.frame.size.width/2 cameraButton.clipsToBounds = true

Solution

Vous devez sous- UITabBarController , puis append le button au-dessus de la vue TabBar . Une action sur un button doit triggersr la UITabBarController onglet UITabBarController en définissant selectedIndex .

Code 

 class CustomTabBarController: UITabBarController { // MARK: - View lifecycle override func viewDidLoad() { super.viewDidLoad() let controller1 = UIViewController() controller1.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 1) let nav1 = UINavigationController(rootViewController: controller1) let controller2 = UIViewController() controller2.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 2) let nav2 = UINavigationController(rootViewController: controller2) let controller3 = UIViewController() let nav3 = UINavigationController(rootViewController: controller3) nav3.title = "" let controller4 = UIViewController() controller4.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 4) let nav4 = UINavigationController(rootViewController: controller4) let controller5 = UIViewController() controller5.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 5) let nav5 = UINavigationController(rootViewController: controller5) viewControllers = [nav1, nav2, nav3, nav4, nav5] setupMiddleButton() } // MARK: - Setups func setupMiddleButton() { let menuButton = UIButton(frame: CGRect(x: 0, y: 0, width: 64, height: 64)) var menuButtonFrame = menuButton.frame menuButtonFrame.origin.y = view.bounds.height - menuButtonFrame.height menuButtonFrame.origin.x = view.bounds.width/2 - menuButtonFrame.size.width/2 menuButton.frame = menuButtonFrame menuButton.backgroundColor = UIColor.red menuButton.layer.cornerRadius = menuButtonFrame.height/2 view.addSubview(menuButton) menuButton.setImage(UIImage(named: "example"), for: .normal) menuButton.addTarget(self, action: #selector(menuButtonAction(sender:)), for: .touchUpInside) view.layoutIfNeeded() } // MARK: - Actions @objc private func menuButtonAction(sender: UIButton) { selectedIndex = 2 } }

Sortie

entrez la description de l'image ici

Swift 3 Solution

Avec un léger ajustement à la solution d'EricB pour que cela fonctionne pour Swift 3, la méthode menuButton.addTarget () doit avoir un peu changé sa syntaxe de sélection.

Voici la nouvelle fonction menuButton.addTarget ():

menuButton.addTarget(self, action: #selector(MyTabBarController.menuButtonAction), for: UIControlEvents.touchUpInside)

Lors de la définition de ma class TabBarController, j'ajoute également un UITabBarControllerDelegate et place tous les éléments dans le

override func viewDidAppear(_ animated: Bool) { ... }

Pour plus de clarté, le code complet est:

Solution de code complet 

 import UIKit class MyTabBarController: UITabBarController, UITabBarControllerDelegate { // View Did Load override func viewDidLoad() { super.viewDidLoad() } // Tab Bar Specific Code override func viewDidAppear(_ animated: Bool) { let controller1 = UIViewController(self.view.backgroundColor = UIColor.white) controller1.tabBarItem = UITabBarItem(tabBarSystemItem: UITabBarSystemItem.contacts, tag: 1) let nav1 = UINavigationController(rootViewController: controller1) let controller2 = UIViewController() controller2.tabBarItem = UITabBarItem(tabBarSystemItem: UITabBarSystemItem.contacts, tag: 2) let nav2 = UINavigationController(rootViewController: controller2) let controller3 = UIViewController() let nav3 = UINavigationController(rootViewController: controller3) nav3.title = "" let controller4 = UIViewController() controller4.tabBarItem = UITabBarItem(tabBarSystemItem: UITabBarSystemItem.contacts, tag: 4) let nav4 = UINavigationController(rootViewController: controller4) let controller5 = UIViewController() controller5.tabBarItem = UITabBarItem(tabBarSystemItem: UITabBarSystemItem.contacts, tag: 5) let nav5 = UINavigationController(rootViewController: controller5) self.viewControllers = [nav1, nav2, nav3, nav4, nav5] self.setupMiddleButton() } // TabBarButton – Setup Middle Button func setupMiddleButton() { let menuButton = UIButton(frame: CGRect(x: 0, y: 0, width: 64, height: 64)) var menuButtonFrame = menuButton.frame menuButtonFrame.origin.y = self.view.bounds.height - menuButtonFrame.height menuButtonFrame.origin.x = self.view.bounds.width / 2 - menuButtonFrame.size.width / 2 menuButton.frame = menuButtonFrame menuButton.backgroundColor = UIColor.red menuButton.layer.cornerRadius = menuButtonFrame.height/2 self.view.addSubview(menuButton) menuButton.setImage(UIImage(named: "example"), for: UIControlState.normal) menuButton.addTarget(self, action: #selector(MyTabBarController.menuButtonAction), for: UIControlEvents.touchUpInside) self.view.layoutIfNeeded() } // Menu Button Touch Action func menuButtonAction(sender: UIButton) { self.selectedIndex = 2 // console print to verify the button works print("Middle Button was just pressed!") } }

C'est la class customTabbarcontroller qui est la sous-class de UITabbarcontroller. C'est la même idée que celle donnée par @EridB. Mais dans son code @ Raymond26 problème n'a pas été résolu. Ainsi, en publiant une solution complète écrite dans Swift 3.0 

 protocol CustomTabBarControllerDelegate { func customTabBarControllerDelegate_CenterButtonTapped(tabBarController:CustomTabBarController, button:UIButton, buttonState:Bool); } class CustomTabBarController: UITabBarController, UITabBarControllerDelegate { var customTabBarControllerDelegate:CustomTabBarControllerDelegate?; var centerButton:UIButton!; private var centerButtonTappedOnce:Bool = false; override func viewDidLayoutSubviews() { super.viewDidLayoutSubviews(); self.bringcenterButtonToFront(); } override func viewDidLoad() { super.viewDidLoad() self.delegate = self; self.tabBar.barTintColor = UIColor.red; let dashboardVC = DashboardViewController() dashboardVC.tabBarItem = UITabBarItem(tabBarSystemItem: .topRated, tag: 1) let nav1 = UINavigationController(rootViewController: dashboardVC) let myFriendsVC = MyFriendsViewController() myFriendsVC.tabBarItem = UITabBarItem(tabBarSystemItem: .featured, tag: 2) let nav2 = UINavigationController(rootViewController: myFriendsVC) let controller3 = UIViewController() let nav3 = UINavigationController(rootViewController: controller3) nav3.title = "" let locatorsVC = LocatorsViewController() locatorsVC.tabBarItem = UITabBarItem(tabBarSystemItem: .downloads, tag: 4) let nav4 = UINavigationController(rootViewController: locatorsVC) let getDirectionsVC = GetDirectionsViewController() getDirectionsVC.tabBarItem = UITabBarItem(tabBarSystemItem: .history, tag: 5) let nav5 = UINavigationController(rootViewController: getDirectionsVC) viewControllers = [nav1, nav2, nav3, nav4, nav5] self.setupMiddleButton() } // MARK: - TabbarDelegate Methods func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) { switch viewController { case is DashboardViewController: self.showCenterButton() case is MyFriendsViewController: self.showCenterButton() case is GetDirectionsViewController: self.showCenterButton() case is LocatorsViewController: self.showCenterButton() default: self.showCenterButton() } } // MARK: - Internal Methods @objc private func centerButtonAction(sender: UIButton) { // selectedIndex = 2 if(!centerButtonTappedOnce) { centerButtonTappedOnce=true; centerButton.setImage(UIImage(named: "ic_bullseye_white"), for: .normal) } else { centerButtonTappedOnce=false; centerButton.setImage(UIImage(named: "ic_bullseye_red"), for: .normal) } customTabBarControllerDelegate?.customTabBarControllerDelegate_CenterButtonTapped(tabBarController: self, button: centerButton, buttonState: centerButtonTappedOnce); } func hideCenterButton() { centerButton.isHidden = true; } func showCenterButton() { centerButton.isHidden = false; self.bringcenterButtonToFront(); } // MARK: - Private methods private func setupMiddleButton() { centerButton = UIButton(frame: CGRect(x: 0, y: 0, width: 64, height: 64)) var centerButtonFrame = centerButton.frame centerButtonFrame.origin.y = view.bounds.height - centerButtonFrame.height centerButtonFrame.origin.x = view.bounds.width/2 - centerButtonFrame.size.width/2 centerButton.frame = centerButtonFrame centerButton.backgroundColor = UIColor.red centerButton.layer.cornerRadius = centerButtonFrame.height/2 view.addSubview(centerButton) centerButton.setImage(UIImage(named: "ic_bullseye_red"), for: .normal) centerButton.setImage(UIImage(named: "ic_bullseye_white"), for: .highlighted) centerButton.addTarget(self, action: #selector(centerButtonAction(sender:)), for: .touchUpInside) view.layoutIfNeeded() } private func bringcenterButtonToFront() { print("bringcenterButtonToFront called...") self.view.bringSubview(toFront: self.centerButton); } }

C'est le DashboardViewController pour reference complète: 

 class DashboardViewController: BaseViewController, CustomTabBarControllerDelegate { override func viewDidLoad() { super.viewDidLoad() (self.tabBarController as! CustomTabBarController).customTabBarControllerDelegate = self; } override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated); (self.tabBarController as! CustomTabBarController).showCenterButton(); } override func viewWillDisappear(_ animated: Bool) { super.viewWillDisappear(animated); self.hidesBottomBarWhenPushed = false; (self.tabBarController as! CustomTabBarController).hideCenterButton(); } override func viewWillLayoutSubviews() { super.viewWillLayoutSubviews(); if(!isUISetUpDone) { self.view.backgroundColor = UIColor.lightGray self.title = "DASHBOARD" self.prepareAndAddViews(); self.isUISetUpDone = true; } } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } //MARK: CustomTabBarControllerDelegate Methods func customTabBarControllerDelegate_CenterButtonTapped(tabBarController: CustomTabBarController, button: UIButton, buttonState: Bool) { print("isDrive ON : \(buttonState)"); } //MARK: Internal Methods func menuButtonTapped() { let myFriendsVC = MyFriendsViewController() myFriendsVC.hidesBottomBarWhenPushed = true; self.navigationController!.pushViewController(myFriendsVC, animated: true); } //MARK: Private Methods private func prepareAndAddViews() { let menuButton = UIButton(frame: CGRect(x: 100, y: 100, width: 100, height: 50)) menuButton.titleLabel?.text = "Push" menuButton.titleLabel?.textColor = UIColor.white menuButton.backgroundColor = UIColor.red; menuButton.addTarget(self, action: #selector(DashboardViewController.menuButtonTapped), for: .touchUpInside) self.view.addSubview(menuButton); } }