iOS JASidePanel status bar customization

Question

I am using JASidePanels in my app and everything is so far so good. My design team have come up with a UI design like this, when the side panel is shown or revealed,

But I am able to reproduce like! this.

What all I have tried so far:

I tried setting the center panels background color to the image that I have in the right panel - No luck.

I tried setting the sidePanel.view.backgroundColor and also tintColor - No luck.

Any help is appreciated!

Answer 1

This is JASidePanels's bug , however they fixed the issue by doing this: in the JASidePanelsController add below code to _adjustCenterFrame

- (CGRect)_adjustCenterFrame {
    CGRect frame = self.view.bounds;

    if(SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"7.0"))
    {
        if (![UIApplication sharedApplication].statusBarHidden) {
                        frame.origin.y = frame.origin.y + [UIApplication sharedApplication].statusBarFrame.size.height;
                        frame.size.height = frame.size.height - 20;
                    }

        } 
...
}

Also in _layoutSideContainers add :

- (void)_layoutSideContainers:(BOOL)animate duration:(NSTimeInterval)duration {
    CGRect leftFrame = self.view.bounds;
    CGRect rightFrame = self.view.bounds;



    if(SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"7.0"))
    {
        if (![UIApplication sharedApplication].statusBarHidden) {
                    leftFrame.origin.y = leftFrame.origin.y + [UIApplication sharedApplication].statusBarFrame.size.height;
                    rightFrame.origin.y = rightFrame.origin.y + [UIApplication sharedApplication].statusBarFrame.size.height;
            leftFrame.size.height = leftFrame.size.height - 20;
            rightFrame.size.height = rightFrame.size.height - 20;
                        }
            }

    ...
}

reference :

https://github.com/hamin/JASidePanels/commit/81ae7514d275d9242ad268ab818441c8d786a63e

and

https://github.com/gotosleep/JASidePanels/pull/164

Answer 2

I tried a simple test base on JASidePanels' demo source code. And got this effect:

If this is not what you want, please ignore this answer and delete it.

---

It works by modifying the source code of JASidePanels:

For testing, I add self.window.backgroundColor = [UIColor redColor]

In your situation, you may add [self.window addSubview:backgroundImageView] or jaSidePanelController.view addSubview:backgroundImageView (please test this by yourself)

Then resize the left panel's frame by add additional space to let left panel don't cover your background image view for the status bar. In JASidePanelController#_layoutSidePanels

PS: for more details, you should read articles about iOS 7 status bar like http://www.doubleencore.com/2013/09/developers-guide-to-the-ios-7-status-bar/

BTW: I'm curious that there's no cornerRadius in your screenshot.

Answer 3

Just set the cornerRadius 0.0f in JASlidePanelController.m file:

- (void)stylePanel:(UIView *)panel {
      //do changes in below cornerRadius
      panel.layer.cornerRadius = 0.0f;
      panel.clipsToBounds = YES;   }