I'm making a tutorial when app launches for the first time and using UIPageViewController for that. Everything is working fine but the background color of UIPageViewController is not getting transparent. It's always black, as shown below:
Here's how I'm adding the UIPageViewController (in a tabbar controller)
.h file:
#interface CHMainTabViewController : UITabBarController <UIPageViewControllerDataSource>
#property (strong, nonatomic) UIPageViewController *pageViewController;
#end
.m file (in viewDidLoad):
// Create page view controller
self.pageViewController = [self.storyboard instantiateViewControllerWithIdentifier:#"PageViewController"];
self.pageViewController.dataSource = self;
self.pageViewController.view.backgroundColor = [UIColor clearColor];
TutorialViewController *startingViewController = [self viewControllerAtIndex:0];
NSArray *viewControllers = #[startingViewController];
[self.pageViewController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil];
[self presentViewController:_pageViewController animated:YES completion:nil];
in my AppDelegate.m, I've also set UIPageControl's background color to clear:
UIPageControl *pageControl = [UIPageControl appearance];
pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
pageControl.currentPageIndicatorTintColor = [UIColor blackColor];
pageControl.backgroundColor = [UIColor clearColor];
[pageControl setOpaque:NO];
self.window.backgroundColor = [UIColor clearColor];
I know that the issue is with the UIPageViewController's background color. Is it not possible to set a Controller's background to be transparent?
Please help!
Thanks.
Okay I've found the solution:
Set a background image on the UIPageViewController.
UIView *view = [[UIView alloc] init];
view.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
UIImageView *imageView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"login_backgroung"]];
imageView1.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
[view addSubview:imageView1];
// Create page view controller
self.pageViewController = [self.storyboard
instantiateViewControllerWithIdentifier:#"PageViewController"];
self.pageViewController.dataSource = self;
self.pageViewController.view.backgroundColor = [UIColor clearColor];
[self.pageViewController.view insertSubview:view atIndex:0];
For your PageViewController viewControllers , choose a PNG Image with graphics or whatever you want, but make sure the background is transparent.
Set your UIPageControl's background as transparent in appDelegate.m
UIPageControl *pageControl = [UIPageControl appearance];
pageControl.pageIndicatorTintColor = [UIColor whisperWhite];
pageControl.currentPageIndicatorTintColor = [UIColor whisperDarkGray];
pageControl.backgroundColor = [UIColor clearColor];
Now run and your UIPageViewController will look like this, (notice the background static and only the text is moving, as we swipe from right to left):
Set these to the page view controller before presenting it
pageViewController.providesPresentationContextTransitionStyle = YES;
pageViewController.definesPresentationContext = YES;
[pageViewController setModalPresentationStyle:UIModalPresentationOverCurrentContext];
Related
I'm presenting my view controller with the following code:
UINavigationController* navigation = [[UINavigationController alloc] initWithRootViewController:sessionController];
[self presentViewController:navigation animated:YES completion:^{
}];
from within the presented view controller "viewDidLoad" method I'm attempting to set the navigation bar color with the following, but I am not successful:
self.navigationController.navigationBar.tintColor = [UIColor blackColor];
self.navigationController.navigationBar.backgroundColor = [UIColor blackColor];
self.navigationController.view.backgroundColor = [UIColor blackColor];
UINavigationBar.appearance.backgroundColor = [UIColor blackColor];
UINavigationBar.appearance.tintColor = [UIColor blackColor];
The navigation bar color will NOT change from white. Any advice would be much appreciated.
Note: I am not using story boards or XIB files.
Try the following code to change the background color:
[self.navigationController.navigationBar setBarTintColor:[UIColor blackColor]];
[self.navigationController.navigationBar setTranslucent:NO];
The navigation controller object create when applied the color. Like this below example.
UINavigationController* navigation = [[UINavigationController alloc] initWithRootViewController:sessionController];
navigation.navigationBar.tintColor = [UIColor blackColor];
navigation.navigationBar.backgroundColor = [UIColor blackColor];
navigation.navigationBar.barTintColor = [UIColor blackColor];
[self presentViewController:navigation animated:YES completion:^{
}];
And below this method all navigation controller change color.
UINavigationBar.appearance.backgroundColor = [UIColor blackColor];
UINavigationBar.appearance.tintColor = [UIColor blackColor];
I have a container UIViewController (IntroViewController), in which I load a UIPageViewController (PageViewController). In the UIPageViewController, I have IntroPageContentViewControllers and a LastIntroPageContentViewController.
I want to have a background image in the UIPageViewController. If I put it in IntroViewController, it isn't viewable. I can't put it in the UIPageViewController, and when I put it in one of the ContentViewControllers it scrolls in and out with each page. I want it to be in one place and only scroll the content.
Where do I put the UIImageView and where should I bringSubviewToFront or something alike?
Simply put the UIImageView into container UIViewController and set view.backgroundColor property to [UIColor clearColor] for both content view controllers.
Here you have an example how it works:
https://github.com/Wojdan/stackAnswers/tree/master/33912671
UIView *view = [[UIView alloc] init];
view.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
UIImageView *imageView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"login_backgroung"]];
imageView1.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
[view addSubview:imageView1];
// Create page view controller
self.pageViewController = [self.storyboard
instantiateViewControllerWithIdentifier:#"PageViewController"];
self.pageViewController.dataSource = self;
self.pageViewController.view.backgroundColor = [UIColor clearColor];
[self.pageViewController.view insertSubview:view atIndex:0];
UIPageControl *pageControl = [UIPageControl appearance];
pageControl.pageIndicatorTintColor = [UIColor whisperWhite];
pageControl.currentPageIndicatorTintColor = [UIColor whisperDarkGray];
pageControl.backgroundColor = [UIColor clearColor];
Ideally, You should be adding UIPageViewControlleras child of it parentViewController. In your case IntroViewController is parent and PageViewController will become child of it.
Now, you set IntroViewController background colour from image like below :
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"background"]];
And then, you can clear background colours for content view controllers which are you planning to add into UIPageViewController.
However, you may have to comment below delegate to remove page control from bottom of `UIPageViewController'
- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController
{
}
Hope this helps.
I have this code in viewDidLoad:
[self.navigationController setNavigationBarHidden:YES];
self.edgesForExtendedLayout = UIRectEdgeNone;
self.view.autoresizingMask = UIViewAutoresizingFlexibleHeight;
self.view.backgroundColor = [UIColor whiteColor];
//we need to add white background behind the status bar
CGFloat statusBarHeight = [UIApplication sharedApplication].statusBarFrame.size.height;
UIView* statusBarWhiteBackGround = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, statusBarHeight)];
[statusBarWhiteBackGround setBackgroundColor:[UIColor whiteColor]];
[self.view addSubview:statusBarWhiteBackGround];
UIView * redBackGroundColor = [[UIView alloc] init];
[redBackGroundColor setBackgroundColor:[UIColor redColor]];
redBackGroundColor.frame =CGRectMake(0,statusBarHeight , self.view.frame.size.width, self.view.frame.size.height-statusBarHeight);
[self.view addSubview:redBackGroundColor];
statusWhiteBackGround view is used to change the color of the status bar.
here is the result of the above code:
but when the app enter background and then back to foreground, the redBackGroundColor view change it's orging.y as you can see in the bellow picture:
what's the problem ?thanks
Create a UIView programatically on method
-(void)viewDidLayoutSubviews{
screen=[[UIScreen mainScreen] bounds];
//Simple view
self.customView = [[CustomAlertOKView alloc]initWithFrame:CGRectMake(0, 20, screen.size.width, screen.size.height)];
[self.view addSubView:customView];
}
or
Create a view using storyboard and set the x as 0, y value as 20,width and height based on the screen size
#IBOutlet UIView *customView;
set the outlet in the storyboard,
Then set the background color of the custom view to redcolor and main view to white color
self.view.backgroundColor = [UIColor whiteColor];
customView.backgroundColor = [UIColor redColor];
I search on the web and found similar answers like this( How do I make the bottom bar with dots of a UIPageViewController translucent?) but it doesn't solve my problem.
Here is my code
// PageControl Layout
UIPageControl *pageControl = [UIPageControl appearance];
pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
pageControl.currentPageIndicatorTintColor = [UIColor blackColor];
pageControl.backgroundColor = [UIColor clearColor];
// pageControl.frame = CGRectMake(5,5,305,400);
pageControl = [UIPageControl appearanceWhenContainedIn:[self class], nil];
indexCurrentPage = 0;
pageController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];
[pageController.view setFrame:[[UIScreen mainScreen] bounds]];
NSLog(#"page controller.fram is %#", [NSValue valueWithCGRect:[[pageController view] frame]]);
pageController.dataSource = self;
GuidedTourPage *initialViewController = [self viewControllerAtIndex:0];
[[self.pageController view] setFrame:[[initialViewController view] bounds]];
NSLog(#"bound is %#", [NSValue valueWithCGRect:[[initialViewController view] bounds]]);
NSArray *viewControllers = [NSArray arrayWithObject:initialViewController];
[pageController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil];
[self addChildViewController:self.pageController];
[self.view addSubview:[pageController view]];
[pageController didMoveToParentViewController:self];
The scrolling function and everything else work fine. Except there is a portion of the image is missing.
I did self.window.backgroundColor = [UIColor whiteColor]; in my "AppDelegate.m" so it's understandable that pageControl.backgroundColor = [UIColor clearColor]; will make the background to be white.
But I want something like this (http://www.appcoda.com/wp-content/uploads/2013/06/UIPageViewController-Tutorial-Screen.jpg), in which the pageControl has a transparent background.
I know the problem lies in the layer. But I don't know how to fix it.
Is there a way to NSLog the layer hierarchy to check it? Or is there any tester software that can help me test the layer problem.
I don't think this will be a very hard problem as long as I can find a way to debug the layers like the 3D-Inspect element function in Firefox.
Thanks in advance
Try this:
UIPageControl *pageControl = [UIPageControl appearance];
pageControl.backgroundColor = [UIColor clearColor];
You can play with Alpha too:
[[UIColor alloc] initWithRed:0.0f green:0.0f blue:0.0f alpha:0.7];
So, the statement would become:
pageControl.backgroundColor = [[UIColor alloc] initWithRed:0.0f green:0.0f blue:0.0f alpha:0.7];
Something like this should work fine:
[self.pageCont setBackgroundColor:[[UIColor whiteColor] colorWithAlphaComponent:0.5]];
I have verified this solution,
please subclass UIPageViewController and add this method in implementation.
- (void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
for (UIView *view in self.view.subviews) {
if ([view isKindOfClass:[NSClassFromString(#"_UIQueuingScrollView") class]]) {
CGRect frame = view.frame;
frame.size.height = view.superview.frame.size.height;
view.frame = frame;
[self.view sendSubviewToBack:view];
}
}
}
This will resolve the issue.
Thanks
I am using UIPageControl and trying to make the background transparent.
UIPageControl *pageControl = [UIPageControl appearance];
pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
pageControl.currentPageIndicatorTintColor = [UIColor blackColor];
pageControl.backgroundColor = [UIColor blackColor];
Any suggestions?
Tried
pageControl.backgroundColor = [UIColor clearColor];
no luck.
============
Okay, as mentioned by #powerj1984 and #daniellarsson UIPageControl seems to be not alterable with respect to position and background color.
So I decided to move this to UIViewController and created a UIPageControl and
#property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
And then bring this to top of my UIPageViewController as in viewDidLoad
self.pageControl.numberOfPages = self.pageTitles.count;
[self.view addSubview:_pageControl.viewForBaselineLayout];
Then I updated the index of UIPageControl in viewControllerBeforeViewController and viewControllerAfterViewController
NSUInteger index = ((HomePageContentViewController*) viewController).pageIndex;
self.pageControl.currentPage = index;
Okay, as mentioned by #powerj1984 and #daniellarsson UIPageControl seems to be not alterable with respect to position and background color.
So I decided to move this to UIViewController and created a UIPageControl and
#property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
And then bring this to top of my UIPageViewController as in viewDidLoad
self.pageControl.numberOfPages = self.pageTitles.count;
[self.view addSubview:_pageControl.viewForBaselineLayout];
Then I updated the index of UIPageControl in viewControllerBeforeViewController and viewControllerAfterViewController
NSUInteger index = ((HomePageContentViewController*) viewController).pageIndex;
self.pageControl.currentPage = index;
pageControl.backgroundColor = [UIColor clearColor];
is working but!! than you have to set the backgroundColor of the UIPageViewController also on [UIColor clearColor] and than! you will see the backgroundcolor of the container view.
- (void)initPageViewController
{
_pageController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll
navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal
options:nil];
UIImageView *imgView= [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
imgView.image = [UIImage imageNamed:#"NiceBGImage"];
[self.view addSubview:imgView];
self.view.backgroundColor = [UIColor clearColor];
_pageController.view.frame = ({
CGRect frame = [[UIScreen mainScreen] bounds];
frame;
});
_pageController.delegate = self;
_pageController.dataSource = self;
_pageController.view.backgroundColor = [UIColor clearColor];
NSArray *controllers = #[_controllers[0]];
[self.pageController setViewControllers:controllers
direction:UIPageViewControllerNavigationDirectionForward
animated:NO
completion:nil];
UIPageControl *pageControl = [UIPageControl appearance];
pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
pageControl.currentPageIndicatorTintColor = [UIColor whiteColor];
pageControl.backgroundColor = [UIColor clearColor];
pageControl = [UIPageControl appearanceWhenContainedIn:[_pageController class], nil];
[self addChildViewController:_pageController];
[[self view] addSubview:_pageController.view];
[self.pageController didMoveToParentViewController:self];
}
Page control is transparent by default.
Check with this sample code:
UIPageControl *pageControl = [[UIPageControl alloc] init];
pageControl.frame = CGRectMake(10,10,100,100);
pageControl.numberOfPages = 8;
pageControl.currentPage = 0;
[self.view addSubview:pageControl];
[self.view bringSubviewToFront:pageControl];
[self.view setBackgroundColor:[UIColor blackColor]];
Please find the more customization possibilities below
Appearance of Page Controls
You can customize the appearance of a page control by setting the properties depicted below.
To customize the appearance of all page controls in your app, use the appearance proxy (for example, [UIPageControl appearance]). For more information about appearance proxies, see Appearance Proxies.
Tint Color
The only way to customize the appearance of a page control is by setting custom tints for the dots representing each page. The Current Page (currentPageIndicatorTintColor) field affects the color of the dot representing the currently displayed page, and the Tint Color (pageIndicatorTintColor) field affects the color of the dots representing every other page. The default color is white for the current page dot, and translucent gray for the other page dots.
If you want your custom colors to be translucent, you must specify a color with an alpha value of less than 1.0. This must be done programmatically, as in the following example:
self.myPageControl.currentPageIndicatorTintColor = [UIColor colorWithRed:0.0 green:0.0 blue:1.0 alpha:0.5];
self.myPageControl.pageIndicatorTintColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.5];
Check more details in UIPageControl - Developer.Apple documentation
As of Xcode 6.1.1 and iOS 8.1.1, I know that setting the background color of a UIPageControl object to the clear color worked for me.
[[self pageControl] setBackgroundColor:[UIColor clearColor]];
I finally found a working solution for this problem in Swift. You can find the original code and answer in this link.
It requires you to override the viewDidLayoutSubviews() function to bring the page control to the front of the view.
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let subViews: NSArray = view.subviews
var scrollView: UIScrollView? = nil
var pageControl: UIPageControl? = nil
for view in subViews {
if view.isKindOfClass(UIScrollView) {
scrollView = view as? UIScrollView
}
else if view.isKindOfClass(UIPageControl) {
pageControl = view as? UIPageControl
}
}
if (scrollView != nil && pageControl != nil) {
scrollView?.frame = view.bounds
view.bringSubviewToFront(pageControl!)
}
}
It could work if you set the background color of the UIPageControl to a background image that looks the same as your VC's background color:
[UIPageControl appearance].backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"pageControllerBackground"]];
Here is the answer with extension of Juan Ariza
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let subViews: NSArray = view.subviews
var scrollView: UIScrollView? = nil
var pageControl: UIPageControl? = nil
for view in subViews {
if view.isKindOfClass(UIScrollView) {
scrollView = view as? UIScrollView
}
else if view.isKindOfClass(UIPageControl) {
pageControl = view as? UIPageControl
pageControl?.pageIndicatorTintColor = UIColor.lightGrayColor()
pageControl?.currentPageIndicatorTintColor = UIColor.blackColor()
pageControl?.backgroundColor = UIColor.clearColor()
}
}
if (scrollView != nil && pageControl != nil) {
scrollView?.frame = view.bounds
view.bringSubviewToFront(pageControl!)
}
}
Try this:
pageControl = [UIPageControl appearance];
//for change the bullets color
pageControl.pageIndicatorTintColor = [UIColor colorWithRed:(129.0/255) green:(129.0/255) blue:(129.0/255) alpha:1.0];
pageControl.currentPageIndicatorTintColor = [UIColor colorWithRed:(06.0/255) green:(122.0/255) blue:(145.0/255) alpha:1.0];
pageControl.backgroundColor = [UIColor clearColor];