How to correctly set background for retina? - ios

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.

Related

UITableViewRowAction with image instead of title

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).

Displaying a shadow on views that will resize

I want my views to have shadows. When I first added shadows to all my views I quickly encountered a problem, the UI was very laggy. I then realised that I should instead use UIBezierPath and set shouldRasterize to true when drawing shadows.
Everything became silky smooth again but with one problem, these shadows are static. They won't resize with the views.
These views are each in their own UITableViewCell and these cell's heights are dynamically adjusted to fit the content in the views. But when a certain cell resizes (with an animation) I would like the views and their shadows to resize as well but they won't because they are rasterized.
Does anyone have any ideas as to how I can fix this problem?
Will it be appropriate to make this shadow stretchable?
If so, you can try drawing your shadow once to a shared UIImage (and cache it)
UIBezierPath to UIImage
And then set background UIImageViews with resizeable UIImage to your views with the help of UIImage's method
resizableImageWithCapInsets:
You will have one image for all shadows that will be added as background UIImageView to your views.

xcode iOS increase UIButton hit area

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:

Create custom UIView draw

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.

How do I set a centered or stretched background image?

I have universal app. In that app I need the background image to be centered or stretched. That way when I rotate the device or switch it the image displays correctly.
Here is my code in viewDidLoad:
self.view.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"tux.png"]]
Can anyone tell me how to accomplish this?
I think you can't easily make it centered with backgroundColor. You may:
Stretch it before setting the image as backgroundColor, see How to fill background image of an UIView.
Create a customized UIView subclass and draw the background image yourself by overriding drawRect: method;
Or add a UIImageView to you view as the background. See "UIView Class Reference: Alternatives to Subclassing":
Image-based backgrounds - For views that display relatively static content, consider using a UIImageView object with gesture recognizers instead of subclassing and drawing the image yourself. Alternatively, you can also use a generic UIView object and assign your image as the content of the view’s CALayer object.

Resources