I have 2 UIButtons. I set the background images to 2 different pngs. The pngs have different width. I looks like this:
The button size is set to the images.size.width and height.
I would like these buttons to be the same size, but when I resize the buttons manually, the images gets distorted, like this:
Is it possible to resize my buttons without distorting the image? Since it's a picture, I thought stretching doesn't make sense.
Any help would be appreciated.
Thanks!
As you guessed, you are stretching the pictures size by resizing the buttons. If I was you, I would look into manually resizing the images so that they are the same dimensions as your buttons.
Without distorting or ruining the integrity of the image the only real solution would be to add more padding to the right and left of the "delete" button.
Other options (which I personally would not reccomend) would include:
split the "Reschedule" into two lines and shrink the alarm clock, so it would read:
Re-
Schedule
Enlarge the trashcan icon manually (this will even them out a little more)
Manually shrink the size of the reschedule icon (your legibility will suffer)
Regardless of the route you take I would resize or edit the original files in a program such as Photoshop or Fireworks to preserve the integrity of the UI elements. Be sure to scale proportionally in those programs to avoid more distortion and stretching.
Related
i wonder what is the best practice for ui design for iOS regarding ui element sizing, especially buttons. In my example all buttons are based on images, no text.
I see two approaches
Absolute Sizes
PRO:
image based buttons do not need rescaling, avoids blurriness
simple setup in interface designer
CON:
buttons look smaller on bigger displays (ipad2 vs. iphone 4) relative to other ui elements
Relative Sizes
PRO:
buttons look better in whole ui appearance across all display resolutions and densities
CON:
buttons may look blurry
interface builder constraints will get a bit more complex
Did i forgot something? Or did i get it wrong?
For now i was designing the ui completely relative to the screen. So lets say a button had the width of 10% of the screen width and an aspect ratio of 1:1. When the ui was completely relative, everything seemed consistent across all devices. But my questions started in the scenario of #2x density buttons. The iphone 4 has a width (portrait mode) of 640 while the ipad2 has an width of 768. Should i create my #2x, 10% button image with a width of 77px or 68px? I would say 77 because downscaling is better than upscaling.
Well, this leads me to my question:
What is the best practice to design the UI? How should we handle the image design for buttons?
Usually the problem is the text got stretched.
You can set the strech area by following this:
https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/chapters/SlicinganImage.html
If you use gradient and it became blur when stretched, you need to draw the gradient using Core Graphics.
I'd say there's no ultimate approach for laying out image buttons in iOS and it always depends on what you're trying to achieve.
In your case I would recommend the following approach:
Use layout constraints to position your buttons properly. Use only
spacing constraints, no width or height constraints!
Set the images for your buttons (either in Interface Builder or in code). Make sure to provide each image asset in all three resolutions #1x, #2x, #3x.
If you have multiple buttons in a row give each of them a different horizontal compression resistance priority. This ensures that in case your buttons don't all fit on screen one (or more of them) will be scaled down to fit.
When assigning an image to a UIButton, that image will determine the button's intrinsicContentSize. Thus, the button will automatically take the size of the image (if no other constraints with a higher priority are present) and it will only scale down if absolutely necessary (see number 3. above).
This approach is only possible if you still leave flexible spaces next to the buttons. If you intend to split the screen equally into three columns for example and each button should take the whole width of a column you have no other choice but do let the system scale down the images for devices with a smaller screen size. It always depends on whether you can allow the buttons to size themselves or if you need to force a width (or height) on the buttons from their superview.
I created an image which is intended to be used as background image of UIButton. This is what I get:
The image looks great in Photoshop, but when used in iOS application as a button image it looks distorted(the lines are not strait and definitely not as smooth as in the original). How can I avoid this effect?
EDIT:// Preview window
Are you sure that aspect ratios of button and image are the same?
Another thing - use appropriate image size for button image, e.g button view is 30px high, then you need add 30px(#1x), 60px(#2x) and 90px(#3x) images. If you just add an image with 1000px it won't look good, take more disk space and reduce performance.
I have simply dragged UIImageView into storyboard and made it square. I added a pink background to show the effects of the leftover space in the ImageView. In each case I added either a taller image (1st image) and a wider image (2nd image), as well as a text label. Here are my results.
So the obvious question is....how can I get rid of this extra (pink) space and keep the integrity of the photo (that is, to not have to stretch or lose part of the image)? If I wanted to be able to scroll through photos, it would be nice to have them all the same width to the edge so they look neat and orderly (if they were portrait), and if I wanted to have text under each, I'd want the text to be closer to it, rather than have all the blank (pink) space in between if it were landscape. And obviously different size images will give different sizes of blank space.
So I'm thinking what I could do is before displaying the image, get the size of it, then just have a designated distance from either the label or the edge of screen, depending on the orientation of the picture, and then creating/changing the size of the UIImageView with a bit of math and using the image dimensions before inserting the picture into the ImageView. Is this possible? Is there another method I can't quite figure out?
Just look at any decent photo app and they are nice and neatly organized/displayed despite being different sizes, orientations, etc and I'm wondering how to pull this off. I obviously haven't gotten too deep into using images past simply showing them in a pre-determined ImageView.
Thanks for the help/suggestions!
Try this... set your UIImageView to AspectFit (not AspectFill since that will lose some of the image) and using constraints do the following:
centre the UIImageView in the container both horizontally and vertically
set the UILabel to float below the UIImageView by whatever distance you desire ("standard" is usually good)
set the left, right, and top constraints on the UIImageView to be >= whatever distance you desire
set the bottom constraint on the UILabel to be (once again) >= whatever distance you desire
The effect of this should be that the UIImageView will properly resize itself to its intrinsic size and the constraints should properly position it and the label.
I'm trying to slice an image in assets Xcode 5. I don't know if what I'm trying to do is possible with slicing.
The image looks like this:
I need to change the width and the height of the image, although not at the same time. The closest I've got is when I use Horizontal for the height and Vertical for the width. The problem is when I change the width, the left side of the image starts as a straight line and the skews and change to the original shape.
I'm about to give up on the idea of slicing and just create three images, left, center and right. Is that the only way to go?
This is how my current slice looks like:
Is there any way to change it so it works at least for the width?
UPDATE
Instead of slicing the image I used a mask and moved the mask.
Slicing works by taking the center section, and stretching it to fill the required space and then putting on the image end caps.
Because your button has a continuous diagonal line you will not be able to slice it. It will stretch the image out like so:
In fact even if you make a centre section and end caps you will still have the same issue as this image can only be scaled.
If you only need a finite set of heights then you should create individual assets for each height that can be sliced horizontally. If you need N heights then you should look into using core graphics to draw your shape in code in a -drawRect: method for arbitrary dimensions.
P.S. if you want to horizontally slice so you can grow the width its most optimal to have only 1 pixel width of image that will be stretched out so your button image resources would look a bit like this:
Aha. TIL: You can change the slicing options from the attributes inspector in the right hand pane in Xcode. To make your slicing work choose only "Horizontal"
I have 2 relatively small pngs that will be images inside UIButtons.
Once our app is finished, we might want to resize the buttons and make them smaller.
Now, we can easily do this by resizing the button frame; the system automatically re-sizes the images smaller.
Would the system's autoresize cause the image to look ugly after shrinking the image? (i.e., would it clip pixels and make it look less smooth than if I were to shrink it in a photo editor myself?)
Or would it better to make the image the sizes they are intended to be?
It is always best to make the images of correct size from the beginning. All resize-functions will have negative impact on the end result. If you scale it up to a larger image it will be a big different, but even if you scale it down to a smaller it is usually creating visible noise in the image. Let's say that you have a line of one pixel in your image. scale it down to 90% of the original size, this line will just use 90% of a pixel wide and other parts of the images will influence the colors of the same pixels.