I have a standard view embedded inside a scroll view and I am using Auto Layout. All is working fine, and I am almost done with it. There is just one small problem. My content view has a fixed height of 536 points, so in an iPhone 6 it is fully displayed without the need of scrolling, while in an iPhone 4S I have to scroll to view additional content.
My problem is that the view is not horizontally centered is the iPhone 6 so it displays the extra space at the bottom (I filled it with grey color for clarity), as shown in the picture below (that is the underlying scroll view).
My question is: how can I horizontally center the content view without messing up the constraints? Currently the scroll view is pinned at the four borders of the view controller and the content view is pinned to the four borders of the scroll view.
I am glad to provide any other information you need to help me solve the problem.
EDIT: This is what it worked for me
CGFloat superViewHeight = self.view.bounds.size.height;
CGFloat scrollViewHeight = self.scrollView.bounds.size.height;
if (superViewHeight > scrollViewHeight)
self.topConstraint.constant += (superViewHeight - scrollViewHeight) / 4;
You should manually adjust top constraint if your content view doesn't need scrolling.
CGFloat scrollViewHeight = CGRectGetHeight(scrollView.bounds);
CGFloat contentViewHeight = CGRectGetHeight(contentView.bounds);
if (scrollViewHeight >= contentViewHeight)
{
topConstraint.constant += ((scrollViewHeight - contentViewHeight) / 2.f);
}
Related
All,
I have a scrollable InputAccessoryView attached to my UITextView.
This was created as follows:
create a UIScrollView
add a horizontal UIStackView.
Attach top, bottom, trailing, leading of stack view to scroll view.
Set equal heights between stack and scroll.
Insert lots of buttons into stack view.
set TextView.inputaccessoryview = scrollview.
Voila! (Note - only the last line was programmatic).
So this works fine and correctly scrolls when the content (stack view) is wider than keyboard, BUT when you rotate to landscape (or run on an iPad), it is left aligned.
I'd like the buttons to be centred when the keyboard is wider than the set of buttons.
I've tried embedding the Scrollview into a UIView with Center X, but that doesn't seem to work.
Can anyone give me some pointers?
Thx
Found it!
The answer is to use ContentInset on the scrollbar (which is the InputAccessoryView above). The specific code is:
public void CentreToolbar()
{
var offsetX = Math.Max((scrollView.Bounds.Width - scrollView.ContentSize.Width) / 2, 0);
scrollView.ContentInset = new UIEdgeInsets(0, (nfloat)offsetX, 0, 0);
}
This code should be called anytime the layout of the screen changes - such as during rotation.
I'm writing an app in Objective-C using Xcode 6 and iOS 8. The app needs to be able to be deployed on an iPhone 5, 6, or 6+.
If you want to get straight to answering my question, jump down to the last sentence. If you want to understand why I have the question I do, or maybe how I can alter my UI layout in order to solve my problem another way, read on.
In one of my view controllers, I have a scroll view whose top is constrained to the bottom of the navigation bar, and whose bottom is constrained to the top of a table view. The table view's bottom is constrained to the bottom of the view controller's main view (i.e. to the bottom of the phone).
The scroll view contains subviews that expand/contract when the user taps on them. I want the scroll view to grow as its subviews grow, but obviously I don't want the scroll view to grow off screen because it looks bad and because it would cause unsatisfiable constraints (the table view's top--which is constrained to the bottom of the scroll view--would cross below its bottom--which is constrained to the bottom of the main view...this causes an error). So, I use the following code to make the scroll view resize itself according to its subviews sizes without growing right off the screen:
// The max height before the scroll view would go off screen, which would
// mess up the table view's constraints and cause all sorts of problems
CGFloat maxHeight = self.view.size.height
- self.navigationController.navigationBar.frame.size.height
- [UIApplication sharedApplication].statusBarFrame.size.height;
// The height of all the subviews in the scroll view.
CGFloat height = _scrollContentView.frame.size.height;
if (height > maxHeight) {
height = maxHeight;
}
self.scrollViewHeightConstraint.constant = height;
Now for the fun part. Originally, I called this code to re-evaluate and reset the size of the scroll view whenever I rotated the device from portrait to landscape, or vice versa. However, when I would rotate the phone from portrait to landscape, I was getting constraints errors. I determined that it was because I was calling this code after the rotation, when the main view's height was smaller, but the scroll view's height was still large (causing the table view's top to go below the bottom, etc. as I explained before). So, I just moved the code to be called before the rotation (I called the code in the viewWillTransitionWithSize:withTransitionCoordinator: method). This all makes sense so far.
However, now, the problem is that the navigation bar's height changes when the rotation occurs, but the viewWillTransitionWithSize:... method does not include any details on this change (it only gives the new size that the main view will be when rotation is completed, not the new size the navigation bar will be as well).
So, I need someway to determine the new size of the navigation bar before the device's orientation actually changes (just like I can determine the main view's new size before the device's orientation actually changes using the viewWillTransitionWithSize:... method).
Any ideas? TIA!
So, here's my work around in its simplest form:
/*
* This method gets called when the device is about to rotate.
*/
- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
{
// Set the scroll view's height to 0 to avoid constraints errors as described
// in the question.
self.scrollViewHeightConstraint.constant = 0;
}
/*
* At the point when this method gets called, the device rotation has finished altering
* the frames of the views in this view controller, but the layout has not finished
* so nothing has changed on screen.
*/
- (void)viewWillLayoutSubviews
{
// The max height before the scroll view would go off screen, which would mess up
// the table view's constraints and cause all sorts of problems
CGFloat maxHeight = self.view.size.height
- self.navigationController.navigationBar.frame.size.height
- [UIApplication sharedApplication].statusBarFrame.size.height;
// The height of all the subviews in the scroll view.
CGFloat height = _scrollContentView.frame.size.height;
if (height > maxHeight) {
height = maxHeight;
}
// Reset the scroll view's height to the appropriate height.
self.scrollViewHeightConstraint.constant = height;
[super viewWillLayoutSubviews];
}
I have a view that has a horizontally scrolling UIScrollView. I have 4 "pages" that I want to show in my scroll view. Can I layout a huge view in Interface Builder that I can scroll across? The problem I'm having while trying to do this is that to design a xib this large across horizontally, you must set the frame of the UIScrollView to be the devices horizontal width * 4. Therefore the frame >= the content size and my scroll view does not scroll. My workaround has been to place all the elements on each of the 4 pages programmatically and adding them to my UIScrollView with addSubView: What are my other options?
You keep the frame of scroll view as horizontal width only. You should make the content size as horizontal width * 4. Now set proper frame of the views which you want to put as subviews of that scroll view. Like first subview's frame should have origin.x = horizontal width * 0, second should have origin.x = horizontal width * 1, third should have origin.x = horizontal width * 2 and fourth should have origin.x = horizontal width * 3.
This will eliminate the need of putting subviews programatically.
Freeform your xib, design your view
I want to have a text title scroll above a text view, but can't find information on how to do it. I've been looking for days, but can't even figure out how to look for the info. I want the function to work like the Apple Notes app where the date text is positioned above the text entry location and scrolls off the screen with the text but is not editable.
I've tried placing labels above UITextView, but the label does not scroll with the textView. I have a sample Xcode project I'm work with, but not sure if it can be uploaded for others to see what I'm doing. I almost had success with the project, but the labels only scroll with the text in the landscape view, not the portrait view for some reason.
I've read Apple developer docs on TextViews and several other sources without finding any discussion on how to do this or examples to follow.
Can anyone point me in the right direction?
I'm sure there must be a better way to do this, but this is the only approach I've found to work after more than a week of trying to find a solution. If I can figure out how to upload the entire Xcode example project I will do that.
This is the explanation of the approach I found to work under iOS 6.1 and Xcode 4.5. I have only tired this on the iPhone 6.1 simulator.
After creating a full screen text view and placing a label at the top of the text view,
To get the label to scroll off screen with the editable text view you need to:
turn off autolayout in interface builder (uncheck Use Autolayout). (there appears to be a problem with autoLayout and scrollViews in iOS 6.x)
turn off the text view scrolling in interface builder (uncheck Scrolling Enabled)
set the text view content insets height (Top) to the label height
embed the text view and label in a scroll view.
set properties for the scroll view and text view to be able to access their properties
in viewDidAppear:animated:
a. set the scroll view content size height to 20 plus the greater of the screen view height or the text view content height plus the label height
b. set the text view delegate to self
-(void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
float screenHeight = self.view.bounds.size.height;
// set the scroll view content height to 20 plus the greater of the view height or the text view content size height plus the label height
screenHeight = MAX(screenHeight, self.textView.contentSize.height + 20);
self.scrollView.contentSize = CGSizeMake(self.view.bounds.size.width, 20 + screenHeight);
// set the text view delegate
self.textView.delegate = self;
}
set the text view height dynamically in textView delegate method textViewDidChange:
a. if the text view content height is greater than the view bounds height less the label height:
1. set the text view frame to the view bounds width and the text view content height plus the lable height
2. set the scroll view content height to the view bounds width and the text view bounds height plus the label height
// dynamically set the text view content size height
-(void) textViewDidChange:(UITextView *)textView {
if (self.textView.contentSize.height > self.view.bounds.size.height - 20) {
self.textView.frame = CGRectMake(0.0, 0.0, self.view.bounds.size.width, self.textView.contentSize.height + 20);
self.scrollView.contentSize = CGSizeMake(self.view.bounds.size.width, self.textView.bounds.size.height + 20);
}
}
set the struts and springs in interface builder
1. set the scroll view and text view struts for left, right and bottom
2. set the scroll view and text view springs for width and height
3. set the label struts for left, right and top
4. set the label spring for width
The same settings need to be made every time the view changes orientations.
There might be a way to do this by setting constraints in code under autolayout, but I barely understand constraints, much less setting them successfully in code.
Hope this helps someone else.
What you are looking for is called UIScrollView. Take a look at the Apple documentation here.
A good tutorial on UIScrollView can be found on the Ray Wenderlich site.
I have a UIView which I need to stretch to the width of a UIScrollView. The problem is the next:
I'd need to stretch that UIView (which is EGOTableViewPullRefresh, just a custom UIView). In the view initialization I put [_refreshHeaderView setAutoresizingMask:UIViewAutoresizingFlexibleWidth];. I tried:
-(void)scrollViewDidZoom:(UIScrollView *)scrollView {
NSLog(#"scrollViewDidZoom");
[_refreshHeaderView setFrame:CGRectMake(0.0f, 0.0f - webScroller.bounds.size.height, webScroller.frame.size.width, webScroller.bounds.size.height)];
}
But it just looks as the image. If I enter to a iOS designed page (such as Mobile Google), it looks ok:
How can I do that?
The size.width of a UIScrollView is width of the view on your device, not the width of the contents inside the scroll view (which would be scrollView.contentSize.width).
This means, if "your view" is outside the UIScrollView you do want the scroll view width, but if your view is inside the scroll view you need the content width.
Notice the bottom/Google screenshot you provided. Notice how there is no horizontal scrolling? In this case the scroll view contents size width is the same as the scroll view width so it works perfectly. The upper/stack overflow image does have a horizontal scroll bar though. So the content width of the scroll view is bigger than the scroll view width.
Short answer: Try setting your view to be the scrollView.contentSize.width, not scrollView.frame.size.width