I would like to kind of recreate the layout of the app I have pictures of below. There is a navigation bar at the top, with paged content in the middle. I have looked in to several ways of how to page content, including UIScrollViews, UIPageControl, and PageViewControllers, but I cant seem to quite be able to recreate this layout. Most tutorials that I find aren't updated for iOS7 either. All input is greatly appreciated.
Pictures:
Here's a few resources to help get you started.
Apple's documentation has a very good example of how to implement a paging scroll view using a UIPageViewController, see the Photo Scroller sample code here. I would suggest starting there.
I also have some code on github that modifies Apple's Photo Scroller example to load the UIPageViewController inside a UIViewController subclass.
This is a good tutorial by the Ray Wenderlich team on how to set up a paging scrollview: How To Use UIScrollView to Scroll and Zoom Content
I've also answered a few other questions about paging scroll views that you might find useful. See here, here, here and here.
Just have an int instance variable set initially to 0. If shouldn't matter if you use .xibs or storyboard, the concept remains the same. If you want to lay absolutely everything out in IB look here: How to add objects to a UIScrollView that extend beyond UIView from Storyboard?
To know when paging occurred use this:
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
CGFloat pageWidth = self.scrollview.bounds.size.width;
curIndex = floor((self.scrollview.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
if (curIndex == lastIndex) return;
lastIndex = curIndex;
//increment pager and do whatever else...
}
Here's a great tutorial on doing paged scrollView!
And BTW there's nothing special in iOS7 about this. At least nothing I can think of.
Related
I want to add a second view controller to my project with a swipe navigation. Which is the easiest way?
As you can see in the picture I have these buttons in the first view, I want to add more. I also have a background picture which is not in the picture
(below), is it possible to keep it for both views? So when I swipe to the right the background should't move, only the buttons.
Also could you please explain to me how I should make it step by step, because I am new into coding and have almost no experience.
I think what you are trying to find is paging using UIScrollView. Check out this link.
Hope this helps you.
you can use the custom class called ADPageControl. Here is the reference link : https://www.cocoacontrols.com/controls/adcustompagecontrol.
And for that image you can set the common image below your container view. Please go through the link and try to implement it.
Basically you need a UIPageViewController But you have tweak a little bit. You can find a tutorial about that here
Few Points
Create PageViewController with buttons
Make each Page views background color as clear color so your background image will be shown all the time even when you swipe.
Please don't expect full code from SO
I think you trying implement something like ..look below code
its scrollview paging
// viewArray contains paging views
viewArray = [[NSMutableArray alloc] initWithObjects:self.viewOne, self.viewTwo, nil];
// adding all views as scrollview subview
for (int i = 0; i < viewArray.count; i++) {
self.scrollView.pagingEnabled = YES;
[self.scrollView addSubview:viewArray[i]];
}
// this time you need to set scrollview contentSize but in X axis ..
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * viewArray.count, self.scrollView.frame.size.height);
have a note: you can create views using storyboard or programmatically but must set the x position of views which you want to appear on swipe.. hope this helps.
I need some kind of start point or concept advise on how to get this kind of animation, like in stock iOS calendar app.
I need infinite scrolling view, animating day numbers and date. If there is some Calendar app clone where this part presents, I would appreciate link. I have searched a lot in Github, but couldn't find particularly this part. Is it only page control on scrollable area and just labels on top? How I get the circle part to invert font? Or is it 2 sets of pictures from 1 to 31?
Not enough rep to comment, but I think I might be able to shed at least a little bit of light. I just had a similar problem with the scroll view part. To get it to switch the date at the top, implement scrollViewDidScroll inside your scrollView class. Like this:
func scrollViewDidScroll(scrollView: UIScrollView){
let xOffset = scrollView.contentOffset.x;
if xOffset >= currentViewsFarRightSide
{
//move date to the next date
}
}
So you are checking the xOffset of the scroll view and once it has reached the next multiple of the screen width, it jumps to the next date above. Now for the inverting and stuff, there might be a better way, but having two images would also work like you suggested. You can even create a transition and inside the if statement you could do a
UIView.animateWithDuration
With your image transition and it could look pretty nice. Hope I helped in some way. Good luck!
I am developping an iPad app using Xamaring that has several views in the storyboard (UIView and UITableView). My users want to zoom on usual pages (as they are used to in a web browser or so).
So, having read about UIScrollView, I simply tried to put my page views embedded within a UIScrollView, but I can neither scroll nor pinch-zoom: nothing happens.
As for the setup: in the StoryBoard, I add a UIScrollView to the UIViewController which fills the parent. I then add content to the UIScrollView, which I want to be zoomable (e.g. for people with poor sight).
So the question is quite simple: how can I get a view fitting within its original parent but that can be zoomed onto ?
Thanks in advance!
I have never done this myself, so I dont know if this is all it takes. But have you added the max- and min-scroll and all that?
scrollView.MaximumZoomScale = 3f;
scrollView.MinimumZoomScale = .1f;
scrollView.ViewForZoomingInScrollView += (UIScrollView sv) => { return imageView; };
(in your case i guess it needs to return the view);
If that doesent do the trick, take a look at "Scrolling and zooming a view hierarchy on this page: http://www.raywenderlich.com/10518/how-to-use-uiscrollview-to-scroll-and-zoom-content
I need to stack up say 20 buttons in the scroll view. I did manage to
add them all. It was a headache, cause I am not well versed with the auto
layout. Now when I ran the app in the simulator, I am not able to
scroll fully i.e the view bounces and hides a lot of buttons from being
accessed.
Can someone guide me in a simple way, the implementation of the same?
I assume you didn't set content to the scrollView.
Try this tutorial, really helped me when I implemented a Scroll View for the first time.
I found this answer in one of the stackoverflow post:
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
self.yourscrollview.contentSize=CGSizeMake(x,y);
}
Adding this to the scroll view and edit the values x,y will let you control
the amount you can scroll :)
I have seen Apple's example "TableSearch" that when touched its scope buttons come below the search bar.
http://developer.apple.com/iphone/library/samplecode/TableSearch/Introduction/Intro.html
But when I make my own it looks good at first but when I touch it looks like ugly, scope buttons and search bar are shown in the same line like this:
http://cl.ly/BN9
What do I have to do make it like "TableSearch" example in the iPad?
I am doing everything in IB and tried to modify the search bar programatically from the controller:
- (void)viewDidLoad {
[super viewDidLoad];
self.tableView.rowHeight = 88.0f;
self.tableView.contentOffset = CGPointMake(0, self.searchDisplayController.searchBar.frame.size.height);
self.searchDisplayController.searchResultsTableView.rowHeight = self.tableView.rowHeight;
//BELOW DID NOT WORK:
CGRect b = self.searchDisplayController.searchBar.bounds;
self.searchDisplayController.searchBar.bounds = CGRectMake(b.origin.x, b.origin.y, b.size.width, self.tableView.rowHeight);
b = self.searchDisplayController.searchBar.frame;
self.searchDisplayController.searchBar.frame = CGRectMake(b.origin.x, b.origin.y, b.size.width, self.tableView.rowHeight);
//BELOW WORKS PERFECT BUT IS A PRIVATE METHOD, HENCE I AM NOT SUPPOSED TO USE IT
//[self.searchDisplayController.searchBar setCombinesLandscapeBars:NO];
}
Thanks in advance.
I've encountered this bug as well, and I've both filed a report with Apple and requested technical assistance. I'll let you know how it goes. In the meantime I'll give you a brief bit of background on this bug.
On the iPhone, to preserve precious vertical screen real estate in Landscape mode, the UISearchDisplayController sets the UISearchBar to combine its search bar and search field in a single horizontal layout. This works pretty well because of the increased horizontal size of the screen (480 points in Landscape). Unfortunately, it works not so well on the iPad, where in Landscape mode the UI change really isn't necessary in the first place because you have plenty of vertical real estate. You also still only have 320 pixels of horizontal display space in the master view of the UISplitViewController, not the increased 480 of the iPhone. The result is an iSore.
Presumably the problem is that UISearchDisplayController is behaving badly in its willRotateToInterfaceOrientation:duration‎: method. Specifically, it's not bothering to check whether it's on an iPhone or not before it sets the combinesLandscapeBars property on its UISearchBar. The private API kludge in your code works because it fixes that oversight in the UISearchDisplayController. But of course Apple will rain down the fury of the ancients on you for using undocumented APIs, so you can't. Really we're at the mercy of Apple on this one.
If you're willing to give up the eye-candy and convenience of UISearchDisplayController, you can use a UISearchBar sans UISearchDisplayController and manage aspects of presentation yourself. Obviously this requires a lot more code and would be pointless if Apple's API engineers did their jobs, but it will at least resolve the display bug.
If you're Apple you can use your own undocumented APIs, which is why Mail.app doesn't have this problem.
UPDATE
The bug report I've filed with Apple is #8344719.
Using the following code, you will not get warning:
if ([self.searchDisplayController.searchBar respondsToSelector:#selector(setCombinesLandscapeBars:)])
{
objc_msgSend(self.searchDisplayController.searchBar, #selector(setCombinesLandscapeBars:), NO );
}
When you set the bounds and frame for the searchBar, like for the frame here:
blabla.searchBar.frame = CGRectMake(b.origin.x,
b.origin.y,
b.size.width,
self.tableView.rowHeight);
it seems like there is a problem with height. Scope buttons require some space under the search bar, so you should increase the height of both bounds and the frame.
If you show and hide scope buttons on some event you need to adjust the frame size each time.
I'm getting this issue on an iPad, but I can get it to work if I insert this in my implementation file:
#synthesize tableView;
I'm guessing there is something bad with the XIB being loaded, but I don't know why this would fix it.