How to make UIPageViewController background translucent? - ios

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

Related

How to add a shadow effect for UINavigation bar

Hello, I want to add this kind of shadow for my NAvigationBar How can I do that.
This is how I tried to add shadow.
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage=[UIImage new];
self.navigationController.navigationBar.translucent=YES;
self.navigationController.navigationBar.topItem.titleView.tintColor=[UIColor whiteColor];
self.navigationController.navigationBar.titleTextAttributes=[NSDictionary dictionaryWithObject:[UIFont fontWithName:#"HelveticaNeue" size:15.0f] forKey:NSFontAttributeName];
self.navigationController.navigationBar.topItem.title=strNavigtionTitle;
self.navigationController.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:NSForegroundColorAttributeName];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"backarrow"] style:UIBarButtonItemStylePlain target:self action:#selector(revealToggle :)];
[self.navigationController navigationBar].tintColor = [UIColor whiteColor];
[self.navigationController navigationBar].layer.shadowColor=[UIColor colorWithRed:53.0/255.0 green:108.0/255.0 blue:130.0/255.0 alpha:1.0f].CGColor;
[self.navigationController navigationBar].layer.shadowOffset=CGSizeMake(0, 20);
[self.navigationController navigationBar].layer.shadowOpacity=0.8;
[self.navigationController navigationBar].layer.shadowRadius=5.5;
But this only add a shadow for the arrow and my Apply Leave title. But I want to add a drop shadow like in this image.It should be between the NavigationBar and my main UIView How can I do this? Please help me.
Thanks
Here you'll need to import the QuartzCore framework.
self.navigationController.navigationBar.layer.borderColor = [[UIColor whiteColor] CGColor];
self.navigationController.navigationBar.layer.borderWidth = 2; //Set border you can see the shadow
self.navigationController.navigationBar.layer.shadowColor = [[UIColor blackColor] CGColor];
self.navigationController.navigationBar.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);
self.navigationController.navigationBar.layer.shadowRadius = 3.0f;
self.navigationController.navigationBar.layer.shadowOpacity = 1.0f;
self.navigationController.navigationBar.layer.masksToBounds = NO;
Another thing
You have to
set self.layer.masksToBounds = NO;
The default value for this property is YES, which means that even though the shadow is rendered, it won't be rendered outside the bounds of the view, which means effectively that you don't see it at all.
If you're animating this view in any way, you should also add this line:
self.layer.shouldRasterize = YES;
self.navigationController.navigationBar.layer.shadowColor = [[UIColor blackColor] CGColor];
self.navigationController.navigationBar.layer.shadowOffset = CGSizeMake(2.0f, 2.0f);
self.navigationController.navigationBar.layer.shadowRadius = 4.0f;
self.navigationController.navigationBar.layer.shadowOpacity = 1.0f;
I could achieve that in this way. I removed adding a shadow to the Navigation bar. Instead of that I put a same size view under the navigation bar. Set the background color of it to to the navigation bar color. Then added the shadow for that view. This worked perfectly.
-(void)setupNavigationBar
{
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage=[UIImage new];
self.navigationController.navigationBar.translucent=YES;
self.navigationController.navigationBar.topItem.titleView.tintColor=[UIColor whiteColor];
self.navigationController.navigationBar.titleTextAttributes=[NSDictionary dictionaryWithObject:[UIFont fontWithName:#"HelveticaNeue" size:15.0f] forKey:NSFontAttributeName];
self.navigationController.navigationBar.topItem.title=strNavigtionTitle;
self.navigationController.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:NSForegroundColorAttributeName];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"backarrow"] style:UIBarButtonItemStylePlain target:self action:#selector(revealToggle :)];
[self.navigationController navigationBar].tintColor = [UIColor whiteColor];
UIView *shadow=[[UIView alloc] initWithFrame:CGRectMake(0, 0, dm.screenWidth, 64)];
[shadow setBackgroundColor:[UIColor colorWithRed:62.0/255.0 green:81.0/255.0 blue:119.0/255.0 alpha:1.0]];
shadow.layer.shadowColor=[UIColor colorWithRed:51/255 green:76/255 blue:104/255 alpha:1.0].CGColor;
shadow.layer.shadowOffset=CGSizeMake(0, 15);
shadow.layer.shadowOpacity=0.12;
shadow.layer.shadowRadius=4.5;
[self.view addSubview:shadow];
}

UIPageViewController and UIPageControl transparent background color - iOS

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];

Remove between UITableView and UINavigationBar

I have an UITableView which I am trying to make the background color of the first cell match the color of the UINavigationBar, as seen in the screenshot below.
However, as you can see, there is a dark border between both objects which I don't know where is coming from.
Moreover, it is evident that the tone of the color used is not the same in both cases, despite using the same [UIColor colorWithRed:] code. This is not the main problem, but I wanted to mention this too.
Any thoughts?
EDIT
viewDidLoad:
self.tableView.separatorColor = [UIColor clearColor];
self.tableView.backgroundColor = [UIColor colorWithRed:0.97 green:0.97 blue:0.97 alpha:1.0];
self.tableView.scrollEnabled = NO;
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.navigationBar.clipsToBounds = YES;
self.navigationController.navigationBar.translucent = NO;
cellForRowAtIndexPath:
cell.backgroundColor = myColor;
Try this:
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];
But if you want to remove the hairline alone and keeping the blur effect, try:
self.navigationController.navigationBar.clipsToBounds = YES;
and by the way, this is my actual code of testing:
- (void)viewDidLoad
{
[super viewDidLoad];
UIView *red = [[UIView alloc] initWithFrame:CGRectMake(0, 20, 44, 44)];
red.backgroundColor = [UIColor redColor];
[self.view addSubview:red];
self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.clipsToBounds = YES;
}
Sample output be:
Update:
Looks like -clipToBounds do not suits your implementation.
Here what i think suits yours:
self.navigationController.navigationBar.barTintColor = [UIColor colorWithRed:0 green:0.5 blue:0.97 alpha:1.0];
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.translucent = NO;
Before: After:
Note: The [UIColor colorWithRed:0 green:0.5 blue:0.97 alpha:1.0] is just for example, assign your desired color to .barTintColor.
Perhaps
//0084D3
UIColor * color = [UIColor colorWithRed:0/255.0f green:132/255.0f blue:211/255.0f alpha:1.0f];
//006FCC
UIColor * color = [UIColor colorWithRed:0/255.0f green:111/255.0f blue:204/255.0f alpha:1.0f];
is what you need based from UIColor Code Generator :)
Hope this is helpful.. Cheers.. :)
The line you're seeing is the navigation bar's shadowImage. You can remove it by adding
self.navigationController.navigationBar.shadowImage = [UIImage new];
EDIT
Not sure if you've solved this already, but I set up a brand new project with a UITableViewController embedded in a UINavigationController and there's no line under the nav bar. Here's the configuration I did:
In viewDidLoad:
self.navigationController.navigationBar.translucent = NO;
[self.navigationController.navigationBar setBarTintColor:myColor];
self.tableView.backgroundColor = myColor;
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
In tableView:cellForRowAtIndexPath:
cell.contentView.backgroundColor = myColor;
cell.textLabel.backgroundColor = myColor;
cell.textLabel.text = #"this";
Nothing special in Storyboard.

iOS TabBarController background color

I have a tabbarcontroller that is pushed onto a navigationController. I tried to change the background color of the tab bar however it does not work:
UIViewController *viewController1, *viewController2;
if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) {
viewController1 = [[Tab1_iPhone alloc] initWithNibName:#"tab1_iPhone" bundle:nil];
viewController2 = [[Tab2_iPhone alloc] initWithNibName:#"tab2_iPhone" bundle:nil];
}
self.tabBarController = [[UITabBarController alloc] init];
CGRect frame = CGRectMake(0.0, 0.0, 480, 48);
UIView *v = [[UIView alloc] initWithFrame:frame];
[v setBackgroundColor:[UIColor blueColor]]; //003366
[v setAlpha:1.0];
[[self.tabBarController tabBar] insertSubview:v atIndex:0];
self.tabBarController.viewControllers = [NSArray arrayWithObjects: viewController1, viewController2, nil];
[self.navigationController setNavigationBarHidden:YES];
[self.navigationController pushViewController:self.tabBarController animated:YES];
[self.window makeKeyAndVisible];
This is the code I saw on a similar post that changes the bg color:
CGRect frame = CGRectMake(0.0, 0.0, 480, 48);
UIView *v = [[UIView alloc] initWithFrame:frame];
[v setBackgroundColor:[UIColor blueColor]]; //003366
[v setAlpha:1.0];
[[self.tabBarController tabBar] insertSubview:v atIndex:0];
Am I doing something wrong?
Thanks
The below code helps you to add custom colors with RGB values to ur tabBar.
self.tabBarController.tabBar.tintColor = [[UIColor alloc] initWithRed:0.00
green:0.62
blue:0.93
alpha:1.0];

creating uiview programmatically?

Creating a view with following code.
- (void)loadView {
paintView=[[UIView alloc]initWithFrame:CGRectMake(0, 50, 320, 430)];
[paintView setBackgroundColor:[UIColor yellowColor]];
self.view = paintView;
[paintView release];
But my problem is whole screen fills with yellow color, but I want with specified frame.
I am creating this view in a view based application.. Am i doing something wrong, Overridind the original view?
You can do it in following way.
- (void)loadView {
/// make a empty view to self.view
/// after calling [super loadView], self.view won't be nil anymore.
[super loadView];
paintView=[[UIView alloc]initWithFrame:CGRectMake(0, 50, 320, 430)];
[paintView setBackgroundColor:[UIColor yellowColor]];
[self.view addSubview:paintView];
[paintView release];
};
UIView *newView = [[UIView alloc] initWithFrame:CGRectMake(0,0,320,35)];
newView.backgroundColor=[UIColor clearColor];
UITextView *mytext = [[UITextView alloc] initWithFrame:CGRectMake(5.0, 0.0, 100.0, 28.0)];
mytext.backgroundColor = [UIColor clearColor];
mytext.textColor = [UIColor blackColor];
mytext.editable = NO;
mytext.font = [UIFont systemFontOfSize:15];
mytext.text = #"Mytext";
mytext.scrollEnabled=NO;
[mytext release];
[newView addSubview:mytext];
[self.view addSubview:newView];
replace self.view =paintView;
by
[self.view addSubview: paintView];
I am Going change Line No 3 in LoadView Method , you should add the subView in main View instead on assiging it Directly.
[self.view addSubview:paintview];

Resources