UItabBar highlighted during IOS Customization
Preface:
The company's project needs to customize a highlighted TabBar in the middle and find a reference code on github (although it was four years ago, it is still very useful for reference ). URL: https://github.com/boctor/idev-recipes/tree/master/raisedcentertabbar. The author's readme document is well written. The translation is provided here (a good idea)
First, let's take a look at the results: thoughts:
# Problem:
Problem:
Apps like [Instagram] [], [DailyBooth] [] and [Path™] [] Have what
Looks like a standard UITabBarController, but the center tab bar is
Raised or colored. How do we recreate this look?
Like [Instagram] [], [DailyBooth] [] and [Path™] [] One of these apps looks like a standard tabBarController. However, the middle of the tabBar is raised or colored. How can we build this practical effect?
# Solution:
Solution:
These tab bars look pretty standard with the exception of
Center item, so we'll start out with a standard UITabBarController
Which contains a UITabBar.
These label columns all look like standards except the middle items, so we will start with a standard UITabBarController that contains a tabBar.
Looking at [the images] [] inside each app, it is quickly apparent
That the middle tab bar is simply a custom UIButton.
View the images in each application. It is obvious that the tag in the middle is a simple Custom button.
A UITabBar contains an array of UITabBarItems, which inherit from
UIBarItem. But unlike UIBarButtonItem that also inherits from
UIBarItem, there is no API to create a UITabBarItem with
CustomView.
A UITabBar contains an array of UITabBaritems. UITabBaritem inherits from UIBarItem. However, unlike UIBarButtonItem inherited from UIBarItem, Apple does not provide APIs for UITabBarItem to create custom views.
So instead of trying to create a custom UITabBarItem, we'll just
Create a regular one and then put the custom UIButton on top of
UITabBar.
Therefore, you don't have to try to create a custom UITabBarItem. We just need to create a standard UITabBar and put the Custom button on the UITabBar.
Our basic recipe is then to create a subclass of UITabBarController
And add a custom UIButton on top of the UITabBar.
Our basic solution is to subclass UITabBarController and add a Custom button to UITabBar.
If the button is the same height as the UITabBar, then we set
Center of the button to the center of the UITabBar. If the button
Is slightly higher, then we do the same thing should t we adjust
The center's y value to account for the difference in height.
If the button is as high as the UITabBar, we will set the center alignment of the button and the center alignment of the UITabBar. If the button is a little higher, we will do the same thing, and then set the Y value of the center to correspond to the height difference. Original article,
UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0.0, 0.0, buttonImage.size.width, buttonImage.size.height); [button setBackgroundImage:buttonImage forState:UIControlStateNormal]; [button setBackgroundImage:highlightImage forState:UIControlStateHighlighted]; CGFloat heightDifference = buttonImage.size.height - self.tabBar.frame.size.height; if (heightDifference < 0) button.center = self.tabBar.center; else { CGPoint center = self.tabBar.center; center.y = center.y - heightDifference/2.0; button.center = center; } [self.view addSubview:button];
The code implementation here draws on the code of the above author and encapsulates the code for my needs. The following code is used:
//// TabBarViewController. m // tabBarViewController /// Created by Bc_Ltf on 15/3/25. // Copyright (c) 2015 Bc_ltf. all rights reserved. // # import TabBarViewController. h @ interface TabBarViewController ()
@ End @ implementation TabBarViewController @ synthesize button; @ synthesize myTabBar;-(void) viewDidLoad {[super viewDidLoad]; [self setup];}-(void) detail {[super didReceiveMemoryWarning] ;}# pragma mark-setup-(void) setup {// Add highlight button [self addCenterButtonWithImage: [UIImage imageNamed: @ main] selectedImage: [UIImage imageNamed: @ mainH]; // UITabBarControllerDelegate is specified as self. delegate = self; // specify the current page -- intermediate page self. selectedIndex = 2; // set the button status to button. selected = YES; // set other items click the selected color myTabBar. tintColor = [UIColor colorWithRed: 222/255. 0 green: 78/255. 0 blue: 22/255. 0 alpha: 1] ;}# pragma mark-addCenterButton // Create a custom UIButton and add it to the center of our tab bar-(void) addCenterButtonWithImage :( UIImage *) buttonImage selectedImage :( UIImage *) selectedImage {button = [UIButton buttonWithType: Custom]; [button addTarget: self action: @ selector (pressChange :) forControlEvents: UIControlEventTouchUpInside]; button. autoresizingMask = UIViewAutoresizingFlexibleRightMargin | bytes | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleTopMargin; // set the button size to fit the image button. frame = CGRectMake (0.0, 0.0, buttonImage. size. width, buttonImage. size. height); [button setImage: buttonImage forState: UIControlStateNormal]; [button setImage: selectedImage forState: UIControlStateSelected]; // This is disgusting. Remove the shadow button when the selected button is selected. adjustsImageWhenHighlighted = NO;/** core code: Set the center of the button to align with the center of the tabBar, and make a relative floating */CGFloat heightDifference = buttonImage. size. height-self. tabBar. frame. size. height; if (heightDifference <0) button. center = self. tabBar. center; else {CGPoint center = self. tabBar. center; center. y = center. y-heightDifference/2.0; button. center = center;} [self. view addSubview: button];}-(void) pressChange :( id) sender {self. selectedIndex = 2; button. selected = YES;} # pragma mark-TabBar Delegate // The status of the page feed and button is associated-(void) tabBarController :( UITabBarController *) tabBarController didSelectViewController :( UIViewController *) viewController {if (self. selectedIndex = 2) {button. selected = YES;} else {button. selected = NO ;}@ end