I am using UIScrollView with paging enabled. My code is based on PageControl example.
Pages in UIScrollView stay close to each other. But I need to add some space between pages (like when you browsing photos in Camera Roll). Is there any way to add some horizontal indentation between pages?
Find the method loadScrollViewWithPage:(int)page in PhoneContentController.m and look at this line:
frame.origin.x = frame.size.width * page;
It is setting the x position of the content frame within the scrollView by the width of the content * the number of the page. So if you want to add a gutter between content you could do something like:
int xOffset = 20;
frame.origin.x = (frame.size.width * page) + xOffset;
You have to make the scrollView's frame wider so it extends by gap/2 pixels out to the left and right of the screen.
CGFloat gap = 20.0; //20 pixels spacing between pages
CGRect frame = self.view.frame;
frame.size.width += gap;
frame.origin.x -= gap/2;
scrollView.frame = frame;
You then add the content viewcontroller's like normal, centered and filling the screen, so make sure to properly offset them by gap/2 in loadScrollViewWithPage:
Edit: if you are targeting iOS 6 only, you could instead use a UIPageViewController with UIPageViewControllerTransitionStyleScroll and using the UIPageViewControllerOptionInterPageSpacingKey option.
Related
What is the best way to manually reproduce
contentMode = UIViewContentModeScaleAspectFit;
without using it?
I need to scale a UIImageView (inside a scroll view) to fit the aspect ratio. I need to know the new size of the image to draw overlays over it.
Recently, I needed to find the frame of the image inside an ImageView, to add touchable views over that image, this is how I did it:
-(void)calculateScaleAndContainerFrame{
if(!imageView || !image) return;
CGSize imageSize = image.size;
CGSize imageViewSize = imageView.frame.size;
float imageRatio = imageSize.width / imageSize.height;
float viewRatio = imageViewSize.width / imageViewSize.height;
if(imageRatio > viewRatio){
scale = imageSize.width / imageViewSize.width;
}else{
scale = imageSize.height / imageViewSize.height;
}
CGRect frame = CGRectZero;
frame.size = CGSizeMake(roundf(imageSize.width / scale), roundf(imageSize.height / scale));
frame.origin = CGPointMake((imageViewSize.width - frame.size.width) / 2.0, (imageViewSize.height - frame.size.height) / 2.0);
[container setFrame:frame];
}
I'm pretty sure you can use it as a guide, replacing the imageViewSize with the content size of your scroll view (or the view you want to put your image in).
Note 1: In my case, I needed to center the view vertically, if you don't, just set the y to 0 on the line where I set the frame origin. Same for x if you don't want to center the image horizontally.
Note 2: This is NOT, by any means, a code you can just plug in into your project and work, you'll probably have to read it, understand it, and then apply the method to your own project. I don't have time right now to modify it to your needs.
Note 3: With that code I managed to get a view perfectly over the image inside a image view that used that content mode, so it works.
I want to create a scrollView that works exactly like you pan/zoom an image in the Photo app:
-A landscape image is aspect fit on the portrait screen,
-You can zoom into the image,
-If you rotate the device zoomed (landscape), the image remains in the middle,
-And when you zoom back, the image is still aspect fit in the new landscape screen (streched full screen).
So I need aspect fit, and zooming features at once.
I have implemented a solution, where I layout the scrollView's content "by hand" in layouSubviews to have the aspect fit, but that disturbs zooming behaviour.
Is there a neat UIKit way to handle this?
Or I have to create my own implementation here?
You need to enable zooming (and set the min and max zoom scale) and then implement scrollViewDidZoom. Here's some sample code to get you started that handles centering the image. You can tweak it to do the other parts:
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
CGSize boundsSize = scrollView.bounds.size;
CGRect frameToCenter = imageView.frame;
// center horizontally
if (frameToCenter.size.width < boundsSize.width)
frameToCenter.origin.x = (boundsSize.width - frameToCenter.size.width) / 2;
else
frameToCenter.origin.x = 0;
// center vertically
if (frameToCenter.size.height < boundsSize.height)
frameToCenter.origin.y = (boundsSize.height - frameToCenter.size.height) / 2;
else
frameToCenter.origin.y = 0;
imageView.frame = frameToCenter;
}
Note: this code assumes you keep a reference to the UIImageView (imageView in this example) in your UIScrollView.
I am loading in images with varying sizes and putting them in UIScrollViews, all the images are larger than the UIScrollView.
The user can scroll and zoom as they please, but initially I would like for the image
to be centered and scaled so the largest side of the image aligns with the edge of the scrollView, i.e. if the picture is in landscape I would like to size and scale it so that the left and right side goes all the way to the edge of the UIScrollVIew and vice versa
I found a formula in a utility function in the Programming guide but it does not quite fit my needs.
My approach is to use:
CGrect initialPos = ?
[self.scrollView zoomToRect:initialPos animated:YES];
I know the size of my scrollView and the size of my image, what I need to figure out is the scale and CGRect to apply to the scrollView to center and size my image.
Hope someone can help out:) Thanks
Edit: previous version was sizing the image to the view rather than the other way around. I think this should correct that:
double imgRatio = imageSize.width / imageSize.height;
double viewRatio = viewSize.width / viewSize.height;
if ( imgRatio >= viewRatio )
{
initialPos.size.width = imageSize.width;
initialPos.size.height = imageSize.width / viewRatio;
initialPos.origin.x = 0;
initialPos.origin.y = (imageSize.height - initialPos.size.height) / 2;
}
else
{
initialPos.size.height = imageSize.height;
initialPos.size.width = imageSize.height * viewRatio;
initialPos.origin.y = 0;
initialPos.origin.x = (imageSize.width - initialPos.size.width) / 2;
}
When somebody does a wipe gesture to scroll the content from left to right, I would like to have a background image scrolling into the same direction, but at a different speed. Much like what these classic games did do 20 years ago (remember that, anybody????)
I accomplished this by using two UIScrollView instances. The first is where the actual content is displayed, and the second (which is behind the first in z-order) is where I have my slower-moving background. From there the top UIScrollView has a delegate attached to it that gets notified when the contentOffset changes. That delegate, in turn, programatically sets the contentOffset of the background scroller, multiplied against a constant to slow the scroll down relative to the foreground. So, for instance, you might have something like:
// Defined as part of the delegate for the foreground UIScrollView
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
UIScrollView* scroll_view(static_cast<UIScrollView*>(bkg_scroller_m.view));
CGPoint offset(scrollView.contentOffset);
offset.x = offset.x / 3;
offset.y = offset.y / 3;
// Scroll the background scroll view by some smaller offset
scroll_view.contentOffset = offset;
}
You can easily do this by implementing scroll view did scroll with a UIImageView under it...
You'll end up with something like this... with the backgroundImageView being a UIImageView added to the view before the subview... you can layer as much image views as you want without performance issues
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
float factor = scrollView.contentOffset.x / (scrollView.contentSize.width - 320);
if (factor < 0) factor = 0;
if (factor > 1) factor = 1;
CGRect frame = backgroundImageView.frame;
frame.origin.x = factor * (320 - backgroundImageView.frame.size.width);
backgroundImageView.frame = frame;
}
You can do it with CoreAnimation. You'll want to hook into the scrollViewDidEndDragging:willDecelerate: and scrollViewWillBeginDecelerating: UIScrollViewDelegate methods. Then begin an Animation on your image by changing the center position. See this SO article for more on animations.
For example you have multiple scrollviews, want them scroll difference speed. here is the modification code base on Salamatizm answer:
CGSize screenSize = [[UIScreen mainScreen] bounds].size;
float factor = scrollView.contentOffset.x / (scrollView.contentSize.width - screenSize.width);
if (factor < 0) factor = 0;
if (factor > 1) factor = 1;
CGSize parralaxSize = self.parralaxBackgroundView.contentSize;
CGPoint parallaxOffset = CGPointMake(-(factor * (screenSize.width - parralaxSize.width)), 0);
[self.parralaxBackgroundView setContentOffset:parallaxOffset animated:NO];
I have a Uitextview that is populated with a text file. I have a control on the page that allows the user to enable and disable paging. I am having a problem where the top and/or bottom line of the text is sometimes "split in half" so you can only see the top or bottom half of the line. I believe the code below should fix it. The code gets the line height of the text and the frame height, figures out the number of lines that are visible on the screen, and creates a new frame height so it will fit. While the frame does get resized, it still "cuts off" the top and/or bottom line. Anyone one have any suggestions? Is my math wrong?
Thanks!!!
- (void)fitText
{
CGFloat maximumLabelHeight = 338;
CGFloat minimumLabelHeight = 280;
CGSize lineSize = [theUiTextView.text sizeWithFont:theUiTextView.font];
CGFloat lineSizeHeight = lineSize.height;
CGFloat theNumberOfLinesThatShow = theUiTextView.frame.size.height/lineSize.height;
//adjust the label the the new height
theNumberOfLinesThatShow = round(theNumberOfLinesThatShow);
CGFloat theNewHeight = lineSizeHeight * theNumberOfLinesThatShow;
if (theNewHeight > maximumLabelHeight)
{
theNumberOfLinesThatShow = theNumberOfLinesThatShow - 1;
theNewHeight = lineSizeHeight * theNumberOfLinesThatShow;
}
if (theNewHeight < minimumLabelHeight)
{
theNumberOfLinesThatShow = theNumberOfLinesThatShow + 1;
theNewHeight = lineSizeHeight * theNumberOfLinesThatShow;
}
//adjust the label the the new height.
CGRect newFrame = theUiTextView.frame;
newFrame.size.height = theNewHeight;
theUiTextView.frame = newFrame;
}
UIScrollView (and UITextView is a UIScrollView) seems to use a fixed 8-pixel inset on both sides. This seems to be independent of alignment or font size.
So, I think what you're missing here is the fudge factor of 16.0 - see this question.