Hey I am using a custom sized UITabBar with extra large images.
I add the images to the tab bar item like this:
UITabBar *tabBar = self.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
[tabBarItem1 setImage:[UIImage imageNamed:#"image"]];
[tabBarItem1 setImageInsets:UIEdgeInsetsMake(0, 0, 20, 0)];
Also because the images are larger I want them to hover more in the middle of the tab bar, so I add the inset.
My issue is when I program the inset and then click on the button, the button squishes in on its self. It maintains its width, but its height squishes in on its self. I of course don't want this to happen, but I can't seem to find out whats going on.
Thanks, Krtko
-Note for Mods Please lock this thread
-Note for people answering my question. I appreciate your help but it was a known bug at the time, so please stop answering this question. Thank you
Are you seeing this on iOS 7 only?
7.1 seemed to introduce a bug with tab bar image insets. If you continually tap or hold the tab, it grows or shrinks depending on the insets. If you tap on another tab, the tab bar image goes back to normal right?
When using UIEdgeInsetsMake the important point is to have the top inset "BE EQUAL" to the bottom inset.
For example : item.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
Remove your insets for the image. Use an image that is exactly of the size you want. We have to follow this approach till Apple fixes this issue.
You may put a UIView on top of the tab bar, and add a UITapGestureReognizer to the UIView. When tapped, I determine where it is and call the appropriate selected item for the tabbar. Hack, but works quite nicely and lets you keep your inset values to whatever you want.
#property UIView tabBarCover;//place on top of uitabbar and give it clear color background
- (void)viewDidLoad
{
[tabBar setSelectedItem:[tabBar.items objectAtIndex:0]];
UITapGestureRecognizer *singleFingerTap =
[[UITapGestureRecognizer alloc] initWithTarget:self
action:#selector(handleSingleTap:)];
[tabBarCover addGestureRecognizer:singleFingerTap];
}
Then each time the UIView is tapped, set the selected item based on where the user touched. I had 3 tab bar items, so I just did some logic for the x coordinate.
-(void) handleSingleTap:(UITapGestureRecognizer *) recognizer
{
CGPoint location = [recognizer locationInView:[recognizer.view superview]];
//NSLog(#"tapped it %lf", location.x);
if(location.x<=105){
//1st 3rd tapped, do something
}
else if(location.x >105 && location.x<=210)
{
//do nothing, selected item stays same. this is glas
}else{
//must be in 3rd section so do that load
}
}
Hope it helps.
You just check if ios7 then setFrame again inside
(void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController
Related
Hey guys here is my dilemma. I am trying to create a tab bar that spans top to bottom anchored at the left side instead of left to right anchored at the bottom. I created a toolbar item that places the bar exactly where I want it but I want the tab bar to be the same, with the same functionality except of course with the hairline in place, and the bar items lining up top to bottom.
This is my code for the tool bar, I know the tab bar will be coded similarly, I just hit a slump.
UIToolbar *toolBarLeft = [[UIToolbar alloc] init];
toolBarLeft.frame = CGRectMake(0, 20, 50, 568);
toolBarLeft.layer.borderColor = [UIColor lightGrayColor].CGColor;
toolBarLeft.layer.borderWidth = 0.5f;
[self.view addSubview:toolBarLeft];
I appreciate the help guys!
The gist of what you need to do is this:
Subclass UITabBarController.
Make sure the default tabBar property's hidden property gets set to YES (so its hidden) and stays that way.
Add any custom view you want to use as the tabbar to this subclass's view property (just as you'd add a view as a subview to a UIViewController).
The subview you add in step 3 should respond to touches and have a delegate property. The UITabBarController subclass should delegate the view so it can respond to different tabs being selected (as well as many other things).
As long as the navigation is logical and easy to understand, your app won't be rejected simply for modifying how a tab bar works.
ADDENDUM:
For step 3, given you want tabs stacked vertically, I'd actually recommend a UITableView subclass where the value returned from tableView:heightForRowAtIndexPath: is calculated something like this:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath {
CGFloat totalHeight = tableView.frame.size.height;
CGFloat totalTabs = (CGFloat)[tableView numberOfRowsInSection:0];
return totalHeight/totalTabs;
}
And scrolling is disabled.
Because now when tableView:didSelectRowAtIndexPath: is fired, we can tell the tab bar controller: tabBarController.selectedIndex = indexPath.row;
The iOS7 Facebook App has a right side menu that can be shown by swiping right to left or clicking on the upper right button. When this menu is opened the there is a color transition in the entire status bar from blue to black and vice-versa when closed.
This image shows both status bar side-to-side
This looks like a very good solution for iOS Apps with side menus.
Any ideas or ways about how to accomplish this?
I am currently using JASidePanels.
Thanks!
I managed to find a very simple, elegant way to do this, that mimics the Facebook app functionality perfectly.
Here's my approach:
Create view with status bar frame
Set view background color to black, opacity to 0
Add view as subview to any root view (you need a view that will cover both the center view and the menus, so that it won't be confined to any single view - a good option for this is the container view controller used by your menu controller implementation)
Set view's opacity in your menu controller implementation's menu animation method
Here's my specific implementation, using MMDrawerController:
I subclassed MMDrawerController (I actually already had a subclass for using MMDrawerController with storyboards), and added this code to the class's init method:
// Setup view behind status bar for fading during menu drawer animations
if (OSVersionIsAtLeastiOS7()) {
self.statusBarView = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]];
[self.statusBarView setBackgroundColor:[UIColor blackColor]];
[self.statusBarView setAlpha:0.0];
[self.view addSubview:self.statusBarView];
}
// Setup drawer animations
__weak __typeof(&*self) weakSelf = self; // Capture self weakly
[self setDrawerVisualStateBlock:^(MMDrawerController *drawerController, MMDrawerSide drawerSide, CGFloat percentVisible) {
MMDrawerControllerDrawerVisualStateBlock block;
block = (drawerSide == MMDrawerSideLeft) ? [MMDrawerVisualState parallaxVisualStateBlockWithParallaxFactor:15.0] : nil; // Right side animation : Left side animation
if(block){
block(drawerController, drawerSide, percentVisible);
}
[weakSelf.statusBarView setAlpha:percentVisible]; // THIS IS THE RELEVANT CODE
}];
I also added self.statusBarView as a private property.
The first section of code creates a view, configures it, and adds it as a subview of the MMDrawerController subclass's view. The OSVersionIsAtLeastiOS7() method is a custom method that simplifies the check to see if the device is running iOS 7 (if it isn't, your custom view will show up below the status bar, which you don't want).
The second section of code is MMDrawerController's setDrawerVisualStateBlock method, which sets the animations code to be performed when a menu is being opened and closed. The first few lines of code are boilerplate code that sets one of the prebuilt animations blocks to each menu (I wanted parallax on the left, but nothing on the right). The relevant code is the last line of the block: [weakSelf.statusBarView setAlpha:percentVisible];, which sets the status bar view's opacity to match the percentage that the menu is currently open. This allows for the smooth cross animation you see in the Facebook app. You'll also notice I've assigned self to a variable weakSelf, so as to avoid the "retain cycle" compiler warning.
This is my specific approach using MMDrawerController and a subclass, which I did more for convenience because I already had the subclass in place, than because it is necessarily the best approach or the only way to do it. It could probably be implemented in several other ways, using MMDrawerController without a subclass, or using any other side-drawer menu implementation.
The ending result is a smooth fading to black animation behind the status bar, exactly as you see in the new Facebook app.
I've been trying to accomplish the same thing. The method I am using to do this is based on the following concepts:
A background image with a height of 64 points will fill both the
UINavigationBar and the UIStatusBar.
A background image with a height of 44 points will fill the UINavigationBar and leave the
UIStatusBar black.
You can add an subview to the top of the current navigationController's view and it will sit underneath the UIStatusBar.
So, first, you need to create two images with your desired UINavigationBar look:
A 640x128px image to cover navigation bar and status bar (ImageA)
And a 640x88px image to cover the navigation bar but leave the status bar black (ImageB).
In the application:didFinishLaunchingWithOptions: method, set the background of your UINavigationBar with ImageA with [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"ImageA.png"] forBarMetrics:UIBarMetricsDefault];
When the side menu starts to open, you are going to want switch the UINavigationBar so it uses ImageB and create a view which you will add underneath the UIStatusBar. Here is some sample code for doing just that:
// Add a property for your "temporary status bar" view
#property (nonatomic, strong) UIView *temporaryStatusBar;
And in the code where the side menu starts to open:
// Create a temporary status bar overlay
self.temporaryStatusBar = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]];
self.temporaryStatusBar.backgroundColor = [UIColor yourColor];
[self.navigationController.view addSubview:self.temporaryStatusBar];
// Update both the current display of the navigationBar and the default appearance values
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"imageB.png"] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:#"imageB.png"] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setNeedsDisplay];
As the side menu animates open, or as the user pans the menu, all you need to do then is adjust the alpha level of the UIStatusBar overlay. When the side menu is fully open, the UINavigationBar should have ImageB as its background image and the UIStatusBar overlay should have an alpha of 0. When the side menu closes, you'll want to replace the UINavigationBar background with ImageA and remove the UIStatusBar overlay.
Let me know if this works for you!
You can use this awesome slide menu library
https://github.com/arturdev/AMSlideMenu
In this demo project you can see how to do that by writing 4 lines of code.
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
// Setting navigation's bar tint color
self.navigationController.navigationBar.barTintColor = [UIColor colorWithHex:#"#365491" alpha:1];
// Making view with same color that navigation bar
UIView *statusBarView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 20)];
statusBarView.backgroundColor = [UIColor colorWithHex:#"#365491" alpha:1];
// Replace status bar view with created view and do magic :)
[[self mainSlideMenu] fixStatusBarWithView:statusBarView];
}
In my app I have a UITabBarController in which I give custom selected/unselected images in my AppDelegate as follows:
UIImage *selectedImage = [UIImage imageNamed:#"home-tab-selected"];
UIImage *unselectedImage = [UIImage imageNamed:#"home-tab"];
UITabBar *tabBar = tabController.tabBar;
UITabBarItem *item1 = [tabBar.items objectAtIndex:0];
[item1 setFinishedSelectedImage:selectedImage withFinishedUnselectedImage:unselectedImage];
The images I have are 100x100, much larger than the normal tab bar items. All works well, and my images are placed nicely and look great.
The issue I am having is that the frame of the underlaying UITabBarButton remains 76x48, leaving only a small portion of my tabs 'touchable'. (Image below with a border around the frame)
To attempt to fix this, in my subcalssed UITabBarController viewDidLoad, I go through each UITabBarButton, and set the frame as follows:
for (UIView* subView in self.tabBar.subviews)
{
if ([subView isKindOfClass:NSClassFromString(#"UITabBarButton")])
{
[subView setFrame:CGRectMake(subView.frame.origin.x, subView.frame.origin.y, 100, 100)];
}
}
After I do that, I log the frames and they do change-- BUT the frame never changes in my tab bar-- I still only see and can touch in the smaller red box.
Is this because Apple does not allow you to change these frames or am I doing something wrong here?
Any help apperciated! Thanks!
EDIT:
In the end I just ended up making my tab images smaller. I found a height of 70px still picks up most touches.
The layout of your UITabBarController's view might change after loading: Additional UITabBarItems could be added, of the user could switch to landscape orientation.
Before iOS 6, there wasn't a way to configure complex layouts. Since UITabBar is a very old class, it's most likely doing its work in the layoutSubviews method.
You could subclass UITabBar and override said method, but if you go that far, you might want to think about creating your own tab bar, which in the end is just a UIView with a few UIButtons.
Had a similiar problem with the underlying UITabBarButtons. I solved it by setting the UITabBar's "Item positioning" attribute to "Fill".
I have an app where up until now I've been using a UINavigationController with a UINavigationBar that has its property translucent = YES. This means the UINavigationController's content view (i.e. the views from the view controllers you push) to be full-screen (minus status bar).
However, if you set the navigationBar.translucent = NO, this container view becomes 44pt shorter, as I suppose Apple has assumed you don't need any content under an opaque navigationBar.
... except if you're doing what we're doing and are employing a navigationBar that scrolls away (see This Post on how to do that) So I'd like to know if this is possible.
I want to have translucent = NO, but have everything behave as if it were still set to YES. I like the functionality of the translucent = YES, but I don't actually want the bar to be made translucent by UIKit.
What worked for me was to add
extendedLayoutIncludesOpaqueBars = true
in
viewDidLoad
something like this
override func viewDidLoad() {
super.viewDidLoad()
extendedLayoutIncludesOpaqueBars = true
}
Hope it will work for you as well
It's not necessarily a good answer but you could just offset your view that high if you're not translucent.
//This won't take into account orientation and probably other details
if(!self.navigationController.navigationBar.isTranslucent)
{
self.view.frame = CGRectMake(0,0,-44,self.view.bounds.size.height);
}
You could put that in your viewDidLoad or viewWillAppear and if you have a bunch of view controllers you can just subclass them all and put your logic in the subclass.
I found a solution that works, although it is indeed a bit of a hack.
The idea is to give the translucent nav bar an opaque backing. Unfortunately I'm not happy with the solution in that it's dirty and not encapsulated and introduces some potential issues, but i AM happy because it got the job done.
In my Application's base view controller class (i.e. MyViewController : UIViewController), in the viewDidLoad method, I instantiate a new ivar UIView *_navigationBarBG and give it the same frame as self.navigationController.navigationBar. I then set it's backgroundColor property to [UIColor whiteColor] although this is how you achieve some more tint I guess. [EDIT:If you wanted to be a purist (color values remaining exactly as they come from the .psd), you could make the _navigationBarBG a UIImageView and use your custom background there, and the background of the actual UINavigationBar you set to draw clear (or stretch a 1px transparent image if you wanted to use a typical 'change your navigation bar using an image' recipe that's somewhere on the internet)]
if(self.navigationController)
{
_navigationBarBG = [[UIView alloc] initWithFrame: self.navigationController.navigationBar.frame];
_navigationBarBG.backgroundColor = [UIColor whiteColor];
[self.view addSubview:_navigationBarBG];
}
THEN, (and this is the crappy part, but I don't see any other way), I add this view as a subview. BUT, whenever you would normally make a call to [self.view addSubview: anyView], you have to make sure you call [self.view insertSubview: anyView belowSubview: _navigationBarBG];
if (_navigationBarBG)
[self.view insertSubview: anyView belowSubview:_navigationBarBG];
else
[self.view addSubview: anyView];
If you forget that, these added views will slide under your navbar background and look weird. So you need to know that this is a source of error.
WHY AM I DOING THIS? Again you might ask... I want to be able to have a scrolling navigation bar that scrolls out of the way when you scroll down your table view, thereby giving the user more screen space. This is done by using the scrollView delegate (scrollViewDidScroll:) and also viewWillAppear:
// FIRST DEAL WITH SCROLLING NAVIGATION BAR
CALayer *layer = self.navigationController.navigationBar.layer;
CGFloat contentOffsetY = scrollView.contentOffset.y;
CGPoint newPosition;
if (contentOffsetY > _scrollViewContentOffsetYThreshold && self.scrollingNavigationBarEnabled) {
newPosition = CGPointMake(layer.position.x,
22 - MIN((contentOffsetY - _scrollViewContentOffsetYThreshold), 48.0)); // my nav bar BG image is 48.0 tall
layer.position = newPosition;
[_navigationBarBG setCenter: newPosition]; // if it's nil, nothing happens
}
else
{
newPosition = kNavBarDefaultPosition; // i.e. CGPointMake(160, 22) -- portrait only
layer.position = newPosition;
[_navigationBarBG setCenter: newPosition]; // if it's nil, nothing happens
}
I was looking for an answer to this as I wanted my subviews to be at (0,0) and not (0,44)(in reference to the Screen bounds), but I could not find an answer on how to set this in the NavigationController, which I thought would be an included property.
What I ended up doing that was very simple is adding a subview to the navigation controller that was the width and height of the Navigation Bar, but then insert the subview below the Navigation Bar.
Now the setting is Translucent = YES, but it still appears solid and the subviews behave how I want.
EDIT: After re-reading your original post, I suppose if you're going to be rolling the nav bar away, you'll have to take into account hiding and showing the new subview as you do the same with the nav bar
I currently have a button image for the leftBarButton of the UINavigationBar. Is there a way to eliminate the space between this button and the left edge of the UINavigationBar? I thought about just making a custom image for the background of the UINavigationBar, but I want to be able to use the back buttons that are generated on other screens. Ideas?
The layout logic of the navigation bar itself is going to want to try to maintain that space on the left side.
You could try specifying a custom view when setting the navigation items (UIBarButtonItem initWithCustomView:), and pass in a view with a negative x origin -- but I assume the navigation bar would ignore any such origin. (You could also try to keep a reference to that view, and move it to the left after the navigation bar finishes its layout)
Another option would be to try to create your own custom navigation bar -- possibly by putting a custom view in the center of the navigation bar, and stretching it to cover the width & height of the bar.
Try this, it works for me:
CGRect frame = self.navigationController.navigationBar.frame;
frame.origin.x = -10;
self.navigationController.navigationBar.frame = frame;
Basically, set the navigation bar x coordinate to negative not the bar item.
in ios7 you can just add a dummy barbuttonitem
for fixing left space you should add dummy as first, for right as last
example for left, you should add this after setting your original items or in viewdidload if you are setting buttons using storyboard.
NSMutableArray *buttons = [[NSMutableArray alloc] init];
UIBarButtonItem *spacerItem = [[UIBarButtonItem alloc] init];
[buttons addObject:spacerItem];
for(UIBarButtonItem *item in self.leftBarButtonItems){
[buttons addObject:item];
}
[self setLeftBarButtonItems:[NSArray arrayWithArray:buttons] animated:NO];