Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am making an iOS app and I need to show some kind of a horizontal scroll view with some table views in it. It must look this way:
https://dl.dropboxusercontent.com/u/53942814/Pic1.png
https://dl.dropboxusercontent.com/u/53942814/Pic2.png
When user swipes left or right the corresponding table view is to be displayed.
I found two ways to do it:
a UIScrollView with UITableViews
a UICollectionView.
Does anyone have in idea what is the best way and how to implement it?
I have implemented exact same in my code which replicates android like control…
Please see some part of my code you will get some ideas
I have done it by adding Views to UIScrollView.
Used 2 scrollviews one for title and one for tables
1. Adding table views to scrollview for table
pageNo = 1;
for (Page *page in pageArray)
{
UIStoryboard *mystoryboard = [UIStoryboard storyboardWithName:#"Main_iPhone" bundle:nil];
PageContentViewController *contentViewController = [mystoryboard instantiateViewControllerWithIdentifier:#"pageContentViewController"];
contentViewController.detailsDictionary = page.deviceDetailDictionary; //assigning dictionary will use as table data source
/* Content page's x position calculation */
// Formula: xPos = scrollViewWidth * ( pageNo -1 )
// Where,
// pageNo starts with 1
int xPos = self.detailScrollView.frame.size.width * (pageNo -1);
contentViewController.view.frame = CGRectMake(xPos, 0, self.detailScrollView.frame.size.width, contentViewController.view.frame.size.height);
pageNo ++;
[self addChildViewController:contentViewController];
[self.detailScrollView addSubview:contentViewController.view];
[contentViewController didMoveToParentViewController:self];
}
2. Add UILabels to titleScrollView
Just check this formula to add title UILabel views to top scroll view
// Formula: xPos = 75 + 10 * pageNo + (pageNo -1) * 150;
// Where,
// pageNo starts with 1
// 75 = Left margin of first title
// 10 = Space between two labels
// 150 = Width of label
3. Use Delegate method of ScrollView (in which you added table) to handle swipes
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;
{
CGFloat pageWidth = self.detailScrollView.frame.size.width;
//1. Calculate page no. if 50 percent or more area of any page visible make it as current page
int pageNo = floor((self.detailScrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 2;
//2. Make only current page (calculated in 1.) visible by scrolling to that page in detailScrollView
//Formula : xPos = pageWidth * (pageNo -1)
CGRect frame = CGRectMake( pageWidth * (pageNo -1), 0, pageWidth, 50);
[self.detailScrollView scrollRectToVisible:frame animated:YES];//OR set content offset
//3. Make title visible of current page by scrolling to that title in titleScrollView
//Formula : xPos = (pageWidth / 2) * (pageNo -1)
CGRect titleFrame = CGRectMake( 160 * (pageNo -1), 0, pageWidth, 10);
[self.titleScrollView scrollRectToVisible:titleFrame animated:YES];//OR set content offset
//Fade effect for non current titles
//Set all page title alpha to low value
for (UILabel *title in pageTitleArray)
{
[title setAlpha:0.5];
}
//set current page alpha to 1
UILabel *title = [pageTitleArray objectAtIndex:pageNo -1];
[title setAlpha:1];
}
Code in 3 takes care of moving to next / prev page on swipe with animation
Hope this will be good starting point for you...
Related
Create a Scrollview add UIPagecontrol and load the array values successfully. Put timer for scroll it automatically. Want to show after complete the last array value it want to move the first array value automatically.(Now my code working like get reverse and move to first array value). I need go automatically to first. Help me.
Scrollview page move code
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
int width;
width = ScrollViewPage.frame.size.width;
float xPos = scrollView.contentOffset.x+10;
pageControl.currentPage = (int)xPos/width;
}
///Add timer for move automatically using tis code
- (void)loadNextController
{
pageControl.currentPage = (pageControl.currentPage+1)%self->pageControllMutableImageArray.count;
[ScrollViewPage setContentOffset:CGPointMake(pageControl.currentPage * self.view.bounds.size.width, 0) animated:YES];
}
///UIpagecontrol dot button click target action code
- (IBAction)pageTurn:(id)sender
{
NSUInteger page = pageControl.currentPage;
CGRect frame = ScrollViewPage.frame;
frame.origin.x = frame.size.width * page;
frame.origin.y = 0;
[ScrollViewPage scrollRectToVisible:frame animated:YES];
}
How it possible in my code. help me thanks advance.
You can do something like this,
- (void)loadNextController
{
//put if statement here to check whether it is page object something like,
//have aasume that your first page number is 0. so take count - 1 in if
if(pageControl.currentPage == (pageControllMutableImageArray.count - 1)){
//start from initial. set current page = 0 and contentoffset of first page
}
else {
// your code for next page may be like,
pageControl.currentPage = (pageControl.currentPage+1)%self->pageControllMutableImageArray.count;
[ScrollViewPage setContentOffset:CGPointMake(pageControl.currentPage * self.view.bounds.size.width, 0) animated:YES];
}
}
Hope this will help. :)
Update 2 :
you can set content offset of first page like:
CGPoint newOffset = CGPointMake(0, 0);
[self.standardScrollView setContentOffset:newOffset animated:YES];
Objective-C beginner here.
My app structure is as follows:
TabBarController -> NavigationController -> UIViewController -> Table View.
In the table view you can find post objects which I would like to refresh and load more.
If user scrolls from top to bottom I want to delete all posts and then load 5 newest posts.
If user reaches the end of the list I want to load 5 older post.
I tried some suggestions from here and other sites but nothing seems to work.
Thanks for the comment. That helped and no I did not found that post. What I have right now is:
- (void)scrollViewDidScroll:(UIScrollView *)aScrollView {
CGPoint offset = aScrollView.contentOffset;
CGRect bounds = aScrollView.bounds;
CGSize size = aScrollView.contentSize;
UIEdgeInsets inset = aScrollView.contentInset;
float y = offset.y + bounds.size.height - inset.bottom;
float h = size.height;
float reload_distance = -100;
if(offset.y (h + reload_distance)) {
NSLog(#"load more rows");
}
}
The code block deletes a if statement before the one that you can see. How is that possible?
I have 5 pages and I want to start on the 3rd page. I have added some code to skip to the 3rd page
CGRect frame = self.predictionsScroll.frame;
frame.origin.x = frame.size.width * (pagesBefore);
frame.origin.y = 0;
[self.predictionsScroll scrollRectToVisible:frame animated:YES];
This works perfectly except the pageControl still shows that it is on the first page. If I drag the view a tiny bit it updates to where it is, but this should start on the middle dot. Here is my method for updating the pageControl page.
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
if (scrollView == self.predictionsScroll) {
CGFloat pageWidth = self.predictionsScroll.frame.size.width;
float fractionalPage = self.predictionsScroll.contentOffset.x / pageWidth;
NSInteger page = lround(fractionalPage);
self.pagecontrol.currentPage=page;
}
}
I have tried adding a manuel pagecontrol.currentPage = pagesBefore; But this does not seem to work.
Hi I have 10 images in UIScrollview now i can scroll forward like from 1 to 2,3,4,etc but in my project i need to scroll images backward direction also like from 1 to 10 to left hand side
this is my code
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
CGFloat pageWidth = cardsScrollView.frame.size.width;
NSUInteger page = floor((self.cardsScrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
if(page + 1 == [flashCardArry count]){
for (NSUInteger i = 0; i < [flashCardArry count]; ++i) {
int nElements = [flashCardArry count] - i;
int n = (arc4random() % nElements) + i;
[flashCardArry exchangeObjectAtIndex:i withObjectAtIndex:n];
}
[self.cardsScrollView scrollRectToVisible:CGRectMake(self.cardsScrollView.frame.size.width * 0 , 0, self.cardsScrollView.frame.size.width, self.cardsScrollView.frame.size.height) animated:NO];
}
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
CGFloat pageWidth = cardsScrollView.frame.size.width;
NSUInteger page = floor((self.cardsScrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
You can simply do that by adding the imageViews from 10 to 1 on your scrollView and then you have se the contentOffset of you scrollview to point to the last image which is image 1.
So user wont be able to scroll right at first, he can scroll to left for next images.
So. In case if you want cyclic scrollview you would need next things:
1) hide scrollView indicators
scrl.showsHorizontalScrollIndicator = NO;
scrl.showsVerticalScrollIndicator = NO;
2) Add one item to beginning of the scroll view, and one item at the end
[5'] | [0][1][2][3][4][5] | [0']
| --- full_size--- |
3) Once user scrolls to 5' item we updating content offset by adding full_size
4) Once user scrolls to 0' item we updating content offset by subtracting full_size
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGPoint contentOffset = scrollView.contentOffset;
// First item
if (contentOffset.x < page_size) { // We are now faking last page
scrollView.contentOffset += full_size; // Jumping to actual last page
}
// Last item
if (contentOffset.x > full_size) { // We are now faking first page
scrollView.contentOffset -= full_size; // Jumping to actual first page
}
}
5) To decrease amount of jumps (especially on the borders), you can add more 2 or more fake items from both side
In the following picture, how do you have Multi-option picker and the horizontal scroller in the same white rounded rectangle? It looks great for sorting, and I'd love to implement something like that.
You need to have a UITableView with two sections (one named "section 1" and one named "section 2").
Each section has a single row, and each row's "cell" contains an option picker inside it's "Accessory View".
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/tableview_iphone/TableViewCells/TableViewCells.html
That option picker is not part of the system's library of controls, I don't know where it came from.
You could do the option picker as a UIScrollView, attaching a UIPageControl to it, inside a UIView, with two UIViews (or UIImageViews) providing the transparent fading effect. You add n-views to the scrollview, each with the same height/width. If you want the snap, which I imagine you will, track the current page with the UIScrollViewDelegates like so:
-(void) scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
float pageWidth = scrollview.frame.size.width;
int page = floor((scrollview.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
[self scrollview:scrollview scrollToPage: page];
}
-(void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
if( decelerate == FALSE )
{
float pageWidth = scrollview.frame.size.width;
int page = floor((scrollview.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
[self scrollview:scrollview scrollToPage: page];
}
}
And the scrollview:scrollToPage: method will give you the snap like so:
-(void) scrollview:(UIScrollView*) scrollview scrollToPage:(NSInteger) page
{
[_myPageControl setCurrentPage:page];
CGRect frame = scrollview.frame;
frame.origin.x = frame.size.width * page;
frame.origin.y = 0;
[scrollview scrollRectToVisible:frame animated:YES];
}