I started to create a very simple tic-tac-toe game.
The main goal is to make the view proportional to all screen sizes of all iOS devices.
So I put the image on a ViewController, make it full size of screen and then I put it into a Stack View. I've added constrains to this Stack View 0 to all sides.
And when I ran the simulator then everything looks good. But I receive a message in console panel. What does it mean?
It could happen because you changed the Mode attribute of the StackView:
I got this warning when I set Mode to Aspect Fit.
Any layer change on a UIStackView will result in this warning. As the warning points out UIStackView is a transform-only layer and it differs quite slightly from a UIView. As per documentation:
The UIStackView is a nonrendering subclass of UIView; that is, it does
not provide any user interface of its own. Instead, it just manages
the position and size of its arranged views. As a result, some
properties (like backgroundColor) have no effect on the stack view.
Similarly, you cannot override layerClass, drawRect:, or
drawLayer:inContext:.
More on this here.
It may not point to the exact source of the OP's issue but hopefully, it will shed some light on why UIStackView behaviour is not the same and should not be confused with UIView.
For someone that need: I set clipToBounds to false in StackView.
It looks like what you did is perfectly correct.
However, I'm wondering why you chose to put your imageview into a stackview when you could have just as easily pinned the sides without the stackview. I am a big fan of stackviews but they don't make sense everywhere. Unless you're planning on adding new views, and resizing your ticktactoe board, I might not use it.
Related
Got a map which is composed of multiple parts:
Each part is an UIButton with an Image. I positioned everything to make up the map and it first looks all right. The problem I have is about resizing the View for different screens sizes. Tried with Autoresizing and Constraints but couldn't get it to look properly for minimizing and maximizing it. The parts should always sick together and up-/downscale according to the screen size. I'm testing the behaviour directly in the Interface Builder by resizing xib's dimensions.
What works is setting all arrows in autoresizingMask for each UIButton and maximizing the view. But minimizing it distorts the map.
Unfortunately it's the first time for me working with the Interface Builder in Xcode. Here you find the source files. Thanks!
Edit:
Setting only the arrows for width and height in the autoresizingMask makes it possible to downscale without distortion. Upscaling pulls the parts apart. How to support proper up-/downscaling simultaneously?
Edit1:
Replaced the every UIButton with UIImage which resize properly in the Interface Builder! See repo here. Unfortunately on simualtor devices the Autoresizing differs and the map-parts don't stick together anymore. Setting the size of UIView in Main.storyboard exactly to xib's size the Autoresizing works perfectly (tested on multiple devices). But later on in the "real" project I'm not in control over the parent's view dimensions.
Played a litte bit with this line of code and it seems to be responsible for "blocking" Autoresizing. How to avoid that? Thanks in advance. I think I’m maybe mixing up Autoresizing with AspectFit which seems to have no effect.
I guess it would be much easier if all the Bundesländer images had the same size. Put them all on top of each other in a common view. Give all the buttons zero padding to all side. Subclass UIButton to check if the the touch event is on a non transparent pixel. Search for "irregular button ios" to find out more about it.
I am able to achieve this using this images, which have all the same size, border added to demonstrate size
and this constraints
The most important constraint might be the Aspect Ratio Constraint on MapWrapper, the view that contains all the buttons.
Using Ole Begemann's OBShapedButton
Some notes:
Your image content is perfect for factorised graphics. Export them to pdf and add them as such as single scale to your assets
you should not include the states names' in the images, but use it as the buttons titles'. To position them correctly, use title insets.
example project: https://github.com/vikingosegundo/germanStateSelection
I am creating popup that measures it's size (here only height) from the its content.
Popup consists of two half (top and bottom). I have decided to wrap top half into separate wrapper view for clean code, so I have added UILabels, UIImages etc. into it in the separate method, but now I am facing problem with it.
Their size for AutoLayout is 0! So, I have a size of popup less than needed:
But if I remove wrapper then everything is OK:
I feel that it is enough data for iOS to render it correctly, but I don't know the command to force iOS to calculate size of wrapper basing on sizes of its subviews and constraints.
I have tried invalidateIntrinsicContentSize on the wrapper, but didn't help.
I am marking up from the code, so I don't forget to set Translates autoresizing masks into constraints to false for child views.
Ok, It is figured out that I forgot to joint top and bottom of wrapper with top of top view and bottom of bottom view respectively.
I've designed a ViewController with an ImageView, 3 Label-TextField combination, one single Label and one Toolbar at the bottom of the view. All of these view elements are inside a Stack View. The design is like below:
The contentMode property of the ImageView is set to Aspect Fit in the Attributes Inspector.
Now when I run the app and select different size of photos, the ImageView seems to be inconsistent different times. Like:
The teal color background the ImageView is set to distinguish the difference between the ImageView and the original Background.
This is okay. But when I choose a large size photo it seems to be inconsistent as the ImageView is overlapping the Toolbar below and this time the Camera button is no more clickable. Here is the image:
And the design gets more broken when I choose another photo. The view is showing up differently in different times. Screenshots are: and
Now what to do? I haven't done any of these design from the code side, all from the Interface Builder.
Any help will be appreciable.
I have these options in the Drawing section of Attributes Inspector:
And this is my Stack View's attributes:
Well it seems everything is fine. Just add height constraint in your Toolbar. The problem will be fixed.
First, make sure you've checked Clip To Bounds property of UIImageView in Attributes Inspector.
Second, set your constraints and / or Stack View's Distribution property in such way that all your views fits within available height.
Here's a sample: https://www.dropbox.com/s/5a7r0oz1v8vclgz/AspectFitImageView.zip?dl=0
By searching a lot of ways around, I finally was able to sort out the issue. Setting the content hugging priority(don't want to grow) and content compression resistance priority(don't want to shrink) helps a lot. Basically I needed to adjust the elements vertically. So tuning the vertical priorities for each element solved my problem. As I have to keep the size of the ImageView to be changed from time to time I've made it's vertical hugging and compression to lower than the other elements of the Stack View. Other priorities are kept as they were by default.
To visualise the situation, here is attached images. Color combinations are used here to distinguish among the elements of the Stack View.
Hope this helps.
I'm figuring out (again) how to set the margin for a custom UIView instance. From what I recall I had to set the AlignmentRect via the alignmentRectInsets method. But that did not worked with auto layout.
Searching on google I found that there is another property called layoutMargins.
So the question is what does layoutMargins and alignmentRect do ? Do they affect each other? Totally different things ?
layoutMargins determines how things inside of the view are positioned with auto layout. Usually this is used to keep objects a specific distance away from the edges of the view.
alignmentRectInsets is for telling objects outside of your custom view how they should align with it. For example, you might have a view with a wavy or angled top. Aligning other objects with the top of the view may not look quite right, so you might set an inset on the top alignment to compensate.
You probably care about the layoutMargins. I've never actually seen anyone use alignmentRectInsets.
I am building an iOS interface in Storyboard. I have a custom view named LevelsView which inherits from UIView, which I want to fill the lower half of the screen. This custom view is the child of a parent UIViewController/UIView.
The two following images might help illustrate, where the green area is the LevelsView:
As you can see, I've added a leading space and a trailing space constraint to the superview, in an attempt to make it match the width of the superview, and hence the screen. However, at runtime the width doesn't ever change - it's always the width as it appears in storyboard (600px). How can I make the LevelsView fluidly fill 100% of its superview?
Two further notes of which I'm not sure have any impact:
Although I'm building a custom UIView-derived view, the same problem occurs when I use a plain old UIView in its place.
I'm building this app in Swift, though I'm not aware of any bugs that affect IB.
I apologise if this has been answered elsewhere - I can't find anything but it seems like it should be a common question.