AutoLayout Problems - ios6

I am struggling with Autolayout (using it for the first time in a new app).
Following situation:
Storyboard
iPad
Autolayout enabled
In one Popover I need to re-layout 8 buttons programmatically according to user-selection. This works fine until the moment where the buttons must be rotated by 180° (to be viewed upside down, which is an app feature).
As soon as I add the code for the rotation, the relayout does not work anymore.
I don't understand why I can change the position of the buttons (like Case 2), but then, when rotating it doesnt work anymore.
Case 1:
BUTTON 0 | BUTTON 1 | BUTTON 2 | BUTTON 3
BUTTON 4 | BUTTON 5 | BUTTON 6 | BUTTON 7
Case 2:
BUTTON 7 | BUTTON 6 | BUTTON 5 | BUTTON 4
BUTTON 3 | BUTTON 2 | BUTTON 1 | BUTTON 1
(all buttons rotated 180°, i.e. flipped upside down)
Once AutoLayout is switched off, it works like a charm.
The problem is that as soon as I turn off AutoLayout the rest of the App is completely screwed up.
It would be great if somebody could help me understand this problem.
The code is in viewDidAppear
for (UIButton *button in self.allButtons) {
if (button.tag == i) {
button.transform = CGAffineTransformMakeRotation(M_PI);
button.frame = CGRectMake((300 - (100 * currentButtonPosition)) + offsetWidthButton, offsetHeightButton, 100, 100);
NSLog(#"Button Tag Nr: %d\nFrame:\nX=%f\nY=%f\nW=%f\nH=%f",button.tag, button.frame.origin.x, button.frame.origin.y, button.frame.size.width, button.frame.size.height);
}
}
The frame coordinates for the buttons are all correct in the NSLog output. I guess somehow the button.transform screws up the .frame = CGRectMake part, but why I don't understand and am looking forward for your help or guidance where to continue to study the mysterious autoLayout.
Hope the explanation is understandable :-)
Thanks and have a nice day
Ronnie

If you're using autolayout you should be changing the constraints, not setting the button's frame.
This is a great starter on autolayout from Stanford: 8. Autolayout and Navigation (January 31, 2013)
Here's a good tutorial on using autolayout in Interface Builder.
Here's a few SO questions that show how to add constraints programmatically here, here and here.

Bug or unexpected behaviour is a bit improved in last Xcode version, but it is still messy. For example, you still can't switch off AutoLayout on one XIB independently without consequences, although the checkboxes on others are not changed when changed on single one.
What you want to do is following:
before switching off the AUto Layout, set frames according to constraints in all the views, delete all constraints within all the views in the application and then turn off auto layouts.
This is of course much less painful, of you have set constraints in IB and not programatically.
Auto Layouts are unfortunately still well behind expected functionality, they especially lacks in defining and recognizing intrinsic positions and even fas worse in automatically setting constraints. It's a vast area for improvements.

Related

Implement an auto-resizing mechanism of editors

I would like to implement a resizing mechanism for Editor 2:
The main purpose is to let the height of Editor 2 auto-resize so as to occupy the rest of the page after adding/removing Editor 1 and each resizing of the window.
In the beginning, there is only Editor 2 in the window. Click to toggle "Editor 1" allows to add or remove Editor 1.
The height of Editor 1 is implemented by calculateNextHeightFirst. It has minimum 3 rows, then is determined by the height of the content, but has maximum 10 rows.
After adding Editor 1, the resizing of Editor 2 needs to be triggered to occupy the rest of the page.
Resizing Editor 1 by adding or removing contents does not need to systematically trigger the resizing of Editor 2. It's especially the resizing of the window that triggers the resizing of Editor 2.
Here is my current code: https://stackblitz.com/edit/react-ts-5nkshr?file=EditorBasic.tsx,App.tsx,EditorPlus.tsx,index.html
The behaviour of the code satisfies my requirement described above. However, at least one thing I find not normal is, I need to manually set height: 72 as initial state of EditorPlus, which is same as the initial height of Editor 1 determined by calculateNextHeightFirst. Otherwise, after clicking Click to toggle "Editor 1", this.aRef.current.clientHeight would not be correctly set, thus the height of Editor 2 would not be well set.
Maybe I would need rare lifecycle methods such as getDerivedStateFromProps, does anyone confirm?
As this case involves event handlers, react Refs, React lifecycle, and editors, could anyone tell me if my code is properly implemented?
(* link in codereview: https://codereview.stackexchange.com/questions/282577 *)

Keeping a UILabel centered with changing contents and AutoLayout

I have 2 views. A MapKitView and a UILabel. Auto Layout is on.
I want the MKView to take up the whole screen (this seems to work fine) and the UILabel to remain the auto distance from the bottom of the screen but centered horizontally. The UILabel contents are changed programatically and afterwards I am calling sizeToFit.
After calling sizeToFit on the UILabel then it is no longer centered - the width seems to be adjusted only from the right hand side (trailing edge) keeping the left hand side in a constant position.
My understanding is that I should be able to achieve what I want only by setting the right constraints in IB?
The constraints I have applied to the label are:
Height Equals: 32
Width Equals: 166
Bottom Space to: Superview Equals: Default
Align Center X to: Map View
Only the last one, "Align Center X" is a user constraint - the rest being IB supplied.
I have tried a number of things, though none with much understanding (presumably my problem!).
I have called setTranslatesAutoresizingMaskIntoConstraints: NO on the label.
I have set the label's autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin. I have tried setting preferredMaxLayoutWidth to random values. Calling needsUpdateConstraints on the label. I tried putting the call to sizeToFit in viewDidLayoutSubviews.
I have come to the conclusion I need a little more understanding how I should be approaching this. Is sizeToFit not the thing to be calling when Auto Layout is on? Do I need to prod Auto Layout in some way after calling sizeToFit? I notice that rotating the simulator seems to center the label so prodding sounds a possibility?
I have re-read the Apple Auto Layout guide but I'm afraid I'm still not sure what I am doing wrong and the debugging tips suggested (visualizeConstraints etc) don't seem to work on iOS.
Thanks for any clue you can spare.
My idea about having to prod appears to be correct. After calling sizeToFit I needed to call [label.superview setNeedsLayout]. Whilst this works I'm not really sure why I need to do this manually rather than the label marking the layout as dirty when it's size changes.

UIToolbar at the bottom not working in Retina 4 simulator

I know it sounds a bit odd but perhaps someone has experienced the same too.
If I have a UIToolbar placed at the bottom of a Retina 4 sized xib (548 size) it does not work in the simulator (buttons show no reaction). However if I place it a bit higher (not sure where the threshold is) they work again. ???
My problematic xib looks like this:
As mentioned elsewhere (e.g. iPhone 5 (4") bottom toolbar not responding ) the problem is that even though your view is the full height, the underlying UIWindow isn't, and the underlying UIWindow is involved in your view getting touch events.
If you have a file name something like "MainWindow.xib" in your project:
Open it in Interface Builder.
Select "Window" from the list of objects on the left side.
In the Attributes Inspector pane, click the "Full Screen at Launch" checkbox.
UI elements at the bottom of the screen should now work.
I found the problem being the UIWindow. (perhaps it is only a problem with older projects) As long as the window object it set to the 480 size actions falling out of its size (which can happen on Retina 4) are not recognized.

How do I remove the border of a WPF window in the Design view/tab?

I am trying to remove the border of my WPF window in the design view/tab in Visual Studio. Please don't mistake this as a request to create a border less WPF window. I did that and it is working fine. What bothers me is that even if you have set WindowStyle = None, ResizeMode = NoResize, the design view/tab still shows a border around your window in the preview.
Is there a way to remove said border and have a 1:1 preview of the border less window as in Windows Forms?
Every question I have found in regards to this only asks how to remove the border of the actual application. I would like to remove it in the preview.
Any help would be very much appreciated :)
here is a screenshot of my problem:
This cannot be done as this is just how Visual Studio renders a window in design view (I think the frame is probably there so that you can distinguish when you are editing a Window rather than a UserControl).
Rather than try and find a solution to this I would ask myself if this is something I need to be spending time figuring out - after all you say that your program works correctly when being run. I think your time will be better spent writing code for your program rather than trying to play with the design time environment.
Update: In response to you comment, consider that the window frame will be different on every users machine depending on their operating system version (XP vs. Win7) or the theme the user has installed.
My computer has XP installed so the side borders are a lot thinner than those shown in design time so any content will be smaller (but only my a few pixels - 4 in my case; does your user interface design really depend on 4 pixels?).
When using a technology such as WPF you should not be designing your UI to fit to exact pixel sizes; you should be designing with min / max values or using layout containers that adjust to the size of the window as set by the user. Any regions in your UI (E.G. sidebar and main content) should be expressed as a ratio or percentage of one another; instead of saying "The side bar is 150 pixels wide and the main content area is 350 pixels wide" you should be saying "The side bar takes up a third of the window width and the main content takes two thirds".
Although the question is very old and have already been answered (kind of), I just realized: if you set WindowStyle="None", your undesired border is gone.

visual studio grid snap to edge spacing

I'm designing a form in VS2008 and I want to snap controls to the left and right edges of the form but with more space than it gets now.
I tried changing the gridsize but that doesn't do it.
The form is for the compact framework so i'm designing for a smartphone I don't know if that makes a difference. I guess it ought to be the same setting.
Is there a setting somewhere that holds the space between the control and form edge?
The form's Padding property has a somewhat mysterious effect on the snap location. Setting Padding.Left to 1 makes it snap to X=4, 2 to 5 etc. No idea how well that reproduces but might be good enough for what you're trying to do. Directly editing the Location.X property would certainly work too.

Resources