I created simple view to FlashCards, but when I try put autolayout on sign i have a problem. In xcode small white view size works fine, but when i run apps in simulator size is crashed. I have assets 2x and 3x. I tried make bigger view in xcode but when i do this view works fine on ip8, but ip8+ is too large
here sign is bigger than my view, and view dont masks sign.
but iphon 8+ works fine...
its my small white view contrains
well background is imageview with this img
, next i added white uiview on sign (which size is crashed), in next step i want add this sign: in white view to flips and changes words, all works fine when i created layout on one device, but when i try added autolayout size white view and content in this view is crashed
The simplest solution for this is to increase your current height and width values and then test it through all device screen sizes. Fingers crossed that you going to get wished result.
A second solution, which requires graphic editor software skils, is that you separate the sign from the current image, without background, let's say in Photoshop. And then use the sign image as the second image, which is located in separate ImageView. Position this sign Image View over current background Image View( with palms ) to fit your wished layout. Set leading, trailing and bottom constraints for sign Image View, and at the end set proportional height constant which is proportional to the screen height of your device.
If you screen height is 667, and your sign Image View height is 150, result is that your new sign Image View should be 22.48875562% height size of your device screen height size. See Proportional height of view and superview autolayout
for more details about proportional layout with swift.
And now you should add your UIView over sign Image View. When you've added UIView set top, leading and trailing constraints to be same as the constraints of sign Image View. And at the end, add another proportional height constraint which is proportional to the height of sign Image View.
The first solution is easy, and the second one is tricky, but I hope it helps. It's always tricky to sync UI elements with graphic parts of images.
I solved this. Reason break this view is tabbar, I created layout on view where i don't see tabbar. When I run apps and tabbar is shown view is smaller and constraints are break content.
Related
I am attempting to customize the default LaunchScreen.storyboard of my Flutter app. I simply have a red background on the default View, and I added an Image View as a child of it. This Image View is centered on the screen and renders an image that I have added to "Assets.xcassets" with all 3 sizes. Below is a preview of what my Xcode displays:
However, this storyboard renders differently on devices than it appears in Xcode. For example, it appears slightly off-centered on iPhone 12, and it is scaled up too high for iPhone 6s and is way off-centered. See below for screenshots:
As you can see, the storyboard renders differently on the two devices. How can I make the storyboard appear the same on both devices as it does in Xcode? Any help is appreciated. If I used any incorrect terminology or need to provide additional details, please let me know as I have minimal experience using Xcode.
From the storyboard screenshot attached, it looks like there are no constraints added to the UIImageView.
You should add top, leading, bottom & trailing constraints to superview with 0 spacing to achieve what you want.
UPDATE
Above is applicable to the case when you have a small size image like 100x100 or similar that can easily fit on all screen sizes. In the comments, we see that image is way too big and we want to keep it in center while occupying 50% of screen width.
Remove the leading and trailing constraints, select the imageView and it's superview - add equal widths constraint with a multiplier of 0.5, this will make sure that imageView will always occupy 50% of the superview's width.
Also add horizontally center constraint on the imageView. Make sure imageView Content Mode is set to Aspect Fit.
I need to make something like this
the problem is 6 buttons in the middle, how to make it manually by using scroll view? I need to use scroll view since it will be a problem if in landscape mode
here is what I make
https://drive.google.com/file/d/10TBjW3qAaDEGJ_I_EQBPr5anzGcG1-er/view?usp=sharing
the problem is, in iPhone 5s, it seems it can be scrolled horizontally even though I have set width of content view to be the same as scroll view, and in larger phone, it seems not located centrally and not fill the screen
I don't know what went wrong with the auto layout
I unzip your project, and open the storyboard to check those constraint. You can change device to iPhone SE as the red rectangle marked. I notice that the Width of Content View is fixed with 375. It should be as the same as the width of Scroll View.
After updating the width of Content View constraint, I remove the Width:375 constraint, and apply new one that to equal to the width of Scroll View. It looks like the following image.
Hope those help you.
So I have an app I'm working on, but I hit a major problem. In this app we have several images. I'm learning AutoLayout, and I can make stuff appear the same on all device screens, except for the fact that the images (and for that matter, everything) remain the same size. I want them to get bigger and smaller according to screen size. I've tried everything I know. Help!
Here you can use propotional width and height to the superView. At first Ctrl drag from your imageView to superView and set Equal Height and Equal Width. And now set the Propotional height and width to the superView from the constraint list. Here you can set your height and width with Propotional to superView with Multiplier option. And finally set your x and y position of your image Final Image. Here I have used horizontaly and verticaly centered.
Using the image here as an example:
First, place your imageview where you would like it, in terms of how far it should be from borders of the view or other objects.
Then, click on the small tie-fighter like icon in the bottom to bring up the add new constraints window.
From there, click on the four links show in red inside the red box. These tell XCode that it should be "80 units from the left most object, 80 units from the right most, etc".
Now, when you change to different devices, it will always adhere to those standards.
However, depending upon the size you selected, it may not work under certain conditions such as being rotated to landscape, or in a split view on an iPad. This is where you get into the other size classes, which you access by clicking the text at the bottom of XCode that says "w Any h Any".
One item of note, do not select the image size in width or height in the constraints window seen below. Doing so will constrain the image size, invalidating the margins put in place.
I am new to Xcode and learning about Autolayout. Having a pretty difficult time and think I've finally hit the wall and really need some guidance on the following.
So I created an image view with a .png background image that show button place holders to help me figure out the exact place I would like to place my button objects. So I pinned the image view on all four sides to 0 and it resized perfectly to different screen sizes. Now the problem came with the button. I dragged the button object out of the Object Library and placed it right on top of the image view, where the button place holder image lies. To the button, I gave constraints to its width and height, pinned the bottom and right, and Aspect Ratio to help resize accordingly to different screen sizes.
The first problem is that although the button is placed exactly where the image view shows, the button is located elsewhere, even though the image view is able to perfectly resize to different screen sizes. The second problem is that, although the button pins fine on all screens, the pinned lengths are staying static and not changing even though the screen goes bigger or smaller. The last problem is that the size of the button in itself is staying static as well even on different screen sizes.
Why is the button not able to resize (used Aspect Ratio but not working) and reposition in relative to different screen sizes? A guidance on this would be really appreciated! Been trying to figure this out for a whole day.
NEW UPDATE WITH TAKING OUT WIDTH AND HEIGHT CONSTRAINTS, LEAVING ASPECT RATIO ALONE:
you should remove that width constraint to let the button resize just leading and trailing spaces are fine to increase it's width in different screen sizes
I went through ray wenderlich's tutorial about autolayouts (link) and then began working on a demo project thinking I've figured it all out but I was wrong. As shown in the screenshot below I have a navigation bar, 2 views and 1 button. The layout on portrait mode looks fine without adding any constraints on views or the button, and understandably in landscape mode views are messed up. I tried adding following constraints on views and those don't seems to work.
View#2: Select view 2 > Editor > Align > Horizontal center in container (hides view completely)
Add Top space to superview. Again view goes away from both landscape and portrait preview.
If I can display view#2 correctly I am planning to add vertical space between view#2 & view#3 and then between view#3 and button#4.
My main concern is to resize the views so that it shows all views and buttons in iPhone 4s landscape mode. Any advise or suggestions are appreciated.
EDIT: Here's the end result that I am trying to get:
The reason your views go away when you add constraints is because a UIView has no intrinsic content size, so its size is {0,0}. The view appeared when you didn't add constraints because the system adds constraints for you, if you don't add them yourself; the system added ones are top, left, width, and height. So, you need to set the size of the views somehow. You can give them explicit size constraints, you can pin them to the edges of the superview, you can give them relative heights based on other views, etc.
Since you want the 2 views to get proportionally smaller in landscape, you should give them heights that are relative to the superview. You do this by selecting the view and the superview, and choosing "Equal Heights" from the pin menu. Edit that constraint to change the multiplier to something like 0.25 for the blue view and 0.2 for the orange one (this assumes that orange or blue view are the first item in the constraint -- if they are the second, then you should use the inverse values of 4 and 5). You should also do the same for the widths, since it seems you want them to get proportionally smaller too.