Sorry for the bother but I'm trying to lazy load several imageViews and then resize it proportionately to the content in a UITableView. I'm also trying (Unwisely perhaps?) to use Autolayout basically for the first time. And I'm not understanding why the constraints aren't working in this case. Here's the code that I'm using to resize the UIImageView after I've loaded the proper image into it.
// Scale the image view and return it.
- (UIImageView *) scaleImageViewForScreenWidth:(UIImageView *)imageView {
UIImage *imgFromView = [imageView image];
CGRect newFrame = CGRectMake(0, 0, imgFromView.size.width, imgFromView.size.height);
float imgFactor = newFrame.size.height / newFrame.size.width;
newFrame.size.width = [[UIScreen mainScreen] bounds].size.width;
newFrame.size.height = newFrame.size.width * imgFactor;
[imageView setFrame:newFrame];
return imageView;
}
As far as constraints are concerned. I'm trying to attach a Label and UIImageView with a shadow to the bottom of the main imageview. Here are the constraints that I'm applying to a bottom shadow in the imageview. The bottom shadow constraints are:
Height Equals: 83
Align Bottom to: Background Image View
LeadingSpace to: Table View Cell
I'm not getting what I want though. Any ideas? I feel like I'm fighting autolayout.
As requested! Here's some guidelines for using Autolayout that should help a lot.
The first thing is that the ideal approach is for you to set things up in Interface Builder so that no further programming is required. So, if - for example - the bounds of your view change, then your view will adjust itself automatically as required.
If that doesn't do the business, then you may have to update the constraints programmatically. Now, the golden rules as I mentioned is that you update the constraints. Resist the temptation to update the underlying UIView frame!
So, you'll do something like:
_myWidthConstraint.constant = 300.f;
The next thing to note is that you should do this in a specific place, and that is in your UIView subclass method updateConstraints:
- (void)updateConstraints
{
[super updateConstraints];
_myWidthConstraint.constant = 300.f;
}
How do you trigger that? By invoking:
[self setNeedsUpdateConstraints];
Hope this helps! For further info check Ole Begemann's excellent article 10 Things You Need To Know About Cocoa Autolayout.
Don't forget the WWDC videos. These are essential!
Also, now there's a book iOS Auto Layout Demystified . Although I've bought it, I haven't had a chance to read it yet. It does look pretty good though.
I was also facing the same issue. the image inside the imageview was too big for the imageview and the contentMode was set to AspectFill.
I solved this by unchecking 'Autoresize Subviews".
Related
Im learning iOS development right now, XCode doesnt allow me to edit width and height of buttons which are in stack view:
In the Storyboard I create a new button of size 30 x 30 with a custom image and then make more 5 copies of that button. Then I embed them after selecting all of them in a Stack View. Now a disaster happens, the buttons are resized to god knows what size and they appear huge and when I try to go to size inspector to resize those buttons I see that "Width" and "Height" fields are disabled.
I tried few suggestions on stackoverflow and selected the stack view and change the distribution of stack view to "Fill Equally" but still the buttons size is being changed. I dont want this to happen. I want a fixed size buttons in a horizontal stack view and putting them in stack view should not change the size or shape of buttons like this. Can anyone please tell me how do I fix this problem?
Please help.
Sometime Interface Builder is not easy to handle because it is a running layout system at design-time / IB_DESIGNABLE. You make changes, IB gets triggered to 'think', changes parameters, layouts again, you see it does not fit and you change again.
It can be easier to fix UIStackView's constrains to your outer layout before dropping content that will be arranged by taking intrinsicContentSize of the subviews into its calculation. Even worse, if the stackview does not have complete constrains already and you drop something in as being arranged, it will take the default size as intrinsicContentSize of the dropped view and change the stackview spacing as it should. This is no surprise but it can be frustrating as convenience is disturbing your workflow here.
The docs tell you should not change intrinsicContentSize because it is not meant to be animated, it will even disturb animations and layout or even break constrains. Well, you can not set intrinsicContentSize, it is read-only. As thats for good reasons they could have written that while UIView's are instanced they can have supportive variables which have to be set before laying out which allows you to make pre-calculations.
While in code this can be tricky also, you can subclass UIView to make arranged subview instances more supportive to your needs.
There is UIView's invalidateIntrinsicContentSize that triggers the layout to take changed intrinsicContentSize into the next layout cycle. You still cant set intrinsicContentSize, but thats not needed when you would have a class designed like shown below.
// IntrinsicView.h
#import UIKit
IB_DESIGNABLE
#interface IntrinsicView : UIView
-(instancetype)initWithFrame:(CGRect)rect;
#property IBInspectable CGFloat intrinsicHeight;
#property IBInspectable CGFloat intrinsicWidth;
#end
// IntrinsicView.m
#import "IntrinsicView.h"
#implementation IntrinsicView {
CGFloat _intrinsicHeight;
CGFloat _intrinsicWidth;
}
- (instancetype)initWithFrame:(CGRect)frame {
_intrinsicHeight = frame.size.height;
_intrinsicWidth = frame.size.width;
if ( !(self = [super initWithFrame:frame]) ) return nil;
// your stuff here..
return self;
}
-(CGSize)intrinsicContentSize {
return CGSizeMake(_intrinsicWidth, _intrinsicHeight);
}
-(void)prepareForInterfaceBuilder {
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, _intrinsicWidth,_intrinsicHeight);
}
#end
Now this gives you control of the behaviour when UIStackView will layout.
Let's look at instancing of your UIStackView.
#import "IntrinsicView.h"
- (void)viewDidLoad {
[super viewDidLoad];
UIStackView *column = [[UIStackView alloc] initWithFrame:self.view.frame];
column.spacing = 2;
column.alignment = UIStackViewAlignmentFill;
column.axis = UILayoutConstraintAxisVertical; //Up-Down
column.distribution = UIStackViewDistributionFillEqually;
CGFloat quadratur = 30.0;
for (int row=0; row<5; row++) {
IntrinsicView *supportiveView = [[IntrinsicView alloc] initWithFrame:CGRectMake(0, 0, quadratur, quadratur)];
// supportiveView stuff here..
[column addArrangedSubview:supportiveView];
}
[self.view addSubview:column];
}
Don't forget IntrinsicView's intrinsicContentSize is set before instancing is complete, so this example takes frame size at initWithFrame as intended and stores that size to be used when intrinsicContentSize is asked. Having that still needs that UIStackView is large enough to layout nicely but you forced the arranged subviews to that intrinsic size. Btw. the example is arranged up..down.
You can use the IntrinsicView in Interface Builder, just change the views inside UIStackView to the above written class. IB will automatically update the designable API and serve you propertys you can set up. This still needs the StackView to have at least width and height set and also constrains if needed. But it takes away the impression your width and height of arranged views would have any effect other than expected, because IntrinicViews height + width is inactive in IB then.
Just to show you how much this improves your possibilities in IB, see image
Right so i have this image:
And i need the width of the red bar to fit between the 2 images (Buttons) on all devices.
I have looked for answers but i haven't found anything that works yet.
This is the code I'm using:
_background = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 353, 20)];
[self addSubview:_background];
[self sendSubviewToBack:_background];
[_background setBackgroundColor:[UIColor redColor]];
_background.layer.cornerRadius = 10;
_background.clipsToBounds = YES;
_background.center = CGPointMake(200, 15);
_background.keepLeftOffsetTo(_sendButton);
_background.keepCenterAlignTo(self);
[_background updateConstraintsIfNeeded];
There may very well be an easy fix for this but I've only been on Objective-C for about a month! (Coming from Android Java).
Any help would be great right now
Thanks
Update #1: I've tried using Masonry as suggested but i still can't achieve what i need.
So to help i setup a quick storyboard and replicated what i needed, then i looked at the constraints from the storyboard and then replicated it programmatically. Like so:
[background mas_remakeConstraints:^(MASConstraintMaker * make) {
make.trailingMargin.equalTo(_sendButton);
make.rightMargin.equalTo(#30);
make.leading.equalTo(_optionsButton);
make.leading.leadingMargin.equalTo(#25);
make.height.equalTo(#20);
make.center.equalTo(self);
}];
As you can tell, i did end up using Masonry to do this.
you need to use Autolayout to achieve this.
If you are using storyboard to create the above layout, then you need to constraint the redView in between the buttons.
Set the redView leading constraint to the firstImageView.
Set the redViw trailing constraint to the last imageView.
You need to give the height constraint to the redView.
Other constraints for the first and last imageviews:
You need to give the top, height,width cosntraints to the first and last imageviews.
If you are not using storyboard, I suggest to look into MAsonry to apply constraints programmatically.
I load a UIImageView with a certain height and width. after I initialise it, I would like to change it's height programmatically. I am using the following code to do so, but it is not working.
Note: The UIImageView has constraints set on it.
CGRect newframe = imageView.frame;
newframe.size.height= 500;
[imageView setFrame:newframe];
Calling setFrame is not changing anything on the image. What am I doing wrong?
Thanks
Modify the height constraint after initializing your UIImageView instead. See the second answer here for an example: Change frame programmatically with auto layout
How can I vertically center an image inside a scrollView?
I'm using storyboards in Xcode 5. The main view is embedded inside a navigation controller, and "Adjust scroll view insets" option is enabled in main Storyboard. This main view has a scrollView which size is equal to the main view size.
The imageView is inside the scrollView and it's the same size as the scrollView. Content mode is set to AspectFit.
So, hierarchy is as follows:
- UINavigationController
- UIView
- UIScrollView
- UIImageView
The image may be landscape or portrait, and can be any size (it's loaded at runtime). This is why imageView is the same size as the scrollView.
How can I vertically center the image inside the scrollView?
EDIT:
As commented before, I have set imageView's contentMode to AspectFit because the image may be too big, so I need it resized. The problem I have is that the image is not center of the scrollView.
You can check screenshot at link and download source code at link.
It will be good to use auto layout as mentioned by #Douglas. However, if you prefer the traditional way, you can also make it work.
I'll first give you the answer and then explain it to you. You should first delete the image view from the storyboard ( I'll explain it later), and then add the viewWillAppear method.
- (void)viewDidLoad
{
[super viewDidLoad];
// 1. Add the image view programatically
UIImageView * imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:#"portrait.jpg"]];
[_scrollView addSubview:imageView];
_imageView = imageView;
}
- (void)viewWillAppear:(BOOL)animated
{
// 2. calculate the size of the image view
CGFloat scrollViewWidth = CGRectGetWidth(_scrollView.frame);
CGFloat scrollViewHeight = CGRectGetHeight(_scrollView.frame);
CGFloat imageViewWidth = CGRectGetWidth(_imageView.frame);
CGFloat imageViewHeight = CGRectGetHeight(_imageView.frame);
CGFloat widthRatio = scrollViewWidth / imageViewWidth;
CGFloat heightRation = scrollViewHeight / imageViewHeight;
CGFloat ratio = MIN(widthRatio, heightRation);
CGRect newImageFrame = CGRectMake(0, 0, imageViewWidth * ratio, imageViewHeight * ratio);
_imageView.frame = newImageFrame;
// 3. find the position of the imageView.
CGFloat scrollViewCenterX = CGRectGetMidX(_scrollView.bounds);
CGFloat scrollViewCenterY = CGRectGetMidY(_scrollView.bounds) + _scrollView.contentInset.top / 2 ;
_imageView.center = CGPointMake(scrollViewCenterX, scrollViewCenterY);
}
Here is the explanation:
You should not put the imageView in the storyboard, otherwise the frame of the imageView will be fixed by the storyboard, and will not change with the size of the image. Even if you choose UIViewContentModeScaleAspectFill, the frame of the imageView is still not changed. It just add some white space around the image.
Now the imageView has the same size as your image. If you want it to be fully displayed, you need to calculate the frame yourself.
Pay attention to the _scrollView.contentInset.top / 2, this is why you need to put the codes in viewWillAppear instead of viewDidLoad. The _scrollView.contentInset.top is the height of the navigation bar and is calculated automatically for you before willViewAppear.
You put your image view in a scrollView, I guess you want to zoom in and out. If this is true, add self.imageView = imageView; and the bottom of viewDidLoad. Set the delegate of _scrollView to self and add the following method:
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return _imageView;
}
I made a comment, but then took a look at your project. You are almost there. I ran through the following steps and have gotten the result you are looking for.
First, make sure you have auto layout turned ON!!!
In your storyboard click on your scroll view. You had a scroll view that was the same size as the view. You are going to put on some constraints. Down at the bottom of the story board you will see some icons.
The fourth one over looks sort of like an I-beam on its side, it is the pin button. After selecting the scroll view, click on this and it will bring up a pop up menu.
For the scroll view click on all the bars around the middle block so you pin the scroll view to the sides of the main view.
You will notice they are all red now.
Then go and click on the imageview. Once again you had it set to the size of the view. Using the pin button again, you are going to pin just the Width at 320 and the Height at 568. When you are done you are then going to use the next button over.
This is the align button. Click on that after you have selected your image view. You are going to click on Horizontal Center in Container, and Vertical Center in Container.
Next you will need to add one method to your ViewController.m file.
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
[_scrollView setContentSize:CGSizeMake(self.view.frame.size.width, self.view.frame.size.height)];
}
Start up the simulator and let her rip! You will get one warning though. It says the content size is ambiguous for the scroll view. But that's OK, because you will set it on viewDidLayoutSubviews.
Hope that helps, or helps someone out. Autolayout and scroll views are a bit tough!!
EDIT#1
if you want to then make the image view scalable, by pinch zooming you can do the following.
Make sure you made the .h file follow the UIScrollViewDelagate.
#interface ViewController : UIViewController <UIScrollViewDelegate>
This will allow the scroll view to be able to access the delegate methods of the scroll view. The method you are looking for is called..
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.imageView;
}
Then in the viewDidLoad method of your .m file do the following.
_scrollView.minimumZoomScale = 0.5;
_scrollView.maximumZoomScale = 4.0;
_scrollView.delegate = self;
The underscore and the variable name is the same as self.variable. Either will work.
That should do it. Let me know if it works or if you have any other questions. ENJOY!
These are the ones u can use, the 3 modes of ImageView content display.You can do this by dynamically setting them or u can set them in storyboard too, click on the ImageView and go to properties tab-bar and choose from there, run them and select which output u want.
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.contentMode = UIViewContentModeScaleToFill;
imageView.contentMode = UIViewContentModeScaleAspectFill;
Hope this helps
If you want to center image in an imageview use
imageView.contentMode=UIViewContentModeCenter;
image retains it's size in this this content mode. Alternatively you can use other content modes as per your requirement.
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,
I have tried several different solutions to this problem with no success.
I have a UIImageView (created on the Storyboard) that has multiple Gesture Recognizers on it. I have trying to resize this UIImageView based on screen size to take advantage of the 4 inch display.
It appears that since the Imageview was built using the storyboard, I can't change it programmatically???
My current code looks like this:
//determine screen size, set scoring button width based on device size.
CGFloat lCurrentHeight = self.view.bounds.size.height;
if (lCurrentHeight == 568.0) {
CGRect _redHeadImageFrame = _redHeadImage.frame;
_redHeadImageFrame.size.width = 220;
[_redHeadImage setFrame:_redHeadImageFrame];
}
Any ideas??? Thanks.
If you are using autolayout you have to change withConstraint of the image, because manual changing of the frame will not work in this case.
EDIT
You can create IBOutlet for the width constraint as you do it for other controls - just select constraint in IB and move it with right button to your header file. Than in code change constraint:
[self.imageWidthConstraint setConstant:100.0];
yes you need to use like this,
CGFloat lCurrentHeight = [[UIScreen mainScreen] bounds].size.height; //it will give 568
CGFloat lCurrentHeight = self.view.bounds.size.height;//it will give 548,in your case that condition failed.
There's no difference in resizing UIViews created by code or by the storyboard. It's exactly the same: setting the frame of the view, as you are doing.
What might be happening:
Your if condition it's never true. Have you checked with a breakpoint if the code inside it is even called? Maybe there's some error in the float direct comparation. See this.
Also, see this for a better understanding on how to check if it's 4 inch display.
If the setFrame: code is actually called, check if you are using auto-layout in your view. Maybe there's a constraint in the UIImageView. In this case, you should play with this constraint, in order to resize the view correctly..