UIImageViews Jump around when a label changes - Xcode - objective-c

I have falling UIImageViews falling on the screen and going back to the top in my game. I have another two image views on the bottom of the screen that their images change every so often. When those two bottom images change, the falling UIImageViews jump around the screen to their original position of when the game app opens, then they fall again. The same thing happens when the score label changes.
I have constraints on almost everything so im thinking that might have something to do with it but I don't know why.
Thank you very much for your help

OK so I'm sure you're aware of layout constraints and the NSLayoutConstraint class. (If not read this). Basically Apple uses these classes which are represented in the IB to position and resize subviews e.t.c.
Because of this you need to adjust the layout constraints of any view you want to move. To animate a UIView it used to be a case of changing the frame property and then getting the superview to redraw it's subviews; however, now you need to change the constant property of a view's layout constraints and then call layoutIfNeeded on the superview like so:
myImageViewConstraint.constant += 100;
[UIView animateWithDuration:1 animations:^{
[superview layoutIfNeeded];
}];
Then because you have changed the constraint, the view won't jump around.
Note: you should research this before jumping on Stack Overflow because this is readily available in the Apple Developer Resources.

Related

UIButtons titleLabel clips Text after being rotated by CGAffineTransformMakeRotate()

I am developing a iOS-6 app. I have a UIViewController with a view that needs fixed orientation (portrait mode). But when the phone is rotated, one control on that view needs to be moved and rotated (so that it will always be in the upper left corner, and its text will be readable).
I am achieving this by shifting the control(a UIView) using the frame-property of my control (it is a custom view, more on that later), and then using CGAffineTRansformMakeRotate() afterwards, since I know that it's not advisable to use the frame after rotating a view. Everything is fine so far, but here's the thing: That custom view has three UIButtons of type UIButtonTypeCustom as its subviews. Because I rotated the View, but cannot rotate the buttons inside the view (they are not squares), I need to rotate the titleLabels of the Buttons for the text to be readable in the new deviceOrientation.
But it won't work very well. The text will be rotated, as I intended, but it will be clipped by the titleLabel, because the titleLabel has the wrong frame. I checked this by applying borders to the label. So I need to change the titleLabels frame, right? But how can I do that? I tried setting it using [titleLabel setFrame: frameThatFits];, but to no avail. (frameThatFits is a CGRect I created). Also, calling [button.titleLabel sizeToFit]; has no effect that I could see.
I am using [button setTitle:title forControlState: UIControlStateNormal];to set the title.
TL;DR: I'm trying to change the frame/bounds of a UIButtons titleLabel after rotating it using an affine transformation. Any help?
Thanks.
PS: I can supply code when needed, but I wouldn't know what to show you. Tell me what you need, I'll post it.
OK, first of all, thanks to everyone who tried to help. Im posting an alternative solution for my problem, and although it doesnt really address the problem of changing the titleLabels dimensions, it will result in the proper display of my ViewController.
It turns out using the frame is a bad idea. I initially used the frame to reposition the view and i figured that this couldnt be a problem because i only ever applied transformations afterwards, but i was wrong. Because OBVIOUSLY i tried to change the titleLabels frame. AFTER the rotation. And that didnt work.
So the way to go here is using the center-property and the bouds of the view consistently throughout the code. It will result in properly rotated Buttons, that do not need any fidgeting afterwards.
My takeaway here is that i will never ever again use the frame-property outside of a NSLog-statement. But why [button sizeToFit];wouldnt yield any results is still beyond me. If i ever figure it out, i might post it if i remember.
EDIT:
#ZevEisenberg nailed it with this comment:
“Warning: If the transform property is not the identity transform, the value of this property is undefined and therefore should be ignored.” So you are right to use the center and bounds here, but if you do not have a transform, the frame is perfectly safe to use.
NEXT EDIT:
Heres how i ended up repositioning the Buttons:
-(CGPoint)centerForView:(UIView *)view{
//calculate a suitableposition for the view
//depending on the current orientation and the device type (iphone 4S/5, etc)
return point;
}
Then, as a reaction to the deviceOrientation change notification, i apply CGAffineTransformIdentity to all the views, reposition them using my centerForView shown above, and apply the correct rotation transformation to the View. I do this for all the subviews every time the divice rotates, like so:
-(void)setRightRotationTransformations{
[self resetAllTransformations];
self.someSubview.transform = CGAffineTransformRotate(self.someSubview.transform, -M_PI_2);
}
In my case works such hack:
set Line Break mode to Word Wrap
Add extra line to title (even for one line title)

Storyboard editor layout confusion

I am having layout problems with the storyboard editor with a fairly simple screen. I have a UIViewController to which I have added a 320x440 UIScrollView at 0,0 followed by a 320x20 UIProgressBar at 0,440. It looks fine in Storyboard editor. I'm not entirely sure how the 20 pixel status bar at the top of the screen is accommodated given the CGRect frame coordinates that Storyboard calculates.
On loading ( in -(void)viewDidLoad ), the UIScrollView frame seems to be set to 320x460 pixels at 0,0 but the UIProgressBar is still 320x20 at 0,440.
When I add subviews to the UIScrollView, (UIImageViews in particular), they get stretched and get clipped on the screen because although the UIScrollView thinks it is 460 pixels high, it only has 440 pixels of screen to display in.
Can anyone point me to a solution?
Thanks
OK - I have identified what was going on - there were a number of issues, nearly all to do with mutually incompatible settings in storyboard attributes on various view controllers.
In summary, the main view controller containing the UIScrollView had the 'wants full screen' checkbox ticked - goodness knows how, but it appears that I had then gone through other views trying to compensate for that initial error by clipping, resizing, setting layout constraints etc. which resulted in rather confusing outcomes.
My advice would be to not touch ANYTHING in storyboard editor unless you know what it's effect will be - it is a dangerous place. I found the issue by going back to basics and creating a trivially simple replication of my app and then observing the differences between that app and my own. Sorry if I wasted anybody's time researching an answer.
Thanks

What is the best way to create a composite scrollable view on iOS

I need to create a scrollable composite view on iOS. That is to say, the view will contain at least one image, possibly a button, and some text (that we may wish to format with bold fonts, etc). The amount of data, and particularly the amount of text, is variable, from maybe 4 lines to maybe 100. The data is "variable" to a degree, and in particular the image and text do not come joined at the hip.
This all needs to fit in a "pane" of about 280h x 115w pixels in a portrait-only layout.
A single UITextView doesn't provide the facilities to display an image or format the text.
A UIWebView provides the ability to display the image and formatted text, but the button is a problem (not even sure if it's doable).
A UIScrollView would easily allow the image and button, and then a UIWebView could be embedded in the scroll view for the text, but then scrolling becomes a problem -- I'd like the entire view to scroll as one, without having to resize the web view to contain it's content, and without the confusion of a scrollable within a scrollable (the doc warns of "unexpected behavior").
(I'm guessing your thoughts at this point are that I want too much.)
So, any suggestions? What's the best way to get close to what I need here?
In iOS5 the UIWebView has a scrollView property, which is a normal UIScrollView. You should be able to add a UIButton as a subview of the scrollView to achieve what you want, although positioning it correctly may be a challenge. Prior to iOS5 you could cycle through the subviews of the UIWebView to find the UIScrollView with isKindOfClass...
I suggest testing with a UIWebView inside your UIScrollView. I don't see any interference in the iOS 5.0 simulator. I don't know if there are problems in iOS 4.0.
If you find that there is interference, you can prevent it by setting the web view's userInteractionEnabled property to NO, either in the nib or in code. This will prevent the web view from receiving any touches, so the user also won't be able to pinch-zoom it, follow links in it, or copy text from it.
In the web view's delegate, implement webViewDidFinishLoad: to set the web view's size and the scroll view's contentSize. For example:
- (void)webViewDidFinishLoad:(UIWebView *)webView {
CGRect frame = self.webView.frame;
frame.size = [self.webView sizeThatFits:CGSizeMake(frame.size.width, HUGE_VALF)];
self.webView.frame = frame;
self.scrollView.contentSize = CGSizeMake(CGRectGetMaxX(frame), CGRectGetMaxY(frame));
}
When I did a similar thing, I had a dozen of views which I added to the UIScrollView and then calculated the frames of all the views. Granted, it was an extremely tedious work, given that some views could get hidden under various conditions. The layout code was actually pretty simple, laying out views from top to bottom, but ugly. The upshot is that it works like a charm, fast and reliably. You can even trivially wrap it in an animation block.

Prevent UIScrollView from moving contents to top-left

I have a UIImageView contained within a UIScrollView. The image is (usually) big, so the user can zoom it out in order to see the whole thing.
Upon zooming out, though, UIScrollView snaps the ImageView to the top-left of the scrollview. I want this to be positionable by the user, and haven't found a way to "turn it off" yet.
It's kinda like always allowing scrolling, rather then only allowing scrolling when the image is zoomed in. Maybe it's too major of a change?
Anyone know of a way? Originally, I was just going to create this functionality manually. But UIImageViews don't like to adjust to new sizes (I've tried about everything and can't get UIImageView to resize UNLESS I remove the picture from the imageView, change the frame, and re-add it).
I ended up disabling the UIScrollView's panGestureRecognizer and subbing in a custom one.
Here's a quick snippet on how to disable it:
// Disable our GestureRecognizer
for (UIGestureRecognizer *gesture in scrollView.gestureRecognizers){
if ([[NSString stringWithFormat:#"%#",[gesture class]] isEqualToString:#"UIScrollViewPanGestureRecognizer"]){
[gesture setEnabled:NO];
break;
}
}
A bit of a hack-job there, but it's due to the fact that UIScrollViews have changed the class of the GestureRecognizer to "UIScrollViewPanGestureRecognizer." The compiler will yell at you if you try to use that class (there's probably a better solution out there).
If you locate the UIImageView at location 0,0 in the UIScrollView, then that's always going to be the upper-left. If you want it to be centered in the scrollview when it's smaller than the view, you need to position it there. Check whether its -size is bigger or smaller than the scrollview's. If it's smaller than the scrollview, set its -center to be the same as the scrollview's.

How do you animate the resizing of a tableView without its rows/subviews getting clipped?

EDIT: I originally asked this question in regards to general view resizing, but I realize now that it's something much more specific to tableViews.
Say that a tableView originally has a frame of (0 0, 320 460), i.e., it fills an entire iPhone screen. In order to resize the tableView's height and animate the resize, I map the following code to a button:
[UIView beginAnimations:#"Animation" context:nil];
[UIView setAnimationDuration:3];
CGRect rect = self.table.bounds;
rect.size = CGSizeMake(320, 200);
self.table.bounds = rect;
self.table.center = CGPointMake(160, 100);
[UIView commitAnimations];
This code will animate the table's height down, BUT...before any animation happens, the table will clip off all of the table cells that won't fit in the new bounds. So, given a tableView that originally fits 10 rows, the animation code above will cause this sequence of events:
The tableView removes the bottom 5 rows immediately. Note that it only removes the rows - the tableView's background still extends to the bottom.
The tableView animates the height change for the rest of the table as expected.
This is not the behavior I am looking for. Instead of clipping the bottom 5 rows immediately, the tableView should keep its rows in place while the bottom edge of the table just animates upwards.
Based on the behavior I'm seeing, it seems that the tableView is getting some sort of message to refresh its rows immediately after it finds out that its bounds is going to change. Can someone shed some light on this behavior and how I could avoid it?
The bounds property of a view defines the internal coordinate space of the view. If you are changing the size and/or position of the view, you should only change the view's frame. Theoretically, the bounds property could define a totally arbitrary coordinate space disconnected from the view's enclosing frame and UIKit is seemingly designed to support that distinction. In practice I don't think I've ever seen it work that way in UIKit (the bounds.size is always the same as frame.size and bounds.origin is always {0,0}), but that's the distinction being made there and it's important to remember - especially if this behavior ever changes in the future.
I'm not certain that simply changing the code to modify the frame instead of the bounds will solve the issue, but I recommend starting there. If that doesn't solve it, then the problem is probably that the tableview is immediately removing the rows which will become invisible with the new frame, so if that's the case, it's possible that the only solution would be to do the animation yourself by setting up a simple NSTimer-driven routine that slowly changes the frames size/position over time thus creating the illusion you want in spite of the tableview's optimizations or interactions with Core Animation.
Did you try changing the bounds and center within the animation block.
I don't know about this specific case but ISTR having to do similar before. The relationship between frame, bounds and center can be frustrating at times.