Legend in a scrollview/pagecontrol?


#1

Hello,

I have a table view under a chart, and I thuoght it would be neat if I could swipe between the table view and the legend for the chart. Any ideas on how to do that? Do I have to subclass the legend? Any sample code available?

Thanks!


#2

Hello Abcgz,

If you create a scroll view with twice the content size of your view controller vertically like so, I did this in my view controller:

UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
scrollView.contentSize = GCSizeMake(self.view.frame.size.width, self.view.frame.size.height * 2);
[self.view addSubview:scrollView];

You can then add your chart to the first page of your scroll view like so:

// Init chart here.
myChart.frame = CGRectMake(0, 0, scrollView.contentSize.width, scrollView.contentSize.height/2);
[scrollView addSubview:myChart];

Now you can set your legend’s frame so it is on the other page of your scroll view, I did this just after I  initialised my chart:

[myChart.legend setFrame:CGRectMake(0, scrollView.contentSize.height/2, scrollView.contentSize.width, scrollView.contentSize.height/2)];

As our chart’s legend is now outside of our chart’s bounds, we need to tell it not to clip to bounds like so:

myChart.clipsToBounds = NO;

That should put your chart’s legend on a seperate scroll view page to your chart. Of course, you will need to play with everything’s autoresizing masks & frames to get it looking perfect :grin:.

Jan


#3

Hi Jan,

In the third code snippet, did you mean to set the frame of myChart.legend? Also, would this work vertically isntead of horizontally? And if I want a tableview “on top” of the legend to start? That is, I want to be able to swipe between the table view and the legend which are underneath the graph.

Thanks again!


#4

Hi Abcgz,

You were right, I did mean the legend’s frame. I have updated my original post to correct this. What I described previously should work with any scrolling direction you want, you just need to set the frames/content sizes up correctly.

To get the effect you just mentioned, you would just have to add your table view and legend as subviews to a paging scroll view, and set the frames up like so:

// Init and position chart.

// Init and position scrollview.

// Init and position table view on first page of scroll view.

// Add our chart's legend to the scroll view and set its frame to a frame on the second page.
[scrollView addSubview:myChart.legend];
[myChart.legend setFrame:scrollViewSecondPageFrame];

I just had a play and managed to get my legend scrolling as you described :grin:. 

Jan


#5

HI Jan,

Could you post the code? I think that’d be most helpful.

Thanks,

Scott


#6

Hi Jan,

Never mind; I figured it out! Thanks!

Scott


#7

Hi Scott,

I would have posted the code but I wasn’t 100% sure the orientation & effect that you were after, so I thought anything too specific to what I was doing may have confused the advice I was giving. I’m glad you managed to get it working!

Thanks,

Jan