UIScrollView SubViews won't resize - ios

Design:
View Hierarchy is as below:
UIScrollView (for paging multiple image)
UIScrollView (for enabling zoom on the UIImageView)
UIImageView
UIView (origin,size relative to UIImage in UIImageView)
UIView
UIView ...
UIScrollview
UIImageView
UIView
UIView ...
UIScrollView ... and so on
Implementation:
- (id)init
{
self = [super init];
if (self) {
// Custom initialization
self.minimumZoomScale = 1.0f;
self.maximumZoomScale = 4.0f;
self.zoomScale = 1.0f;
self.bouncesZoom = true;
self.bounces = true;
self.tag = 10;
self.alwaysBounceHorizontal = false;
self.autoresizesSubviews = YES;
self.zoomView = [[UIImageView alloc] init];
self.zoomView.userInteractionEnabled = YES;
self.zoomView.autoresizesSubviews = YES;
}
return self;
}
- (void)displayImage:(UIImage *)image
{
// Set the image in the view
[_zoomView setImage:image];
// Set the Frame size to the size of image size
// Ex. Resulting ScrollView frame = {0,0},{1250,1500}
// Ex. Resulting ImageView frame = {0,0}, {1250,1500}
CGRect scrollFrame = self.frame;
scrollFrame.size.width = image.size.width;
scrollFrame.size.height = image.size.height;
self.frame = scrollFrame;
CGRect iViewFrame = _zoomView.frame;
iViewFrame.size.width = image.size.width;
iViewFrame.size.height = image.size.height;
_zoomView.frame = iViewFrame;
// Add subviews before resetting the contentsize
for (customClass* field in list.fields) {
UIView* view = [[UIView alloc] initWithFrame:CGRectMake([field.x floatValue], [field.y floatValue], [field.width floatValue], [field.height floatValue])];
view.backgroundColor = [UIColor redColor];
view.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin |UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
[_zoomView addSubview:view];
}
// Set the Frame size to the size of scrollview frame size
// Ex. Resulting ScrollView Frame = {0,0},{320,460}
// Ex. Resulting ImageView Frame = {0,0},{320,460}
CGRect scrollViewFrame = self.frame;
scrollViewFrame.size.width = 320.0f;
scrollViewFrame.size.height = 460.0f;
self.frame = scrollViewFrame;
CGRect imageViewFrame = _zoomView.frame;
imageViewFrame.size.width = self.bounds.size.width;
imageViewFrame.size.height = self.bounds.size.height;
_zoomView.frame = imageViewFrame;
self.contentSize = _zoomView.bounds.size;
[self addSubview:_zoomView];
}
Above is the code that I tried implementing. It adds the UIViews to the UIImageView inside the UIScrollView. But the relative origin of the UIView is not correct (both before and after resizing).
Is there anything I should be doing differently to get the UIViews correctly placed inside the UIImageView?

This was top hit on Google for "scrollview subviews wont resize". For anyone else following that link:
Looking at your source, and comparing to mine, I realised that in Interface Builder, my NIB file had the tickbox for "auto size subviews" unticked. I have a vague memory this might be because in an old version of Xcode (this is an old project that's been maintained for a while) ... UIScrollView defaulted to having it switched off.
So: check that you've got it set correctly in Xcode / Interface Builder, and/or that you're setting it in code.

Related

UIImageview not showing after being added to another subview which is UIScrollview

I am creating a view controller in code only, NO .xib or storyboard.
I have many other subviews added to the view, which are added in a method (void)loadView and their frames are initialised in the (id)init method as shown below
-(id)init{
bottomClinkRect = CGRectMake(playersBoardRect.origin.x + (playersBoardWidth * 0.320),
playersBoardRect.origin.y + playersBoardHeight - playerBottomImageRect.size.height - (playersBoardHeight * 0.038),
playersBoardWidth * 0.680,
playersBoardHeight * 0.038);
}
- (void)loadView {
bottomClink = [[UIScrollView alloc]initWithFrame:bottomClinkRect];
[bottomClink setScrollEnabled:YES];
bottomClink.contentSize = CGSizeMake(bottomClink.frame.size.height,bottomClink.frame.size.height);
[contentView addSubview:bottomClink];
}
I create empty scrollview and then based on user actions on screen I am trying to add one imageView per time to the scrollview using the following method:
-(void)reloadCollections:(NSNotification *)notification
{
UIImage *latestPieceCaptured = [gameController capturedBlackPiecesImages].lastObject;
[whitePlayerCaptures addObject:latestPieceCaptured];
NSInteger newNumberOfViews = whitePlayerCaptures.count;
CGFloat xOrigin = (newNumberOfViews - 1) * bottomClink.frame.size.height;
CGRect imageRect = CGRectMake(bottomClink.frame.origin.x + xOrigin,
bottomClink.frame.origin.y,
bottomClink.frame.size.height, //the width is taken from the height
bottomClink.frame.size.height); // the height
UIImageView *image = [[UIImageView alloc] initWithFrame:imageRect];
image.backgroundColor = [UIColor blackColor];
image.image = latestPieceCaptured;
image.contentMode = UIViewContentModeScaleAspectFit;
//set the scroll view content size
bottomClink.contentSize = CGSizeMake(bottomClink.frame.size.height * newNumberOfViews,
bottomClink.frame.size.height);
[bottomClink addSubview:image];
}
My problem is that the scrollview is added to the main view but the imageview(s) are not showing up.
I have debugged it and the scrollview has the subviews added and they have frame size and all, but not showing on the screen. I have tried so many variations but nothing has worked so far.
Thanks in advance for any links or advice.
That works for me:
- (void)addImagesToScrollView {
[self.scrollViewOutlet setAlwaysBounceVertical:NO];
_scrollViewOutlet.delegate = self;
for (int i = 0; i < thumbnailPreview.count; i++) {
CGFloat xOrigin = i * self.scrollViewOutlet.frame.size.width;
UIImageView *image = [[UIImageView alloc] initWithFrame:
CGRectMake(xOrigin, 0,
self.scrollViewOutlet.frame.size.width,
self.scrollViewOutlet.frame.size.height)];
image.image = [UIImage imageNamed: [thumbnailPreview objectAtIndex:i]];
image.contentMode = UIViewContentModeScaleAspectFill;
image.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;
image.clipsToBounds = YES;
[self.scrollViewOutlet addSubview:image];
}
//set the scroll view content size
self.scrollViewOutlet.contentSize = CGSizeMake(self.scrollViewOutlet.frame.size.width *
thumbnailPreview.count,
self.scrollViewOutlet.frame.size.height);
}
And call it in
- (void)viewDidAppear:(BOOL)animated

How can i set image circular

I have done following code but it does not work. It shows me in circle but in crop image format.
I want to fit image to circle.
UIImage * defaultImage = [UIImage imageNamed:#"empty.png"];
self.myImageView = [[UIImageView alloc] initWithImage:defaultImage];
CGRect myFrame = CGRectMake(90.0f, 100.0f, self.myImageView.frame.size.width/1.5,self.myImageView.frame.size.height/1.5);
[self.myImageView setFrame:myFrame];
[self.myImageView setContentMode:UIViewContentModeScaleAspectFit];
self.myImageView.layer.masksToBounds = NO;
self.myImageView.layer.cornerRadius = self.myImageView.frame.size.width/2;
self.myImageView.layer.borderColor = [UIColor blackColor].CGColor;
self.myImageView.clipsToBounds=YES;
self.myImageView.layer.borderWidth = 2.0f;
[self.view addSubview:self.myImageView];
You can use this method
-(void)setRoundedView:(UIImageView *)roundedView toDiameter:
(float)newSize;
{
CGPoint saveCenter = roundedView.center;
CGRect newFrame = CGRectMake(roundedView.frame.origin.x,
roundedView.frame.origin.y, newSize, newSize);
roundedView.frame = newFrame;
roundedView.layer.cornerRadius = newSize / 2.0;
roundedView.center = saveCenter;
}
Now call the method with your imageview
[self setRoundedView:self.myImageView toDiameter:self.myImageView.frame.size.width];
self.myImageView.clipsToBounds = YES;
Hope it helps
In short,
anyView.layer.cornerRadius = anyView.frame.size.width/2;
Make sure that clipsToBound property of that view is enabled.
Set width & height equal to Your imageView, then set cornerRadius of imageView to half of width & height.
[self createRoundUIView:self.userProfileImageView sizeDiameter:self.userProfileImageView.frame.size.width];
And add following code to bellow method,
-(void)createRoundUIView:(UIImageView *)inputView sizeDiameter:(float)diameterSize
{
CGPoint saveCenter = inputView.center;
CGRect frame = CGRectMake(inputView.frame.origin.x, inputView.frame.origin.y, diameterSize, diameterSize);
inputView.frame = frame;
inputView.layer.cornerRadius = diameterSize / 2.0;
inputView.center = saveCenter;
inputView.clipsToBounds = YES;
}

How can I resize a UICollectionViewCell along one axis without distorting its contents?

I am trying to resize a UICollectionViewCell along only one axis without distorting its contents.
I have read answers for similar problems involving UICollectionViewLayoutAttributes layoutAttributesForItemAtIndexPath and layoutAttributesForElementsInRect. I have also tried using initWithFrame and awakeFromNib in a UICollectionViewCell subclass. I have attempted to set UIViewContentMode to UIViewContentModeScaleAspectFit or UIViewContentModeScaleAspectFill in those methods, but that has had no effect.
So far, I still get distorted text when I stretch along only one axis.
So...
I have a UICollectionView with its cells defined in a xib. Currently the cell only contains a UILabel. The collection view uses UICollectionViewFlowLayout to do some minor customizations:
self.flowLayout = [[UICollectionViewFlowLayout alloc] init];
[self.flowLayout setMinimumLineSpacing:1.0f];
[self.flowLayout setItemSize:CGSizeMake(self.cellSize.width, self.cellSize.height)];
[self.flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
[self.collectionView setCollectionViewLayout:self.flowLayout];
The UICollectionView is embedded inside a UIScrollView, and fits exactly inside the scroll view's dimensions. The scroll view size is set to be much larger than the screen in both directions. Hard-coded numbers are just for testing; I will turn them into appropriate constants later.
self.cellSize = CGSizeMake(150.0f, 150.0f);
CGSize scrollViewSize = self.scrollView.contentSize;
scrollViewSize.width = 20 * self.cellSize.width + 20.0f;
scrollViewSize.height = 20 * self.cellSize.height + 20.0f;
self.scrollView.contentSize = scrollViewSize;
self.collectionViewHeightConstraint.constant = self.scrollView.contentSize.height;
self.collectionViewWidthConstraint.constant = self.scrollView.contentSize.width;
The result is a grid which is scrollable in any direction. That part is working.
The grid needs to be stretchable, either proportionally or along only one axis at a time. I am using the following pinch gesture recognizer to make one-axis zooming happen (again, the hard-coded 1.0 value for y is just for testing):
- (IBAction)handlePinchGesture:(UIPinchGestureRecognizer *)recognizer
{
recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, 1.0);
recognizer.scale = 1;
}
When I resize the collection view with a pinch gesture, the label in each cell stretches and deforms. Here's a screen grab:
(source: afterburnerimages.com)
I will supply any other pertinent information gladly, and all assistance is much appreciated!
Oky u are using scrollview which contains collection view then u can use scrollview delegate for zoom, in your case it is stretches, better u can use like below
for example,
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
_scrollView = [[UIScrollView alloc]initWithFrame:self.view.bounds];
_scrollView.delegate = self;
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
[flowLayout setMinimumLineSpacing:1.0f];
[flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
[self.collectionVIew setCollectionViewLayout:flowLayout];
[self.collectionVIew registerClass:[CustomCollectionVIewCell class] forCellWithReuseIdentifier:#"CELL_ID"];
//setting up content size for scroll view
CGSize size = self.scrollView.contentSize;
size.width = 200 * 10;
size.height = 185 * 10;
self.scrollView.contentSize = size;
CGRect rect = CGRectZero;
rect.origin = self.scrollView.bounds.origin;
rect.size = size;
self.collectionVIew.frame = rect;
self.scrollView.backgroundColor = [UIColor greenColor];
[self.scrollView addSubview:self.collectionVIew];
[self.view addSubview:self.scrollView];
// CGRect scrollViewFrame = self.scrollView.frame;
// CGFloat scaleWidth = _collectionVIew.frame.size.width / self.scrollView.contentSize.width;
// CGFloat scaleHeight = _collectionVIew.frame.size.height / self.scrollView.contentSize.height;
// CGFloat minScale = MIN(scaleWidth, scaleHeight);
//set min scale must be less than max zoom scale so that it can be zoomable
self.scrollView.minimumZoomScale = 0.5;
self.scrollView.maximumZoomScale = 1.0f;
// self.scrollView.zoomScale = minScale; //default is 1.0f;
}
and use scroll view delegates to perform zoom
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.collectionVIew; //return collection view which is embedded inside scroll view
}
and result is something like gif below stretching proportionally without effecting the contents of collection view , hope this helps u .. :)

How to add multiple UIImageViews to paging UIScrollView?

I have a UIScrollView with paging enabled with multiple subviews on the page: a UIButton, UIwebview and UIImageView. Both the webview and the image change on every page. This works fine. I used Apples scrolling image paging example to get me started.
But when I add a second UIImageView, the position of image I have in place already gets the new values and the new image doesn't display.
This is the code inside viewdidload for the first image (works fine):
// load all the images from our bundle and add them to the scroll view
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"image%d.jpg", i];
UIImage *image2 = [UIImage imageNamed:imageName];
UIImageView *imageView2 = [[UIImageView alloc] initWithImage:image2];
// setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
CGRect rect = imageView2.frame;
rect.size.height = imageviewScrollObjHeight;
rect.size.width = imageviewScrollObjWidth;
// Get the Layer of any view
CALayer * imageLayer = [imageView2 layer];
[imageLayer setMasksToBounds:YES];
[imageLayer setCornerRadius:7.0];
// You can even add a border
[imageLayer setBorderWidth:1.0];
[imageLayer setBorderColor:[[UIColor lightGrayColor] CGColor]];
imageView2.frame = rect;
imageView2.tag = i; // tag our images for later use when we place them in serial fashion
[scrollView1 addSubview:imageView2];
}
[self layoutScrollImages]; // now place the photos in serial layout within the scrollview
This is the code to layout the first image on every page, different image per page(outside viewdidload)(works fine):
// layout images for imageview1
- (void)layoutScrollImages
{
UIImageView *imageView = nil;
NSArray *subviews = [scrollView1 subviews];
// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 10;
for (imageView in subviews)
{
if ([imageView isKindOfClass:[UIImageView class]] && imageView.tag > 0)
{
CGRect frame = imageView.frame;
frame.origin = CGPointMake(curXLoc, 50);
imageView.frame = frame;
curXLoc += (kScrollObjWidth);
}
}
// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
}
This is the code for the second image (inside viewdidload): (when i remove [self layoutNavScrollImages]; the image loads only on the first page)
for (i = 1; i <= kNumImages; i++)
{
UIImage *navBarImage = [UIImage imageNamed:#"navigationbar.png"];
UIImageView *imageViewNavBar = [[UIImageView alloc] initWithImage:navBarImage];
// setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
CGRect navBarRect = imageViewNavBar.frame;
navBarRect.size.height = 44;
navBarRect.size.width = 320;
navBarRect.origin.x = 0;
navBarRect.origin.y = 0;
/* Get the Layer of any view
CALayer * imageLayer = [imageView3 layer];
[imageLayer setMasksToBounds:YES];
[imageLayer setCornerRadius:7.0];
// You can even add a border
[imageLayer setBorderWidth:1.0];
[imageLayer setBorderColor:[[UIColor lightGrayColor] CGColor]];
*/
imageViewNavBar.frame = navBarRect;
imageViewNavBar.tag = i; // tag our images for later use when we place them in serial fashion
[scrollView1 addSubview:imageViewNavBar];
}
[self layoutNavScrollImages];
And the code outside viewdidload:(this overwrites the position of the first image)
- (void)layoutNavScrollImages
{
UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];
// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)
{
if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(curXLoc, 0);
view.frame = frame;
curXLoc += (kScrollObjWidth);
}
}
// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
}
The way to do this is to make one (big) UIView and add every UIImageView as a subview of that UIView. And then add the UIView as a subview to UIScrollView.
[totalView addSubview:imageView1];
[totalView addSubview:imageView2;
[totalView addSubview:buttonView1];
[totalView addSubview:buttonView2];
[totalView addSubview:webView];
[scrollView addSubview:totalView];
Be sure to set the right content size or scrollview wont work:
[scrollView setContentSize:CGSizeMake((320*kNumImages), 411)];
Setup views and tag the UIView (inside viewdidload):
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
//... code to setup views
totalView.tag = i;
}
[self layoutViews]; // now place the views in serial layout within the scrollview
Then to layout the view on every page:
- (void)layoutViews
{
UIView *view = nil;
NSArray *subviews = [scrollView subviews];
// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)
{
if ([view isKindOfClass:[UIView class]] && view.tag > 0)
{
CGRect frame = view.frame;
frame.origin = CGPointMake(curXLoc, 0);
view.frame = frame;
curXLoc += (kScrollObjWidth);
}
}
}
I hope this is as clear as possible. If anyone thinks this is not the right way to do it please comment.

IOS Add subview on viewDidLoad

i have a problem when i'm trying to add subviews to a UIScrollView on viewDidLoad.
I'm using this code to programmatically add the UIImageViews to the scrollView:
- (void)viewDidLoad {
[super viewDidLoad];
NSInteger const_width = 100;
NSInteger numberOfViews = 4;
CGRect theFrame = [self.scrollView frame];
for (int i = 0; i < numberOfViews; i++) {
CGFloat xOrigin = i * const_width;
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(xOrigin,theFrame.origin.y,const_width,110)];
UIImage *image = [UIImage imageNamed:#"cocoloco.jpg"];
[imageView setImage:image];
//[self.scrollView addSubview:imageView];
imageView.tag = i;
CGRect rect = imageView.frame;
rect.size.height = 110;
rect.size.width = 110;
imageView.frame = rect;
[self.scrollView addSubview:imageView];
}
self.scrollView.contentSize = CGSizeMake(const_width * numberOfViews, 110);}
But i get the current view:
It seems that the scroll view frame takes its position regardless the 3 yellow tabs (that are a special TabBarController) so i get a wrong frame origin from the UIScrollView and therefore the UIImageViews are wrong positioned.
Any idea?
I don't know exactly how to do it, but add the height of the frame to the "Y" position of your rectangle. Something like this:
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(xOrigin,theFrame.origin.y + (theFrame.height),const_width,110)];
To get the scrollview below the navigation bar at the top, try
self.scrollview.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
Then position the table below the scrollview by setting it's origin base on the scrollview origin and height:
CGRect frame = tableView.frame;
frame.origin.y = self.scrollview.frame.origin.y + self.scrollview.frame.size.height;
tableView.frame = frame;
You should move any resizing or layout of your UI to the -(void)layoutSubviews method and this should sort your problem correctly.

Resources