bigpotato
bigpotato

Reputation: 27507

iOS: Make image width slightly smaller than screen width

I'm having an issue where my image is too big. I need it to be slightly less than what the screen width is.

Here's my controller:

- (void)viewDidLoad {
    [super viewDidLoad];

    self.imageName = @"goldencoaster";

    [self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"table"]]];

    UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%@", self.imageName]];
    CGRect bounds;
    bounds.origin = CGPointZero;
    bounds.size = [[UIScreen mainScreen] bounds].size;

    self.coasterImage.bounds = bounds;
    self.coasterImage.image = image;
}

However, this returns this when I run the simulator:

enter image description here

How would I get the image to show up slightly smaller than the screen width?

==================================================================== UPDATE

So I took out auto layout as suggested, and updated my controller to look like this:

- (void)viewDidLoad {
    [super viewDidLoad];

    self.imageName = @"goldencoaster";

    [self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"table"]]];

    UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%@", self.imageName]];

    CGRect screen = [[UIScreen mainScreen] bounds];

    CGRect bounds;
    bounds.origin.x = screen.origin.x + 10;
    bounds.origin.y = screen.origin.y + 10;
    bounds.size.width = screen.size.width - 100;

    self.coasterImage.frame = bounds;
    self.coasterImage.image = image;
}

However, now my image doesn't show up at all?? Only the background (image with name "table") shows up, but not the goldencoaster.

Upvotes: 0

Views: 293

Answers (4)

Irfan Anwar
Irfan Anwar

Reputation: 1918

Try this

- (void)viewDidLoad {
[super viewDidLoad];

self.imageName = @"goldencoaster";

[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"table"]]];

UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%@", self.imageName]];
CGRect bounds;
bounds.origin = CGPointZero;
bounds.size = [[UIScreen mainScreen] bounds].size;

self.coasterImage.bounds = bounds;
self.coasterImage.image = image;
self.coasterImage.frame = CGRectMake(20, 0,   self.view.frame.size.width-40, self.view.frame.size.height);
self.coasterImage.center = self.coasterImage.superview.center;

}

Swift 3.1

override func viewDidLoad() {
    super.viewDidLoad()

    imageName = "goldencoaster"

    view.backgroundColor = UIColor(patternImage: UIImage(named: "table")!)

    let image = UIImage(named: imageName)
    var bounds = CGRect()
    bounds.origin = CGPoint.zero
    bounds.size = (UIScreen.main.bounds).size

    coasterImage.bounds = bounds
    coasterImage.image = image
    coasterImage.frame = CGRect(x: CGFloat(20), y: 0, width: self.view.frame.size.width - CGFloat(40), height: self.view.frame.size.height)
    coasterImage.center = (coasterImage.superview?.center)!
}

Upvotes: 3

EnriMR
EnriMR

Reputation: 3970

If you weren't using autolayout, you will need to edit the image frame. For example if you want to reduce the size in 10 pixels:

- (void)viewDidLoad {
    [super viewDidLoad];

    self.imageName = @"goldencoaster";

    [self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"table"]]];

    UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%@", self.imageName]];
    CGRect screen = [[UIScreen mainScreen] bounds];
    CGRect bounds = CGRectMake(screen.origin.x+10,
                  screen.origin.y+10,
                  screen.size.width-20,
                  screen.size.height-20);

    self.coasterImage.center = self.coasterImage.superview.center;
    self.coasterImage.frame = bounds;
    self.coasterImage.image = image;
}

Upvotes: 1

user4151918
user4151918

Reputation:

Two words: Auto Layout

You want your UI to adapt to different devices, and orientations.

Auto Layout and size classes are designed to handle those needs.

Update:

You're checking screen size and setting bounds. That suggests you're trying to size the view instead of letting Auto Layout constrain it. Auto Layout takes the place of setting frame or bounds. You don't want to mix the two.

Upvotes: 1

AFTAB MUHAMMED KHAN
AFTAB MUHAMMED KHAN

Reputation: 2186

you can do it with contentMode like

self.coasterImage.contentMode = UIViewContentModeScaleAspectFit;

here are the different contentMode check it from here

UIViewContentModeScaleToFill

UIViewContentModeScaleAspectFit      // contents scaled to fit with fixed aspect. remainder is transparent


UIViewContentModeScaleAspectFill     // contents scaled to fill with fixed aspect. some portion of content may be clipped.

UIViewContentModeRedraw              // redraw on bounds change (calls -setNeedsDisplay)

UIViewContentModeCenter              // contents remain same size.    positioned adjusted.

UIViewContentModeTop

UIViewContentModeBottom

UIViewContentModeLeft

UIViewContentModeRight

UIViewContentModeTopLeft

UIViewContentModeTopRight

UIViewContentModeBottomLeft

UIViewContentModeBottomRight

Upvotes: 1

Related Questions