Controller in ScrollView extending too far - ios

I'm building a Login Flow with a UIScrollView but I can't figure out why my first view controller (step1VC) is extending further than the screen size. Here are screenshots of the first and second view controllers.
Looks fine on an iPhone 5, but not 6/6 Plus
Code
- (void)viewDidLoad {
[super viewDidLoad];
// Set up Content
CGSize screenSize = [UIScreen mainScreen].bounds.size;
self.contentScrollView.translatesAutoresizingMaskIntoConstraints = NO;
self.contentScrollView.contentSize = CGSizeMake(screenSize.width * 3, screenSize.height);
self.step1VC = [self.storyboard instantiateViewControllerWithIdentifier:#"LoginStep1ViewController"];
[self addChildViewController:self.step1VC];
[self.contentScrollView addSubview:self.step1VC.view];
[self.step1VC didMoveToParentViewController:self];
self.step2VC = [self.storyboard instantiateViewControllerWithIdentifier:#"LoginStep2ViewController"];
self.step2VC.view.x = screenSize.width;
[self addChildViewController:self.step2VC];
[self.contentScrollView addSubview:self.step2VC.view];
[self.step2VC didMoveToParentViewController:self];
self.step3VC = [self.storyboard instantiateViewControllerWithIdentifier:#"LoginStep3ViewController"];
self.step3VC.view.x = screenSize.width * 2;
[self addChildViewController:self.step3VC];
[self.contentScrollView addSubview:self.step3VC.view];
[self.step3VC didMoveToParentViewController:self];
}

You haven't set constraints to views, add constraints to them, for example to make tagline center and full width, pin tagLine label to left and right of superView, same with title and button.
For title and button you can set there width and height and then can pin them horizontallyCeneter in super view.
And if you are using AutoLayout constraints with scrollView then you should know auto layout works bit differently with UIScrollView you can check this answer for this question and apple docs for more details
Tip: Add width constraint to stepVcs.View and set its value to scrollView.frame.width

Related

how to set sliding tabbar y position little bit sown

https://github.com/EuanChan/XSlidableTabController
From there i download one demo sliding Tabbar but in this demo i want tabbar position little bit down because i want set one image, label and back button top of page but i can't able to find to set tabbar position ,
and i hide navigation bar its automatically on set top i want to little bit down
-(void)viewWillAppear:(BOOL)animated {
self.navigationController.navigationBarHidden = YES;
}
BUT i want to set image top of tabbar
please Help me , please share your valuable knowledge
Just change the baseY value in viewWillLayoutSubviews method in XSlidableTabController.m.
- (void)viewWillLayoutSubviews
{
[super viewWillLayoutSubviews];
CGFloat baseY = 60.0f, width = self.view.frame.size.width;
CGRect rtTabMenu = CGRectMake(0, baseY, width, _tabHeight);
[_tabView setFrame:rtTabMenu];
baseY += rtTabMenu.size.height;
CGRect rtContent = CGRectMake(0, baseY, width, self.view.frame.size.height - baseY);
[_scrollView setFrame:rtContent];
CGSize szScrollContent = _scrollView.contentSize;
szScrollContent.height = rtContent.size.height;
[_scrollView setContentSize:szScrollContent];
}
Follow below steps.
open XSlidableTabController.m
go to - (void)viewWillLayoutSubviews method
add below code at last
// change 20 to any other what ever you want.
[_tabView setFrame:CGRectMake(0, 20, self.view.frame.size.width, _tabHeight)];
[self.view bringSubviewToFront:_tabView];
Maybe this will help you.

Simple test app with scroll, content and image views - has problems with device rotation and zoom

In Xcode 5.1 I have created a very simple single view app for iPhone and put the source code at GitHub:
I have disabled Autolayout and put the following views in each other: scrollView -> contentView -> imageView (here fullscreen):
For the contentView and imageView I've disabled Autoresizing and set their frames to {0, 0, 1000, 1000} - both in the Storyboard and in the viewDidLoad method.
I have enabled double tap and pinch gestures for zooming.
For double tap the image is zoomed at 100% or 50% width.
This works initially, but after device rotation it breaks:
The zoom doesn't work properly and the image is offset - you can't scroll to its top left corner:
Here is my very short code in ViewController.m, please advice how to fix it:
- (void)viewDidLoad
{
[super viewDidLoad];
_imageView.frame = CGRectMake(0, 0, 1000, 1000);
_contentView.frame = CGRectMake(0, 0, 1000, 1000);
}
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
float scale = _scrollView.frame.size.width / 1000;
_scrollView.minimumZoomScale = scale;
_scrollView.maximumZoomScale = 2 * scale;
_scrollView.zoomScale = 2 * scale;
_scrollView.contentSize = CGSizeMake(1000, 1000);
}
- (UIView*)viewForZoomingInScrollView:(UIScrollView*)scrollView
{
return _contentView;
}
- (IBAction)scrollViewDoubleTapped:(UITapGestureRecognizer*)sender
{
if (_scrollView.zoomScale < _scrollView.maximumZoomScale)
[_scrollView setZoomScale:_scrollView.maximumZoomScale animated:YES];
else
[_scrollView setZoomScale:_scrollView.minimumZoomScale animated:YES];
}
UPDATE: I've tried using Reveal app (here fullscreen), but couldn't find anything useful for me:
My source code seems to be okay, but in Interface Builder I had to disable "Autoresize Subviews" for the scrollView:

Shift frame inside UIPopoverController

My universal app uses NIBs for its settings screens. I'd like to use the same NIBs for both iPhone and iPad.
Thus on iPad, I use a UIPopoverController in the MainViewController and for settings, simply display the iPhone-sized NIBs, to show what is called the SettingsViewController. The popover is sized 320x460 points.
This causes a problem, because the iPhone version draws a number of things above the status bar programmatically, and for the iPad version this is not necessary. Current situation on iPad:
As you can see, there's a big empty space above the "Settings" title. Thus what I want, is to shift the view controller up about 20 points, inside the popover:
The popover is instantiated as follows in the MainViewController:
settingsPopoverController = [[UIPopoverController alloc] initWithContentViewController:popoverNavigationController];
settingsPopoverController.popoverContentSize = CGSizeMake(320, 460);
settingsPopoverController.delegate = self;
popoverNavigationController.navigationBarHidden = YES;
In the SettingsViewController, I set the frame as follows:
- (void)viewDidLoad
{
self.contentSizeForViewInPopover = CGSizeMake(320, 460);
}
And later in the SettingsViewController, I try to create an offset as follows:
- (void)viewWillLayoutSubviews
{
// shift it up
CGRect frame = self.view.frame;
frame.origin.y = -20;
[self.view setFrame:frame];
}
This does not shift the content up a bit. How to go about?
To clarify: I want to move down the "viewport" that the popover shows.
Try to:
myPopover.autoresizingMask=UIViewAutoresizingNone;
Or:
myPopover.autoresizingMask=UIViewAutoresizingFlexibleHeight || UIViewAutoresizingFlexibleWidth;
You can also try to put your code in -(void)viewDidLayoutSubviews method.
If this answers did not help, try set popoverLayoutMargins (property) instead of setFrame: for example:
popover.popoverLayoutMargins=UIEdgeInsetsMake (
CGFloat 50, //top
CGFloat 50,//left
CGFloat 50,//bottom
CGFloat 50//right
);

UIScrollView - content goes out bound when scrolling

I design the scrollview in interface builder like this
It looks good here. But unfortunately when I run it on emulator or device
it becomes
The content in scrollview is expand outside scrollview itself and even though outside UIView that contains this scrollView.
In my viewDidLoad (panel is the container of scrollView )
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
CGFloat adjustPanelHeight = [PTTScreenScaleUtil getAdjustHeight:self.panel.frame.size.height];
CGRect panelRect = self.panel.frame;
panelRect.size.height = adjustPanelHeight;
self.panel.frame = panelRect;
UIImage *image = [UIImage imageNamed:#"panel-background"];
UIGraphicsBeginImageContext(self.panel.frame.size);
[image drawInRect:CGRectMake(0, 0, self.panel.frame.size.width, adjustPanelHeight)];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[self.panel setBackgroundColor:[UIColor colorWithPatternImage:newImage]];
NSLog(#"scrollView Height : %f", self.scrollView.frame.size.height);
NSLog(#"scrollView contentSize Height : %f", self.scrollView.contentSize.height);
// CGRect scrollViewRect = self.scrollView.frame;
// CGRect scrollViewContentRect = self.scrollView.frame;
// NSLog(#"ScrollView Height Before : %f , After : %f", self.scrollView.frame.size.height, [PTTScreenScaleUtil getAdjustHeight:self.scrollView.frame.size.height]);
// scrollViewRect.size.width = 280;
// scrollViewRect.size.height = [PTTScreenScaleUtil getAdjustHeight:270];
// self.scrollView.frame = scrollViewRect;
// [self.detailsLabel sizeToFit];
UIView *view = [[self.scrollView subviews] objectAtIndex:0];
// [view sizeToFit];
// [self.scrollView setContentMode:UIViewContentModeScaleAspectFit];
// NSLog(#"ContentSize Height : %f", view.frame.size.height);
// scrollViewContentRect.size.height = view.frame.size.height;
NSLog(#"Bounds : %f", view.bounds.size.height);
self.scrollView.frame = CGRectMake(10, 10, 280, 270);
self.scrollView.contentSize = CGSizeMake(280, 500);
NSLog(#"Frame Height %f", self.scrollView.frame.size.height);
//[self.scrollView setContentSize: CGSizeMake(280, 1000)];
CGRect termBtnRect = self.termBtn.frame;
CGRect mailBtnRect = self.mailBtn.frame;
CGRect twitterBtnRect = self.twitterBtn.frame;
CGRect fbBtnRect = self.fbBtn.frame;
termBtnRect.origin.y = adjustPanelHeight - 10 - termBtnRect.size.height;
mailBtnRect.origin.y = adjustPanelHeight - 10 - termBtnRect.size.height;
twitterBtnRect.origin.y = adjustPanelHeight - 10 - termBtnRect.size.height;
fbBtnRect.origin.y = adjustPanelHeight - 10 - termBtnRect.size.height;
self.termBtn.frame = termBtnRect;
self.mailBtn.frame = mailBtnRect;
self.twitterBtn.frame = twitterBtnRect;
self.fbBtn.frame = fbBtnRect;
}
All the log return 270.0
PS. the scroll bar is correct even though the content goes outside but the scroll bar is working correctly (stay in the scrollview's frame as arrange in interface builder)
I have no idea how can I solve this.
Anyone help me please.
Thanks you.
Solve it by creating new view controller in interface builder and redo the same process with careful and bingo. It works.
When I compare both two view controller I realise that the wrong one UIScrollView Clip Subviews is unchecked. When check it the problem solve.
I just struggled with this for an hour and had a head smack moment.
In my case, I had a UIView on the scene in the Storyboard. At some point I decided I needed it to be a UIScrollView instead (as opposed to the original plan which was to embed the UIScrollView in a UIView)
I went ahead and changed the class on the UIView to UIScrollView. IB changed it to Scroll View in the Document Outline, I figure I'm good, right?
And then I see the behavior you describe.
At some point it hits me that this isn't sufficient. Apparently adding a UIScrollView via IB does some things differently than adding a UIView and just changing class isn't enough. And this is probably the reason re-doing it from scratch fixed it for you.
So for anyone who runs into this in the future, make sure you added the UIScrollView via IB instead of a UIView
I was having the same problem as described in this post. I tried multiple combinations of solutions that did not work, including:
putting the scroll view inside a view with Clip To Bounds = YES
putting a view inside the scroll view with Clip To Bounds = YES, that then contained my child view
putting a Container View inside the scroll view, and then embedding my subview
rebuilding the Interface Builder files completely
every combination of autosizing mask options systematcially for both the scroll view and container view
clip to bounds enabled or disabled for every single element systematically
The child view in question had previously worked inside a scroll view, but wouldn't in this one case where the content blew outside the bounds of the scroll view.
In the end, I implemented the solution in code as I could find no way to get Interface Builder to co-operate:
// There are two scroll areas on the screen, the left view and the right view.
// We want the right view to contain a scrollable area with another child view controller
// we designed in Interface Builder.
// create a scroll view to fill the right view with a scrollable area
CGSize rightFrameSize = self.rightView.bounds.size;
scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake (0, 0, rightFrameSize.width, rightFrameSize.height)];
scrollView.contentSize = CGSizeMake(640, 1352);
[self.rightView addSubview:scrollView];
// now create our child view controller from Interface Builder and add it to the scroll view
UIStoryboard *sb = [UIStoryboard storyboardWithName:#"CustomerAddress" bundle:[NSBundle mainBundle]];
detailsView = [sb instantiateViewControllerWithIdentifier:#"CustomerDetailsView"];
detailsView.delegate = self;
detailsView.customer = _customer;
[scrollView addSubview:detailsView.view];
You could of course get the scrollView.contentSize from the child view controller you constructed in Interface Builder using scrollView.contentSize = detailsView.view.frame.size.
I have a love/hate relationship with Interface Builder... most days I love it, but some days we argue and I wish we'd never met... :)
only make cliptobound=YES in storyboard if you changed UIView to UIScrollView

How to do a custom layout of a UIView so it works with both iPhone 5 screen dimensions as well as regular screen dimensions

Here is the desired outcome. The blue area is the UIView of interest. The UIView is not a UIImageView.
I've tried all sorts of arrangements with auto-resizing masks to no avail
This can only be done programmatically. One option is what #user2223761 suggests with subclassing. If you don't want to subclass UIView, then you need to set the frames on orientation changes and set yourView.center to be the center of the center.
- (void) willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration {
if (UIInterfaceOrientationIsLandscape(interfaceOrientation)) {
// Make sure that the frame is centered in the screen
NSInteger paddingLeftSide = (self.view.bounds.size.width - 480) / 2;
self.view.frame = CGRectMake(paddingLeftSide, 0, 480, 320);
} else {
self.view.frame = CGRectMake(0, 0, 320, 320);
}
}
Dealing with different screen sizes can be tricky. In your case it is not :)
since you want to center the view in the screen what ever size it is, all you need to do is set the center of the view to be the center of the screen.
CGRect screenBounds = [[UIScreen mainScreen] bounds];
view.center = CGPointMake(screenBounds.size.width/2,screenBounds.size.height/2);
This code assumes the view's superView's bounds is the same size as the screenBounds..
First: Subclass UIView (create a MYUIView).
Second: override the method
- (void)layoutSubviews {
[super layoutSubviews];
// .. put your code...
}
and perform the frame update manually inside that method by reading the screen size.
auto-resize mask must be set to UIViewAutoresizingNone.

Resources