I have 8 images I made, 4 images for each of the corners, and 4 images for each of the sides of UIImageView. Now, how on Earth do I make them 'come around' the view so they form a nice-looking, stretchable border, something like this (the white line is the border I try to implement):
Any ideas on how do you implement a border of a view based on 8 preset images?
EDIT: I don't want to draw the border, I want to use my 8 images!
It is not really what you are asking for but this is the solution closest to what you are trying to do.
You should take your 8 images and combine them into one single image and then make a resizable image out of that using resizableImageWithCapInsets:resizingMode:.
The first arguments lets you specify the top, left, bottom and right inset (i.e. the sizes of your images).
The second argument determines if the areas are stretched or tiled.
Stretched
Tiled
So to use it you would do something similar to
UIImage *myFullImage = [UIImage imageNamed:#"nameOfTheCombinedImage"];
UIImage *resizableImage =
[myFullImage resizableImageWithCapInsets:UIEdgeInsetsMake(top, left, bottom, right)resizingMode:UIImageResizingModeTile];
(stretched vs tiles images "borrowed" from here)
Related
I have two UIImageView with same frame. One imageView above second imageView now I'm erasing upper imageView using Core Graphics. My problem is that the border of eraser is very sharp I want faded border i.e. after erasing the upper image should match the lower one's pallet. See below example -
I used these two images and below is result -
As you can see in this image eraser's border is very sharp. I want to make it faded out like in the middle it should be dark then light then more light and so on i.e. we cant see the width and end of brush. And here is my - My Sample Code Let me know if my question is not clear enough.
You can have a png image like brush (dark in the middle and light in the corner) and draw the image over your image like this.
[eraser drawAtPoint:location blendMode:kCGBlendModeDestinationOut alpha:1];
I have a few questions on adding border to UIimage :
1) Is there anyway to add a dynamic border to an image of uiimageview?? I have tried to add border by using [layer setBorderColor:[UIColor whiteColor].CGColor]; But the border just shows around the frame of the uiimageview (a square or a rectangle). All my images are with thick black outlines and custom shape(such as hellokitty), I would like to add borders around the outlines. Is that possible to do it???
(I have also tried to add shadow around the images, but the result is too blurry, anyway to make them solid?? I think thats another way to solve my problem)
2) Also, if I can draw a custom shape border to stick around the images, is that possible to fill in color inside the border??, because some of my images have no filled color, any ideas??
Thanks in advance.
If your images are transparent with random shapes (i.e. the outline of the image is the shape of hello kitty) then I would approach this by...
First, ignore UIImageView here. Prob easier to create a custom UIView subclass.
In the drawRect of your view...
- (void)drawRect:(CGRect)rect
{
// calculate the rect of the image (aspect ratio etc...) so that it fits in the rect.
// see this link https://stackoverflow.com/questions/7645454/resize-uiimage-by-keeping-aspect-ratio-and-width
// change the colour of the image to black (or the border colour you want).
// see this link http://coffeeshopped.com/2010/09/iphone-how-to-dynamically-color-a-uiimage
// draw the black image in the rect you calculated
// make a new rect that is smaller by in x and y than the one for the black image.
// You can change it by different amounts to change the border size
// draw the colour image in the new rect
}
Each step requires quite a bit of code so I've only put links and suggestions but this is what I'd do if I was trying to do what you are doing.
Link 1 - Resize UIImage by keeping Aspect ratio and width
Link 2 - http://coffeeshopped.com/2010/09/iphone-how-to-dynamically-color-a-uiimage
First, I'm not talking about icon libraries or mockup tools/libraries.
I'm familiar with various icon libraries that people have created, but other than the stuff from the example code like UICatalog, I'm wondering if anyone knows of anyone who has created free libraries of custom button bitmaps (stretchable button images), slider handle/track bitmaps, etc Basically bitmaps to customize the look of standard controls for those controls (like buttons and sliders) that allow you to specify such bitmaps.
I'm also interested in any photoshop tutorials/templates on/for creating stretchable custom button images, bitmaps for slider parts, etc. (Afraid I'm not a huge PS god or anything.)
Anyone know of any resources like this for fancying up the standard controls?
I've been able to find several stretchable buttons by searching through my collections of sample code for: "stretchableImageWithLeftCapWidth"
From the Apple sample code, the UICatalog, BubbleLevel, iPhoneMultichannelMixerTest, avTouch, AQOffilineRenderTest, and TouchCells sample code all contain buttons with stretchable images.
Hope this helps!
Stretchable buttons is no problem - there's nothing special you need to do in Photoshop. Just make the image of the button stretchable and set the radius to that of any rounded corners you have on the button graphic.
Slider parts - I'm pretty sure you'd have to make your own UIControl from scratch.
To make a button in Photoshop, create a new file with transparent background, select the Shape tool, rectangle near the bottom of the tools, drag out a rectangle. Size doesn't matter™. For a rounded rectangle, click and hold the same tool, choose the rounded rect shape and set a corner radies (same radius as in stretchableImage later).
Double-click the layer right of the layer name to get the layer style popup. Check Color Overlay and set the color you want. Check Inner Bevel and make its size somewhere below half the height of the rectangle - I think 90 degrees for the Global Angle works well. A lower opacity and larger size makes the bevel look less chunky.
Ctrl-click (option-click) the graphics rectangle in your layer to select the button's outline. Deselect the bottom half of it by using the marquee tool (M) at the top of the tools. Select a light gray foreground color, nearly white. Create a new layer with the square icon under the layer list (Windows->Layers if not visible). Fill the selection of the new layer with the paint bucket, and drag down opacity for the layer until the 'matte laquer' effect of it looks right.
A simple button, but that's the gist of it.
I am using a custom image as the background image for my buttons. I have noticed that the edges of the buttons are cut off sometimes. My buttons vary in size but the behavior doesn't seem to be dependent on the button size. I am creating the buttons programatically. The image I am using is pretty large to cover the entire background.
Can someone please let me know what could be the issue?
More info
Setting the content mode to UIViewContentModeScaleToFill still cuts of the images. Also tried resizing the image but doesn't make a difference.
Thanks.
Did you try setting the button's dimensions to fit exactly the image?
Is the image just cropped or also blurry (cause it's being resized)? Have you toyed around with UIView's contentMode property for the button?
If you did, did you try increasing/decreasing the width or height by a pixel? I sometimes had blurry buttons even though its dimensions were exactly the image's. Adding or removing an extra pixel sometimes helped.
I finally resolved this by creating a 3x3 px image with the background color as the button's color and a 1 px border surrounding the image. Then used the UIImage method stretchableImageWithLeftCapWidth:topCapHeight: to create an image with the desired border size of 1 px.
I want to show users what their square flat .png image will look like when converted to a normal 'shined' icon by the app launcher.
e.g. round corners and glassy effect.
Thanks
For in-application representation of the 'shine' on an icon, you can create a custom UIView that draws the shine gradient, using the code here (adjusting the gradient colors to match Apple's). When you want to apply the 'shine' to the preview icon, just overlay this custom UIView on top of its UIImageView (or whatever you're hosting it in).
The rectangular clipping could be a little trickier. If you have a solid black background, you could overlay a frame UIImageView that has a black area with a rounded rectangular transparent region in its center. You can also do this in a more general-purpose manner via Core Graphics by drawing your image and the gloss into a view, then using CGContextClip with a rounded rectangle to carve out the rounded interior.