Discussion Forums  >  Plugins, Customizing, Source Code

Replies: 30    Views: 699

PaddyO
Lost but trying
Profile
Posts: 189
Reg: Sep 11, 2013
Geelong
5,190
03/12/14 11:26 PM (10 years ago)

Setting a toolbar's background to transparent

Hi all, Can someone help me with some ideas please? I'm adding some conditional code to the BT View controller to change the way the Map plugin looks. This changes the tint of the toolbar icons: [[UIToolbar appearance] setTintColor:[[UIColor alloc] initWithRed:0 green:0 blue:1 alpha:0.1]]; (thanks to Kittsy for that - http://www.buzztouch.com/forum/thread.php?tid=CDF5C7412A3C034D5BEBEFD&currentPage=1) and this changes the tint of the toolbar itself: [[UIToolbar appearance] setBarTintColor:[[UIColor alloc] initWithRed:2 green:3 blue:0 alpha:0.1]]; but I'd really love to have the toolbar completely transparent. I've tried using clearColor as a value but either I'm not using it the right way, or I'm not using it the right way. Or there's a third alternative. Has anyone done this? Cheers PaddyO
 
Niraj
buzztouch Evangelist
Profile
Posts: 2943
Reg: Jul 11, 2012
Cerritos
37,930
like
03/13/14 03:20 AM (10 years ago)
Does this work? Going from memory, no computer near me: [[UIToolbar appearance] setBarTintColor:[UIColor clearColor]];
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
03/13/14 03:37 AM (10 years ago)
I have code for this somewhere. @Niraj tint colour adds an overlay colour it does not change teh actual color of the underlying navbar so clear will not work. The code I've got strips everytinhing away, it will make it look like floating buttons.
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
03/13/14 04:00 AM (10 years ago)
Edited after finding out kittsy was right. I guess I'll wait too :) Cheers! -- Smug
 
PaddyO
Lost but trying
Profile
Posts: 189
Reg: Sep 11, 2013
Geelong
5,190
like
03/13/14 04:20 AM (10 years ago)
Thanks folks, great stuff. Putting it all together has almost worked: Niraj, thanks, that definitely removed any colour (and the snytax is great for tinting the icons too, thanks! Like this: [[UIToolbar appearance] setTintColor:[UIColor greenColor]]; [[UIToolbar appearance] setBarTintColor:[UIColor clearColor]]; ) but now even though the icons are green, the toolbar is black. What I can't tell now is whether it's black because it really is transparent and I'm seeing a slice of empty screen, or whether applying a clearColor tint covers a default black toolbar in a layer of 'clear'. Kittsy that's exactly what i need, 'floating buttons' on that toolbar with the map showing under them. If you could point me to some of that code that would be really awesome. Smug, I think that works its magic on the nav bar at the top; I'm looking to only change the toolbar on the map view (the one with the tree and signpost icons etc). But I'll be able to use that in another part of the app! ((... hmmm, maybe change navigationBar to toolBar...??)) Cheers Paddy
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
03/13/14 12:07 PM (10 years ago)
Add this to line 187 BT_screen_map if (theToolbar.subviews.count > 0){ [[theToolbar.subviews objectAtIndex:0] removeFromSuperview]; [[theToolbar.subviews objectAtIndex:0] removeFromSuperview]; } just before //return return theToolbar;
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
03/13/14 12:09 PM (10 years ago)
Just to explain why the code appears duplicated initially the bottom subview holds the default colour. the second view holds the shadow, would have appeared as a line as we already removed the bottom view the line became the bottom view so we removed the bottom view again lol. Have it.
 
PaddyO
Lost but trying
Profile
Posts: 189
Reg: Sep 11, 2013
Geelong
5,190
like
03/13/14 02:22 PM (10 years ago)
Kittsy thanks for the code and the insight, that's really helpful. The toolbar colour and that shadow line are both gone! However the the space previously occupied by the toolbar is still there as a white block and hasn't allowed the map to extend down to the bottom of that space. Do you know if that's something to do with this snippet, or is this a different parameter (to do with the map extent perhaps?) What I'm shooting for is to have the toolbar icons floating over the map, not just floating on a blank space below it. I figured that if the toolbar was transparent, the map would show through it... Thanks Paddy.
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
03/13/14 02:27 PM (10 years ago)
sorry I forgot ta add that bit of code ha The reason is when the tab bar is there buzz touch nudges the map screen up by 44 pixels find this code if(mapToolbar != nil){ mapToolbar.tag = 49; mapHeight = (mapHeight - 44); } and remove it all there are 2 instances of it or comment it out like this //if(mapToolbar != nil){ // mapToolbar.tag = 49; // mapHeight = (mapHeight - 44); //} all the best
 
PaddyO
Lost but trying
Profile
Posts: 189
Reg: Sep 11, 2013
Geelong
5,190
like
03/13/14 03:02 PM (10 years ago)
:) thanks Kittsy - I was actually playing with those values last night and changing them didn't do anything, but now I see why - it needs both of your solutions together! OK, that has definitely moved the map down, thank you so much. But now the icons are gone. Looks like they might be hiding under the map view (but see below...) I did a little experiment and changed this: if(mapToolbar != nil){ mapToolbar.tag = 49; mapHeight = (mapHeight - 44); } to this: if(mapToolbar != nil){ mapToolbar.tag = 30; mapHeight = (mapHeight - 20); } just to see where the icons were 'going'... and it moved the map down so it's partially under them but they are still there, partially over the map and partially over that white toolbar space. So they aren't sliding 'under' the map at all, just disappearing when that code is commented out. Continuing with that logic, I found that by replacing all the original 49/44 values with zero values like this: (around line 220 just before //map type? "standard", "satellite" or "hybrid") : if(mapToolbar != nil){ mapToolbar.tag = 0; mapHeight = (mapHeight - 0); } (and around line 440 or so just before //webView :) if(mapToolbar != nil){ mapHeight = (mapHeight - 0); } and using your snippet from a couple of posts back: if (theToolbar.subviews.count > 0){ [[theToolbar.subviews objectAtIndex:0] removeFromSuperview]; [[theToolbar.subviews objectAtIndex:0] removeFromSuperview]; } it works perfectly. Awesome stuff. I now have a customised 'invisible' toolbar on the map screen with the toolbar icons floating over the map. Thanks so much! EDIT: As Kittsy points out below, this is a bit sloppy. Please see a later post for an improved solution. :)
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
03/13/14 03:12 PM (10 years ago)
I just added a post earlier about compass movement https://www.buzztouch.com/forum/thread.php?tid=40F9D280FFD11017D8E29F3&currentPage=1 Take it another step of customizability
 
PaddyO
Lost but trying
Profile
Posts: 189
Reg: Sep 11, 2013
Geelong
5,190
like
03/13/14 03:24 PM (10 years ago)
Wow - let me check - that will orient/rotate the map to always 'point' in the direction that the user is holding their phone? I love new toys. :) Cheers Paddy
 
NCbuzz
Code is Art
Profile
Posts: 575
Reg: Sep 11, 2013
Lillington, NC
11,100
like
03/13/14 05:35 PM (10 years ago)
Cool thread. Can't wait to try it out this weekend on my map! Paddy- I see that you reached your final goal of having icons floating over map. Along the way, did one of the steps above enable you to have a transparent colored background for the toolbar behind the icons?
 
PaddyO
Lost but trying
Profile
Posts: 189
Reg: Sep 11, 2013
Geelong
5,190
like
03/13/14 06:26 PM (10 years ago)
Thanks NCbuzz, yes, that's exactly what it did. It was that combination of Kittsy's "remove from superview" snippet and then setting the size of the non-existent toolbar background 'shifts' to zero that did it. Let me know if that's not clear; I have a version of how it works in my head but I suspect that it's not necessarily technically accurate! I also worked out how to move the toolbar icons around too, and I commented some out... so it ends up like this: https://dl.dropboxusercontent.com/u/43652415/Screen%20Shot%202014-03-14%20at%2012.15.41%20pm.png (ignore the ugly colours, I'm still playing! The bar below the map is just my unformatted tab bar. You can see the purplish "reload" and "user location" icons floating at the bottom of the map, with no visible toolbar block behind them. And Niraj's snippet above allows you to change the toolbar icon colour to whatever you want as well.) Cheers Paddy
 
Niraj
buzztouch Evangelist
Profile
Posts: 2943
Reg: Jul 11, 2012
Cerritos
37,930
like
03/14/14 03:23 AM (10 years ago)
Good experimentation and results! Next step for you is to make it programmable via the Control Panel. In the Custom JSON section at the bottom for the Maps screen, add new values: "mapToolbarColor":"clear", "mapToolbarIconsTintColor":"#deadf00d" Then give that code back to the Plugin's author for updating. -- Niraj
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
03/14/14 03:36 AM (10 years ago)
No such experimentation on my part, understand the code and conquer the beast. Learn by practicing the code, and not blindly following stack overflow answers. @paddyO just seen your post further up removing the 2 instances of this completely if(mapToolbar != nil){ mapToolbar.tag = 49; mapHeight = (mapHeight - 44); } would be the same as your if(mapToolbar != nil){ mapToolbar.tag = 0; mapHeight = (mapHeight - 0); } But a lot tidier think about the statement if toolbar exists keep the map height the same size and then minus 0 from it. thats a few bytes removed from the weight of your package lol
 
NCbuzz
Code is Art
Profile
Posts: 575
Reg: Sep 11, 2013
Lillington, NC
11,100
like
03/14/14 07:30 AM (10 years ago)
Paddy- thanks for the snapshot. I like the look. Think I will try adding a very transparent tint so user can see the map easily, but knows the icons are there. Off topic- are you using a context menu on your screen? If so, have you solved the transition issues after selecting an item from the Context menu. (Any help would be appreciated at: https://www.buzztouch.com/forum/thread.php?tid=894E899041E9FFE4A8D2093&command=isSearching&currentPage=1&topicTitle=context&createdBy=&repliedBy=&minViews=-1&maxViews=-1&minReplies=-1&maxReplies=-1&forumCategory=
 
PaddyO
Lost but trying
Profile
Posts: 189
Reg: Sep 11, 2013
Geelong
5,190
like
03/14/14 04:00 PM (10 years ago)
Kittsy you're right, it would be much cleaner and you would think it would give the same result, but when I commented out those blocks it lost the icons so there seemed to be no toolbar elements at all. There must be a reason... I'm obviously doing something wonky. Will keep noodling on it today - experimenting and breaking is how I seem to learn best. I'll be sure to post again when the light comes on. :) (btw Stack overflow scares me...) NCbuzz, let us know how you go with that faint transparent tint... I think that what Kittsy's code does is remove the background bar completely, just allowing the icons to float above where it used to be, so even if you tint the bar, it may not be there. But v interested to know more, that would be a cool feature. (As for the context menu, no, I haven't gone in that direction yet. The list-ish looking icon is an action button that links to another screen - a list-view of the map pin data. Working on that this week. Will follow your other thread.) Cheers Paddy
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
03/14/14 04:11 PM (10 years ago)
To change it to transparent do this instead if (theToolbar.subviews.count > 0){ [[theToolbar.subviews objectAtIndex:0] setAlpha:0.5]; } change the alpha to your desired transparency 0 invisible 1 full on
 
PaddyO
Lost but trying
Profile
Posts: 189
Reg: Sep 11, 2013
Geelong
5,190
like
03/14/14 04:45 PM (10 years ago)
OK, I think I've solved the problem. It was just a dumb error on my part. I know a couple of people are looking at using this so I'll put the entire proposed solution here now (and have edited a previous post to point people down to this one as a better alternative). This assumes that you have already set the map toolbar to 'on' in the Control Panel, that you have selected which icons you want in that toolbar etc. 1. First, make sure that the changes we're about to make will affect only the toolbar on the map screen: In BT_viewController, find these lines (around line 82): //setup navBar... [self configureNavBar]; and after them, add this: if([self.screenData.itemType isEqualToString:@"BT_screen_map" ]){ } That will ensure that the changes we're about to make will only apply to the BT_screen_map screen(s) in your app (thanks @Smug). 2. Now to change the color of the map toolbar icons. Within that 'if' statement we just added above (between the braces), add this: [[UIToolbar appearance] setTintColor:[UIColor greenColor]]; using whatever colour you want if greenColor isn't your thing. If you want a specific colour that's a mix of RGB/alpha, use this instead: [[UIToolbar appearance] setTintColor:[[UIColor alloc] initWithRed:0 green:1 blue:0 alpha:0.1]]; 3. Now to remove the toolbar background from the map screen: Add this to line 187 BT_screen_map if (theToolbar.subviews.count > 0){ [[theToolbar.subviews objectAtIndex:0] removeFromSuperview]; [[theToolbar.subviews objectAtIndex:0] removeFromSuperview]; } just before //return return theToolbar; 4. Now bring the map down to occupy the space where the toolbar used to be: Still in BT_screen_map, locate this code: if(mapToolbar != nil) There are THREE places where this occurs. We only need to work on TWO of these, around lines 218 and 439. Previously I made the mistake of commenting out all three. The code around line 218 looks like this: mapToolbar = [self getMapToolBarForScreen:self theScreenData:[self screenData]]; if(mapToolbar != nil){ mapToolbar.tag = 49; mapHeight = (mapHeight - 44); } IGNORE the first line there 'mapToolbar =[self' etc - we DO need that first line of code, but comment out the remaining lines. (That was one of my previous errors, I commented it out and it broke stuff.) Remove those lines once you've tested it if you like. The code around line 439 (just below this: //get the bottom toolbar (utility may return nil depending on this screens data) looks just a little different to 218. It is: if(mapToolbar != nil){ mapHeight = (mapHeight - 44); } Comment that out completely. Like I said earlier, IGNORE the SECOND instance of 'if(mapToolbar != nil)' that occurs around line 250, just before //create adView?. It doesn't need to be touched. When I did, it broke. Doing all this gives me a map screen with (a) no toolbar background (b) icons that float over the map view, which (c) is now longer than it was originally, and (d) toolbar icons in whatever colour I choose. I hope this is closer to an accepted solution. Huge thanks to Kittsy for most of this and for pushing me to get cleaner code, I really appreciate it. Buzztouch is an awesome place to learn. :) Cheers Paddy.
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
03/14/14 04:55 PM (10 years ago)
As you have caught the coding bug have a nice buzz touch feature. With colour as most on here will be familiar with hex [[UIToolbar appearance] setTintColor:[[UIColor alloc] initWithRed:0 green:1 blue:0 alpha:0.1]]; [[UIToolbar appearance] setTintColor:[[BT_color getColorFromHexString:@"#00FF00"]colorWithAlphaComponent:0.1]]; It's in a slightly longer format, but it is more easily adapted if you wanted to connect it your control panel
 
Kittsy
buzztouch Evangelist
Profile
Posts: 2251
Reg: Feb 22, 2012
Liverpool
31,360
like
03/14/14 05:04 PM (10 years ago)
Just to explain why you don't remove this line mapToolbar = [self getMapToolBarForScreen:self theScreenData:[self screenData]]; although it is directly linked with the if statement below ( if toolbar is not nil). This is what is setting up your tool bar adding all of your buttons, setting up all the subviews including the 2 you are going to remove. If you remove this line the app continues to try and amend stuff that isn't there and will then crash.
 
NCbuzz
Code is Art
Profile
Posts: 575
Reg: Sep 11, 2013
Lillington, NC
11,100
like
03/15/14 10:48 AM (10 years ago)
All the tips above worked great. Thanks everybody! Since I always plan to use in Map would take only a few swapping of comments to switch to eliminating the toolbar. (should have used an if statement;) ================= //KM changes for toolbar area // Force ToolBar setting (not in CP) -also needed prior to UIToolBar calls below [theToolbar setTranslucent:TRUE]; if (theToolbar.subviews.count > 0){ // First apply a color to the toolbar (alpha does not seem to have any effect) [[UIToolbar appearance] setBarTintColor:[[BT_color getColorFromHexString:@"#999999"]colorWithAlphaComponent:0.5]]; // Now make toolbar transparent- lower setAlpha number for more transparency [[theToolbar.subviews objectAtIndex:0] setAlpha:0.4]; // or remove so toolbar so it is clear //[[theToolbar.subviews objectAtIndex:0] removeFromSuperview]; //[[theToolbar.subviews objectAtIndex:0] removeFromSuperview]; // Change the color of the icons on toolbar //[[UIToolbar appearance] setTintColor:[[UIColor alloc] initWithRed:0 green:0 blue:1 alpha:0.8]]; [[UIToolbar appearance] setTintColor:[[BT_color getColorFromHexString:@"#0000FF"]colorWithAlphaComponent:0.8]]; //add the buttons to the toolbar [theToolbar setItems:buttons animated:NO]; } ================= Here is a link to how it looks with the above settings: https://www.dropbox.com/s/1cxcfy15qorvnd4/map_with_toolbar.jpg Question for Paddy- where did you move the location of the refresh icon over to the right?
 
NCbuzz
Code is Art
Profile
Posts: 575
Reg: Sep 11, 2013
Lillington, NC
11,100
like
03/15/14 10:51 AM (10 years ago)
Now that I looked at the snapshot. I think I may go back and do the same for the NavBar ;) The solid white looks pretty boring.
 
PaddyO
Lost but trying
Profile
Posts: 189
Reg: Sep 11, 2013
Geelong
5,190
like
03/15/14 01:38 PM (10 years ago)
NCbuzz it looks great! To move that refresh button across, find this //spacer forces remaining buttons to right UIBarButtonItem* bi = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil]; [buttons addObject:bi]; in BT_screen_map, and simply move it so it sits ABOVE the //show refresh button? section. Cheers Paddy.
 
NCbuzz
Code is Art
Profile
Posts: 575
Reg: Sep 11, 2013
Lillington, NC
11,100
like
03/15/14 06:26 PM (10 years ago)
Wish they were all that easy ;)
 
NCbuzz
Code is Art
Profile
Posts: 575
Reg: Sep 11, 2013
Lillington, NC
11,100
like
03/19/14 06:53 PM (10 years ago)
After leaving the map location screen where I had made all of the changes above, if I go to another screen (from tapping on a map location) that should have the TabBar displayed, it is not there :( Have tested going to the same screen from a different path in app and the Tabbar is there. I know that I will need to add code to the viewWillDisappear of the BT_screen_map.m (like I had to do for Scringo swipe), but not sure what code to add. ideas??
 
NCbuzz
Code is Art
Profile
Posts: 575
Reg: Sep 11, 2013
Lillington, NC
11,100
like
03/22/14 06:01 PM (10 years ago)
Now that I am intentionally adding a Tab Bar (rather than hiding) on several other screens, this is a big bug on my part after leaving the map... Paddy- I assume you either have the same issue or have fixed already? Kittsy- did I miss a simple line to enable upon leaving screen
 
PaddyO
Lost but trying
Profile
Posts: 189
Reg: Sep 11, 2013
Geelong
5,190
like
03/23/14 05:09 AM (10 years ago)
NCbuzz I haven't had any problems with tabs disappearing - do you mean Tab Bar as in a tabbed app? These mods haven't affected that on mine (yet!). Cheers Paddy
 
NCbuzz
Code is Art
Profile
Posts: 575
Reg: Sep 11, 2013
Lillington, NC
11,100
like
03/23/14 07:51 PM (10 years ago)
Yes the Tab Bar in my tabbed app. After modding the code in my map screen to get the transparent toolbar. When I click on a location on the map (which has the transparent tabBar) the next screen loads (all of them are Cr_menu_advanced) with no Tab Bar on the bottom. If I go to those same screens direct from the home menu the TabBar appears on the bottom of the screen as normal. Returning to the Home screen clears things up, so seems I should be able to reverse my changes on the way out, but don't see what was the cause?
 
PaddyO
Lost but trying
Profile
Posts: 189
Reg: Sep 11, 2013
Geelong
5,190
like
03/23/14 08:19 PM (10 years ago)
Let me test mine... nope, it works ok. My flow is like this: Map >tap a pin > label pops up > tap info icon on label > opens a remote URL (html file) that's dynamically populated with further info about the specific tapped pin item. I don't lose my tabs and I think I ended up using the same semi-transparent toolbar setting on my map as you did. Obvious question, but have you cleaned, reset etc etc? Or maybe it's because you're intentionally adding the tab bar? Are doing that with a conditional statement in the BT_viewController or are you literally coding it into each screen? Because one thing I did find was that there are some witchcraft settings somewhere in there that can still override screen-by-screen settings (I found that with eg changing the font of nav buttons). Cheers Paddy PS No offence intended to any witches out there, I have the highest respect for your craft :) Cheers Paddy.
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.