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
Related
I have to add the following animation in my iOS app, I have used a scroll bar along with UITableView and achieved the top and bottom animation, but I'm still stuck at the middle animation part where the 4 UIViews come in a single horizontal line. Any suggestions?
http://www.image-maps.com/m/private/0/af8u4ulika9siddnf6k6hhrtg2_untitled-2.gif
Code:-
#implementation AnimatedView {
UIScrollView *mainScroll;
UIScrollView *backgroundScrollView;
UILabel *_textLabel;
UITableView *_commentsTableView;
UIView *menuView;
UIView *_commentsViewContainer;
UIView *fadeView;
UIImageView *imageView;
NSMutableArray *comments;
}
- (id)init {
self = [super init];
if (self) {
_mainScrollView = [[UIScrollView alloc] initWithFrame:[UIApplication sharedApplication].keyWindow.frame];
self.view = _mainScrollView;
_backgroundScrollView = [[UIScrollView alloc] initWithFrame:HEADER_INIT_FRAME];
imageView = [[UIImageView alloc] initWithFrame:HEADER_INIT_FRAME];
fadeView = [[UIView alloc] initWithFrame:imageView.frame];
_textLabel = [[UILabel alloc] initWithFrame:CGRectMake(10.0f, 100.0f, 150.0f, 25.0f)];
menuView = [[UIView alloc] initWithFrame:CGRectMake(0,_textLabel.frame.size.height+150, self.view.frame.size.width+30, 180)];
[_backgroundScrollView addSubview:imageView];
[_backgroundScrollView addSubview:fadeView];
[_backgroundScrollView addSubview:menuView];
[_backgroundScrollView addSubview:_textLabel];
_commentsViewContainer = [[UIView alloc] init];
_commentsTableView = [[UITableView alloc] init];
_commentsTableView.scrollEnabled = NO;
_commentsTableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];
[self.view addSubview:_backgroundScrollView];
[_commentsViewContainer addSubview:_commentsTableView];
[self.view addSubview:_commentsViewContainer];
// fake data!
comments = [#[#"Array for tableview"] mutableCopy];
}
return self;
}
#pragma mark Scroll
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat delta = 0.0f;
CGRect rect = HEADER_INIT_FRAME;
// Here is where I do the "Zooming" image and the quick fade out the text and toolbar
if (scrollView.contentOffset.y < 0.0f) {
delta = fabs(MIN(0.0f, _mainScrollView.contentOffset.y));
_backgroundScrollView.frame = CGRectMake(CGRectGetMinX(rect) - delta / 2.0f, CGRectGetMinY(rect) - delta, CGRectGetWidth(rect) + delta, CGRectGetHeight(rect) + delta);
[_commentsTableView setContentOffset:(CGPoint){0,0} animated:NO];
} else {
delta = _mainScrollView.contentOffset.y;
_textLabel.alpha = 1.0f;
CGFloat backgroundScrollViewLimit = _backgroundScrollView.frame.size.height - kBarHeight;
// Here I check whether or not the user has scrolled passed the limit where I want to stick the header, if they have then I move the frame with the scroll view
// to give it the sticky header look
if (delta > backgroundScrollViewLimit) {
_backgroundScrollView.frame = (CGRect) {.origin = {0, delta - _backgroundScrollView.frame.size.height + kBarHeight}, .size = {self.view.frame.size.width, HEADER_HEIGHT}};
_commentsViewContainer.frame = (CGRect){.origin = {0, CGRectGetMinY(_backgroundScrollView.frame) + CGRectGetHeight(_backgroundScrollView.frame)}, .size = _commentsViewContainer.frame.size };
_commentsTableView.contentOffset = CGPointMake (0, delta - backgroundScrollViewLimit);
CGFloat contentOffsetY = -backgroundScrollViewLimit * kBackgroundParallexFactor;
[_backgroundScrollView setContentOffset:(CGPoint){0,contentOffsetY} animated:NO];
}
else {
_backgroundScrollView.frame = rect;
_commentsViewContainer.frame = (CGRect){.origin = {0, CGRectGetMinY(rect) + CGRectGetHeight(rect)}, .size = _commentsViewContainer.frame.size };
[_commentsTableView setContentOffset:(CGPoint){0,0} animated:NO];
[_backgroundScrollView setContentOffset:CGPointMake(0, -delta * kBackgroundParallexFactor)animated:NO];
}
}
}
- (void)viewDidAppear:(BOOL)animated {
_mainScrollView.contentSize = CGSizeMake(CGRectGetWidth(self.view.frame), _commentsTableView.contentSize.height + CGRectGetHeight(_backgroundScrollView.frame));
}
You don't need any scrollview to implement this really. All you need is 1 UITableView with 2 sections. First section has a single empty element (but set the row height to 0), and enable the header for both sections. You can use UIViews for the headerViews. Then, you only need to change the header height (with icon positioning) based on tableview Delegate scrollViewDidScroll. scrollViewDidScroll is also a delegate of UITableView since one of TableView's element inherits from UIScrollView.
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.
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.
I am adding a UILabel and UIActivityIndicatorView as a subview to a tableview as a loading indicator. I want these items to be in the middle of the visible are of the table view, and remain in the center if the user scrolled, so the user will always see the items. My code to create them is:
if (!spinner) {
spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
[spinner startAnimating];
loadingLabel = [[UILabel alloc] initWithFrame:CGRectZero];
loadingLabel.font = [UIFont systemFontOfSize:20];
loadingLabel.textColor = [UIColor grayColor];
loadingLabel.text = #"Loading...";
[loadingLabel sizeToFit];
static CGFloat bufferWidth = 8.0;
CGFloat totalWidth = spinner.frame.size.width + bufferWidth + loadingLabel.frame.size.width;
CGRect spinnerFrame = spinner.frame;
spinnerFrame.origin.x = (self.tableView.bounds.size.width - totalWidth) / 2.0;
spinnerFrame.origin.y = (self.tableView.bounds.size.height - spinnerFrame.size.height) / 2.0;
spinner.frame = spinnerFrame;
spinner.autoresizingMask = (UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin);
[self.tableView addSubview:spinner];
CGRect labelFrame = loadingLabel.frame;
labelFrame.origin.x = (self.tableView.bounds.size.width - totalWidth) / 2.0 + spinnerFrame.size.width + bufferWidth;
labelFrame.origin.y = (self.tableView.bounds.size.height - labelFrame.size.height) / 2.0;
loadingLabel.frame = labelFrame;
loadingLabel.autoresizingMask = (UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin);
[self.tableView addSubview:loadingLabel];
}
How can I make it recenter when the table view scrolls?
EDIT
How would I calculate the sizes to reposition the spinner to the middle? What property would I set?
Add your view to the superview of the table view (if possible; UITableViewControllermakes this impossible)
Add your view to the table view and reposition it in the -scrollViewDidScroll:delegate method (UITableViewDelegateis a sub-protocol of UIScrollViewDelegate)
EDIT:
For maintaining center of the view
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGSize adSize = [awView actualAdSize];
CGRect newFrame = awView.frame; newFrame.origin.x = (self.view.bounds.size.width - adSize.width)/2;
newFrame.origin.y = (self.tableView.contentOffset.y - adSize.height/2) -21;
awView.frame = newFrame;
}
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.