ios background color only appears on half of screen in landscape mode

Question

I am currently using the following method to set the background color of my view

 //Set the background color
    CAGradientLayer *bgLayer = [BackgroundLayer blueGradient]; <---Calls method below
    bgLayer.frame = self.view.bounds;
    //self.view.layer.backgroundColor = [UIColor redColor].CGColor;
    [self.view.layer insertSublayer:bgLayer atIndex:0];

This is how it obtains the gradient color - this is the method is called above

@implementation BackgroundLayer
//Blue gradient background
+ (CAGradientLayer*) blueGradient {

    UIColor *colorOne = [UIColor colorWithRed:(120/255.0) green:(135/255.0) blue:(150/255.0) alpha:1.0];
    UIColor *colorTwo = [UIColor colorWithRed:(57/255.0)  green:(79/255.0)  blue:(96/255.0)  alpha:1.0];

    NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil];
    NSNumber *stopOne = [NSNumber numberWithFloat:0.0];
    NSNumber *stopTwo = [NSNumber numberWithFloat:1.0];

    NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, nil];

    CAGradientLayer *headerLayer = [CAGradientLayer layer];
    headerLayer.colors = colors;
    headerLayer.locations = locations;

    return headerLayer;
}

@end

Now in the portrait mode the background appears fine. However in Landscape mode it only covers half the screen and the other half is white. Why is that ? And how can I fix it. I tried the following for changing the color

self.view.layer.backgroundColor = [UIColor redColor].CGColor;

The above works fine both in landscape an portrait mode however its not a gradient. Any ideas on how I can make the gradient work ?

Hi,James,See my update, I post a better way to handle this – Leo Apr 17 '15 at 08:47 — Leo, Apr 17 '15 at 08:47

score 2 · Accepted Answer · edited May 23 '17 at 11:50

Easy way:

Just Add this to your viewcontroller

-(void)viewDidLayoutSubviews{
    self.bgLayer.frame = self.view.bounds;
}

Better way:

As hereDescribe, you can do it in this way.I test it with My Xcode,it works fine.

Define a background view to manage size

.h file

    #import <UIKit/UIKit.h>

    @interface BackgrundView : UIView

    @end

.m file

    #import "BackgrundView.h"      
    @interface BackgrundView()
    @end
    @implementation BackgrundView
    +(Class)layerClass{
        return [CAGradientLayer class];
    }
    @end

2 Set up what you want

#import "ViewController.h"
#import "BackgrundView.h"
@interface ViewController ()
@property BackgrundView * backgroundview;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.backgroundview = [[BackgrundView alloc] initWithFrame:self.view.frame];
    self.backgroundview.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    [self.view addSubview:self.backgroundview];
    UIColor *colorOne = [UIColor colorWithRed:(120/255.0) green:(135/255.0) blue:(150/255.0) alpha:1.0];
    UIColor *colorTwo = [UIColor colorWithRed:(57/255.0)  green:(79/255.0)  blue:(96/255.0)  alpha:1.0];

    NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil];
    NSNumber *stopOne = [NSNumber numberWithFloat:0.0];
    NSNumber *stopTwo = [NSNumber numberWithFloat:1.0];

    NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, nil];
    CAGradientLayer * graintLayer = (CAGradientLayer *)self.backgroundview.layer;
    graintLayer.colors = colors;
    graintLayer.locations = locations;
}

self.bgLayer.frame = self.view.bounds; – Duc Apr 17 '15 at 08:16 — Duc, Apr 17 '15 at 08:16

score 0 · Answer 2 · answered Apr 17 '15 at 07:48

0

Correct line of code is: self.view.backgroundColor = [UIColor redColor];

answered Apr 17 '15 at 07:48

Mika

5,807
6
38
83

score 0 · Answer 3 · edited May 23 '17 at 11:59

0

Are you updating the frame of the Background layer when the device rotates to Landscape? Apparently your problem can be solved from the answer in this question here

edited May 23 '17 at 11:59

Community

1
1

answered Apr 17 '15 at 07:52

Xcoder

1,762
13
17

Duc · Answer 4 · 2015-04-17T08:11:20.957

0

You need to add a new gradient when your device rotates.

- (void)viewDidLayoutSubviews // called when device rotates
{
    [self.bgLayer removeFromSuperlayer]; // you need to keep reference so you can remove the old layer

    self.bgLayer = [BackgroundLayer blueGradient]; <---Calls method below
    self.bgLayer.frame = self.view.bounds;
    [self.view.layer insertSublayer:self.bgLayer atIndex:0];
}

look @WenchenHuang answer, its better than my approach.

edited Apr 17 '15 at 08:11

answered Apr 17 '15 at 07:53

Duc

650
5
10

bgLayer does not have the method removeFromSuperLayer – James Franco Apr 17 '15 at 08:04
sorry It is removeFromSuperlayer – James Franco Apr 17 '15 at 08:05
I put a breakpoint here and this method gets called on the start too. Could you explain a little. What this method does ? – James Franco Apr 17 '15 at 08:07
`When the bounds change for a view controller's view, the view adjusts the positions of its subviews and then the system calls this method.` It is called multiple times after view did load and when your device changes its rotation. – Duc Apr 17 '15 at 08:10

ios background color only appears on half of screen in landscape mode

4 Answers4