I have a UIViewController set up to display an info-button on the right in its UINavigationItem like this:
UIButton *infoButton = [UIButton buttonWithType:UIButtonTypeInfoLight];
[infoButton addTarget:self action:#selector(toggleAboutView) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:infoButton] autorelease];
That works perfectly, but the only problem is that I'm left with little to no space to the right of the button, which looks pretty ugly:
Is there any way for the button to move about 5 px out from the right side?
Thanks.
infoButton.contentEdgeInsets = UIEdgeInsetsMake(0, -10, 0, 10);
Try setting infoButton.contentEdgeInsets (or imageEdgeInsets); something like
infoButton.contentEdgeInsets = (UIEdgeInsets){.right=10};
I'm not sure if it works for "system" buttons, but it might.
If that doesn't work, the easiest way is probably to stick it inside a UIView.
EDIT: Presumably the toolbar calls [customView sizeThatFits:blah] to find out how big the view "wants to be". The above code is supposed to mean "add a 10-pixel right edge inset", which for a normal (custom) button also makes the size bigger by 10 pixels.
It seems like UIButton returns a fixed size for the standard info button, ignoring any insets. Your code "works" by affecting the contentRectForBounds: and imageRectForContentRect: methods, which changes where the icon is drawn, but does not actually change the size of the button. I suspect that the icon is drawing outside the button, which may mean that the "touchable" rect is wrong (but toolbars seem to increase the touch rects for normal UIBarButtonItems, so maybe it doesn't matter).
Related
I would like to reproduce a Tweetbot like navigation bar.
I'm still searching if it's possible to place an UIButton in place of title in an UINavigationBar bar and to make it fits perfectly between right and left buttons like it is done in Tweetbot application.
When I try to do this, over a certain size the self.navigationItem.titleView is resized down automatically
Tell me if I miss something evident,
Thank you
I provide two screenshots to let you see what I'm talking about
They've probably rolled in their own implementation of UINavigationBar and/or UINavigationController. I guess it's not worth trying to hack UIKit that much, since it will be very fragile and not future-proof.
You can add a button to the navigation item's title view property, which accepts an UIView, and since a UIButton is a subclass of an UIView this is not an issue.
Alternatively, if you are using storyboard, just drag a button to the center of the navigation bar, it's that easy.
// Create the button, and specify the type
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
// Set the button's frame
button.frame = CGRectMake(0.0f, 0.0f, 30.0f, 30.0f);
// Set your custom image for the button
[button setImage:[UIImage imageNamed:#"YOUR_IMAGE_NAME"] forState:UIControlStateNormal];
// Set the button's action, which is the method that will be called when it is pressed
[button addTarget:self action:#selector(doSomething:) forControlEvents:UIControlEventTouchUpInside];
// Add the button to the navigation bar's title view
[self.navigationItem.titleView addSubview:button];
SDK Reference:
https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UINavigationItem_Class/Reference/UINavigationItem.html
Have you try to set autoresizesSubviews to YES on titleView, then set the correct autoresizing masks on the UIButton? If this doesn't work I suggest you to create your custom view subclass and override -layoutSubviews to fit your needs.
I currently work on a small application in which I have several UIButtons. Each of them has an UIImageView beneath it. At the moment, I associate each UIButton with each UIImageView (all are named via an IBOutlet - UIButton and UIImageView). When I press a button, the underlying image changes. I would like to know if it's possible (and how) to create a button which contains an underlying UIImage (not a UIButton image or background image), a sort of new object.
This image is slightly larger than the associated UIButton, like the apple calculator basic apps, and this image changes when I press the button.
I've tried several solutions (certainly incomplete) and I'm beginning to despair.
My current solution is functional but I do find it not particularly elegant.
UIButton has both image and backgroundImage as its properties.
To achieve what you are looking for, I would actually recommend you to stick to just a UIButton, and then using contentInset to position the image over the backgroundImage so it creates the effect I think you are looking for. This should be quite easy in interface builder...
you can make an invisible button and behind it make the image..
This will give you what you want but should be avoided at cost...
Stick to UIButton..
I believe even in calculator app they are only UIButtons and nothing else..
they have been coded to been momentary selected ..so that's why you see them kind of changing highlight for a small fraction and each button have been coded to perform specific function(+ - / equal .)
Update : i might be in doubt but if you asked for a button to have an image view inside it..
then here is the answer.
Make UIbutton. Make an ImageView and then call [theButton.view addSubview:ImageView];
Since both UIbutton and UIImage view inherit from UIView.. you can add as many subviews to them..that is inside them
If I understood your question correct then you may try the following:
UIButton *button = [UIButton alloc]init];
[button setImage:buttonImage forState:UIControlStateNormal]; when button not pressed
[button setImage:buttonImage forState:UIControlStateSelected]; when button tapped
[button release];
How to make a custom button that looks like a back button in NavigationBar? I mean the shape of the left side that is like an arrow.
In the sense how to set an image to back button?
Use UIButtonTypeCustom style.
Set required image (with shape of the left side that is like an arrow) to background property.
UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom];
backBtn.frame = CGRectMake(100,50,100,30);//set ur required frame
[backBtn setBackgroundImage:[UIImage imageNamed:#"backImage.png"] forState:UIControlStateNormal]; //Add back Like image
//use this button
The best way I've found is to use a stretchable button with a defined leftCapWidth to account for the pointy side of your button. That way if you ever need to change the label from "Back" "New Sales Customers" you don't need to re-export the background Image.
I even think they created a convenience extension for you:
var button = backButtonImage.StretchableButton(5, 0);
view.AddSubView(button);
http://idevrecipes.com/2010/12/08/stretchable-images-and-buttons/
I would like to add a custom view to the layout of an UIWebView, so that the HTML/JS/CSS describe the layout of the "page" with my custom controls in it. Ideally, it would be possible to place e.g. a special element that triggers a callback into my code that would allow me to place my own UIView derivative on the specified coordinates (and it would of course scroll and zoom with the parent UIWebView) and with the specified set of parameters.
A poor man's choice would be something similar to this question:
Getting the position of an HTML element in UIWebView however I am not sure how reliable that would be w.r.t layout changes.
Well, in addition to getting to coordinates from the SubView as described in your link, the only other trick is to attach to UIWebView's ScrollView, which happens to be the subview of it, usually number 0 unless you've done something odd. Then your view will scroll and zoom with the rest of your webpage. Assuming you get these pieces to work correctly, you should post your resulting code. It'd be interesting to see.
For example, attaching a button at 150, 200
//Make a button
UIButton * myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
myButton.frame = CGRectMake(150, 200, 50, 30 );
myButton.titleLabel.text = #"Press me";
[myButton addTarget:self action:#selector(pressed:) forControlEvents:UIControlEventTouchUpInside];
[[[self.myWebView subviews] objectAtIndex:0] addSubview:myButton];
Although for robustness, you might want to verify that self.myWebView has a subview and that it is of a UIScrollView class before adding to it.
I have a UIView - which I am using as a makeshift toolbar. It contains several UIButtons. (Six, I think) in a horizontal row.
The fifth button over will only respond to [TouchUpInside] events when I click the left half of it - whereas all the other buttons work correctly.
I have gone crazy making sure there weren't any other views overlapping it, etc - and everything seems okay.
Any idea of how to investigate further? Is there any way to see an "event inspector" to see where the touch messages may be going?
Most likely, the other half is covered by a transparent view that obstructs it. See the frames of all sibling views of the button:
for (UIView *v in myButton.superview.subviews){
NSLog(NSStringFromCGRect(v.frame);
}
And see if any of the frames above the button (the array is ordered from bottom to top) overlap with it.
If they don't, see if the whole window has any views covering the button.
The problem was as follows:
The "sixth" button was a "Info Light" type button. For some odd reason - even though the bounds of this button were clearly outside of the bounds of the offending "fifth" button - the "info light" button seems to acquire touches a bit outside it's bounding box.
When I either:
Moved the "Info Light" button further away from the "fifth" button
-or-
Changed the "Info Light" button to a regular (Round Rect) button
...the problem went away!
See the two rightmost buttons in this image:
I guess your superview bounds might be a bit too small? Try to change your superview background color to red or some vivid color and check its bounds.
Well you could try to use this technique with NSLog() to log events and get a sense of what might be happening. I'm not sure if there's a better way to log events:
Observing pinch multi-touch gestures in a UITableView
Just ran into this strange problem as well and after struggling with understanding the nature of the problem, ran across this post. Thanks for the helpful tip! I know it's an old question but this is how I was able to work around it in two ways. The first was to initially create the system info light button and simply retrieve the button image and create a custom button with that image, ignoring the initial button. The advantage to this is that you always get the latest info light graphic in case it changes in the OS. The disadvantage being that a new version of the OS might decide at some point to not make the image available in this way.
UIButton *button = [UIButton buttonWithType:UIButtonTypeInfoLight];
UIImage *img = [button imageForState:UIControlStateNormal];
button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:img forState:UIControlStateNormal];
button.showsTouchWhenHighlighted = YES;
[button addTarget:self action:#selector(infoSelected:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *barButton = [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];
[barItems addObject:barButton]; // NSMutableArray of tab bar items
The second approach, which I decided to use, so that I knew it would be available, and also to match my splash screen art in case the OS graphic changed, was to follow the same technique and simply save the original PNG to disk and add it to the project as a custom image for the button.
// Run these four lines just once in the simulator to save the original info
// light button image to disk and then eliminate these four lines and create the
// custom button with the image added to the project. Note that it may be a 1x or
// 2x image depending on the simulator device. So run it on both to get two
// versions (changing the name of course).
UIButton *button = [UIButton buttonWithType:UIButtonTypeInfoLight];
UIImage *img = [button imageForState:UIControlStateNormal];
NSData *imgData = UIImagePNGRepresentation(img);
BOOL saved = [imgData writeToFile:#"/Users/Shared/InfoLight.png" atomically:NO];
I noticed that upon selecting the infoLight type, the button could no longer be interacted with. By checking the checkbox "User Interaction Enabled" I solved the problem.