I am new to iphone development . Can anyone please tell me how to add a vertical scrollview inside a horizontal scroll view. I went through many samples but couldn't get a clear picture about it . I wan my view to be scrolled in both vertical and horizontal directions. Any help is appreciated.
Here is my code for scrolling:
EDIT: Here is my code for scrolling
self.firstScroll.pagingEnabled=YES;
self.firstScroll.clipsToBounds=YES;
int numberOfViews=3;
for(int i=0;i<numberOfViews;i++){
CGFloat xOrigin=self.view.frame.size.width*i;
UIView *awesomeView=[[UIView alloc] initWithFrame:CGRectMake(xOrigin, 0, self.view.frame.size.width, self.view.frame.size.height)];
awesomeView.backgroundColor=[UIColor colorWithRed:0.5/i green:0.5 blue:0.5 alpha:1];
[self.firstScroll addSubview:awesomeView];
}
self.firstScroll.contentSize=CGSizeMake(self.view.frame.size.width*numberOfViews, self.view.frame.size.height);
[self.view addSubview:firstScroll];
self.nextVerticalScroll.pagingEnabled=YES;
for(int i=0;i<numberOfViews ;i++){
CGFloat yOrigin=self.view.frame.size.height * i;
UIView *verticalView=[[UIView alloc]initWithFrame:CGRectMake(0, yOrigin, self.view.frame.size.width, self.view.frame.size.height)];
verticalView.backgroundColor=[UIColor colorWithRed:0.5/i green:0.5 blue:0.5 alpha:1];
[self.nextVerticalScroll addSubview:verticalView];
}
self.nextVerticalScroll.contentSize=CGSizeMake(self.view.frame.size.width, self.view.frame.size.height*numberOfViews);
[self.view addSubview:nextVerticalScroll];
Thanks,
Raj
You probably do not want to have scrollviews within scrollviews because you can't control which gets the horizontal gestures and which gets the vertical gestures (without a lot of hassle, at least). It is much easier to have a single scrollview with a contentSize that is bigger horizontally and vertically than the bounds of the scrollview itself, e.g.:
- (void)configureScrollView
{
NSInteger rows = 4;
NSInteger cols = 5;
CGFloat width = self.scrollView.bounds.size.width;
CGFloat height = self.scrollView.bounds.size.height;
// configure my scroll view itself
self.scrollView.contentSize = CGSizeMake(width * cols, height * rows);
self.scrollView.pagingEnabled = YES;
self.scrollView.backgroundColor = [UIColor darkGrayColor];
// now let's add the labels to the scrollview
for (NSInteger row = 0; row < rows; row++)
{
for (NSInteger col = 0; col < cols; col++)
{
// making my label just a little smaller than the scrollview's bounds so I can easily see the scrolling/paging
CGRect frame = CGRectMake((width * col) + 20.0, (height * row) + 20.0, width - 40.0, height - 40.0);
// create and configure the label
UILabel *label = [[UILabel alloc] initWithFrame:frame];
label.text = [NSString stringWithFormat:#"%1.0f", row * cols + col + 1.0];
label.textAlignment = UITextAlignmentCenter;
label.backgroundColor = [UIColor lightGrayColor];
// add it to my scrollview
[self.scrollView addSubview:label];
}
}
}
I'm just filling my scroll view with 20 different text labels (and colored the background of the scrollview differently from the labels so I could see them), but it demonstrates the basic idea.
Please if you have added Paging in XIB then remove it...I think it will help you.
Related
I have UIViewController with UIScrollView and two labels and a button inside it:
UIView
-UIScrollView
-UILabel
-UILabel
-UIButton
I need to align my UILabels and UIButton after each other dynamically, as every view can have different size. UILabels are okay, but my UIButton goes into the middle of my second UILabel
Here is my code:
self.header.text = event.title;
self.header.numberOfLines = 0;
CGFloat headerHeight = [event.title sizeWithFont:[UIFont fontWithName:#"Arial" size:20] constrainedToSize:CGSizeMake(280, 100000) lineBreakMode:UILineBreakModeWordWrap].height;
self.header.frame = CGRectMake(19, 20, 280, headerHeight);
CGFloat positionY = 40 + [self.header.text sizeWithFont:[UIFont fontWithName:#"Arial" size:20] constrainedToSize:CGSizeMake(280, 100000) lineBreakMode:UILineBreakModeWordWrap].height;
CGFloat descriptionHeight = [event.descr sizeWithFont:[UIFont systemFontOfSize:17] constrainedToSize:CGSizeMake(280, 100000) lineBreakMode:UILineBreakModeWordWrap].height;
self.descr.frame = CGRectMake(19, positionY, 280, descriptionHeight);
self.descr.text = event.descr;
self.descr.numberOfLines = 0;
positionY = self.descr.frame.origin.y + self.descr.frame.size.height + 40;
buyButton.frame = CGRectMake(19, positionY, 72, 37);
scrollView.contentInset = UIEdgeInsetsMake(contentInset, 0, 0, 0);
[scrollView setContentSize:CGSizeMake(320, positionY+80)];
UIScrollView has flexible height autoresizing mask set in IB.
Here is how it looks:
Can anyone tell me what am I doing wrong?
UPDATE:
If I remove autoresizing mask for my UIScrollView - everything works okay
If your problem resolves itself by changing the autoresizing mask on the scroll view, be sure to check the autoresizing mask on your buttons and labels to make sure they all agree.
Use Count of UISCROLLVIEW subviews and put X axis as
CGRECTMAKE((count-count)*100)+x,y,width,height;
I am trying to add a label to a scroll view, then set the contentSize of the scrollview to match the desired size of the label. The problem is I seem to have to make the contentSize bigger than the size of the label:
theScrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0,0,320,480)];
bodyLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320.0, 50.0)];
bodyLabel.textColor = [UIColor whiteColor];
bodyLabel.backgroundColor = [UIColor clearColor];
bodyLabel.textAlignment = UITextAlignmentLeft;
bodyLabel.text = event.description; <- basically some long ass text here
bodyLabel.font=[UIFont systemFontOfSize:16.0];
bodyLabel.numberOfLines = 0;
bodyLabel.lineBreakMode = UILineBreakModeWordWrap;
here I think Im getting the necessary label size to contain the text
CGSize size = [event.description sizeWithFont:bodyLabel.font constrainedToSize:CGSizeMake(bodyLabel.frame.size.width, 9500) lineBreakMode:bodyLabel.lineBreakMode];
frame = bodyLabel.frame; // to get the width
frame.size.height = size.height;
bodyLabel.frame = frame;
here I set the contentSize to the label's Size, but it isn't big enough, I need to
set it to bodyLabel.frame.size.height + 80 for it to be covered in the scrolling.
theScrollview.contentSize = CGSizeMake(bodyLabel.frame.size.width, bodyLabel.frame.size.height);
[theScrollview addSubview:bodyLabel];
Thanks for any thoughts in advance!
[theScrollview addSubView: bodyLabel];
I'm using the code from this tutorial to create a UIScrollView which allows scrolling through pages. Put in another way, the user can drag the screen to switch from one UIView to another. The code basically looks like this:
- (void)loadView {
[super loadView];
self.view.backgroundColor = [UIColor redColor];
UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
scroll.pagingEnabled = YES;
NSInteger numberOfViews = 3;
for (int i = 0; i < numberOfViews; i++) {
CGFloat yOrigin = i * self.view.frame.size.width;
UIView *awesomeView = [[UIView alloc] initWithFrame:CGRectMake(yOrigin, 0, self.view.frame.size.width, self.view.frame.size.height)];
awesomeView.backgroundColor = [UIColor colorWithRed:0.5/i green:0.5 blue:0.5 alpha:1];
[scroll addSubview:awesomeView];
[awesomeView release];
}
scroll.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews, self.view.frame.size.height);
[self.view addSubview:scroll];
[scroll release];
}
My question is how can I detect which page the user is on? Like logging "1" for page 1, "2" for page 2, etc.
Thanks!
You can get the current page number by using the scroll view's content offset and its width.
int currentPage = (scrollView.contentOffset.x / scrollView.frame.width) + 1;
NSLog(#"current page: %d", currentPage);
You should take y offset into account if the scrolling is done vertically.
if you want to know on which page the user is while he scrolls you should add your object as Delegate object (UIScrollViewDelegate) you can then use the
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
call and calculate the page like in emptystacks answer.
btw. the calculation is float, if you need to know when exactly the page is fully scrolled you should use float.
Actually, it's even better to use int currentPage = (scrollView.contentOffset.x / scrollView.frame.width) + 1.5;
That extra .5 means the page change happens when the pages are halfway across the view rather than being rounded left.
I need to create a horizontal UIScrollView which to hold hundreds of thumbnail images, just like a slide of thumbnails.
For example, there will be 10 thumbnails showing in a single screen, each of them are horizontally adjacent to each other.
My problem is that I don't know how to make a horizontal UIScrollView to hold the multiple thumbnails which showing at the same time ?
A sample photo is as below. See the bottom part of the screen.
Thanks.
You can add all the thumbnails programatically to your scrollview and use the setContentSize method of UIScrollView. you have to pass 2 values in contentOffset. 1 for width and 1 for height. Please follow link to explore more on this. If you need further help please leave a comment.
Hope it helps.
Please consider Following example.
- (void)setupHorizontalScrollView
{
scrollView.delegate = self;
[self.scrollView setBackgroundColor:[UIColor blackColor]];
[scrollView setCanCancelContentTouches:NO];
scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView.clipsToBounds = NO;
scrollView.scrollEnabled = YES;
scrollView.pagingEnabled = YES;
NSUInteger nimages = 0;
NSInteger tot=0;
CGFloat cx = 0;
for (; ; nimages++) {
NSString *imageName = [NSString stringWithFormat:#"image%d.jpg", (nimages + 1)];
UIImage *image = [UIImage imageNamed:imageName];
if (tot==15) {
break;
}
if (4==nimages) {
nimages=0;
}
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.height = 40;
rect.size.width = 40;
rect.origin.x = cx;
rect.origin.y = 0;
imageView.frame = rect;
[scrollView addSubview:imageView];
[imageView release];
cx += imageView.frame.size.width+5;
tot++;
}
self.pageControl.numberOfPages = nimages;
[scrollView setContentSize:CGSizeMake(cx, [scrollView bounds].size.height)];
}
I suggest you to look at nimbus
Check out bjhomer's HSImageSidebarView project. It lets you load a scrollview horizontally or vertically and load in the images. Super easy to implement.
First of all, at storyboard drag and drop the scroll view and make the outlet of scrollview named scrollView. Two array one is mutable and one is immutable.
#property(nonatomic,strong)IBOutlet UIScrollView *scrollView;
#property(nonatomic,strong)NSMutableArray *images;
#property(nonatomic,strong)NSArray *imagesName;
The immutable array only store the images which we want to show on the scroll view.Make sure UIscrollview delegate is defined.
In viewcontoller.m file in didload function do following code:
imagesName = [[NSArray alloc]initWithObjects:#"centipede.jpg",#"ladybug.jpg",#"potatoBug.jpg",#"wolfSpider.jpg", #"ladybug.jpg",#"potatoBug.jpg",#"centipede.jpg",#"wolfSpider.jpg",nil];
// mutable array used to show the images on scrollview dynamic becaus after one
// image when scroll other will come
images = [[NSMutableArray alloc]init];
scrollView.delegate = self;
scrollView.scrollEnabled = YES;
int scrollWidth = 120;
scrollView.contentSize = CGSizeMake(scrollWidth,80);
int xOffset = 0;
//the loop go till all images will load
for(int index=0; index < [imagesName count]; index++)
{
UIImageView *img = [[UIImageView alloc] init];
// make the imageview object because in scrollview we need image
img.frame = CGRectMake(5+xOffset, 0, 160, 110);
// the offset represent the values, used so that topleft for each image will
// change with(5+xOffset, 0)and the bottomright(160, 110)
NSLog(#"image: %#",[imagesName objectAtIndex:index]);
img.image = [UIImage imageNamed:[imagesName objectAtIndex:index]];
// The image will put on the img object
[images insertObject:img atIndex:index];
// Put the img object at the images array which is mutable array
scrollView.contentSize = CGSizeMake(scrollWidth+xOffset,110);
//scroll view size show after 125 width the scroll view enabled
[scrollView addSubview:[images objectAtIndex:index]];
// set images on scroll view
xOffset += 170;
}
You can calculate content size width of the scrollview as width = number of images * size of each image. Then set contentSize of the scrollview to this width and the height that you want (scrollView.contentSize = CGSizeMake(width, height))
I have ScrollView and UIView created in interface builder (but can as well be code). I want to add random amount of thumbnails (subviews) to UIView and be able to scroll it up-down if there are more than the screen can take. Hovewer, I can't get ScrollView to scroll.
Where and how do I resize UIView and add it as a subview of ScrollView?
When do I set contentSize of scrollView to make it expand along with uiview? I tried creating fixed large contentSize but didn't work as well.
What properties in IB I might need to change to make it work?
I'd like to make the images in uiview clickable in next step.
I guess I could also make both view in code without IB. Just somehow can't get it to work.
Thanks in advance !
//declare base view
UIViewController *viewForLoadForm =[[UIViewController alloc] init];
viewForLoadForm.view.frame=CGRectMake(0, 0,screenSize.size.width,screenSize.size.height);
viewForLoadForm.view.backgroundColor=[UIColor blackColor];
[Manview.view addSubview:viewForLoadForm];
//declare scrollview and add to base view
UIScrollView *scrollview=[[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, screenSize.size.width,screenSize.size.height)];
scrollview.indicatorStyle=UIScrollViewIndicatorStyleBlack;
[scrollview setContentSize:CGSizeMake(screenSize.size.width,screenSize.size.height)];
scrollview.clipsToBounds = NO;
scrollview.scrollEnabled = YES;
scrollview.pagingEnabled = NO; scrollview.showsVerticalScrollIndicator =NO;
scrollview.alwaysBounceVertical= YES;
[viewForLoadForm.view addSubview:scrollview];
//Add your controls to scrollview that s image view or something which is needed to display
.........your control's code (textbox,imageview etc)
//took last control's y postion and set your K
float k=Last control's y position +100;(some thing which ll be decide scroll size)
// reassign the scrollview height
[scrollview setContentSize:CGSizeMake(screenSize.size.width,k)];
use above line for scroll view size adjustment at run time.
screenSize.size.width is 320 here
code snippet,
- (void) createThumbView
{
float y_axis = Set y axis;
int x = 0;
int totalImgs = total images;
int tempCnt = 0;
for (int i = 0; i < totalImgs;)
{
float x_axis = set x axis;
int loopCount = 0;
if (totalImgs - tempCnt >= (no of images in row))
{
loopCount = (no of images in row);
}
else
{
loopCount = totalImgs % (no of images in row);
}
for (int j = 0; j < loopCount; j++)
{
MasksData *mData = [masksList objectAtIndex:x];
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(x_axis, y_axis, width, height);
[btn setImage:[UIImage imageNamed:[NSString stringWithFormat:#"%#.png",mData.bgImage]] forState:UIControlStateNormal];
btn.backgroundColor = [UIColor clearColor];
btn.tag = x;
[scroll View addSubview:btn];
//photoCount++;
x_axis += width + some space;
tempCnt++;
i++;
x++;
}
y_axis += height + some space;
scroll View.contentSize = CGSizeMake(320.0, y_axis);
}
}