I have a custom UIButton that has some text I am setting on it dynamically.
The problem:
If the text gets too large, it will cover up a white arrow that is on the button's image located on the far right here:
When that text gets too large, that white arrow is covered, which I need to avoid.
Example:
Current code:
[self.filterButton setTitle:#"All" forState:UIControlStateNormal];
self.filterButton.titleLabel.adjustsFontSizeToFitWidth = YES;
self.filterButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
self.filterButton.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
[self.filterButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
Some approaches I have tried:
Setting the titleText frame to be %0.85 of the buttons frame.
Current code
Tried to code it to where the frame cuts off at a certain point (of the titleText)
Thanks for any guidance
Have you tried setting the titleEdgeInsets rather than the contentEdgeInsets?
Related
I have a UIButton in a circle shape(corner radius=width/2) , and i am trying to center the title of that button , to be in the center of the circle . somehow its not on the center, and i have tried everything ,with no success.
I can see the + sign(its title) a little bit left and up from the center.
With letters its the same-the letter title is not centered :
UIButton *menu = [UIButton buttonWithType:UIButtonTypeCustom];
menu.contentHorizontalAlignment=UIControlContentHorizontalAlignmentCenter;
[menu setTitle:#"M" forState:UIControlStateNormal];
[menu setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
menu.contentHorizontalAlignment=UIControlContentHorizontalAlignmentCenter;
menu.contentVerticalAlignment=UIControlContentVerticalAlignmentCenter ;
menu.frame=CGRectMake(delta, 0, mwidth, mwidth);
menu.layer.cornerRadius=menu.frame.size.width/2.0;
menu.layer.borderWidth=1.0;
Have also tried to set the titleLabel alignment to center without success .
You can try to adopt position of the title by playing with setTitleEdgeInsets method and try with different insets and choose which fits best your customisation
I'm adding a UIButton (with background image) to the navigation bar and setting rounded corners with a border. I'm getting a strange black outline on the corners:
Here's the code I'm using to create the button from viewDidLoad:
ProfileImageService *profileImageService = [ProfileImageService getService];
CGRect frame = CGRectMake(0, 0, 32, 32);
UIButton *button = [[UIButton alloc] initWithFrame:frame];
[button setBackgroundImage:profileImageService.profileImage forState:UIControlStateNormal];
[button addTarget:self action:#selector(showMenu) forControlEvents:UIControlEventTouchUpInside];
button.layer.cornerRadius = button.frame.size.height / 2.0;
button.layer.masksToBounds = YES;
button.clipsToBounds = YES;
button.layer.borderWidth = 3;
button.layer.borderColor = [UIColor colorWithRed:0 green:0.67 blue:0.97 alpha:1].CGColor;
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];
How can I make the border smooth and get rid of the subtle black outline?
What you're seeing is your profile image (the person's face) bleeding through the edge. This is because the border is anti-aliased and so has small amounts of transparency through which the profile image can bleed.
Since you're clipping the profile image and the border together, there's nothing stopping the profile image from extending through the border. (i.e. clipsToBounds won't clip the content to the inside of the border; it clips everything to the outside of the border) You can prove this by using a bright red image: you'll see a bright red fringe.
If you can just make the profile image circular and the right size beforehand (either offline or in code) then you'll avoid this problem.
The other solutions I see are to either implement your own drawRect: method and do the drawing yourself or to create another sub-layer of the button to hold the image which is clipped in the same way, but without the border. (Either way, you probably need to make your own UIControl for this rather than using UIButton, as manipulating the button's layers could lead to weird behavior.)
Edit: Here are some other solutions, too: iOS: Rounded rectangle with border bleeds color
I'm developing an iOS app and i have to insert an UIButton.
I want to customize this button and i'd like to have a button like this:
My code is this, but i'm not able to make rounded corners:
_topImagesScrollViewButton = [UIButton buttonWithType:UIButtonTypeCustom];
_topImagesScrollViewButton.frame = CGRectMake(screenWidth/2-25, topBarHeight+paddHeight, 37 , 37);
_topImagesScrollViewButton.backgroundColor = [UIColor colorWithRed:red_middle green:green_middle blue:blue_middle alpha:alpha_middle];
[_topImagesScrollViewButton setTitle:#"Top" forState:UIControlStateNormal];
[_topImagesScrollViewButton setTitleColor:[UIColor colorWithRed:red_text green:green_text blue:blue_text alpha:alpha_text] forState:UIControlStateNormal];forState:UIControlStateNormal];
[_topImagesScrollViewButton addTarget:self action:#selector(topImagesScrollVieButtonTapped) forControlEvents:UIControlEventTouchUpInside];
How can i do?
I would use the above image to set the image of the button, instead of drawing the shape:
[_topImagesScrollViewButton setImage:#"yourimagename.png" forState:UIControlStateNormal];
This is how to make UIView with rounded corners: IOS: create a UIImage or UIImageView with rounded corners
And what about text color... everything seems to be ok. Maybe it doesn't work because you set title color twice for the same state. And the second from the bottom string of your code is excess.
How can I create a UIButton with a background image which is composed by:
A fixed left cap
A fixed right cap
A number of middle images placed one after the other to fill all the available space
like in the example below?
EDIT: I did not realize that in the center there are no N repeated images, but only a streched one. See the accepted answer.
As far as I know it cannot be done. What you can do is stretch an image, but you cannot add n middle images.
The code for adding a stretchable image in between is
//Create an image - Where UIEdgeInsets is in top left bottom right
UIImage* buttonImage = [[UIImage imageNamed:#"button.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 16)];
// Create a custom buttom
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeCustom];
myButton.frame = CGRectMake(0, 0, 100, buttonImage.size.height);
[myButton setBackgroundImage:buttonImage forState:UIControlStateNormal];
[myButton setTitle:#"Button" forState:UIControlStateNormal];
//Add it to view - if it is a view controller self.view
[self addView:myButton];
From Apple's UIImage Class Reference:
"resizableImageWithCapInsets:
You use this method to add cap insets to an image or to change the existing cap insets of an image. [...] During scaling or resizing of the image, areas covered by a cap are not scaled or resized. Instead, the pixel area not covered by the cap in each direction is tiled, left-to-right and top-to-bottom, to resize the image." [emphasis added]
You can read more about it at http://mobiledevelopertips.com/user-interface/ios-5-uiimage-and-resizableimagewithcapinsets.html
I have run into a strange issue. I have a UIButton with UIButtonTypeCustom.
For it's background image, I am using a transparent image. The issue is that the transparency on the actual image doesn't seem to be correct. The odd thing is that it is in fact transparent, because the background shows correctly behind the button.
Below is an example of what the button looks like (left) and what the button should look like (right). I took a screenshot and overlaid the image on the background in Photoshop, and the background shows correctly inside the image, while in the actual button on the left it does not. Noticeably, the glow is more intense on the left UIButton vs. the actual image when inserted onto the background.
Here's the image I am using to show that it does in fact have transparency:
Here's my code:
UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeCustom];
nextButton.backgroundColor = [UIColor clearColor];
nextButton.frame = CGRectMake(0, 0, 30, 30);
[nextButton setBackgroundImage:[[UIImage imageNamed:#"ButtonBackground.png"] stretchableImageWithLeftCapWidth:5 topCapHeight:5] forState:UIControlStateNormal];
forState:UIControlStateHighlighted];
[self addSubview:nextButton];
I have used the exact same image elsewhere to draw with and had no issue with transparency.
UPDATE: Adding other transparent images similarly increases the intensity of the alpha. While they're transparent, they seem darker and therefore less transparent. Again, works perfect elsewhere.
UPDATE 2: Even worse, I just created a new project with the exact same image dragged from the other project, created a button and had no issues with the button displaying correctly. How incredibly annoying!
You shouldn't have to set the background color for it to be transparent. Also, try removing the stretchable call on the image.
Also, you should be setting the image, not the background image.
If none of that helps, then Apple may just be improperly rendering your image. Try creating a CALayer and set its contents to your image and see if that works properly.
try this
UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeCustom];
nextButton.frame = CGRectMake(0, 0, 30, 30);
nextButton.alpha=0.5f;
[nextButton setBackgroundColor:[UIColor clearColor]];
[nextButton setOpaque:NO];
[nextButton setBackgroundImage:[UIImage imageNamed:#"ButtonBackground.png"]
forState:UIControlStateNormal];