I write a code to loop for creating multiple image on UIImageView inside scrollview. i did something like this:
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(38, 9, 90, 280)];
int numberOfImages = 9;
CGFloat currentY = 0.5f;
for (int i=1; i <= numberOfImages; i++) {
NSString *imageName = [NSString stringWithFormat:#"img0%d.jpg",i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(2, 15, 87, imageView.frame.size.height - 20);
CGRect rect = imageView.frame;
rect.origin.y = currentY;
imageView.frame = rect;
currentY += imageView.frame.size.height;
[scrollView addSubview:imageView];
}
scrollView.contentSize = CGSizeMake(87,currentY);
[self.view addSubview:scrollView];
Now, i need to add a space between each image, how can i do that?
Add a bit more to currentY?
currentY += imageView.frame.size.height + 12.0f;
Related
I am trying to make an existing app as accessible as possible for voice over.
Currently, I have a uiviewcontroller thats basically a paging photo view with a uipagecontrol below the uiscrollView (tourScrollView) that indicates the current image/page being viewed.
here's the code that calculate's the current page:
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
CGFloat pageWidth = scrollView.frame.size.width;
self.tourScrollView.isAccessibilityElement = NO;
scrollView.isAccessibilityElement = NO;
int currentPage = floor((scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
pageControl.currentPage = currentPage;
}
the page calculation code works perfect.
There are a total of 5 images being shown.
With voice over enabled, when the scroll view scrolls, instead of going
page 1 of 5
page 2 of 5
page 3 of 5
page 4 of 5
page 5 of 5
it goes like this.
page 1 of 6
page 2 of 6
page 3 of 6
page 5 of 6
page 6 of 6
Here's the code where the images are added to the scrollView
-(void)addImagesToScrollview{
NSArray *welcomeImages = [[NSArray alloc] initWithObjects:[UIImage imageNamed:#"img-01.png"],
[UIImage imageNamed:#"img-02.png"],
[UIImage imageNamed:#"img-03.png"],
[UIImage imageNamed:#"img-04.png"],
[UIImage imageNamed:#"img-05.png"],nil];
CGRect scrollViewFrame = tourScrollView.frame;
CGFloat scrollViewWidth = scrollViewFrame.size.width;
CGFloat scrollViewHeight = scrollViewFrame.size.height;
CGFloat imageX;
for (int i = 0; i<[welcomeImages count]; i++) {
int index = i;
imageX = (scrollViewWidth*index) + (scrollViewWidth - IMAGE_WIDTH)/2.0;
CGRect boarderViewRect = CGRectMake(imageX, 20.0f, IMAGE_WIDTH, IMAGE_HEIGHT);
UIView *whiteBorderView = [[UIView alloc] initWithFrame:boarderViewRect];
whiteBorderView.backgroundColor = [UIColor whiteColor];
UIImageView *imageView = [[UIImageView alloc]initWithImage:[welcomeImages objectAtIndex:i]];
CGRect imageRect = CGRectInset(boarderViewRect, IMAGE_INSET, IMAGE_INSET);
imageView.frame = imageRect;
CGRect descriptionRect = CGRectMake((scrollViewWidth*index) + 20.0f, imageRect.origin.y + imageRect.size.height+10, 280, 90);
CGSize maximumLabelSize = CGSizeMake(descriptionRect.size.width,120);
descriptionRect.size = [[self descriptionForIndex:i] sizeWithFont:[UIFont systemFontOfSize:16.0] constrainedToSize:maximumLabelSize lineBreakMode:UILineBreakModeTailTruncation];
UILabel *imageDescription = [[UILabel alloc] initWithFrame:descriptionRect];
imageDescription.text = [NSString stringWithFormat:#"%#",[self descriptionForIndex:i]];
imageDescription.numberOfLines = 0;
imageDescription.backgroundColor = [UIColor clearColor];
imageDescription.font = [UIFont systemFontOfSize:16.0];
imageDescription.textColor = [UIColor colorWithRed:(119.0/255.0) green:(119.0/255.0) blue:(119.0/255.0) alpha:1.0];
imageDescription.textAlignment = UITextAlignmentCenter;
imageDescription.shadowColor = [UIColor whiteColor];
imageDescription.shadowOffset = CGSizeMake(0,1);
[tourScrollView addSubview:whiteBorderView];
[tourScrollView addSubview:imageView];
[tourScrollView addSubview:imageDescription];
if (i == [welcomeImages count]-1) {
tourScrollView.contentSize = CGSizeMake(imageView.frame.origin.x + scrollViewWidth -((scrollViewWidth - IMAGE_WIDTH)/2.0), scrollViewHeight);
}
}
}
I'd appreciate if someone points me to the right direction to make voice over say the correct page numbers.
update: Enabling/disabling pagingEnabled makes no difference. I think voiceOver overrides the paging calculations I do based on the scrollview size.
Here's what fixed it:
removed the commented code, and added a line for the content size outside the for loop
-(void)addImagesToScrollview{
NSArray *welcomeImages = [[NSArray alloc] initWithObjects:[UIImage imageNamed:#"img-01-welcome.png"],
[UIImage imageNamed:#"img-02-welcome.png"],
[UIImage imageNamed:#"img-03-welcome.png"],
[UIImage imageNamed:#"img-04-welcome.png"],
[UIImage imageNamed:#"img-05-welcome.png"],nil];
CGRect scrollViewFrame = tourScrollView.frame;
CGFloat scrollViewWidth = scrollViewFrame.size.width;
CGFloat scrollViewHeight = scrollViewFrame.size.height;
CGFloat imageX;
for (int i = 0; i<[welcomeImages count]; i++) {
int index = i;
imageX = (scrollViewWidth*index) + (scrollViewWidth - IMAGE_WIDTH)/2.0;
CGRect boarderViewRect = CGRectMake(imageX, 20.0f, IMAGE_WIDTH, IMAGE_HEIGHT);
UIView *whiteBorderView = [[UIView alloc] initWithFrame:boarderViewRect];
whiteBorderView.backgroundColor = [UIColor whiteColor];
UIImageView *imageView = [[UIImageView alloc]initWithImage:[welcomeImages objectAtIndex:i]];
CGRect imageRect = CGRectInset(boarderViewRect, IMAGE_INSET, IMAGE_INSET);
imageView.frame = imageRect;
CGRect descriptionRect = CGRectMake((scrollViewWidth*index) + 20.0f, imageRect.origin.y + imageRect.size.height+10, 280, 90);
CGSize maximumLabelSize = CGSizeMake(descriptionRect.size.width,120);
descriptionRect.size = [[self descriptionForIndex:i] sizeWithFont:[UIFont systemFontOfSize:16.0] constrainedToSize:maximumLabelSize lineBreakMode:UILineBreakModeTailTruncation];
UILabel *imageDescription = [[UILabel alloc] initWithFrame:descriptionRect];
imageDescription.text = [NSString stringWithFormat:#"%#",[self descriptionForIndex:i]];
imageDescription.numberOfLines = 0;
imageDescription.backgroundColor = [UIColor clearColor];
imageDescription.font = [UIFont systemFontOfSize:16.0];
imageDescription.textColor = [UIColor colorWithRed:(119.0/255.0) green:(119.0/255.0) blue:(119.0/255.0) alpha:1.0];
imageDescription.textAlignment = UITextAlignmentCenter;
imageDescription.shadowColor = [UIColor whiteColor];
imageDescription.shadowOffset = CGSizeMake(0,1);
[tourScrollView addSubview:whiteBorderView];
[tourScrollView addSubview:imageView];
[tourScrollView addSubview:imageDescription];
// if (i == [welcomeImages count]-1) {
// tourScrollView.contentSize = CGSizeMake(imageView.frame.origin.x + scrollViewWidth -((scrollViewWidth - IMAGE_WIDTH)/2.0), scrollViewHeight);
// }
}
tourScrollView.contentSize = CGSizeMake(320.0*[welcomeImages count], scrollViewHeight);
}
I am still not sure why VO would mess up the page numbers. The scrollview behavior, before and after the fix is still the same (bouncing and paging work identical).
will update the answer if I get to know more about this issue.
One easy option is to conform to your UIScrollViewDelegate to UIScrollViewAccessibilityDelegate and return the desired string.
For example:
extension MyScrollViewDelegate: UIScrollViewAccessibilityDelegate {
func accessibilityScrollStatus(for scrollView: UIScrollView) -> String? {
"\(self.currentPage) of \(self.pageCount)"
}
}
I am trying to add set of imageviews on a UIScrollView. My problem is that the imageviews are overlapping with each other even though I increase the x value. What's also weird is that this problem is only for devices with ios 4.2.1, but works on simulator 4.2 and other device ios.
Here is my code:
- (void)addScrollView {
[self setImages];
scrollView = [[UIScrollView alloc] initWithFrame:self.frame];
scrollView.delegate = self;
[scrollView setBackgroundColor:[UIColor blackColor]];
[scrollView setCanCancelContentTouches:NO];
scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView.clipsToBounds = YES;
scrollView.scrollEnabled = YES;
scrollView.pagingEnabled = YES;
[self addSubview:scrollView];
NSUInteger nimages;
CGFloat cx = 0;
for (nimages = 1; nimages < [imagesArray count] ; nimages++) {
UIImage *image = [UIImage imageNamed:[imagesArray objectAtIndex:nimages]];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.origin.x = cx;
rect.origin.y = 0;
rect.size.width = 320;
rect.size.height = 480;
imageView.frame = rect;
[scrollView addSubview:imageView];
[imageView release];
cx += rect.size.width;
}
[scrollView setContentSize:CGSizeMake(cx, [scrollView bounds].size.height)];
}
Called from here:
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self addScrollView];
UIImage *handImg;
UIImageView *longhand = [[UIImageView alloc] init];
minuteHand = [[UIView alloc] initWithFrame:CGRectMake(0, 55, 320, 480)];
handImg = [UIImage imageNamed:#"clock_long_hand.png"];
longhand.image = handImg;
/************** TRY COMMENT OUT HERE **************/
longhand.frame = CGRectMake(155 - (handImg.size.width / 2), 240 - handImg.size.height, handImg.size.width, handImg.size.height);
[minuteHand addSubview:longhand];
[self addSubview:minuteHand];
/************** END COMMENT OUT HERE **************/
[longhand release];
}
return self;
}
UPDATE:
This code is in a UIView subclass which is why I use [self...] instead of [self.view...].
I tried experimenting and found that when I comment out the indicated parts, the scrollview works fine. But when it is included, this is when the imageviews are overlapped.
I know that the scrollview's content size is correct because its indicator continues to scroll, with just a plain black background.
I am really confused why this works on some ios and not on others. Hope you can help.
This might have something to do with autoresizing mask. The width actual images, I mean .png files is bigger than 320, right?
I would like to add a page number above the image such as "1 of 50" and description of the image below the image in the scrollview.
I have looked at this LINK but still couldn't figure out how to make it happen.
here is my sample code of the images scrollview. Im trying to find a sample that can add text and scroll with the images
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"images%d.jpg", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
// setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
CGRect rect = imageView.frame;
rect.size.height = kScrollObjHeight;
rect.size.width = kScrollObjWidth;
imageView.frame = rect;
imageView.tag = i; // tag our images for later use when we place them in serial fashion
[scrollView1 addSubview:imageView];
[imageView release];
}
UPDATE:
const CGFloat kScrollObjHeight = 320;
const CGFloat kScrollObjWidth = 280.0;
const NSUInteger kNumImages = 50;
- (void)layoutScrollImages
{
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);
}
}
- (void)viewDidLoad {
self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];
// 1. setup the scrollview for multiple images and add it to the view controller
//
// note: the following can be done in Interface Builder, but we show this in code for clarity
[scrollView1 setBackgroundColor:[UIColor blackColor]];
[scrollView1 setCanCancelContentTouches:NO];
scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView1.clipsToBounds = YES; // default is NO, we want to restrict drawing within our scrollview
scrollView1.scrollEnabled = YES;
// pagingEnabled property default is NO, if set the scroller will stop or snap at each photo
// if you want free-flowing scroll, don't set this property.
scrollView1.pagingEnabled = YES;
// load all the images from our bundle and add them to the scroll view
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"creative%d.jpg", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
// setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
CGRect rect = imageView.frame;
rect.size.height = kScrollObjHeight;
rect.size.width = kScrollObjWidth;
imageView.frame = rect;
imageView.tag = i; // tag our images for later use when we place them in serial fashion
[scrollView1 addSubview:imageView];
[imageView release];
}
[self layoutScrollImages];
I wanted to put this but unable to find the correct position or right offset to display at the top
UILabel * topLabel = [[UILabel alloc] init];
topLabel.text = [NSString stringWithFormat:#"%d of %d", i, kNumImages];
rect.origin.x = offset;
rect.size.height = 30; // however large you need the label to be
topLabel.frame = rect;
offset += 30;
I would think something like this would work:
float offset = 0;
for (NSUInteger i = 1; i <= kNumImages; i++)
{
// load up the image
NSString *imageName = [NSString stringWithFormat:#"images%d.jpg", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
// image.size is important here and used to determine placement
CGRect rect = imageView.frame;
rect.size = image.size;
// create top label, just basic will need to configure other settings like font
UILabel * topLabel = [[UILabel alloc] init];
topLabel.text = [NSString stringWithFormat:#"%d of %d", i, kNumImages];
rect.origin.x = offset;
rect.size.height = 30; // however large you need the label to be
topLabel.frame = rect;
offset += 30; // adding the label height
// set image frame since we now know the location below top label
rect.size = image.size;
rect.origin.x += offset;
imageView.frame = rect;
imageView.tag = i;
offset += image.size.height; // adding image height
// add bottom label below image
UILabel * bottomLabel = [[UILabel alloc] init];
bottomLabel.text = imageName; // just a sample description
rect.origin.x += offset;
rect.size.height = 30; // however large you need the label to be
bottomLabel.frame = rect;
offset += 30; // adding the label height
[scrollView1 addSubview:topLabel];
[scrollView1 addSubview:imageView];
[scrollView1 addSubview:bottomLabel];
[imageView release];
[topLabel release];
[bottomLabel release];
offset += 20; // arbitrary spacing between images
}
i have following problem: i generate subviews UIView in an UIScrollView including UIImageViews.
NSArray *bilder = [[NSArray alloc] initWithObjects:#"lol.jpg", #"lol2.jpg", nil];
NSArray *added = [[NSMutableArray alloc] init];
UIImageView *tmpView;
for (NSString *name in bilder) {
UIImage *image = [UIImage imageNamed:name];
tmpView = [[UIImageView alloc] initWithImage:image];
tmpView.contentMode = UIViewContentModeScaleAspectFit;
tmpView.frame = CGRectMake(0, 0, 300, 300);
[added addObject:tmpView];
[tmpView release];
}
CGSize framy = mainFrame.frame.size;
NSUInteger x = 0;
for (UIView *view in added) {
[mainFrame addSubview:view];
view.frame = CGRectMake(framy.height * x++, 0, framy.height, framy.width);
}
mainFrame.scrollEnabled = YES;
mainFrame.pagingEnabled = YES;
mainFrame.contentSize = CGSizeMake(framy.height * [added count], framy.width);
mainFrame.backgroundColor = [UIColor blackColor];
i get image file names out of an array. now i want to resize the imageview to a specific size, but it won't work. any advice?
thanks + regards
UIImage lacks the setSize: method of NSImage, but this post seems to add a scaleToSize: method using a category on UIImage.
Change tmpView.frame to use a new CGRect:
tmpView.frame = CGRectMake(tmpView.frame.origin.x,
tmpView.frame.origin.y,
newWidth,
newHeight);
What I see is:
view.frame = CGRectMake(framy.height * x++, 0, framy.height, framy.width);
But if you look at CGRectMake...
Declaration: CGRect CGRectMake (
CGFloat x,
CGFloat y,
CGFloat width,
CGFloat height
);
You are setting the X value, not the Y value. I expect, based on your later call to:
mainFrame.contentSize = CGSizeMake(framy.height * [added count], framy.width);
that you intend to make the these images appear on top of each other, not side by side.
Suggest:
view.frame = CGRectMake(framy.height * x++, 0, framy.height, framy.width);
to
view.frame = CGRectMake(0,framy.height * x++, framy.height, framy.width);
I've been struggling with trying to get my UIImageView to change its image when the UIScrollView is scrolled, kind of like the Photos.app.
Here's my code:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (scrollView.contentOffset.x > 296){
self.currentDBNum++;
self.currentDoorbell = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:[[self.doorbells objectAtIndex:currentDBNum] objectForKey:#"Image"] ofType:#"jpg"]];
self.doorbellPic.image = currentDoorbell;
self.currentSoundPath = [[NSBundle mainBundle] pathForResource:[[doorbells objectAtIndex:currentDBNum] objectForKey:#"Sound"] ofType:#"caf"];
}
}
Any hints? Thanks. (The images have a width of 296.)
There are two ways that accomplish your task:
Try to learn Three20 TTPhotoViewController that will do exactly the same as the photo.app that you see in your iphone.
If you want to do it yourself then from my experience, you have to add multiple UIImageView with the correct position (x,y,width,height) to the UIScrollView. Remember to initialize the scroll view with the right content-size so that it's scrollable. An example: image1 is (0,0,320,480), image2 is (320,0,320,480), image3 is (640,0,320,480), etc... then your scroll view content size will be the x's value of the last item + the width of the last item.
Antohny,
I do not have my own source code right with me, but I can suggest you the following link:
http://github.com/andreyvit/ScrollingMadness
I think it will give you an idea so you can implement it without hitting the corners.
you can do it by using following code:
UIImageView *tempImageView ;
int initialXPos = 0;
int initialYPos = 30;
view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 800)];
int arraycounter=0;
for (int i=0; i<numrows; i++)
{
for (int j=0; j<numImagesPerColumn; j++)
{
NSURL *url=[NSURL URLWithString:[aPhoto.childphotos objectAtIndex:arraycounter]];
UIImage *image1;
CGRect image1Frame;
image1 = [UIImage imageWithData:[NSData dataWithContentsOfURL:url]];
image1Frame = CGRectMake(initialXPos,initialYPos, 80, 80);
tempImageView = [[UIImageView alloc] initWithFrame:image1Frame];
tempImageView.image=image1;
tempImageView.tag = 0;
initialXPos = initialXPos + 80 + 4;
[view addSubview:tempImageView];
arraycounter=arraycounter+1;
}
initialXPos=0;
initialYPos = initialYPos + 86;
}
scrollView.maximumZoomScale = 4.0;
scrollView.minimumZoomScale = 0.75;
scrollView.clipsToBounds = YES;
scrollView.delegate = self;
[scrollView addSubview:view];
[scrollView addSubview:title];
[scrollView addSubview:des];
[self.view addSubview:scrollView ];
u try this
-(void)getButtonRowSize:(int)_rowsize Count:(int)_count
{
[scrollView setFrame:CGRectMake(0, 0, 320, 480)];
[scrollView setContentSize:CGSizeMake(320,((320-_rowsize*IMAGEGAP)/_rowsize)*(_count/_rowsize +1)+(_count/_rowsize)*IMAGEGAP)];
for(int i=0;i<_count;i++)
{
[scrollView addSubview:[self getButtonRowSize:_rowsize Count:_count currentPos:i]];
}
}
-(UIButton *)getButtonRowSize:(int)_rowsize Count:(int)_count currentPos:(int)_pos
{
UIButton *button=[UIButton buttonWithType:UIButtonTypeCustom];
[button setFrame:CGRectMake((_pos%_rowsize)*((320-(_rowsize+1)*IMAGEGAP)/_rowsize)+(_pos%_rowsize +1)*IMAGEGAP,(_pos/_rowsize)*((320-(_rowsize+1)*IMAGEGAP)/_rowsize)+(_pos/_rowsize +1)*IMAGEGAP,((320-(_rowsize+1)*IMAGEGAP)/_rowsize),((320-(_rowsize+1)*IMAGEGAP)/_rowsize))];
[button setBackgroundImage:[self resizingImagewithimagename:[UIImage imageNamed:#"add image file name"] Length:((320-(_rowsize+1)*IMAGEGAP)/_rowsize)] forState:UIControlStateNormal];
return button;
}