UItabBar highlighted during IOS Customization

Source: Internet
Author: User

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
 

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.