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/
Related
I'm trying to constraint one dog image so that it is centered vertically in the container, which I can do. What I can't seem to get it is having it just above the halfway horizontal point. So I want it to be a certain fraction down the screen (say a third) on any device. I also want the size of the image to be relative to the screen size.
I want the image to be about what it is in the image but maintain its proportions relative to the device of the user.
I've tried tons of things and none of them work. Any help is appreciated.
Here's the Image
Create an UIView and set the image to fill the UIView. After that make the UIView top constrain equal to the centerY anchor which makes the UIView below center horizantal. By using layout anchors for width and height ( not fixed hard coded numbers) you will make it's size relative to device size so doesn't matter using any device type. Post a graphical design if you need more specific answer.
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.
I am having severe difficulties finding a clear working world example of auto layout on multiple screen sizes. Most tutorials have basic stuff like a button thats centralised and then after adding constraints in Interface Builder it scales with the device. One button is simple but in my example for the iPhone 4:
There are quite a lot of labels / buttons and some that are not central. The above screen shot is exactly how I want it to look on all devices.
The app is for portrait only but I want to target all devices. I tried slowly adding constraints to items from the bottom up using a multiple of the superview to position and size items and then applying aspect ratio to UI Objects (got as far as the got it button but not the red arrow buttons) but as you can see in the next picture for the iPhone 8 plus... the white space isn't going to perfectly fill like in the iPhone 4 which will leave me with a big gap at the top.
Is there a way I can change just the iPhone 8 plus layout in Interface Builder to build a layout that caters for the extra screen size?
The iPhone 8, SE and X layouts are equally awkward with extra white space.
I tried size classes but that changes it for all phones.
Is there a way to centre what I have done so far?
How do you guys position objects in auto layout that are not centred?
Am I going about it the wrong way by applying X / Y constraints using a multiple of the superview? - same for the width. I'm only specifying widths as a multiple of the superviews width then adding aspect ratio.
I just need a real world working example I can learn the basics from or a system to create for multiple devices that I can follow. I don't want to use a 3rd party library.
I really hope someone can help point me in the right direction!
Krivvenz.
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.
Am a beginner in ios. I was trying to make a list of images but i didn't find anything to set the table cell image width same as screen size.
(Am using match_parent in android to achieve this)
Please take a look at the image:
Hope you understand my question.
You have to add imageView to the cell container.
You fix size od the UIImageView and after that you have to adjust autolayout.
Set up autolayout to the left right top and bottom and click add constraints. Look that in every value (0) the the constraint is turned on (red line near the value).
Your image should now stretch horizontally. After that click the "update frames" in selected UIViewImage (Slected Views)