I'm placing a UIImageView inside of a UIScrollView, basing my code off of the answer in this question. The problem I'm having is that there is a significant amount of white space to the bottom and right, and I can't scroll to some of the image in the top and left. I figure this is due to me incorrectly setting the contentSize of the scrollView. Here's the relevant code:
- (void)viewDidLoad
{
[super viewDidLoad];
_imageView.image = _image;
_imageView.bounds = CGRectMake(0, 0, _imageView.image.size.width,_imageView.image.size.height);
_scroller.contentSize = _imageView.image.size;
}
The view controller I'm in has three properties, a UIScrollView (_scroller), a UIImageView (_imageView), and a UIImage (_image).
You're setting the UIImageView's bounds property. You want to be setting its frame property instead. Setting the bounds will resize it around its center point (assuming you haven't changed the underlying CALayer's anchorPoint property), which is causing the frame origin to end up negative, which is why you can't see the upper-left.
_imageView.frame = CGRectMake(0, 0, _imageView.image.size.width, _imageView.image.size.height);
Alternate syntax:
_imageView.frame = (CGRect){CGPointZero, _imageView.image.size};
Related
I work on dynamically, programmatically layout a view for 3.5" devices as well as for 4" devices.
As such that works fine.
But I want rounded corners so that my images appear like playing cards.
And I get rounded corners nicely displayed in 3,5 inch devices on the simulator for simulated iOS 6.1 and 7 alike.
But when I choose iPhone retina 4 inch on 6.1 or 7, then the UIImage in the UIImageView is fully displayed.
It works nicely on simulated iPad devices (in iPhone simulation mode - it is an iPhone only app).
As for today, I do not have any 4" device with me to test it. I can test on a device during the upcoming week.
Hiere is the relevant code:
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
self.imageV.image = self.image; // The image property was set by the caller.
// Layout imageV within self.view with a margin of MARGIN
self.imageV.frame = CGRectMake(self.view.frame.origin.x + MARGIN, self.view.frame.origin.y + MARGIN, self.view.frame.size.width - 2 * MARGIN, self.view.frame.size.height - 2 * MARGIN);
// set the raidus and the mask to follow the rounded corners.
self.imageV.layer.cornerRadius = CORNER_RADIUS;
self.imageV.layer.masksToBounds = YES;
}
BTW: CORNER_RADIUS is 18 and MARGIN is 15. Changing these values has no effect on the issue.
UPDATE: Thanks to Matt I figured out that the problem disappears when I create the UIImageView programmatically. That is some really nice workaround plus it points into the right diretion, I guess, but it is not a solution. Any ideas what setting in the storyboard editor might have caused the problem?
As far as I can see, auto layout is disabled for all view controllers in this storyboard.
The answer is simple. The code did work. It did add round corners to the UIImageView object and the maskToBounds worked well.
But the actual image displayed is smaller. I used AspectFit as mode to ensure that the actual image is not squeesed but displayed in its original aspect ration. Because of the longer layout of the iPhone5 dimensions the image only filled a part of its owning UIImageView. I changed the background color to gray for the screenshot and now it gets clear.
So the solution will be that I'll have to calculate the proper size of the image view so that it matches exactly the size of the scaled image. Then it should work.
(I'll update this answer when it is done).
Update: this is what I finally did: I removed the UIImageView from the Storyboard and deal with it programmatically.
Don't get confused by the complexity. I added another view just to throw a shadow, although this is not related to the original question. The shadow I wanted to add anyway. And it turned out that CALayer's shadow and masksToBounds=YES don't really agree on. That is why I added a regular UIView which lies in between the card view and the background view.
Finally this is so much of a hassle for displaying a simple rectangle image, that I think, just subclassing UIView and drawing everything with openGL or so directly into the CALayer would be probably much easier. :-)
Anyway, this is my code:
- (void)viewDidLoad {
[super viewDidLoad];
self.state = #0;
// Create an image view to carry the image with round rects
// and create a regular view to create the shadow.
// Add the shadow view first so that it appears behind
// the actual image view.
// Explanation: We need a separate view for the shadow with the same
// dimenstions as the imageView. This is because the imageView's image
// is rectangular and will only be clipped to round rects when the
// property masksToBounds is set to YES. But this setting will also
// clip away any shadow that the imageView's layer may have.
// Therfore we add a separate mainly empty UIView just behind the
// UIImageview to throw the shadow.
self.shadowV = [[UIView alloc] init];
self.imageV = [[UIImageView alloc] initWithImage:self.image];
[self.view addSubview:self.shadowV];
[self.shadowV addSubview:self.imageV];
// set the raidus and the mask to follow the rounded corners.
[self.imageV.layer setCornerRadius:CORNER_RADIUS];
[self.imageV.layer setMasksToBounds:YES];
[self.imageV setContentMode:UIViewContentModeScaleAspectFit];
// set the shadows properties
[self.shadowV.layer setShadowColor:[UIColor blackColor].CGColor];
[self.shadowV.layer setShadowOpacity:0.4];
[self.shadowV.layer setShadowRadius:3.0];
[self.shadowV.layer setShadowOffset:CGSizeMake(SHADOW_OFFSET, SHADOW_OFFSET)];
[self.shadowV.layer setCornerRadius:CORNER_RADIUS];
[self.shadowV setBackgroundColor:[UIColor whiteColor]]; // The view needs to have some content. Otherwise it is not displayed at all, not even its shadow.
}
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
// Just to be save
if (!self.image) {
return;
}
self.imageV.image = self.image; // The image property was set by the caller.
// Layout imageV within self.view with a margin of MARGIN
self.imageV.frame = CGRectMake(MARGIN, MARGIN, self.view.bounds.size.width - 2 * MARGIN, self.view.bounds.size.height - 2 * MARGIN);
// Calculate the size and position of the image and set the image view to
// the same dimensions
// This works under the assumption, that the image content mode is aspectFit.
// Well, as we are doing so much of the layout manually, it would work with a number of content modes. :-)
float imageWidth, imageHeight;
float heightWidthRatioImageView = self.view.frame.size.height / self.view.frame.size.width;
float heightWidthRatioImage = self.image.size.height / self.image.size.width;
if (heightWidthRatioImageView > heightWidthRatioImage) {
// The ImageView is "higher" than the image itself.
// --> The image width is set to the imageView width and its height is scaled accordingly.
imageWidth = self.imageV.frame.size.width;
imageHeight = imageWidth * heightWidthRatioImage;
} else {
// The ImageView is "wider" than the image itself.
// --> The image height is set to the imageView height and its width is scaled accordingly.
imageHeight = self.imageV.frame.size.height;
imageWidth = imageHeight / heightWidthRatioImage;
}
// Layout imageView and ShadowView accordingly.
CGRect imageRect =CGRectMake((self.view.bounds.size.width - imageWidth) / 2,
(self.view.bounds.size.height - imageHeight) / 2,
imageWidth, imageHeight);
[self.shadowV setFrame:imageRect];
[self.imageV setFrame:CGRectMake(0.0f, 0.0f, imageWidth, imageHeight)]; // Origin is (0,0) because it overlaps its superview which just throws the shadow.
}
And this is how it finally looks like:
The problem is due to some issue with code or configuration you have not told us about. Proof: I ran the following and it works fine. Note that I create the image view in code (to avoid the auto layout problem) and fixed your frame/bounds confusion, and that I've skipped your self.image, but none of that is really relevant to the issue you are seeing:
#define CORNER_RADIUS 18
#define MARGIN 15
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
self.imageV = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"im"]];
[self.view addSubview:self.imageV];
// Layout imageV within self.view with a margin of MARGIN
self.imageV.frame = CGRectMake(self.view.bounds.origin.x + MARGIN, self.view.bounds.origin.y + MARGIN, self.view.bounds.size.width - 2 * MARGIN, self.view.bounds.size.height - 2 * MARGIN);
// set the raidus and the mask to follow the rounded corners.
self.imageV.layer.cornerRadius = CORNER_RADIUS;
self.imageV.layer.masksToBounds = YES;
}
It works fine (and you can prove that to yourself). Here is a screen shot of the 4-inch simulator:
Therefore the problem is outside the code that you quote in your question, and cannot be analyzed without further information.
I've been banging my head against the wall for the last hour trying to get my scrollView to scroll, but to no avail. In viewDidLoad I have
NSURL *url = [FlickrFetcher urlForPhoto:self.photoData format:FlickrPhotoFormatLarge];
NSData *imageRawData = [NSData dataWithContentsOfURL:url];
UIImage *image = [UIImage imageWithData:imageRawData];
self.scrollView.delegate = self;
self.imageView.image = image;
self.scrollView.contentSize = image.size;
self.imageView.frame = CGRectMake(0, 0, image.size.width, image.size.height);
I have the imageView view mode set to top left.
My UIScrollView was created by selecting my imageView, then Editor -> Embed in -> ScrollView.
Anything else I can check/try?
If you have created your scrollview through nib, and if that nib has autolayout feature then it will not let you scroll.
So go utility window of nib.
Select First tab of utility window.
Remove autolayout and run the application
Checklist:
Is image really downloaded? (so it actaullly has size?)
Is scrollview outlet set?
Is imageView added as a subview of scrollView?
Btw. Don't know if this is just sample code or real but if it's real then it's really bad idea to download data synchronously and even worse idea to do it in viewDidLoad.
I guess it because you have image view embedded in scrollview,so its frame is becoming to imageview's frame. when frame size and content size are equal, scrollview wont scroll. Try setting scrollview's frame pragmatically to some fixed rectangle. ScrollView's contentSize's height and width should be greater then scrollview's frame's height and width. Give it some space to scroll:) In your case , they both are equal I guess.
I have a UITextView, which sets its text dynamically from an RSS feed. The textview is a subview of a UIScrollview. Ultimately, I am creating a mobile newspaper app, so the user should be able to scroll through the text (and other subviews).
After creating the views in IB, I added
NSString *sourceCode = [NSString stringWithContentsOfURL:[NSURL URLWithString:self.URL] encoding:NSUTF8StringEncoding error:&error];
sourceCode = [self parseHTMLText:sourceCode];
CGSize maximumLabelSize = CGSizeMake(320,9999);
CGSize txtStringSize = [sourceCode sizeWithFont:self.body.font
constrainedToSize:maximumLabelSize];
CGRect newlblFrame = CGRectMake(0, 0, 320, txtStringSize.height);
self.body.frame = newlblFrame; //body is the textview
self.body.text = sourceCode;
self.scroll.contentSize=CGSizeMake(320, self.body.frame.size.height+300); //scroll is scrollview
A typical NSLog will display body frame = {{0, 0}, {320, 2088}} scrollview frame = {{0, 0}, {320, 417}} scrollview content size = {320, 2388}
However, when I run the app, body maintains its interface builder height of around 196 and the scrollview won't scroll (when i move it, it just bounces back to its original position)
On a side note, when I try to manually change the frame of the textview with CGRectMake, the NSLog shows the correct height, but the view doesn't appear different. I made sure that it's hooked up correctly in IB, because I can adjust other properties, like background color.
EDIT:
After I set the cliptoBounds property of the textview to NO, the textview now adjusts its height and tries to show the entire text. However, it cuts off at the end of the screen, and I still cannot scroll.
Here is what I see currently. I made the scrollview background color gray for convenience. I'm not sure why part of the scrollview is partially in white and and partially gray. (Title) is a separate label btw)
I fixed the problem by moving the code from viewDidLoad to viewDidAppear. Apparently this is an Xcode 4.5 specific issue, resulting from the AutoLayout feature overriding the logic in the viewDidLoad method. A better explanation can be found here.
i hope this will help you
self.scrollview.contentSize=CGSizeMake(320, label.frame.size.height+30);
Try to add this :
[_scrollView setClipsToBounds:YES];
Try this:
CGSize maximumSize = CGSizeMake(200.0, 30.0); // Specify your size. It was for my screen.
UIFont *txtFont = <Ur Font size & Var>;
//new
//fontValue = txtFont;
//new
lblValue.font = txtFont;
lblValue.lineBreakMode = UILineBreakModeWordWrap;
CGSize txtStringSize = [commentTxt sizeWithFont:txtFont
constrainedToSize:maximumSize
lineBreakMode:lblValue.lineBreakMode];
CGRect newlblFrame = CGRectMake(105.0, y, 200.0, txtStringSize.height);
lblValue.frame = newlblFrame;
lblValue.text = #"Your String";
After this set scroll Content size. Hope it'll work for you. It worked for me.
Try to solve in the following way.
// adjust the height of UITextView with content height
CGRect frame = self.body.frame;
frame.size.height = self.body.contentSize.height;
self.body.frame = frame;
// adjust UIScrollView's height with the height of UITextView
self.scroll.frame = frame;
Background: I wanted to animate the change in my content along with the orientation. My content position is relative to the self.view.bounds.
Problem: In order to animate the content along with the bounds, I would need to know what would the bounds of the view be at the end. I can hard code it but I hope to find a more dynamic way.
Codes: So all animation takes place in willRotateToInterfaceOrientation as per following:
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
//centering the image
imageView.frame = CGRectMake(self.view.bounds.origin.x + (self.view.bounds.size.width - image.size.width)/2 , self.view.bounds.origin.y + (self.view.bounds.size.height - image.size.height)/2, image.size.width, image.size.height);
NSLog(#"%d",[[UIDevice currentDevice] orientation]);
NSLog(#"%f", self.view.bounds.origin.x);
NSLog(#"%f", self.view.bounds.origin.y);
NSLog(#"%f", self.view.bounds.size.width);
NSLog(#"%f", self.view.bounds.size.height);
}
The bounds are before the orientation change. Thus, this only works if the transformation is 180 degrees. If I were to use didRotateFromInterfaceOrientation, the animation will be after the orientation change which looks awful.
Use willAnimateRotationToInterfaceOrientation:duration: instead. This method gets called from within the rotation animation block, and all the bounds have been set correctly at this point. Docs.
If you want it dynamic then when you initialize imageView, set the autoresizingMask property so that when the imageView's superview resizes on the rotate the margins can auto resize themselves...
imageView = //init imageView
imageView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleBottomMargin|UIViewAutoresizingFlexibleLeftMargin|UIViewAutoresizingFlexibleRightMargin;
//addtional config
This means you only need to set the frame once then the imageView will always adjust itself to stay in the middle.
Check out the UIView class reference http://developer.apple.com/library/ios/ipad/#documentation/uikit/reference/uiview_class/uiview/uiview.html to see what else you can do with the autoresizingMask property
If I'm understanding you correctly, you just need to swap the X/Y coordinates and width/height in you're CGRectMake, to get your future layout for a 90 degree change. If it's 180 degree change, then it's the same as current
CGRectMake(self.view.bounds.origin.y + (self.view.bounds.size.height - image.size.height)/2 , self.view.bounds.origin.x + (self.view.bounds.size.width - image.size.width)/2, image.size.height, image.size.width);
I have a UIImageView that is displaying an image that is wider and taller than the UIImageView is. I would like to pan the image within the view using an animation (so that the pan is nice and smooth).
It seems to me that I should be able to just adjust the bounds.origin of the UIImageView, and the image should move (because the image should paint inside the view with that as its origin, right?) but that doesn't seem to work. The bounds.origin changes, but the image draws in the same location.
What almost works is to change the contentsRect of the view's layer. But this begins as a unit square, even though the viewable area of the image is not the whole image. So I'm not sure how I would detect that the far edge of the image is being pulled into the viewable area (which I need to avoid, since it displays by stretching the edge out to infinity, which looks, well, sub-par).
My view currently has its contentsGravity set to kCAGravityTopLeft via Interface Builder, if that makes a difference (Is it causing the image to move?). No other options seemed to be any better, though.
UPDATE: to be clear, I want to move the image inside the view, while keeping the view in the same spot.
I'd highly recommend enclosing your UIImageView in a UIScrollView. Have the UIImageView display the full image, and set the contentSize on the UIScrollView to be the same as your UIImageView's size. Your window into the image will be the size of the UIScrollView, and by using scrollRectToVisible:animated: you can pan to particular areas on the image in an animated fashion.
If you don't want scroll bars to appear, you can set the showsHorizontalScrollIndicator and showsVerticalScrollIndicatorproperties to NO.
UIScrollView also provides pinch-zooming functionality, which may or may not be useful to you.
Brad Larson pointed me down the right road with his suggestion to put the UIImageView inside a UIScrollView.
In the end I put the UIImageView inside of a UIScrollView, and set the scrollView's contentSize and the imageView's bounds to be the same size as the image in the UIImage:
UIImage* image = imageView.image;
imageView.bounds = CGRectMake(0, 0, image.size.width, image.size.height);
scrollView.contentSize = image.size;
Then, I can animate the scrollView's contentOffset to achieve a nice panning effect:
[UIView beginAnimations:#"pan" context:nil];
[UIView setAnimationDuration:animationDuration];
scrollView.contentOffset = newRect.origin;
[UIView commitAnimations];
In my particular case, I'm panning to a random space in the image. In order to find a proper rect to pan to and a proper duration to get a nice constant speed, I use the following:
UIImage* image = imageView.image;
float xNewOrigin = [TCBRandom randomIntLessThan:image.size.width - scrollView.bounds.size.width];
float yNewOrigin = [TCBRandom randomIntLessThan:image.size.height - scrollView.bounds.size.height];
CGRect oldRect = scrollView.bounds;
CGRect newRect = CGRectMake(
xNewOrigin,
yNewOrigin,
scrollView.bounds.size.width,
scrollView.bounds.size.height);
float xDistance = fabs(xNewOrigin - oldRect.origin.x);
float yDistance = fabs(yNewOrigin - oldRect.origin.y);
float hDistance = sqrtf(powf(xDistance, 2) + powf(yDistance, 2));
float hDistanceInPixels = hDistance;
float animationDuration = hDistanceInPixels / speedInPixelsPerSecond;
I'm using a speedInPixelsPerSecond of 10.0f, but other applications might want to use a different value.