AutoResizing a button based on title text content - ios

So I have a strange issue which could be a bug or me being stupid.
I have a button in a cell. The cell shows the logged in users facebook friends. If they are already a user of the app it shows the button as Play, else it shows Invite Me...
UIButton *playButton = (UIButton *)[cell.contentView viewWithTag:30];
playButton.backgroundColor = [UIColor clearColor];
[playButton setBackgroundImage:[[UIImage imageNamed:#"fbCell_Invite_30h"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 5, 15, 5)] forState:UIControlStateNormal];
playButton.titleLabel.text = #"Invite me";
if ([self.fbFriendsUsingApp containsObject:[friend valueForKey:#"id"]]) {
playButton.titleLabel.text = #"Play";
}
This all works fine and not an issue. However, when the button text is invite me it shows as this:
In storyboard interface builder the button is setup like this:
What is strange is that if I click the middle arrow <------> to make the width stretch, the title text stops working and they all show 'Play' ???

Try setting the text of the button using
[playButton setTitle:#"Invite Me" forState:UIControlStateNormal];
instead of
playButton.titleLabel.text = #"Invite Me;
I've found that if I don't use the first approach above the changes to the button text don't show up.

You can find the size of the NSString that you are setting as the button label and then resize the button accordingly:
CGSize labelSize = [labelString sizeWithFont:[UIFont systemFontOfSize:12]];
[button setFrame:CGRectMake(10,0,labelSize.width, labelSize.height)];
You will probably want to add a little to the CGSize as padding, but play with it and find the result you desire.

Related

UIButton not work in Landscape mode

After rotation of iPad in my simulator i found a strange bug - my UIButton have visible title, it property enables is YES, but, its not work. I tried to set background colour of button to black, and found that after rotation it vanish. Please take a look at portrait mode (all work):
And landscape mode (not work):
This is how i create button (i doubt that it help though, because its pretty mundane):
self.readNextButton = [UIButton new];
self.readNextButton.backgroundColor = [UIColor blackColor];
// self.readNextButton.titleLabel.adjustsFontSizeToFitWidth = YES;
[self.readNextButton setTitleColor:[UIColor colorWithHexString:#"#60aabf"] forState:UIControlStateNormal];
self.readNextButton.titleLabel.lineBreakMode = NSLineBreakByClipping;
self.readNextButton.titleLabel.font = [UIFont fontWithName:#"Times New Roman" size:14];
[self.readNextButton setTitle:#"Читать дальше" forState:UIControlStateNormal];
[self.view addSubview:self.readNextButton];
Also, i want to notice that this bug appears even when i'm not rotating anything, but simply load app in landscape mode. And also, ENABLED property of button is 1 (mean YES), when i log it..
Button frame:
[self.readNextButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(self.containerForNewsText.mas_right).with.offset(-10.834);
make.bottom.equalTo(self.containerForNewsText.mas_bottom).with.offset(-10.834);
make.top.equalTo(self.truncatedNewsText.mas_bottom).with.offset(20);
}];
It is in a method 'createLandscapeConstraints', that called in end of viewDidLoad.

The size of the button

I put a default button in the Interface builder, and it has some default size
then I programmatically changed its title, and received this:
this is my code for this button:
NSString *btnGetRegisterCodeTitle = NSLocalizedString(#"Get Registration Code", #"Title on button");
[_btnRegister setTitle:btnGetRegisterCodeTitle forState:UIControlStateNormal];
What do i need to do to the button, to make it autolayout its frame so that the entire (3 words ) title would fit on it?
after changing the title call sizeToFit
[yourButton sizeToFit];
What exactly happening here is, When you are changing the title of button, the text becomes out of bound.
What you can do is, programmatically set the button size to fit its content/title.
For that use this:
NSString *btnGetRegisterCodeTitle = NSLocalizedString(#"Get Registration Code", #"Title on button");
[_btnRegister setTitle:btnGetRegisterCodeTitle forState:UIControlStateNormal];
[_btnRegister sizeToFit];
Here the sizeToFit method will automatically resize your UIButton in such a way that your Title is not merged/overlapped.. :)
Update:
Have a look at this Question
I've copied the selected answer from there, in case that question is removed..
Check out the NSString method -sizeWithFont:. It returns a CGSize that will inform you as to how much size your text will need in the button. Then you can adjust the button's frame based on this size, adding whatever padding you desire to the width and height of the button's frame. Something like this:
NSString *msg = #"The button label";
UIFont *font = [UIFont systemFontOfSize:17];
CGSize msgSize = [msg sizeWithFont:font];
CGRect frame = button.frame;
frame.size.width = msg.size.width+10;
frame.size.height = msg.size.height+10;
button.frame = frame;
NSString *btnGetRegisterCodeTitle = NSLocalizedString(#"Get Registration Code", #"Title on button");
CGSize size = [btnGetRegisterCodeTitle sizeWithFont:_btnRegister.titleLabel.font];
[_btnRegister setTitle:btnGetRegisterCodeTitle forState:UIControlStateNormal];
_btnRegister.frame = CGRectMake(_btnRegister.frame.origin.x,
_btnRegister.frame.origin.y,
size.width, size.height);
How about this one?
It is practically the same answer as above, just more simple so you won't get it wrong by mistake. (Using the button title's font instead of system font).
You can still try to add the 10 points to width and height like in the previous answer if you want.

Custom UIButton iOS App

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 to implement tag functionality like tumblr

I want to implement tagging functionality like tumblr. I tried with UITextfield and added UIButtons for tags_name in textfield.
How to select tag on first back and delete it on second back?
How tags should be added in multiple lines in UITextfield?
please suggest any solution for this functionality.
here is the code how I added buttons in UItextfield with array.
for (count_value = 1; count_value<=[textfieldarray count]; count_value++)
{
UIButton *button_dish = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button_dish setTag:count_value];
[button_dish.layer setOpacity:0.5];
[button_dish.layer setCornerRadius:4.0f];
[button_dish setUserInteractionEnabled:YES];
[button_dish setShowsTouchWhenHighlighted:YES];
[button_dish setContentMode:UIViewContentModeCenter];
[button_dish setTitleEdgeInsets:UIEdgeInsetsMake(8, 8, 4, 8)];
[button_dish.titleLabel setLineBreakMode:NSLineBreakByWordWrapping];
[button_dish.titleLabel setFont:[UIFont fontWithName:#"Eau-SansBold" size:12]];
[button_dish setContentVerticalAlignment:UIControlContentVerticalAlignmentCenter];
[button_dish setContentHorizontalAlignment:UIControlContentHorizontalAlignmentCenter];
[button_dish setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[button_dish setContentMode:UIViewContentModeScaleAspectFit];
[button_dish setTitle:textfieldarray[count_value-1] forState:UIControlStateNormal];
CGSize expected_Size1 = [textfieldarray[count_value-1] sizeWithFont:button_dish.titleLabel.font constrainedToSize:button_dish.frame.size lineBreakMode:NSLineBreakByWordWrapping];
[button_dish addTarget:self action:#selector(buttonactionmethod:) forControlEvents:UIControlEventTouchUpInside];
left_view_length1 = left_view_length1+expected_Size1.width+16+12;
[iconview1 setFrame:CGRectMake(0, 10, left_view_length1, 24)];
[button_dish setFrame:CGRectMake(x_cordinate1, 2, expected_Size1.width+16, 20)];
x_cordinate1 = x_cordinate1+expected_Size1.width+16+12;
[iconview1 addSubview:button_dish];
[textfield1 setLeftView:iconview1];
}
Here is the sample reference image for tumblr tag,
1st image shows selection of button on first back.
2nd image shows multiple line tags.
Please give me some reference or hint.
That'd be called a "token field." They first appeared in Mail.app, and eventually became part of the AppKit framework. Documentation here.
It should be pretty easy to reproduce that look in Cocoa Touch. In Cocoa Touch, every view is backed by a Core Animation layer, and layers have a cornerRadius attribute according to your UI. Set that attribute to half the height of the field to create rounded ends. You can set a background color if you're okay with a flat appearance, or you can draw a subtle gradient to give a more convex appearance.
Of course, you only need to do all that if you want a reusable view where you can set the text and so forth. If you only need a few of these for custom buttons or something, it might be easier to just draw them in your favorite drawing program.
Another possibility is to use a third party control, such as any of:
TITokenField
JSTokenField
RMStokenview
COTokenField (part of COPeoplePickerViewController)
Reference from this SO Answer.

UIButton wierdness: Unable to set title for a custom button type

I'm trying to set the title for a custom button that I've created programmatically. The button's image and the frame come up fine, but the title doesn't. I can't really think of anything wrong with this code, so any help is apreciated!
self.helpButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.helpButton setFrame:CGRectMake(113.0, 685.5, 73.0, 40.0)];
UIImage *helpImg = [UIImage imageNamed:#"11_HelpCancel_Up.png"];
[self.helpButton setImage:helpImg
forState:UIControlStateNormal];
[self.helpButton setTitle:#"Help" forState:UIControlStateNormal];
[self.helpButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
// [self.helpButton setFont:[UIFont boldSystemFontOfSize:14.0]];
[self.view addSubview:self.helpButton];
Thanks,
Teja.
Use
[self.helpButton setBackgroundImage:helpImg forState:UIControlStateNormal];
- setImage:forState: seems to override - setTitle:forState:
Was having trouble with the button title showing up on my storyboard when I switched the type of button from system -> custom. The problem was the color of the text changed to white when I made the change so anyone having a similar issue, make sure to check the color of the button text.

Resources