I have an image that needs a UITextField in the middle of it at all times. However, I can't get it do what I want.
I pinned the image with top, left and right constraint and gave it a height constraint. I put the UITextField in the middle of the image and tried various methods to keep it in the middle, but they all keep failing. Any tips are appreciated. Here is what the image currently looks like. First one iPhone 4 and second one is iPhone 6
You can just select the image view and the button and create two constraints: a “Horizontal Centers” constraint and a “Vertical Centers” constraint. Neither view has to be a subview of the other, and they don't have to be in the same superview either.
Here's a demo. I've already constrained the image view to fill the top left quadrant of the root view, and I've dragged in a button. In the demo I'll select the image view and the button (hold shift to select multiple views) and create the two centering constraints. Then I'll use the Preview assistant to show that the button stays centered when the image view's frame changes.
What you need to do:
Embed the UIImageView and UITextField inside a UIView.
Set constraints of UIImageView leading, trailing, top, and bottom to UIView with constant of 0.
Set constraints of UITextField center horizontally with container view, and center vertically with container view.
Then it's up to you on where you want to position that UIView. This will definitely always position the UITextField to the center of UIImageView.
Related
I'm trying to make a row of buttons on the bottom of the screen and the buttons are images. I was having aspect ratio issues so a few sites recommended making image views and simply put transparent buttons on top of them. I've placed six image views in a stack view and constrained it to the bottom. I thought it would make sense to put six buttons in another stack view and then also constrain it to the bottom, but it always constrains to the nearest neighbor so now the images are actually on the bottom of the screen, but the transparent buttons are vertically sitting above them. Is it possible to have both constrained to the bottom of the screen so that they completely overlap? Thanks!
It is very much possible, from what you have written I assume that your second stackView is pinned to the top of First stackView. Change that constraint to bottom of your superView. This would be enough for your requirement.
Also Instead of using two different stackViews, I would recommend doing this in one single StackView, which will 6 UIViews inside and each UIView will have UIImageView and UIButton inside.
(Thanks, Sujith Chandran and Neil Hiddink for pointing the way!!)
Here is my solution: After selecting the bottom constraint for the stack view that contained the transparent button overlay, I went to the size inspector and changed the "Second Item" to superview, opened second item again and selected bottom, and then set Constant to 0. Eventually I had to change the value of constant to -70 to get the desired position because I previously set the button images to a height of 70.
I want to place an UIImageView at the half of an another UIView. I have set the constraints like this:
I need the square image view to be at the half of the orange UIView . The above position of UIImageView is correct but it slightly moves up in 6 and SE screens.
Please look at the screenshots:
Why it is happening and how to prevent the UIImageView from moving up ? Do we need some other constraints?
What should be the constraints for the Green UIButton Placed to the right side of the UIImageView?
First you need to remove your top space constraint, then you need add a constraint between your UIImageView and your redView, right click and drag to your red view and select align to to Top, later you need to change the first item from .top to .centerY, and add a multiplier value of 1 to be center in your red bottom edge
One Picture worth more than 1000 words
Second requirement
In your second requirement, you need add an helper view I named it guideView this view background will be .clear and userInteraction will be disabled, then guideView will have .top and .bottom constraints to your UIImageView .top and .bottom also will have trailing space to superView with constant 0 and leading space to your UIImageView with constant 0, as shows this image, then your desired green view go inside of guideView and will be aligned center in Vertical and Horizontal to superview and height and width with fixed values and that is all
Hope this helps
It can actually be done with a single constraint. Just align the center of both your views like this:
If you also look at the remaining constraints, the original view must be already properly constrained, the second view that have to be aligned to the original requires width and height provided and also position of the other axis. In this case where Vertical centers are align you will need to provide a X position.
Therefore if you want the views instead be aligned one above the other, align the Horizontal Centers instead and provide the Y position of the views.
You could also do it programmatically. This will always center the image view on the top edge of the view, with half above and half below.
First, make outlets for the UIImageView and for the UIView.
Then:
[imageViewOutlet setCenter:CGPointMake(viewOutlet.frame.size.width/2, viewOutlet.frame.origin.y)]
I have a label, an Image View, and a button in a vertical stack view. The alignment is set to fill, and the distribution to equal spacing with an offset of 10. On my storyboard, the label appears on top, the image in center, and the button at bottom.
However, when run on simulator or device, the UIView is stripped from the view entirely, so the label appears at the top of the screen, and the button directly below the label.
My only constraints are set on the stack views to the superview
Edit: Forgot to mention the UIImageView is inside of a UIView
I had a similar problem. My UIView in my UIStackView had only a Width constraint and would disappear at runtime. I found I could make it show up again with either of these options:
Add a Height constraint
Add a Top and Bottom constraint
I was having the same issue with a tableview in a stackview. Added the Height constraint to the view and it worked now everything shows fine
Setting a Y constraint on the UIView border caused it to appear when hitting the play button, but it grew outside of the screen bounds.
I had to set size constraints on the UIView in order for it to display properly.
In my UIViewController I put a UIScrollView and attached constraints:
Then I added a view to this scroll view with following constraints:
and positioned it like this:
so as you can see it is quite long. When I run the app I can scroll it just for couple pixels instead of completely to the top of the screen. I want to make it possible to scroll it to the top so that it can cover everything what's under it. So what am I doing wrong here?
========= EDIT
for clarification - I want to achieve an effect that when user opens this screen, 10% of the screen is covered by the view. User can slide up this view and then it covers 90% of the view. And he can slide it down back to the 10%. Can you help me with adjusting constraints so that it looks good on every screen size?
Take a UIView inside the UIScrollView.
Set the constraint for scroll view as leading, trailing, top, bottom.
Select UIViewController in the story board and click size inspector then choose freeform then set the view height as bigger.
Then set constraint of UIView is leading , trailing , top , bottom as 0, so that the UIView will be same as ScrollView region. Now set height constraint something bigger so that you can design image view, label 1 and label 2. Then set constraint like the image view : top to UIView, leading , trailing and height.
For label 1: leading, trailing , vertical to UIImageView, height.
For label 2: leading, trailing , vertical to label 1, height and bottom to UIView (Important as based on this content view will be set).
After setting constraint You can select UIViewControl from story board and set the SizeInspector as fixed as it was before.
It will show the screen as you need (Image view, below label 1 and on scrolling label 2)
I have tested it in my demo project.
Hope it helps
I have a UIViewController that consists of a UIImageView then I want to provide three options to user namely, rotate, crop, draw.
I want these three buttons to remain always centred at the bottom and maintain an exact distance with the UIImageView.
How can achieve this using auto layout I have done a lot of search as well as work but to no good use.
Set constrain like this ,
First set Constrain to centre button(Crop Button). like,
Crop button :- Bottom spacing from bottomlayout , height and width (According to your requirement), and Centre Horizontally in container (now your crop button is fix in centre)
Rotatebutton:- set Horizontal spacing from crop button , rotate buttons top=cropbuttons top , rotate button's bottom=crop buttons bottom , and Rotate button's height and width equal to Crop button's Height and Width.
(set constrain to draw button same as rotate button)
So, all button's look same .
check in image ,
1) Set constrain to Buttons
2) Now set constrain to imageview
3) Output
Edit :- Here i have attached demo ,
Demo for Centre button
(1) First add ImageView, constraints like this
(2) now add an UIButton in the bottom center named CROP. Give Constraints like this
(3) Now add 2 UIButtons named ROTATE and DRAW on either side of CROP
for ROTATE:
for DRAW:
(4) Finally select 3 buttons and give equalWith Constraint
No need to add Constraint to with ImageView. Add these buttons on a UIView and add the constraint on that view as Horizontally Center and also add ImageView on a UIView. Now add the constraintHorizontally Center on the parent view of Button to the parent of ImageView.
Your scenario should be like below,
left most button should have two constraints(cancel) : leading,bottton
right most button should have two constrains (yellow button) : trailing,bottom
Take one UIVIew and put thhree buttons in that view with equal distance from every side of that uiview.
now your constraints to all three buttons should like : leading,trailing,top and fixed height
And constraints of that uiview should be : horizontally center in container, bottom and fixed height
I am attaching screenshot aswell
You can check constraints from view hierarchy on left side.
I have set gray background color to just demonstrate this is view you not need to set color of that view.
By this way your three buttons will always display to bottom center of your VC
hope this will help :)
Hope the below steps might fix the buttons the way you wanted.Have not tried myself but you can try out if you have not tested these steps.
1.Pin those buttons to the bottom space container
2.Add a constraint from button to top space to image view
3.Play around horizontal spaces between buttons by pinning leading edge to the view for the left most button and trailing space to the view from right most button
4.Check center horizontally/vertically to the container