How to create ImageView center on storyboard using iOS?

Question

I am trying to create Universal application using iOS storyboard within Xcode 7 and iOS 9. In the storyboard concept I can see lots of methods (autolayout, auto constraints, adaptive UI, etc.). I am confused by those methods of design. Please give me a solution for image view show on center for all iPhone and iPad.

See also [How to Center a View on the Storyboard](http://stackoverflow.com/a/28446317/3681880) — Suragch, Feb 19 '17 at 06:47

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

Its Quite easy ..

1.place the uiimageview to center

Then add the Below constraints

1.centre horizontal to the view && centre vertical to the view

2.set it to aspect ratio

See the image given below.

centre horizontal ,centre vertical ,aspect ratio set this three you will get ...

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 30 '15 at 05:41

Kishore Kumar

4,265
3
26
47

Or instead of the `aspect ratio` just add the image and the `imageView` will get the size of the image. – Islam Nov 30 '15 at 05:46
No. Its not working. Showing red marks and If I cleared that error Its showing Unproperly.@Kishore! – android Nov 30 '15 at 05:47
Yes. for iPad its showing small. But iPad should show bigger size comparing to iPhone. Now from your solution iPhone showing perfect from 4 to 5.5 inch. I need to show iPad also@KishoreKumar – android Nov 30 '15 at 06:08
as per islam said don't set aspect ratio ,you image is different size for iphone and ipad? @android – Kishore Kumar Nov 30 '15 at 06:50
Yes! I have created Image size 1x, @2x, 3X..@Kishore – android Nov 30 '15 at 06:52
then fine set the ratio depend upon the image @android – Kishore Kumar Nov 30 '15 at 06:53
if any doubt ping my name :) – Kishore Kumar Nov 30 '15 at 06:55
Awesome! Great Helping mind. God bless you!@Kishore and all the helpers! – android Nov 30 '15 at 06:56

score 2 · Answer 2 · edited Dec 12 '15 at 19:58

2

You can try size classes work with many different screen sizes.

Change constraint like this or other

edited Dec 12 '15 at 19:58

ArtKorchagin

4,801
13
42
58

answered Nov 30 '15 at 06:34

klone

39
5

I am using size classes only. Base value for all layout I am using.@Klone – android Nov 30 '15 at 06:46
change constraints @android – klone Nov 30 '15 at 06:52

keshav vishwkarma · Answer 3 · 2015-11-30T23:02:37.617

If you want to design Universal application in iOS then you must add constraints base on the percentage(%) and There are few situations or cases for which you can not added the constraints from the Starboard but don't wary about that we can do that programatically.

Have you ever try KVConstraintExtensionsMaster library to apply constraints that I have implemented. This library having the method that will update , apply , access and remove the constrains those are applied either applied by Programmatically or from Interface Builder(StoryBoard/xib).

Programmatically imageView show on center for all iPhone and iPad.

- (void)viewDidLoad
{
    [super viewDidLoad];

    /* preparing View Hierarchy */
    UIImageView *imageView = [UIImageView prepareNewViewForAutoLayout];
    [self.view addSubview:imageView];
    [imageView setBackgroundColor:[UIColor blueColor]];

    /* applying constraints */
    [imageView applyConstraintForCenterInSuperview];

    /* Change the Ratio 0.0 to 1.0 to vary the height and width */
    [imageView applyEqualHeightRatioPinConstrainToSuperview:0.8];
    [imageView applyEqualWidthRatioPinConstrainToSuperview:0.8];

    /* Comment the above both RatioPinConstrainToSuperview methods and uncomment below methods and run on both iPhone or iPad and see the magic.*/
    /*
     [imageView applyWidthConstraint:280]; // fixed width for iphone
     [imageView applyHeightConstrain:280]; // fixed height for iphone

     // update width constraint with proper iPad ratio
     [imageView updateAppliedConstraintConstantValueForIpadByAttribute:NSLayoutAttributeWidth];

     // update height constraint with proper iPad ratio
     [imageView updateAppliedConstraintConstantValueForIpadByAttribute:NSLayoutAttributeHeight];
     */
}

From StoryBoard imageView show on center for all iPhone and iPad.

Step 1. Drag and place imageView in view of ViewController.

Step 2. Now Add constraint Horizontal Center in Container and Vertical center in Container.

Step 3. Add constraint Equal Width and Equal Height.

Step 4. Now update multiplier of Equal Width constraint and Equal Height.

How to create ImageView center on storyboard using iOS?

3 Answers3