I'd like to make a cell swipe action like mail app.
I set UIImage to backgroundColor of row action.
action.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"remove"]];
But i get my image repeated side-by-side on the background. like this.
Is the image size problem?
Could tell me how to fix it,or an other way to do it ?
Yes, this is an image size problem.
Even I had a similar requirement and faced the same problem. In this case when you use,
action.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"remove"]];
Even if you set the imageView.contentMode to:
UIViewContentModeScaleAspectFit
UIViewContentModeScaleToFill
UIViewContentModeScaleAspectFill
If the size of the image you are using and and the size of the button on the cell do not match, the image will not stretch to fill the entire button, rather the image pattern will just repeat itself until the entire area of the button is utilised.
This is because you are setting the 'backgroundColor' and not the actual 'backgroundImage'. 'backgroundColor' unlike 'backgroundImage' does not adhere to UIContentMode of the button.
Hence, what you will have to do is, create a image which is exactly equal to the size of the button. Doing this is not possible if your cell has a dynamic height (height determined at runtime according to your content).
Related
I am attempting to increase the hit area of my UIButton. I have a new Xcode project with a UIButton in the center of the storyboard. The button is connected to my view controller with an outlet and action. I'm programmatically able to change the button title and just for fun made it's action change the background of the view when I tap the button. So I know everything is connected and works.
From what I've read online, this should work but it's not.
[button setFrame: CGRectMake(button.frame.origin.x, button.frame.origin.y, -64, -64)];
Any thoughts? I've tried without the negative margins and that doesn't work either. BTW, I have tried the many places this question is asked but it's not working. Thank you for your help. Also, I've heard subclassing UIButton could create an issue, any thoughts on that?
Update:
The UIButton I want to make has a background color and is a specific size. I want to keep that size the same but increase the hit area around it without distorting the look of the button.
i think you just want to use the same button for restricting the background color or back ground image to the same area and increase the touch area?
as per my knowledge you cannot do that in interface builder. But thru coding you can by using layers.
take outlet of the button
CALayer *buttonlayer=[CALayer layer];
buttonlayer.frame=CGRectMake(50 , 50, 50, 50); // set the frame where you want to see the background color or background image to be visible in your button
buttonlayer.backgroundColor=[[UIColor colorWithPatternImage:[UIImage imageNamed:#"yourimage.png"] ] CGColor]; // if u want image (but remember the image size must same as your layer frame it may look bad if the image bounds does not mach your layer bounds, because you are setting color not image)
// to set color (donot use if you want image, use colorWithPatternImage to set image color)
buttonlayer.backgroundColor=[[UIColor graycolor] CGColor]; // if you want only color
// you can add round rects to the button layer
buttonlayer.cornerRadius=2.5f;
[yourbutton.layer addSublayer:buttonlayer];
i am not sure what you are looking for i hope this help you but check the image once
To increase the hit area without distorting the background color or image, it would probably be easiest just to separate them. Have a clear UIButton, with no background color, above a UIView (or UIImage, etc) that provides the visuals. That way, you can do whatever you want to the frame of the UIButton, and it won't affect the visuals unless you apply the same transformations to the other UIView.
As for why that line of code doesn't work, the third and fourth elements in CGRectMake aren't margins, they're dimensions: you can't have a negative height and width. Put in the ultimate size you want it to be, not the change or the margins, (i.e. if you want to shrink a width of 100 by 20, input 80).
Subclass UIButton and implement the backgroundRectForBounds method.
Expand the frame to your desired touch area size, then shrink the bounds of the background by adding insets.
- (CGRect)backgroundRectForBounds:(CGRect)bounds {
return CGRectInset(bounds, -50, -50);
}
More info here:
https://developer.apple.com/library/ios/documentation/uikit/reference/uibutton_class/index.html#//apple_ref/occ/instm/UIButton/backgroundRectForBounds:
I have a very specific requirement to fulfil.
Lets say this is my original background image (on the right).
This is how my image should be on the screen by default.
And this is how it should be when I do a "pull down" gesture on the UITableView.
I want to set an image (shown above) as a view's background. A UITableView to be specific.
NOTE: Image size is more than the view size.
When I try to pull down the view beyond the bounds of the view, the image should continue to show up and should not break. With the current implementation the image from the bottom part shows up.
Any ideas how I can achieve this? Pardon me if the solution is obvious.
You can do this by only one line of code
[yourView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"YourBGImgName.png"]]];
OR Alternately
put one UIScrollView and set it's background color with above way and you can find your background repeating when you scrolling your scrollView.
Set the top part as the background for a UITableViewHeaderFooterView in the header and do the same for the footer. Then set a negative inset for your tableView.
Something like
[self.tableView setContentInset:(UIEdgeInsets){-headerHeight, 0, -footerHeight, 0}];
May be the question is elementary, but I have a bug with setBackgroundColor.
I have the UIView which contain UITableView. UITableView is clearColored. I'm trying to set background on UIView:
[self.viewForTable setBackgroundColor: [UIColor colorWithPatternImage:[UIImage imageNamed:#"bgIngrList.png"]]];
On normal iPad it's looks like:
But on retina iPad (like the second image began showing):
I have two images "bgIngrList.png" and "bgIngrList#2x.png" with 290x260 and 580x520.
Where can be the bug?
EDIT
I have solved the problem by using UIImageView instead of UIView.
Thanks to everybody!!!
colorWithPatternImage: (as the name suggests) thinks your image as pattern to fill. so if the image you give is smaller than the size of the view, its gonna draw the pattern image again rather than stretching it. that is what happening here. your image's size is smaller than view's size hence its drawing the image again at the bottom. You can avoid this by adding a UIImageView and setting the image property rather than setting the backgroundColor of UIView.
Recently I have observed some strange behaviour with the UIImageView and am wondering if anyone can provide some insite. I have two UIImageViews with the images inside them being loaded from a database. Inside the Xcode inspector I set the clip subview property and change the image mode to aspect fill. This works fine, when the images are loaded they appear correctly in their views and are clipped as they should be. However, I wanted to add a place holder image incase the user hadn't uploaded one yet. When I did this it the image was not resized and and stretched passed its view. I tried to reset the properties programatically as can be seen below, but nothing changed.
//code used to try to reset the image mode and clipping of the sub-views
//set up user profile picture
_profilePic.contentMode = UIViewContentModeScaleAspectFit;
_profilePic.layer.masksToBounds = YES;
_profilePic.layer.borderColor = [UIColor whiteColor].CGColor;
_profilePic.layer.borderWidth = 3.0f;
//set up users cover photo
_coverPhoto.contentMode = UIViewContentModeScaleAspectFit;
_coverPhoto.clipsToBounds = YES;
_coverPhoto.layer.masksToBounds = YES;
Why is this happening when I add an image to the view through the Xcode inspector but not when the image is left empty?
You should use UIViewContentModeScaleAspectFill instead of UIViewContentModeScaleAspectFit.
When I add them with the following line of code at the beginning of ViewDidLoad I get the same effect and have none of the unwanted image overflow.
_coverPhoto.image = [UIImage imageNamed:#"stockCoverPhoto.png"];
_profilePic.image = [UIImage imageNamed:#"stockProfilePhoto.png"];
Not the most informative solution, as it provides no insight into this issue but it is a solution. Anyone have any other input on how to fix this issue, why it even happens I would love to hear it as im still scratching my head.
Same on here.. No way to change contentMode after setImage to UIImageView..
What is the best way to create a custom UIView? So i got 3 images (top, mid, bot)
and inside the button i want an image (it need to be resizable (in height only)
How can i create this with UIView so i can put a image inside it and that the views resize? (I want this in a UITablecell)
Try these two links for custom UITableView Drawing:
cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html
http://adeem.me/blog/2009/05/30/iphone-sdk-tutorial-part-6-creating-custom-uitableviewcell-using-interface-builder-uitableview/
Within there you should be able to set each cell' height separately. If not there, then override the UITableViewDelegate method
tableView:heightForRowAtIndexPath:
http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UITableViewDelegate_Protocol/Reference/Reference.html
If you're using iOS 5 have a look at the resizableImageWithCapInsets: method in UIImage.
This allows you to specify which part of your image should resize and which should scale automatically. This is ideal for reusing background images like in your case.
So you would create your resizable image with the blue background and specify the offset from the edges that should resize with the image. You don't have to slice or chop your image, just provide it as one whole image, the scaling will happen automatically and your rounded corners will stay in tact if you specify the cap insets correctly.
// Change the edge insets to match your image...
UIImage *backgroundImage = [[UIImage imageNamed:#"button_background"]
resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)];
// Create an image view to hold the new image
UIImageView *myBackgroundImageView = [[UIImageView alloc] initWithImage:backgroundImage];
// [...] here make sure to size your image view to match the size of your parent view
// Add the background image view to the view
[self addSubview:myBackgroundImageView];
Then you're free to use a similar technique for custom tableview cells. But the idea here is to use a resizable image with edge insets to scale your background image dynamically.
Here's a good blog post explaining edge insets.
Hope that helps.