Question

I’m designing an iPad app that will have a custom grid in it. The grid will display simple geometric shapes, in different colors, that contain a single character. These will update frequently based on user actions.

The grid will be larger than the screen size, in both directions, so will need to scroll/pan.

I also need the top row and first column to be “frozen” – so the top row remains at the top, but the content within it scrolls horizontally with the rest of the grid, and the first column remains at the left, but the content scrolls veritical with the rest of the grid.

The contents of the first column could be wide, so I’ll need to allow the user to resize it.

I’m struggling with the best way to design this. I’m thinking that it might be easiest just to have it as a single custom view when I manage all the drawing and interaction manually. But I can’t help feeling that I’m missing some easier way of doing it. Maybe there’s even a suitable third party component that would be a better starting point.

What would be the best way of designing this component of the app?

Answer 1

I’d have 3 UIScrollViews that you can set the frames for apropriately so that they make the first column and first row the size you wish – the main grid contents can be the bottom right UIScrollView.

The controller class can be the UIScrollViewDelegate for all of the views. Set the contentsize of the 1st column UIScrolView to be the same width as the width of its frame, but height the right size for the content, the 1st row UIScrollView should have the same height as its frame, but the right width for the content, and the bottom left UIScrollView will have it’s content size set as the size of teh grid contents.

The - (void) scrollViewDidScroll:(UIScrollView*)scrollView method is called when scrolling any one of them so check which one has scrolled and scroll teh other two as appropriate.

i.e.

//Declared and positioned somewhere earlier, like in the .h
UIScrollView* firstCol;
UIScrollView* firstRow;
UIScrollView* mainGrid;

- (void) scrollViewDidScroll:(UIScrollView*)scrollView {
    if (scrollView == firstCol) {
        CGPoint offset = mainGrid.contentOffset;
        offset.y = firstCol.contentOffset.y
        [mainGrid setContentOffset:offset];
    }
    else if (scrollView == firstRow) {
        CGPoint offset = mainGrid.contentOffset;
        offset.x = firstRow.contentOffset.x
        [mainGrid setContentOffset:offset];
    }
    else if (scrollView == mainGrid) {
        CGPoint offset = firstRow.contentOffset;
        offset.x = mainGrid.contentOffset.x;
        [firstRow setContentOffset:offset];
        offset = firstCol.contentOffset;
        offset.y = mainGrid.contentOffset.y;
        [firstCol setContentOffset:offset];
    }
}