UIToolbar Help

Discussion in 'iOS Programming' started by primedime, Mar 21, 2011.

  1. primedime macrumors member

    Joined:
    Mar 21, 2011
    Location:
    Ft. Lauderdale, FL
    #1
    I currently have made an app and I want to add a UIToolbar to control a UIWebView.

    Currently I am having these issues:

    1) The buttons are not interacting with the webview even though i connected everything in interface builder

    2) my stopLoading and refresh buttons are not showing up bordered as I made them in interface builder.

    3) my webview is sliding underneath my toolbar instead of opening up below it.


    Here is my code:

    Code:
    //  WebViewController.h
    //  TheSalesHuddle
    
    
    
    #import <UIKit/UIKit.h>
    
    @interface WebViewController : UIViewController <UIWebViewDelegate>
    {
    	UIWebView *myWebView;
    	UIActivityIndicatorView *spinnerView;
    	UIToolbar *toolbar;
    }
    
    @property (nonatomic, retain) IBOutlet UIWebView *myWebView;
    @property (nonatomic, retain) IBOutlet UIActivityIndicatorView *spinnerView;
    @property (nonatomic, retain) IBOutlet UIToolbar *toolbar;
    
    @end
    
    Code:
    //  WebViewController.m
    //  TheSalesHuddle
    //
    //  Created by Roy Jossfolk Jr on 2/24/11.
    //  Copyright 2011 __MyCompanyName__. All rights reserved.
    //
    
    #import "WebViewController.h"
    
    @implementation WebViewController
    
    @synthesize myWebView;
    @synthesize spinnerView;
    @synthesize toolbar;
    
    
    - (void)loadWebPageWithString:(NSString *)urlString
    {
    	NSURL *url = [NSURL URLWithString:urlString];
    	NSURLRequest *request = [NSURLRequest requestWithURL:url];
    	[myWebView loadRequest:request];
    }
    
    
    //Tab Bar Image and title
    - (id)initWithNibName:(NSString *)nibName bundle:(NSBundle *)bundle
    {
    	if ((self = [super initWithNibName:nibName bundle:bundle]))
    	{
    		UIImage *tabImage = [UIImage imageNamed:@"blogIcon.png"];
    		UITabBarItem *tabBarItem = [[UITabBarItem alloc]
    									initWithTitle:@"BLOG"
    									image:tabImage
    									tag:0];
    		self.tabBarItem = tabBarItem;
    		[tabBarItem release];
    	}
    	return self;
    }
    
    
    - (void)viewWillDisappear:(BOOL)animated
    {
    	[myWebView stopLoading];
    }
    
    
    // Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
    - (void)viewDidLoad
    {
        [super viewDidLoad];
    	
    	[self.myWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://thesaleshuddle.com"]]];
    	
    	toolbar = [UIToolbar new];
    	toolbar.barStyle = UIBarStyleBlack;
    	[toolbar sizeToFit];
    	toolbar.frame = CGRectMake(0, 0, 320, 44);
    	
    	// add buttons
    	UIBarButtonItem *item1 = [[UIBarButtonItem alloc]
    							  initWithBarButtonSystemItem:UIBarButtonSystemItemStop 
    							  target:self action:@selector(action)];
    	UIBarButtonItem *item2 = [[UIBarButtonItem alloc]
    							  initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh
    							  target:self action:@selector(action:)];
    	UIBarButtonItem *item3 = [[UIBarButtonItem alloc] 
    							  initWithTitle:@"Back" style:UIBarButtonItemStyleBordered 
    							  target:self action:@selector(action)];
    	UIBarButtonItem *item4 = [[UIBarButtonItem alloc] 
    							  initWithTitle:@"Forward" style:UIBarButtonItemStyleBordered 
    							  target:self action:@selector(action)];
    	
    	
    	//Use this to put space in between your toolbox buttons
    	UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
    																			  target:nil
    																			  action:nil];
    	//Add buttons to the array
    	NSArray *items = [NSArray arrayWithObjects: item1, item2, flexItem, item3, item4, nil];
    	
    	//release buttons
    	[item1 release];
    	[item2 release];
    	[item3 release];
    	[item4 release];
    	[flexItem release];
    	
    	//add array of buttons to toolbar
    	[toolbar setItems:items animated:NO];
    	
    	[self.view addSubview:toolbar];
    }
    
    - (void)didReceiveMemoryWarning {
        // Releases the view if it doesn't have a superview.
        [super didReceiveMemoryWarning];
        
        // Release any cached data, images, etc. that aren't in use.
    }
    
    - (void)viewDidUnload {
        [super viewDidUnload];
        // Release any retained subviews of the main view.
        // e.g. self.myOutlet = nil;
    
    }
    
    // release
    - (void)dealloc {
    	
    	[myWebView release];
    	[spinnerView release];
        [super dealloc];
    }
    
    #pragma mark -
    #pragma mark UIWebViewDelegate methods
    
    - (void)webViewDidStartLoad:(UIWebView *)myWebView
    {
    	[spinnerView startAnimating];
    }
    
    - (void)webViewDidFinishLoad:(UIWebView *)myWebView
    {
    	[spinnerView stopAnimating];
    }
    
    @end
     
    
     
  2. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #2
    It looks like you are also setting the toolbar buttons via your code, therefore overriding what you've done in IB. Pick one approach or the other but not both.
     
  3. primedime thread starter macrumors member

    Joined:
    Mar 21, 2011
    Location:
    Ft. Lauderdale, FL
    #3
    When I originally tried it, I just created it in IB and then connected everything but nothing showed up. I started researching it online and slowly have added all the extra code and it actually made my toolbar show up. i am really having a difficult time with this and not even sure how to explain myself.

    If i just set up a toolbar in IB what should I be doing next?
     
  4. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #4
    Verifying that your toolbar is showing up in your interface (i.e. in your actually running app). If it does, then the next step is to add your toolbar buttons (UIBarButtonItems) to it. If it doesn't, time for some troubleshooting... :D
     
  5. primedime thread starter macrumors member

    Joined:
    Mar 21, 2011
    Location:
    Ft. Lauderdale, FL
    #5
    Ok, I hid all of my code that referenced to the buttons and toolbar and nothing shows up even though I have it all set up in IB..... sorry for the newbie questions but this is the last part of my app and i am super frustrated, I added this last second the control my webview and now I am stuck.... this webview is not the root view controller, I have 3 other views besides this one wrapped in a navigation bar and tab bar.
     
  6. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #6
    How did you add your toolbar to your view in IB? Perhaps a screenshot of it would help. Also, the view hierarchy, from your ???.xib window, would probably help as well.
     
  7. primedime thread starter macrumors member

    Joined:
    Mar 21, 2011
    Location:
    Ft. Lauderdale, FL
    #7
    Here are some screen shots... not sure what you mean by view hierarchy to be honest. I know that I have the TheSalesHuddleAppDelegate.h/.m files controlling my tab bar and navigation bar. does that help?
     

    Attached Files:

  8. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #8
    This picture:

    [​IMG]

    seems to show that the toolbar does show up. So, when you say "nothing shows up" what do you mean exactly?
     
  9. primedime thread starter macrumors member

    Joined:
    Mar 21, 2011
    Location:
    Ft. Lauderdale, FL
    #9
    I ment that it doesn't show up if I don't manually put in all the code for it. You told me to either do it in IB or do it in code. I think I did both by accident but not sure what to do now. When I press on those buttons it crashes my application so something is wrong. Also I want the stop button and refresh button to be bordered like I have in my IB picture i loaded.... I am really sorry if I am confusing you but i am very new and this is my first app and have been working on it for about a month....
     
  10. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #10
    Comment out all the code that adds the toolbar. Make sure the toolbar is still added via IB. Run your app. What do you see where the toolbar should be? A gap? Does the web view extend to the top? What? A screenshot of your IB-only-toolbar view will help.
     
  11. primedime thread starter macrumors member

    Joined:
    Mar 21, 2011
    Location:
    Ft. Lauderdale, FL
    #11
    If I comment out all the code for the toolbar and still leave it in IB, i get the webview extended all the way up the page, leaving no space for the toolbar. I attached the screenshots. Thanks a lot for the help, I really appreciate it.
     

    Attached Files:

  12. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #12
    Wow! Okay, let me ask you this: which method do you prefer, using IB or adding the toolbar via code? Then we can start to troubleshoot your approach based on your preferred method. If you say "I don't care, as long as it works", then I am probably going to help you find a way via code since I can see that much easier than whatever IB setup you might have.
     
  13. primedime thread starter macrumors member

    Joined:
    Mar 21, 2011
    Location:
    Ft. Lauderdale, FL
    #13
    That is tough to say because I would much rather not have to write code but the rest of my navigation and tab bar have already been done manually.... I started with a Window-Based application because that is how I learned it from a book (Complete Idiot's Guide to iPhone & iPad development).... I guess knowing the code can not hurt! Hit me with what you got! I am ready to learn....
     
  14. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #14
    Alright. Do you feel comfortable adding the toolbar itself to the view, via code? Don't worry about the buttons for now. We'll get to those later (and deal with styling the stop and refresh buttons at that point as well). What do you think that code would look like?
     
  15. primedime thread starter macrumors member

    Joined:
    Mar 21, 2011
    Location:
    Ft. Lauderdale, FL
    #15
    Code:
    toolbar = [UIToolbar new];
    	toolbar.barStyle = UIBarStyleBlack;
    	[toolbar sizeToFit];
    	toolbar.frame = CGRectMake(0, 0, 320, 44);
    
    [self.view addSubview:toolbar];
    
    I think that would be the code to manually code the toolbar, from what i know. Now one thing I haven't done is made it so the toolbar and webview are spaced correctly. I think I need to set the frame in the webview like i did for the toolbar but I don't know why because in IB I set the webview to be under the toolbar.... my application is not reacting to anything I am doing in IB for some reason...
     
  16. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #16
    Looks good... mostly. Just one thing that concerns me: Why call sizeToFit when the next line resets the frame?

    I think it is reacting, just not in the way you are expecting. Regardless, since we are coding the toolbar via code, I would just suggest setting it as a Simulated User Interface Element (Top Bar: Black Navigation Bar) and then setting the framing for the webview to take this simulated element into account (i.e. the top of the webview butts against the bottom of the fake toolbar). If you run into issues with this, let me know what they are. I can try to explain in better detail.

    Hey, can I see the View Size Inspector settings you have for your UIWebView in IB?

    Alright, back to the toolbar, let's try adding your Stop button to the toolbar. What do you think the code for that would look like?
     
  17. primedime thread starter macrumors member

    Joined:
    Mar 21, 2011
    Location:
    Ft. Lauderdale, FL
    #17
    Code:
    UIBarButtonItem *item1 = [[UIBarButtonItem alloc]
    							  initWithBarButtonSystemItem:UIBarButtonSystemItemStop 						       target:self.myWebView  action:@selector(_stopLoading)];
    
    That is what I believe is how to set my stop button.


    ok, I added the Simulated User Interface (top bar: black navigation bar) but it still hides some of the uiwebview. here is a screen shot of my View Size Inspector for my UIWebView
     

    Attached Files:

  18. primedime thread starter macrumors member

    Joined:
    Mar 21, 2011
    Location:
    Ft. Lauderdale, FL
    #18
    is it possible I am having trouble customizing this view because of the way i wrapped all my views with navigation bars and tab bars in my AppDelegate.h/.m files? I feel like I have lost control over this view and the edits I make do nothing.... i don't know, just reaching here! Do you think I could send you my source folder? maybe you can see easily what I did wrong if you see it in xcode??
     
  19. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #19
    Okay. Three things:
    1) Since initWithBarButtonSystemItem:target:action: doesn't take a style parameter like initWithTitle:style:target:action: does, how do you think you might be able to set item1's style?
    2) Explain your target setting.
    3) Do you have a _stopLoading method? If so, where?

    Then there must be some other code (or setting?) that I can't see that is adjusting the frame of the webView. Sorry, if I'm not really helping with this...

    Hmm, I'm starting to wonder if figuring out the cause of this could be the solution to some of the problems you're having.
     
  20. primedime, Mar 21, 2011
    Last edited: Mar 21, 2011

    primedime thread starter macrumors member

    Joined:
    Mar 21, 2011
    Location:
    Ft. Lauderdale, FL
    #20
    Here is my source folder:

    Source Folder

    1) I tried initWithTitle:style:target:action: previously but all it did was create a button with the word 'Cancel' in it....

    Code:
    UIBarButtonItem *item1 = [[UIBarButtonItem alloc] 
    							  initWithTitle:@"Stop" style:UIBarButtonItemStyleBordered 
    							  target:self.myWebView action:@selector(_stopLoading)];
    
    I just tried this code right here like you suggest and I get a bordered button that says 'Stop' in it.....

    2) i put self.myWebView because someone else told me this:


    3) No I do not have a stopLoading method because I am not sure where to put it or how to write it out. Every time I tell people that they kind of get disrespectful and just tell me I don't know what I am doing... so, i keep researching what my possibilities are but I can not find anything!


    You are helping a bunch and I appreciate you patience with me. I am new to this and kind of just anxious to get my first app in the store. It is not anything super special about my app I just simply want to help promote my company. Maybe if you look through my source files and open it in xcode you can understand what I did a little bit better!
     
  21. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #21
    IMO, you should make the toolbar in IB. By making the webview in IB and the toolbar in code you're placing the toolbar on top of the webview. That's why it covers the top of the webview as shown in the earliest screenshots in this thread. self.view and the webview are set up in IB to fill the screen. So the webview's frame is at 0, 0. There's no room for the toolbar. You then create the toolbar and also place it at 0,0, so it covers the top of the webview. If you really want to do it that way then you have to adjust the top of the webview's frame in code when you add the toolbar.

    I would make the toolbar in IB also. Lay it out so the toolbar and the webview don't overlap.

    I think you mentioned crashes when you did this. Those can be figured out if the appearance is correct.
     
  22. primedime thread starter macrumors member

    Joined:
    Mar 21, 2011
    Location:
    Ft. Lauderdale, FL
    #22
    PhoneyDeveloper:

    when i just create the toolbar in IB, nothing shows up but a blank toolbar with no buttons.... I feel like crap right now, I feel like the dumbest person on the planet.....
     
  23. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #23
    Did you add the bar buttons to the toolbar in IB?
     
  24. primedime thread starter macrumors member

    Joined:
    Mar 21, 2011
    Location:
    Ft. Lauderdale, FL
    #24
    Yes, I did. I am checking out my AppDelegate.h/.m files right now to see if I did something to the webviewcontroller that I shouldn't have....

    Here is the full code of my TheSalesHuddleAppDelegate.h/.m file:

    Code:
    //  TheSalesHuddleAppDelegate.h
    //  TheSalesHuddle
    
    #import <UIKit/UIKit.h>
    
    @class DisplaySplashSceenViewController;
    @class Twitter_FeedViewController;
    
    @interface TheSalesHuddleAppDelegate : NSObject <UIApplicationDelegate> 
    {
        UIWindow *window;
    	UINavigationController *navigationController;
    	UITabBarController *tabBarController;
    	Twitter_FeedViewController *viewController;
    }
    
    @property (nonatomic, retain) IBOutlet UIWindow *window;
    @property (nonatomic, retain) IBOutlet UINavigationController *navigationController;
    @property (nonatomic, retain) IBOutlet Twitter_FeedViewController *viewController;
    
    @end
    
    
    

    Code:
    //  TheSalesHuddleAppDelegate.m
    //  TheSalesHuddle
    
    #import "TheSalesHuddleAppDelegate.h"
    #import "WebViewController.h"
    #import "AboutViewController.h"
    #import "HuddlesViewController.h"
    #import "Twitter_FeedViewController.h"
    #import "TheSalesHuddleViewController.h"
    #import "TweetViewController.h"
    
    @implementation TheSalesHuddleAppDelegate
    
    @synthesize window;
    @synthesize navigationController;
    @synthesize viewController;
    
    - (void)applicationDidFinishLaunching:(UIApplication *)application
    {
    	// Initialize the view controllers
    	WebViewController *webViewController = [[WebViewController alloc] init];
    	AboutViewController *aboutViewController = [[AboutViewController alloc] init];
    	HuddlesViewController *huddlesViewController = [[HuddlesViewController alloc] init];
    	Twitter_FeedViewController *twitter_FeedViewController = [[Twitter_FeedViewController alloc] init];
    	TweetViewController *tweetViewController = [[TweetViewController alloc] init];
    	
    	// Wrap the about view controller in a nav controller
    	UINavigationController *aboutNavController = [[UINavigationController alloc]
    									initWithRootViewController:aboutViewController];
    	/*
    	UINavigationController *webNavController = [[UINavigationController alloc]
    									 initWithRootViewController:webViewController];
    	 */
    	UINavigationController *twitter_FeedNavController = [[UINavigationController alloc]
    									initWithRootViewController:twitter_FeedViewController];
    	UINavigationController *huddlesNavController = [[UINavigationController alloc]
    									initWithRootViewController:huddlesViewController];
    	UINavigationController *tweetNavController = [[UINavigationController alloc]
    									initWithRootViewController:tweetViewController];
    
    	// Create an array of controllers the tab bar will use
    	NSArray *viewControllers = [NSArray arrayWithObjects:
    								webViewController,
    								twitter_FeedViewController,
    								huddlesNavController,
    								aboutNavController,
    								nil];
    	
    	// Init the tab bar controller
    	tabBarController = [[UITabBarController alloc] init];
    	tabBarController.viewControllers = viewControllers;
    	
    	// Start on the blog tab
    	tabBarController.selectedIndex = 0;
    	
    	// Init the model
    	/*
    	// Init the model
    	TwitterUser *user = [[TwitterUser alloc] init];
    	twitterViewController.twitterUser = user;
    	[user release];
    	*/
    	// Memory management
    	
    	[webViewController release];
    	/*
    	[webNavController release];	
    	 */
    	[aboutViewController release];
    	[aboutNavController release];
    	[huddlesViewController release];
    	[twitter_FeedViewController release];
    	[twitter_FeedNavController release];
    	[tweetNavController release];
    	
    	// Add the tab bar view to the window
    	[window addSubview:tabBarController.view];
    	
    
    	[window addSubview:navigationController.view];
    	
    	// Display the window
    
    	
        [window makeKeyAndVisible];
    	
    }
    
    - (void)dealloc
    {
    
        [window release];
    	[viewController release];
    	[navigationController release];
    	[tabBarController release];
    	
        [super dealloc];
    }
    
    @end
    
    
     
  25. PhoneyDeveloper, Mar 21, 2011
    Last edited: Mar 21, 2011

    PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #25
    Well, if you want to stick with the code you've got then I think you need to adjust the frame of the webview when you add the toolbar.
     

Share This Page