UIButton's size is different to the enclosed UIImageView object - ios

I put some view the UIButton object and set the image to the button using setImage:forState: method.
the image size is 19x8.
And, called [button setTranslatesAutoresizingMaskIntoConstraints:NO] method to adjust Autolayout. The autolayout is only setting position of button.
then, I found out the button size is 19x22 and the enclosed image size is 19x8. The image position is center vertically.
Why the button is not same to the image?
How can I make them to same size?
I added the sample code.
UIButton *button = [[UIButton alloc] initWithFame:CGRectZero];
[button setImage:[UIImage imageNamed:#"buttonImage"] forState:UIControlStateNormal]];
[button setTranslatesAutoresizingMaskIntoConstraints:NO];
That's it.

If you want the button to be of same size as the image then,first get the size of the image.
CGFloat width = myImage.size.width;
CGFloat height = myImage.size.height;
CGRect myRect = CGSizeMake:(myButton.frame.size.x,myButton.frame.size.y,width,height); //x and y with respect with superview.
[myButton setImage:myImage forState:UIControlStateNormal];
myButton.frame = myRect;

Related

How to show buttons as grid on scroll view and tapped on button show more labels on beneath

I have scroll view with buttons and i want to show more labels on beneath of selected button tapped and remaining buttons are moved to next position
I am objective c
Please any one can help me
My Code is here
UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:self.view.frame];
[self.view addSubview:scrollView];
for (int i = 0; i<83; i++){
imageButton = [UIButton buttonWithType:UIButtonTypeCustom];
[imageButton setTranslatesAutoresizingMaskIntoConstraints:YES];
// [imageButton setBackgroundColor:[UIColor blackColor]];
[imageButton setBackgroundImage:[UIImage imageNamed:#"books"] forState: UIControlStateNormal];
[imageButton setTitle:[NSString stringWithFormat:#" %d",i] forState:UIControlStateNormal];
[imageButton setFrame:CGRectMake(xPossion, yPossion, 70, 60)];
imageButton.highlighted=YES;
[imageButton addTarget:self
action:#selector(butnSelected:)
forControlEvents:UIControlEventTouchUpInside];
[scrollView addSubview:imageButton];
xPossion += imageButton.frame.size.width+35;
temp++;
if (temp==3) {
yPossion = imageButton.frame.origin.y+imageButton.frame.size.height+20;
temp = 0;
xPossion = 20;
yPossion += imageButton.frame.size.width-15;
[scrollView setContentSize:CGSizeMake(scrollView.frame.size.width ,yPossion-50)];
}
}
My target is set to screen as like below enter image description here
and when I click on one image i want to display sub categories like belowenter image description here
You can use UISTackView for your purpose. Add circular / category buttons as well as all other buttons in one stackview. Hide / show the sub categories button on click of circular / category button. One of the main advantages of the stack view is that it will automatically create Auto Layout constraints for each subview that's added to it. You also have finite control over how those subviews are sized and positioned. There are options to configure the sizing of the views, where they should be arranged, as well as how much padding should be between the subviews.
I would also give a try and let you know.

UIButton image dimension different from original

I have a 40x40 button and in it I wanted to place an image of 20x20 dimension in the center. Here is what I did.
Set the content mode to center.(No scaling)
Assigned the image as the 'image' property of the button.
But when I run the program and check the image's dimension, it is different. Am I doing something wrong here?
In UIButton class, you've image and backgroundImage properties which have different behaviour when you set an image. You can use one of the 2 depending on what you want to do.
In my case If I just set the image property of the button,The image will be in the center.
Check these things:
1.Make sure you set the *image* ,not the *backgroundImage*.
2.Make sure the size of your image assets is smaller than the button's size.
3.Er...I just know two things...
Create the Custom UIButton
Create the UIImageView and add it as subview of custom UIButton.
Please refer the below code snippet, it will add the image in centre of button.
-(void)addImageInCenterForButton:(UIButton *)button
{
UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"SettingIcon"]];
CGRect imgRect = button.bounds;
imgRect.size.width = 20;
imgRect.size.height = 20;
imgRect.origin.x = (button.bounds.size.width - imgRect.size.width) / 2;
imgRect.origin.y = (button.bounds.size.height - imgRect.size.height) / 2;
imgView.frame = imgRect;
[button addSubview:imgView];
}
try this i hope it helps..
my image is of 20x20 dimension,and if i change the size of button it looks same and its also in the center of a button..
UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(0, 0, 40 ,40)];
[btn setImage:[UIImage imageNamed:#"ok"] forState:UIControlStateNormal];
[btn setBackgroundColor:[UIColor redColor]];
[btn setContentMode:UIViewContentModeCenter];
[self.view addSubview:btn];

frame altering image size

I'm trying to add my settings button to my toolbar but the frame I have to set for it is altering the image dimensions. How do i set the frame without messing with the image itself. The image is stored in an asset catalog for #1x, #2x, and #3x.
-(void)viewWillAppear:(BOOL)animated{
//Toolbar buttons
UIView *buttonContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 44)];
buttonContainer.backgroundColor = [UIColor clearColor];
UIButton *button0 = [UIButton buttonWithType:UIButtonTypeCustom];
--[button0 setFrame:CGRectMake(0, 0, 44, 44)];-------------
[button0 setBackgroundImage:[UIImage imageNamed:#"settings-128(1).png"] forState:UIControlStateNormal];
[button0 addTarget:self action:#selector(button0Action:) forControlEvents:UIControlEventTouchUpInside];
[button0 setShowsTouchWhenHighlighted:YES];
[buttonContainer addSubview:button0];
self.navigationItem.titleView = buttonContainer;
}
You have a few different options. If you don't absolutely need to make your button a different size than its background image, then you can set the background image and then get a size that will not stretch that background image, to assign to the button's frame, like:
[button0 setBackgroundImage:[UIImage imageNamed:#"settings-128(1).png"] forState:UIControlStateNormal];
const CGSize button0Size = [button0 sizeThatFits:CGSizeZero];
[button0 setFrame:CGRectMake(0, 0, button0Size.width, button0Size.height)];
If you actually want to change the size of your background image without distortion (for example, you might want to elongate the background image by copying pixels in its center) you should look into the resizableImageWithCapInsets: methods provided by UIImage.
If for some reason you need button0 to have a particular frame and you want its background to be a different size, you can subclass UIButton and in your subclass explicitly implement:
- (CGRect)backgroundRectForBounds:(CGRect)bounds
and return a correctly sized frame for your background image regardless of the button's bounds.
And of course, if all else fails, you can pad your asset settings-128(1).png with clear pixels to make the image size match the desired frame size. I don't recommend that approach if you can avoid it since it will cause any future changes to the button's size to require careful changes to the image (and the 2x and 3x versions of the image).

How to increase tapable (hitting) area of (custom Type) UIButton without increasing size of background image

is it possible to increase tapable area of UIButton without changing size of Button's background Image
I tried:
[shareButton setContentEdgeInsets:UIEdgeInsetsMake(top, left, bottom, right)];
&
[shareButton setImageEdgeInsets:UIEdgeInsetsMake(top, left, bottom, right)];
but none of these worked.
Any Suggestion please?
Make the UIButton of type buttonWithType:UIButtonTypeCustom and assign to it an image of a smaller size.
Do not set the image as the background image or it'll grow with the button. Set it as the main image instead.
For example if you want to set the tappable area to a 64x64 size and you want to show an image sized 32x32: the button size should be be 64x64 and the image size should be 32x32.
Programmatically:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
// use an image with the desired size (for example 32x32)
[button setImage: [UIImage imageNamed: #"buttonIcon.png"] forState: UIControlStateNormal];
// just set the frame of the button (64x64)
[button setFrame: CGRectMake(xPositionOfMyButton, yPositionOfMyButton, 64, 64)];
Interface Builder:
Subclass the superview of the UIButton, and override hitTest:withEvent:
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
CGPoint buttonPoint = [self convertPoint:point toView:_button];
if ([_button pointInside:buttonPoint withEvent:event]) { // you may add your requirement here
return _button;
}
return [super hitTest:point withEvent:event];
}
Use the design approach you like (Interface Builder / Visual Format Language) together with Autolayout and layout the UIButton with the required size. Set title or image as content and use a transparent image with the size of the tapable area as background image.
_button = [UIButton buttonWithType:UIButtonTypeCustom];
[_button setImage:[UIImage imageNamed:#"contentImage"] forState:UIControlStateNormal];
[_button setBackgroundImage:[UIImage imageNamed:#"transparentImage"] forState:UIControlStateNormal];
Here a example with _button.layer.borderWidth = 1.

How to force button to stay at tableView cell's bottom?

I add a button as a subview to my tableviewcells. Works fine. But I can't seem to figure out, how to force it to always be at the bottom of the cell. (On top of the separator line if you will). The cell height varies, so a fixed position is not smart. But I have no clue how to add it with a dynamic position. Here's the code for adding the button:
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button addTarget:self
action:#selector(buttonPressed:)
forControlEvents:UIControlEventTouchDown];
[button setTitle:#"+1" forState:UIControlStateNormal];
button.frame = CGRectMake(0.0f, 70.0f, 160.0f, 15.0f);
[cell addSubview:button];
Set the autoresizing mask when adding the button. I think the setting you want is:
button.autoresizingMask = UIViewAutoResizingFlexibleTopMargin;
Do this after adding the button to the cell.
You can always check the height of the cell and put the button's frame like this.
button.frame=CGRectMake(0,cellHeight-15,160,15);

Resources