A designer I'm working with wants to have a UIImageView be at a specific y position, with a specific width/height depending on the iphone size. I've done research and I haven't been able to find anything online that allows me to do so with constraints on the story board. I want to avoid having to use code because throughout the rest of the app there are a lot of similar situations. In the past I've made different storyboards for each phone size to accommodate for the specificity our clients request, but I want to avoid doing this because it feels like bad practice. Is this even possible?
This can be completely handled in the Interface Builder. Follow the steps below.
1) Add your UIImageView to the ViewController
2) Set constraints for Width, Height, Vertically Align and Horizontally Align
3) You can adjust the Y position in the Size Inspector of the view.
4) Now switch to Assistant Editor and choose 'Preview' and add different screen sizes to see the auto layout in action.
All of this will set a static image size of 250x200, horizontally centered, and vertically at 1/4 of the screen height.
Little-known capability of constraints are that you can set view positions, or in your case sizes, by way of ratios against other views.
With just your image view selected, the tie-fighter :) constraints button lets you specify absolute positions & sizes: do that to set your desired y-position. But then select both your image view and its enclosing parent view, then the pop up for that same button now enables the equal height/width buttons. Add those constraints and then edit the constraint to change the 1:1 ratio to whatever ratio you need.
Excuse my lack of screenshots, posting from my phone.
Related
I'm currently trying to implement a chat for my application but since I'm new at Swift development I got stuck at the part where I have to create the TableView cells for it. I was able to find 2 png images of "chat bubbles" (one for receiving and one for sending).
I placed them in Assets and loaded them in an ImageView. Now my problem is how can I place a Label inside the ImageView and rescale it depending on how many lines of text are in the Label. The bubble should not exceed 66% of the screen's width.
OK, there are a few considerations:
If you haven’t already, make your asset stretchable (where the corners aren’t stretched, but only the center is) by:
selecting the asset and zoom in so you can better refine the slices;
in the Xcode menu, choose “Editor” » “Show Slicing”;
click on “Start Slicing”:
click on the center “horizontal and vertical stretching” button:
move your guides to where you want them:
now when you add the image view using this new stretchable asset and choose “Content Mode” of “Scale to Fit”, it will scale in such a way that the center is stretched but the edges aren’t:
Also see Xcode documentation “Add a resizable area to an image”.
In your cell, now just add this image view and the label:
defining the label’s leading/trailing/top/bottom constraints to be inset from the edges of the image view;
define the label’s line count to zero;
define the image view’s width to be “>=” the container view width (with a multiplier of 66%);
obviously define your bubble’s appropriate leading/trailing/top/bottom constraints to its superview, too; and
make sure your cell is using automatic cell height.
For the sake of completeness, the other approach is to make an #IBDesignable view where you draw the bubble yourself with a CAShapeLayer whose path is the cgPath of a UIBezierPath. This is what I’ve done in my chat apps. But this stretchable image approach works fine, too.
By the way, if your speaker and listener bubbles are different colors, note that you might want to have flipped renditions of these bubbles for RTL languages.
Sorry for the super basic question, I'm not understanding why (or how) Autolayout automatically resizes buttons/labels after setting constraints to the safe area/view.
Here is a short video demonstrating my exact problem. I want to keep a 200x100 button centered horizontally near the top of the screen, why does it resize itself after setting constraints?
If anyone could explain/point me to a good guide for getting started with auto layout it would be greatly appreciated!
You need to set constraints for the width and height, not simply set the width and height. Setting constraints will ensure that the width and height do not vary from what you set them as.
Check out a demonstration below of how I set the width of a button equal to 200, the height equal to 100, the offset from the safeArea top to 20 and horizontally centering the button:
You should set the constraints for width and height, not just size in Size Inspector. Make sure you set them as follows:
The two basic rules of autolayout are:
Autolayout and frame/size are opposites. You can only use one of them.
If you choose to use autolayout, you must completely determine both position and size using autolayout.
So, at first in your video you are using frame/size. So the button obeys your size settings.
But then you come along and add some constraints. At that moment, you are using autolayout — and your frame/size settings cease to mean anything.
Well, the rule for something like a button or a label is that unless you explicitly set width and height constraints with the desired Constant values, it will size itself to its contents as an automatic fallback (using its own internal constraints that you can’t see). So that is what it does.
The easiest way to add a width or height constraint is to control-drag internally inside the button, horizontally or vertically. But you still might need to set the Constant back to what you wanted it to be (in the constraint's size inspector).
I'm new to iOS development. I'm trying to add logo on launchscreen in centre. I've a background with gradient colour so I've used a png file and stuck it in the background.
Next is logo which I want to centre for all devices.
I've two part questions
1) Is there anyway I can specify the constraints so that it is applicable to all devices? Example specifying top and bottom constraints in % ?
2) If above is not possible then how do I align logo in centre so that it works on all devices? Do I need to apply constraints separately on all devices?
I tried to set the width and height separately for all devices but it modifies dimensions on other devices. Not sure if this approach will work or I'm doping something wrong?
I'm aware that in worst case that I can just create launchscreens with logo in it as png and stick them for each devices separately which will work. I just wanted to know if it can be done with constraints.
Tx
As you suggested I added constraints to align it in centre horizontally and vertically. It seems to be good on one device but on other it's not. Please see images below.
And then how do I change image size?
One device
2nd device
You do have centerY and centerX constraints.
In storyboard, select the imageView that you have already added to your view. Right-clic drag to the main view (full screen view) in the left panel and choose center horizontally, repeat with center vertically.
You will need to also set the width and height constraints of your logo.
ALTERNATIVELY:
You don't need to clic drag, you can add the center constraints in the "add new alignment constraints" tab.
Finally I manage to solve what I Was looking for thanks to all those who helped. It was good learning period, 2 days in total ;)
Step 1: Align image to centre vertically and horizontally.
Step 2: Scale logo to fill the space. Please follow this video which is bang on point what I was looking for.
http://roadfiresoftware.com/2015/04/how-to-scale-an-image-view-based-on-device-size-with-auto-layout-in-interface-builder/
I was just experimenting with UIStackView. In this quiz app i have different sized imaged, so i want the image to fill the space between the top button and the question text at the top. The buttons have constraints on them so they should be any size under 50px. As of now the top button is the one getting auto increased size, but that seems kinda random.
According to what I understand you have all the items inside a vertical UIstack. The images have different sizes so the available space for the buttons will changes based on the size of the image. I suggest that you add constraints to all buttons to be equal in height. This way they will re-size based on the available space but they will all have the same height.
I have read this post and I have tried with many examples but i could not put two images one beside the other, each one with a width 50% and at the same time that this images maintain their aspect ratio. I do not understand what restrictions need to.
I have this:
In the image you can see the viewcontroller structure, 2 imageview and the constraints.
Please I need help, at least one similar example. Thanks.
I can see you have missing constraints on your scene, so that could be an issue.
I would put the UIImageViews in a container view pinned to your main view, making sure there are no missing constraints. The benefit of this is in debugging - you can give it a different BG colour and make sure it's resizing itself properly on the simulator/device. I found that putting the image views inside this helps enormously.
Then you need to specify Aspect Ratio constraints on your image views, and also make them equal widths and heights. Add some small constant horizontal spacing between your image views and top/leading/trailing to the container view, and let auto-layout decide the optimal image sizes.
I've included a screenshot of my storyboard:-
This renders like so:-