After 2 days behind the implementation of a UIScrollView, I give up to do it by myself, despite It should be simple but I am not able to make it.
I need a vertical scrollview with Autolayout (I have 2 backgrounds images that need to scale), I have Xcode 7.2, iOs deployment target 9.0 and I am using the storyboard
The scrollview is a "new account" form with a lot of content, So it can have a fixed height
I tried lots of options but no one of them work, at the momment I have a scrollview with a "content view" with all of the components.
Problems:
1.- How can I put more content in the scrollview? If I try to put more compoments(more than the height of ViewControler), it automatically moves my components to be inside the ViewController rectangle
2.- How I can make it scrollable? If I pin the content view to the top, bottom, left, right and make it with fixed height (like 1000) it doesn't scroll
Any help would be appreciated
Scrollview will scroll until the end of last UI object. But this is not the default behaviour of the scrollview. You should explicitly set the contentSize on your scrollview. Check below example.
-(void)addImage {
int count = 20;
UIScrollView * scView = [[UIScrollView alloc] init];
scView.frame = CGRectMake(30, 60, self.view.frame.size.width, 60);
UIButton * btn;
UIImageView * imgV;
float imgWidth = 44;
for(int i=0;i<count;i++) {
imgV = [[UIImageView alloc] init];
imgV.frame = CGRectMake(i*imgWidth, 0, imgWidth, 44);
imgV.image = [UIImage imageNamed:#"gitar"];
[scView addSubview:imgV];
}
[scView setContentSize:CGSizeMake(imgWidth*count, 50)];
[scView setBackgroundColor:[UIColor redColor]];
[self.view addSubview:scView];
}
What the above method does is, it will add 20 images in scrollview and at the end after adding all the images to scrollview in for loop I set contentSize to Scrollview. This step makes my scrollview to scroll until the content available. My example showing for Horizontal scroll, you have to change this behaviour to vertical scroll.
Related
I am trying to create a black border between views when users scroll pages I am using UIPageControl and UIScrollView, something like this pictures :
does anybody know how to do this !?
Just set your scroll view's background to [UIColor black] and set image frames like this:
NSArray *images = ...//your array of UIImage
CGFloat blackSpaceWidth = 20;
for(int i=0; i<images.count; i++){
UIImageView *imageView = [[UIImageView alloc] initWithImage:images[i]];
imageView.frame = CGRectMake((self.view.frame.size.width + blackSpaceWidth) * i, 0, self.view.frame.size.width, self.view.frame.size.height);
scrollView.addSubview(imageView);
}
If you are using pagination in your scroll view increase its frame width by blackSpaceWidth.
you can use CollectionView
1- make cell width 320 + 20px (border width) and cell height equal to screen height
2- set cell background with black color
3- add imageView constraints in this cell if you are using auto layout
4- implement CollectionView datasource
I guess it is pretty simple.All you need to do is left spacing between views in scrollview. Suppose you have set frame of first view like this -
[[UIView alloc] initWithFrame:CGRectMake(0,0,320,self.view.frame.size.height)];
for next view declare your frame for view like this -
[[UIView alloc] initWithFrame:CGRectMake(0,320+spacing,320,self.view.frame.size.height)];
and obviously set scrollview background color to black.
I've just started working with XCode 5.1 and iOS 7.1.
Im having some problems with PartialViews containing a scrollview. I have this ). I marked in red the space the scrollview should occupy but its taking more space vertically and horizontally. The viewcontroller and view are defined in the storyboard as freeform of 500x500 and the scrollview is defined like:
scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, rowHeight*[lstMatches count])];
scroll.contentSize = CGSizeMake(self.view.frame.size.width, rowHeight*[lstMatches count]);
//.....more elements here, added as subviews of scrollview
[self.view addSubview:scroll];
The problem is the next:
1) The scrollview is wider than its container so I can't click over right buttons. I tried changing the width of the viewcontroller and view to 800 (max width is about 750), but i cant click them.
Thanks for your help
try:
scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height])];
scroll.contentSize = CGSizeMake(5000, rowHeight*[lstMatches count]);
[self.view addSubview:scroll];
PS: Change the contentSize.width of 5000 to something that suits your needs
I want to have a UIScrollView on a panoramic image so that you can pan across the image horizontally. For some reason, the code I'm using does not allow the user to scroll horizontally.
Why won't it scroll horizontally?
Here is the code:
[scrollView setFrame:CGRectMake(0,160,1338,269)];
scrollView.scrollEnabled = YES;
scrollView.userInteractionEnabled = YES;
UIImageView *panorama = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 1338, 269)];
panorama.image = [UIImage imageNamed:#"Panorama.png"];
scrollView.contentSize = CGSizeMake(320, 269);
[scrollView addSubview:panorama];
[self.view addSubview:scrollView];
The scrollView's frame is stationary, the contentSize is the one that allows the scrolling.
scrollView.contentSize = CGSizeMake(320, 269);
Should be replaced with
scrollView.contentSize = CGSizeMake(1338, 269);
To allow a large contentSize to be scrolled through. The frame should be smaller.
scrollView.frame = CGRectMake(0,0,320, 269);
Think of the frame as the area that you see on the screen at any given time. Think of the contentSize as the area that the scrollView is capable of showing (much larger).
You are doing it other way around. Scroll view's content size must be set to the size of the large image you are trying to scroll.
Change contentsize to size of the uiimageview and change scrollview frame to 320,269
I would like to make a menu which will have horizontal scrolling.
The menu contains total 16 categories. So I am planning to take 8 on first part and rest 8 on another part.
Can some-one give me insight of what needs to be done?
I believe I need to use below.
UIScrollView
Add buttons in this scrollview
That's it?
What I want is on first screen 8 buttons where first screen will have two rows with 4 buttons set on each row.
Menu sample can be seen at http://www.shoutem.com/
If all you're doing is adding buttons to a horizontal scroll view you would do something like follows...
- (void)createScrollMenu
{
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 100)];
int x = 0;
for (int i = 0; i < 8; i++) {
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(x, 0, 100, 100)];
[button setTitle:[NSString stringWithFormat:#"Button %d", i] forState:UIControlStateNormal];
[scrollView addSubview:button];
x += button.frame.size.width;
}
scrollView.contentSize = CGSizeMake(x, scrollView.frame.size.height);
scrollView.backgroundColor = [UIColor redColor];
[self.view addSubview:scrollView];
}
This will create a scrollview with a height of 100, width as big as its parent, and add 8 buttons to it.
You can accomplish you're goal using a UIScrollView and your UIButton objects, it would involve setting each button's frame / layout properties depending on what iOS version you're targeting. (As in Eric's answer).
However, if you're targeting iOS 6 and above, using a UICollectionView where your items/cells are the buttons, then you can get the horizontal scrolling "menu bar" for free. There are plenty of SO posts on this, but the main idea is to use a flow layout where the item size has a height such that there will only be one row of items (just make the item height the same as the collection view's height).
EDIT:
I should say, this might seem like overkill (and maybe it is), but you will end up with a much more flexible component in case requirements change in the future. It also doesn't result in much extra code and abstracts away tedious layout details.
I faced a strange problem, the scrollview does not scroll down, only scroll up. I have scrollview in my app, please look at my coding
.....
self.scrollView = [[UIScrollView alloc] initWithFrame: CGRectMake(0, 0, 320,427)];
[self.view addSubViews: self.scrollView];
UIView *blueView = [[UIView alloc] initWithFrame: CGRectMake(0, 47, 320, 320)];
blueView.backgroundColor = [UIColor blueColor];
[self.scrollView addSubViews: blueView];
self.scrollView.contentSize = CGSize(320, 640);
....
My problem is no matter what value I changed contentSize, my ScrollView only scroll up, not scroll down. I want user can move blueView to the top or bottom of iPhone screen from the original position.
do you have this problem?
The Problem
It looks like your issue is with how you're orienting blueView within scrollView. You're setting the frame of blueView to the CGRect (0, 47, 320, 320). When you set the frame like this, one of the things you're implicitly saying is:
The top edge of blueView is 47 points below the top edge of scrollView.
That's a perfectly valid thing to say, but it's what's causing the problem you describe. scrollView won't scroll down because it is designed to start, by default, with the rect (0, 0, 320, 480) in view. The contentSize property only indicates the size of the content within the UIScrollView, not its positioning. When you set it, you're basically telling scrollView:
Starting from your content origin, the content is 320 points wide and 640 points tall.
Thus, scrollView won't scroll up because, as far as it knows, there's no content above the coordinate (0, 0).
The Solution
There are three steps you'll need to take to get the functionality you want.
Set the contentSize to be just big enough to allow blueView to scroll all the way up and down.
Put blueView in the vertical center of scrollView.
Scroll the scrollView so that it is initially centered on blueView.
Set the contentSize to be just big enough to allow blueView to scroll all the way up and down.
We'll want to calculate the correct value of the contentSize property. It is of the type CGSize, so we need two parts: width and height. width is easy – since you don't seem to want horizontal scrolling, just make it the width of the screen, 320. Height is a little more tricky. If you want blueView to just touch the top and bottom of the screen when scrolled up or down, you need to do some math. The correct total height will be double the height of the screen, minus the height of blueView. So:
scrollView.contentSize = CGSizeMake(320, 480 * 2.0 - blueView.frame.size.height);
Put blueView in the vertical center of scrollView.
That's easy; just set the center property of blueView:
blueView.center = CGPointMake(160, scrollView.contentSize.height / 2.0);
Scroll the scrollView so that it is initially centered on blueView.
If you check the Apple UIScrollView documentation, you'll see an instance method - (void)scrollRectToVisible:(CGRect)rect animated:(BOOL)animated. This is exactly what you need to scroll scrollView programmatically. The rect you want is the one centered on blueView, with the size of the iPhone screen. So:
CGRect targetRect = CGRectMake(0, scrollView.contentSize.height / 2.0 - 240,
320, 480);
[scrollView scrollRectToVisible:targetRect animated:NO];
Make sure you do this scrolling in viewWillAppear, so it's ready right when the user sees the view.
That should be it. Let me know if you have any questions!
The content size of the scrollView should be the size of the view it is holding. This is how the code should be, try something like this.
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(X, Y, W, H1)];
UIView * blueView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, W, H2)];
self.scrollView .contentSize = blueView.frame.size;
[self.scrollView addSubview:blueView];
[self.view addSubView: self.scrollView];
Thanks to Riley. Here, the H1 is the height of the UIScrollVIew and H2 is the height of the blueView and (H1 < H2).