Add an image inside UIButton as an accesory - ios

I have the following UIButton I want to add an Image inside to the far right. Like an accessoryView
I am already using backgroundImage and I want to avoid combining the 2 images into 1.
Is it possible to add another image inside the UIButton that is an AccesoryView lets say an image that has a PLUS to the far right? ( I am looking to a way to insert the new image inside the Button)
#luisCien comment
I tried
[_addImage setImage:[UIImage imageNamed:#"shareMe"] forState:UIControlStateNormal];
_addImage.contentHorizontalAlignment =
UIControlContentHorizontalAlignmentRight;
and it looks like this, I would like to image to be on the right side of the text.

Just add it as a subview and choose your coordinates..Try something like this:
UIImageView *yourPlusSign = [[UIImageView alloc]initWithImage:[UIImage imageNamed:#"yourPlusSignImageTitle"]];
yourPlusSign.frame = CGRectMake(x, y, width, height);//choose values that fit properly inside the frame of your baseButton
//or grab the width and height of yourBaseButton and change accordingly
yourPlusSign.contentMode=UIViewContentModeScaleAspectFill;//or whichever mode works best for you
[yourBaseButton addSubview:yourPlusSign];

You can use the contentHorizontalAlignment property of UIButton and set it to UIControlContentHorizontalAlignmentRight this will position the image you add to it to the far right.
Edit:
As suggested by #danypata you can also use UIButton's property imageEdgeInsets to leave
some margin around your 'accessoryView' like so:
[_addImage setImageEdgeInsets:UIEdgeInsetsMake(5, 0, 5, 10)];
Regarding having the text on the left and the image on the right, I believe it's not possible (someone please correct me). For that I would either create my own custom button by extending UIControl or add a UILabel and set it's frame (as opposed to using UIButton's setTitle:forState:) and add it as a subview of the button.
Hope this helps!

Related

Make part of UIView visible

I want to add a "shadow" image on my view, but, i want part of my view to still be "visible". You better understand what i want to do, when look on screenshot:
I can add a UIView above my superview, but how could i make specific point "visible"? That actually mean make specific area of a view with different colour or opaque.
For your problem I had a way, try the below example.
1. First storyboard design: I had a UIButton
2. Added black View as a subview
UIView *blackView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];
blackView.backgroundColor=[UIColor blackColor];
blackView.alpha=0.6f;
[self.view addSubview:blackView];
now result will be:
3. Add one more UIImageView with frame equal to button frame
UIImageView *imageView=[[UIImageView alloc]init];
imageView.frame=self.button.frame; //getting current UIButton bounds
imageView.image=[UIImage imageNamed:#"add_img.png"];
[self.view addSubview:imageView];
Now it looks same as what you want:
You have to add some views. A main view will be the container of your less-alpha view and of the opaque button.
MainView
|
------- UIView with 0.6 alpha
|
------- UIButton with 1 alpha
Indeed, if you change the alpha of the MainView, all subviews will be affected. Here, UIView with 0.6 will have the same frame as MainView but it will not affect UIButton alpha.
Make a new View, a parent View with clear color background. Add the black view and the button to the parent view and set the black view's alpha to 0.6 or whatever.
Try this:
Make a UIView called buttonBackgroundView, give it a black color and then
[self.view addsubView:buttonBackgroundView];
now make a UIView named plusView (or UIButton if this plus sign is a button) then
[self.view addsubView:plusView];
After that, give the alpha to the buttonBackgroundView
buttonBackgroundView.alpha = 0.6;
Happy coding!

UIButton Multiple Labels Using UIControlStates

I know with a UIButton, I can add additional UILabels as subviews:
[myButton addSubview: myLabel];
And (at least, with the default title label) I can set its text color when tapped by using:
[myButton setTitleColor:someColor forState:UIControlStateHighlighted]
My question is, how can I implement this functionality for additional UILabels added to the UIButton (if this is possible)?
Subclass UIButton and add your additional labels in there as instance variables. Then override -setHighlighted and -setSelected to adjust the additional labels as desired.
FYI - you call [myButton setTitleColor...], not [myButton.titleLabel setTitleColor...]
It seems my way of going about it isn't easy, but I realized I can just add an action to the UIButton for the event UITouchDown, and change the labels accordingly in the action.
You would have to set myLabels text color, before you added it as a subView.
Otherwise, you'll have to enumerate through the button's subviews and change each of your added label's text colors.
Update:
You can change the button title's font as follows:
myButton.titleLabel!.font = UIFont(name: "...", 10)
You can change the button's title color as follows:
colorsBtn.setTitleColor(UIColor.brownColor(), forState: UIControlState.Highlighted)

AspectFill does not fill the UIImageView

I have a button that has contentMode set to UIViewContentModeScaleAspectFill. I set it like this:
self.itemImage.imageView.contentMode = UIViewContentModeScaleAspectFill;
I also set it to Mode - Aspect Fill in IB for the button, just in case. And when I set the image, I DON'T set is as a background image:
[self.itemImage setImage:image forState:UIControlStateNormal];
However, occasionally my image does not fill the button (which I want it to do), like in this case:
See grey spaces on each side. Occurs on both iOS 6 and 7.
Any ideas?
At long last, I managed to find the solution that works in Alfie's answer to this SO question.
In short, if your UIButton (or its hidden imageView) does not respond to contentMode, use this code:
self.button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentFill;
self.button.contentVerticalAlignment = UIControlContentVerticalAlignmentFill;

How to create and add UIButton with multiline label from code using autolayout?

There's are a lot of links how to size a label, however there's a lack of info how to resize UIButton according to its label size. Currently, I have screen view set with autolayout (all the system constraints are added from IB) and everything works fine, but need to add dynamic content at the bottom of the screen. I need to create and add random number of buttons with random length titles. So, here's code fragment for creating and adding the buttons:
// Loop
UIButton *myButton = [UIButton new];
UIButton.frame = CGRectMake(0, previousButtonOriginY, self.view.bounds.size.width, 20);
myButton.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
myButton.titleLabel.textAlignment = NSTextAlignmentLeft;
myButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
[myButton setTitle:#"very long title..." forState:UIControlStateNormal];
myButton.titleLabel.numberOfLines = 0;
[self.footerView addSubview:myButton];
The problem is the frame height of the button stays 20px but the label string is shown on three lines and so overlaps with the other button title. If I add [myButton sizeToFit] then button width is resized to fit all the text into one line and so the title goes beyond the screen.
If I add [myButton sizeThatFits:CGSizeMake(320, 100)] then resize is not working at all. I know sizeToFit should not be called at all because it's not the part of autolayout, however need suggestions on that how easily to make button fit its label to screen 320 width.
I feel I need to add system constraints from code, but haven't done that before, so not sure how it should look like. I probably need a ton of constraints to be added from code in order to get this simple thing working :)
Instead of using Autolayout, you could just use a collection view which better options for you to lay out elements such as buttons.
It is better able to handle layouts under rotation as well.
Or you can use this code, it worked for me...
For example, substitute your desired padding values here:
UIButton* myButton = [[UIButton alloc] init];
// setup some autolayout constraints here
myButton.titleEdgeInsets = UIEdgeInsetsMake(-desiredBottomPadding,
-desiredRightPadding,
-desiredTopPadding,
-desiredLeftPadding);
Combined with the right autolayout constraints, you end up with an auto-resizing button which contains an image and text!
For this kind of customizations you'll need to create a subclass of UIButton. In the subclass you can add a customized label which benefits your needs. You can also override to setTitle:forState method to automatically update your customized label.

How to not stretch an image in UIButton

I'm trying to create a custom UITableViewCell programmatically and one of the subviews of this cell is going to be a button with an image in it (a simple image of a magnifying glass). However, I want the button's image to be centered and scaled proportionately down to fit in the button and NOT to be stretched to fill the entire button. Below is my code where self refers to the custom UITableViewCell which I am placing the button into.
self.myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[self.myButton setBackgroundImage:[UIImage imageNamed: #image_name_here"] forState:UIControlStateNormal];
self.myButton.frame = CGRectMake(...//something, something)
self.myButton.imageView.contentMode = UIViewContentModeCenter;
[self.contentView addSubview:self.mySearchHelpButton];
Right now the image stretches to fill the entire button rather than scaling proportionately so that it fits nicely.
I have also tried setting the contentMode to UIViewContentModeScaleAspectFill but this doesn't seem to change anything. In fact, none of the different contentModes seem to change anything.
Have you tried setImage instead of setBackgroundImage?
Make sure the button is a Custom UIButton
Just using setImage: did not work for me on iOS9.
But it worked combined with myButton.imageView.contentMode = UIViewContentMode.ScaleAspectFit;
In Swift...
button.imageView?.contentMode = . scaleAspectFit
Storyboard
Property image.
You must define specific property in Runtime Attributes of Identity inspector – imageView.contentMode, where you set value relatively to rawValue position of enum UIViewContentMode. 1 means scaleAspectFit.
And button's alignment, in Attributes inspector:
Swift 4.2
myButton.imageView!.contentMode = .scaleAspectFit
Swift earlier version
myButton.imageView!.contentMode = UIViewContentMode.scaleAspectFit
Swift 4.X and 5.X
button.imageView!.contentMode = .scaleAspectFit
button.contentVerticalAlignment = .fill
button.contentHorizontalAlignment = .fill
I think you guys are missing the obvious issue. The image is too large for the button and iOS then has to guess how you want to scale it. Make sure your images are the right size and you won't have this issue. Of course this is for static images and buttons that you know the size for up-front -- not dynamic content.

Resources