UISplitViewController: remove divider line

Question

When using UISplitViewController on the iPad there's a black vertical divider line between the root and detail view. Is there any way to remove this line?

Thanks

Solution 1

I looked around for a while, and came to the conclusion that theres no way to do this, other than to create your own custom split view.

Solution 2

Excellent answer by @bteapot. I tested this and it works, even gets rid of the line between master/detail nav bars.

You can do this in storyboard by adding the "gutterWidth" key path and the value 0 to the USplitViewController runtime attributes.

Solution 3

Actuly I have some modification to answer of (Dylan)'s answer

in the appDelegate we need to add image in spliteview controller rather then window

self.splitViewController.view.opaque = NO;  
imgView = [[UIImageView alloc] initWithImage:
        [UIImage imageNamed:@"FullNavBar.png"]];  
[imgView setFrame:CGRectMake(0, 0, 1024, 44)];  
[[self.splitViewController view] insertSubview:imgView atIndex:0]; 
[[self.splitViewController view] setBackgroundColor:[UIColor clearColor]];  

here self is object of AppDelegate.

now Apply the answer of this thread : iPhoneOS SDK - Remove Corner Rounding from views (iPad problem) answer by (abs)

edit in above post's answer is

-(void) fixRoundedSplitViewCorner {  
     [self explode:[[UIApplication sharedApplication] keyWindow] level:0];  
}  
-(void) explode:(id)aView level:(int)level 
{

    if ([aView isKindOfClass:[UIImageView class]]) {
        UIImageView* roundedCornerImage = (UIImageView*)aView;
        roundedCornerImage.hidden = YES;
    }
    if (level < 2) {
        for (UIView *subview in [aView subviews]) {
            [self explode:subview level:(level + 1)];
        }
    }

    imgView.hidden = FALSE;
}

** make imgView.hidden to FALSE declare imgView to the AppDelegate.h file**

and dont forget to call this

-(void)didRotateFromInterfaceOrientation:
        UIInterfaceOrientation)fromInterfaceOrientation
{
    [yourAppDelegate performSelector:@selector(fixRoundedSplitViewCorner) 
          withObject:NULL afterDelay:0];
}

Solution 4

chintan adatiya answer covers only the corners and the navigation bar, but I found an trick how to cover the line between the Master and the Detail view.

It is not nice but it works like a charm.

1. First create an image which is 1 px wide and 704 pixels high.

2. In the didFinishLaunchingWithOptions add the following code:

   UIView *coverView = [[UIView alloc] initWithFrame:CGRectMake(320, 44, 1, 704)];
   [coverView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"divider_cover.png"]]];
   
   [splitViewController.view addSubview:coverView];
   

And done.

When you want a background image which is continues create 3 images:

• Master: width: 320, height: 704
• Detail: width: 703, height: 704
• Divider:width: 1, height: 704

Solution 5

First post here, hi everyone.

I discovered how to do it accidentally... when I tried to find why I had LOST the divider line. Here's how to hide it, if you're still interested:

1) In your Detail (right-side) view, make sure you have a subview that spans the whole view.

2) Offset this subview view to (-1, 0).

3) Make sure that the Detail View has its "Clip Subviews" option unchecked.

Voilà, enjoy.

View more solutions