I have been using UIPageController to navigate between different controllers. Now I would like to add that dots at the bottom, so user can see on which controller he is at. That is achieved via UIPageControl. Is there easy way to combine those two?
From the bottom of UIPageViewController.h (iOS6+) ~
A page indicator will be visible if both methods are implemented, transition style is 'UIPageViewControllerTransitionStyleScroll', and navigation orientation is 'UIPageViewControllerNavigationOrientationHorizontal'.
Both methods are called in response to a 'setViewControllers:...' call, but the presentation index is updated automatically in the case of gesture-driven navigation.
- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController NS_AVAILABLE_IOS(6_0); // The number of items reflected in the page indicator.
- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController NS_AVAILABLE_IOS(6_0); // The selected item reflected in the page indicator.
Otherwise, I think you need to add a UIPageControl to your UIPageViewController and basically tie them together to keep them in sync...but then you do have to do all the tying manually.
If you are using Page Based application template of Xcode then go to
Attribute inspector and set Transiton style property to Scroll.
and go to your application AppDelegate.m file and set the tint color for the
UIPageControl *pageControl = [UIPageControl appearance];
pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
pageControl.currentPageIndicatorTintColor = [UIColor blackColor];
pageControl.backgroundColor = [UIColor whiteColor];
For the page based Xcode template its already their for iOS 6,iOS 7 just its color is set to white.
Related
I would like to have 4 views that the user can swipe left or right.
For this I am planning to use UIPageViewController.
What is special is that the last view should not have the page indicator at all. I would like to swipe it away with the view that is before the last one. Is this possible with UIPageViewController?
Here is a picture of a swipe moving to the last view:
I think that's impossible to achieve what you say with UIPageViewController. Because you can't get the value how far the current view is moved by now.
To get that value you can custom a UIScrollView and animate the page indicator yourself in the delegate method - scrollViewDidScroll:
There's no built-in support for conditionally showing the page control, depending on what page you're on.
If you could get the UIPageViewController to query its UIPageViewControllerDataSource, you could try returning 0 from presentationCountForPageViewController: while transitioning to the last view controller, but it will never be a good solution, as you're trying to circumvent what the controller is internally managing for you.
You can use UIAppearance to change the color of UIPageControl.
This can be used to only apply a style for a particular view controller, as follows:
UIPageControl *pageControl = [UIPageControl appearanceWhenContainedIn:[LastViewController class], nil];
pageControl.pageIndicatorTintColor = [UIColor clearColor];
pageControl.currentPageIndicatorTintColor = [UIColor clearColor];
pageControl.backgroundColor = [UIColor clearColor];
This, however, won't remove it from the view, and the page control's gestures would still be active.
I have a UIPageViewController set up. There's a black bar that appears under the dot indicators. Is there anyway to remove the black bar? Thanks.
UPDATE:
I have learned that the bar you see by the page indicators is part of the UIPageViewController. Therefore making it clear, or any color is just changing the color of the page view controller which lays behind whatever view your on now. So if you have an image as a background and you don't want the bar don't use UIPageViewController.
You can use UIAppearance to change the color of UIPageControl. Otherwise it is not accessible.
UIPageControl *pageControl = [UIPageControl appearance];
pageControl.backgroundColor = [UIColor blueColor];
You can add this code for example in the app's delegate method:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
I'm trying to implement a simple tutorial using UIPageViewController in iOS7. I implement all methods in UIPageViewControllerDataSource and it gives me a UIPageControl. Everything works except that the pageControl's background is not transparent so it blocks part of the other views behind it.
I try to change the pageControl's appearance with the following code
pageControl.backgroundColor = [UIColor greenColor]; //works, background is green
pageControl.backgroundColor = [UIColor clearColor]; //not working, background is black.
//updates
It turns out that the black color is the background color of the PageControl's layer. And this Page Control layer is not on top of my own ViewControllers that I used for pages. They are in parallel.So no matter how I modify its colors, I cannot get my ViewControllers to take the full screen.
Is there an easy way to move the PageControl on top of my ViewControllers?
It could be the background of the parent view. I had a similar situation where the background color was actually the background of my parent control, not my own. Here is a tool I use that helped me narrow this down : http://www.sparkinspector.com. Here is another tool that does the same thing : http://revealapp.com.
Also one more thing - not sure if this would apply to your case, but it could be the background layer that might need its color set
CALayer *layer = self.layer;
[layer setBackgroundColor:[UIColor clearColor]];
if you set something to be clear color, the background color then depends on whatever is on the background, the view the page control is in (usually a uipagecontrol) has no background, and this is why you're seeing it as black.
The iOS7 Facebook App has a right side menu that can be shown by swiping right to left or clicking on the upper right button. When this menu is opened the there is a color transition in the entire status bar from blue to black and vice-versa when closed.
This image shows both status bar side-to-side
This looks like a very good solution for iOS Apps with side menus.
Any ideas or ways about how to accomplish this?
I am currently using JASidePanels.
Thanks!
I managed to find a very simple, elegant way to do this, that mimics the Facebook app functionality perfectly.
Here's my approach:
Create view with status bar frame
Set view background color to black, opacity to 0
Add view as subview to any root view (you need a view that will cover both the center view and the menus, so that it won't be confined to any single view - a good option for this is the container view controller used by your menu controller implementation)
Set view's opacity in your menu controller implementation's menu animation method
Here's my specific implementation, using MMDrawerController:
I subclassed MMDrawerController (I actually already had a subclass for using MMDrawerController with storyboards), and added this code to the class's init method:
// Setup view behind status bar for fading during menu drawer animations
if (OSVersionIsAtLeastiOS7()) {
self.statusBarView = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]];
[self.statusBarView setBackgroundColor:[UIColor blackColor]];
[self.statusBarView setAlpha:0.0];
[self.view addSubview:self.statusBarView];
}
// Setup drawer animations
__weak __typeof(&*self) weakSelf = self; // Capture self weakly
[self setDrawerVisualStateBlock:^(MMDrawerController *drawerController, MMDrawerSide drawerSide, CGFloat percentVisible) {
MMDrawerControllerDrawerVisualStateBlock block;
block = (drawerSide == MMDrawerSideLeft) ? [MMDrawerVisualState parallaxVisualStateBlockWithParallaxFactor:15.0] : nil; // Right side animation : Left side animation
if(block){
block(drawerController, drawerSide, percentVisible);
}
[weakSelf.statusBarView setAlpha:percentVisible]; // THIS IS THE RELEVANT CODE
}];
I also added self.statusBarView as a private property.
The first section of code creates a view, configures it, and adds it as a subview of the MMDrawerController subclass's view. The OSVersionIsAtLeastiOS7() method is a custom method that simplifies the check to see if the device is running iOS 7 (if it isn't, your custom view will show up below the status bar, which you don't want).
The second section of code is MMDrawerController's setDrawerVisualStateBlock method, which sets the animations code to be performed when a menu is being opened and closed. The first few lines of code are boilerplate code that sets one of the prebuilt animations blocks to each menu (I wanted parallax on the left, but nothing on the right). The relevant code is the last line of the block: [weakSelf.statusBarView setAlpha:percentVisible];, which sets the status bar view's opacity to match the percentage that the menu is currently open. This allows for the smooth cross animation you see in the Facebook app. You'll also notice I've assigned self to a variable weakSelf, so as to avoid the "retain cycle" compiler warning.
This is my specific approach using MMDrawerController and a subclass, which I did more for convenience because I already had the subclass in place, than because it is necessarily the best approach or the only way to do it. It could probably be implemented in several other ways, using MMDrawerController without a subclass, or using any other side-drawer menu implementation.
The ending result is a smooth fading to black animation behind the status bar, exactly as you see in the new Facebook app.
I've been trying to accomplish the same thing. The method I am using to do this is based on the following concepts:
A background image with a height of 64 points will fill both the
UINavigationBar and the UIStatusBar.
A background image with a height of 44 points will fill the UINavigationBar and leave the
UIStatusBar black.
You can add an subview to the top of the current navigationController's view and it will sit underneath the UIStatusBar.
So, first, you need to create two images with your desired UINavigationBar look:
A 640x128px image to cover navigation bar and status bar (ImageA)
And a 640x88px image to cover the navigation bar but leave the status bar black (ImageB).
In the application:didFinishLaunchingWithOptions: method, set the background of your UINavigationBar with ImageA with [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"ImageA.png"] forBarMetrics:UIBarMetricsDefault];
When the side menu starts to open, you are going to want switch the UINavigationBar so it uses ImageB and create a view which you will add underneath the UIStatusBar. Here is some sample code for doing just that:
// Add a property for your "temporary status bar" view
#property (nonatomic, strong) UIView *temporaryStatusBar;
And in the code where the side menu starts to open:
// Create a temporary status bar overlay
self.temporaryStatusBar = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]];
self.temporaryStatusBar.backgroundColor = [UIColor yourColor];
[self.navigationController.view addSubview:self.temporaryStatusBar];
// Update both the current display of the navigationBar and the default appearance values
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"imageB.png"] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:#"imageB.png"] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setNeedsDisplay];
As the side menu animates open, or as the user pans the menu, all you need to do then is adjust the alpha level of the UIStatusBar overlay. When the side menu is fully open, the UINavigationBar should have ImageB as its background image and the UIStatusBar overlay should have an alpha of 0. When the side menu closes, you'll want to replace the UINavigationBar background with ImageA and remove the UIStatusBar overlay.
Let me know if this works for you!
You can use this awesome slide menu library
https://github.com/arturdev/AMSlideMenu
In this demo project you can see how to do that by writing 4 lines of code.
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
// Setting navigation's bar tint color
self.navigationController.navigationBar.barTintColor = [UIColor colorWithHex:#"#365491" alpha:1];
// Making view with same color that navigation bar
UIView *statusBarView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 20)];
statusBarView.backgroundColor = [UIColor colorWithHex:#"#365491" alpha:1];
// Replace status bar view with created view and do magic :)
[[self mainSlideMenu] fixStatusBarWithView:statusBarView];
}
In my app, I use a navigation controller to switch between different views. Each of my views has an image for a background, but when I go from one to another, a little bit of white shows up in between them while transitioning. Is there a way to change that?
In the Table View Class I have this in the viewDidLoad:
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"parchment.png"]];
self.tableView.backgroundColor = [UIColor clearColor];
self.tableView.backgroundView = imageView;
[imageView release];
In the detail view I have just a standard loadrequest for an HTML. The HTML itself has the code for the parchment paper to be a background image. Here is what they look like:
But, going back from the detail view with the verses to the table view, I get this:
In your:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
method of AppDelegate. assign background color to window like this:
self.window.backgroundColor = [UIColor blackColor]; // or anycolor
Have you tried changing the background color property of the view?
[[self view] setBackgroundColor:[UIColor redColor]];
The issue was in the viewWillDisappear of the web view controller. It was set to change webpage to about:blank page, which made it white. I got rid of that code, and it worked fine.
Try to set the background color of the navigation controller's view.
In your navigation controller's root view controller (I guess it's the table view controller)
self.navigationController.view.backgroundColor = // any color ;