Scrolling horizontal and vertical both direction

Question

I have requirement to scroll the images horizontally and vertically.

I have sections which will segregated vertically and in each section itself it will be so many images which will be scrolled horizontally.

I made vertical scrolling using UICollectionView with Ray wenderlich tutorial but how do I get horizontal scrolling in each section?

Should I use any other object like UITableView or UIScrollview for this purpose?

Any tutorial available how to achieve this?

Is it compulsory to implement Layout subclass or UICollectionviewFlowlayout when using collection view?

EDIT

Till now I have implemented this code which scrolls vertically and has 5 sections each but not able to scroll the individual sections

- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section;
{
    NSArray *arrayReturn = [self returnArray:section];
    return arrayReturn.count;
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{   
    return 5;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    ImageCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@"imagecell" forIndexPath:indexPath];

    NSBlockOperation *operation = [NSBlockOperation blockOperationWithBlock:^{
        NSArray *arrSection = [NSArray arrayWithArray:[self returnArray:indexPath.section]];
        NSString *fileName = [arrSection objectAtIndex:indexPath.row];
        UIImage *image = [UIImage imageNamed:fileName];

           dispatch_async(dispatch_get_main_queue(), ^{
//               cell.imgVw.image = ;
               if([CollectionView.indexPathsForVisibleItems containsObject:indexPath]){
                   ImageCell *currentCell = (ImageCell *) [cv cellForItemAtIndexPath:indexPath];
                   currentCell.imgVw.image = image;
               }

           });
    }];

    [self.thumbnailQueue addOperation:operation];

    return cell;
}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{

    HeaderView *Header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"PhotoHeaderView" forIndexPath:indexPath];

    Header.lblHeaderTitle.text = @"Header title";

    Header.backgroundColor = [UIColor yellowColor];
    return Header;
}

Any screen shot that which exactly explains your requirement ? — Manu, Jun 06 '13 at 06:18
its all are base on ContentSize of your ScrollView, so five proper contentSize of Your ScrollView and give direction lock of UIScrollView. — iPatel, Jun 06 '13 at 06:32

score 1 · Accepted Answer · answered Jun 06 '13 at 06:25

1

Here is a similar tutorial:

http://www.raywenderlich.com/4723/how-to-make-an-interface-with-horizontal-tables-like-the-pulse-news-app-part-2

Basically you need to do following:

Take a tableView or CollectionView
In each cell you need to add a scrollview with horizontal scrolling enabled.
Add items to scroll view of each cell while creating cells and give the scroll view appropriate content size.

It will give you a desired result.

answered Jun 06 '13 at 06:25

Amit

1,023
1
10
30

Adding a scrollview to each cell will lead to memory issues – Heena Jun 06 '13 at 06:27
It will increase the memory usage of the view but i dont think this will cause any memory issues. This is a similar case of using a custom cell having some view inside it. – Amit Jun 06 '13 at 06:29
But it would be better if i can use collection view as it automatically manages cell's height and width when orientation changes – Heena Jun 06 '13 at 06:39
As i said in answer you can use a collection view too with same approach. It also works based on cells. – Amit Jun 06 '13 at 06:42
This tutorial helped me but I implemented it as tableview with each cell having collectionview to scroll in horizontal direction. And this working fine. – Heena Jun 10 '13 at 13:11

score 0 · Answer 2 · answered Jun 06 '13 at 08:15

Try this

**viewController.h**

IBOutlet UIScrollView *scrollViewMain;


**viewController.m**

- (void)viewDidLoad
{
   [super viewDidLoad];
   [self createDisplay];
// Do any additional setup after loading the view, typically from a nib.
}

-(void) createDisplay
{
for(UIView *subView in scrollViewMain.subviews)
{
    if(![subView isKindOfClass:[UIImageView class]])
    {
        [subView removeFromSuperview];
    }
}
int yPos =5;

for (int i=0; i< 10; i++)
{

    int xPosition=5;


    UIScrollView *scrollView =[[UIScrollView alloc]initWithFrame:CGRectMake(xPosition, yPos, scrollViewMain.frame.size.width, 100)];
    scrollView.backgroundColor =[UIColor clearColor];
    scrollView.autoresizingMask =UIViewAutoresizingFlexibleWidth;



    xPosition +=5;

    for (int j=0; j<10; j++)
    {

        UILabel *lblTitle = [[UILabel alloc] initWithFrame:CGRectMake(xPosition, 0, 100, 100)];
        lblTitle.textColor = [UIColor whiteColor];
        lblTitle.backgroundColor =[UIColor greenColor];
        lblTitle.text = @"test";
        lblTitle.numberOfLines =0;
        lblTitle.font = [UIFont boldSystemFontOfSize:15];

        [scrollView addSubview:lblTitle];

        xPosition +=100;
        xPosition +=10;
    }
    [scrollView setContentSize:CGSizeMake(xPosition, 100)];
    [scrollViewMain addSubview:scrollView];
    yPos +=120;
}
[scrollViewMain flashScrollIndicators];
[scrollViewMain setContentSize:CGSizeMake(0, yPos)];
  }

Scrolling horizontal and vertical both direction

2 Answers2

Linked