space between images in thumbnail for ipad - objective-c

I create Thumbnail photo with scrollview for ipad, here is the code:
// load all the images from bundle and add them to the scroll view
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"image%d.jpg", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
}
- (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);
}
}
}
rightnow I have all images in UIScrollView that they are next to each other, I want to have some space between each images like this picture
would you please give me some hint that how can I add space between these images?
Thanks in Advance!

Try this:
curXLoc += (kScrollObjWidth) + kDifferenceBetweenImages;
and define kDifferenceBeteweenIMages accordingly.

Use UICollectionView instead. Much easier to achieve what you want and will work better too.
It even has a property for the space between each cell.

Try this one :
CGRect frame = view.frame;
frame.origin = CGPointMake(curXLoc, 0);
frame.size.height = //put height;
frame.size.width = //put width;
frame.origin.y = //put y;
view.frame = frame;
curXLoc += (kScrollObjWidth) + 15;

Related

Place UIImageViews in row

I am looping through a array and adding UIImageViews, the array has a have different count depending on somethings. So the amount of UIImageViews varies. What I need to do is line them up in a row in the center of the view. I know the code that I need to use its the calculations that I am having an issue with.
for (int i = 0; i < [_lettersArray count]; i++){
UIImage* imageContainer = [UIImage imageNamed:#"container.png"];
UIImageView *containerView = [[UIImageView alloc] initWithImage:imageContainer];
containerView.frame = CGRectMake(???,120,imageContainer.size.width,imageContainer.size.height);
[self.view addSubview:containerView];
}
[self _layoutViews:self.imageViews inView:self.view];
- (void) _layoutViews:(NSArray *)views inView:(UIView *)contentView
{
NSInteger overallWidth = 0;
for ( UIView *view in views ) {
overallWidth += view.frame.size.width;
}
CGSize contentSize = contentView.frame.size;
CGFloat startOffset = (contentSize.width - overallWidth)/2.0;
CGFloat offset = startOffset;
for ( UIView *view in views ) {
CGRect frame = view.frame;
frame.origin.x = offset;
frame.origin.y = (contentSize.height/2.0) - (frame.size.height/2.0);
view.frame = frame;
offset += view.frame.size.width;
}
}
For your example code it would be something like this:
CGFloat count = [_lettersArray count];
NSMutableArray *imageViews = [[NSMutableArray alloc] initWithCapacity:count];
for (int i = 0; i < [_lettersArray count]; i++) {
UIImage *imageContainer = [UIImage imageNamed:#"container.png"];
UIImageView *containerView = [[UIImageView alloc] initWithImage:imageContainer];
containerView.frame = CGRectMake(0,120,imageContainer.size.width,imageContainer.size.height);
[imageViews addObject:containerView];
[self.view addSubview:containerView];
}
[self _horizontalCenterViews:imageViews inView:self.view];
return YES;
}
- (void) _horizontalCenterViews:(NSArray *)views inView:(UIView *)contentView
{
NSInteger overallWidth = 0;
for ( UIView *view in views ) {
overallWidth += view.frame.size.width;
}
CGSize contentSize = contentView.frame.size;
CGFloat startOffset = (contentSize.width - overallWidth)/2.0;
CGFloat offset = startOffset;
for ( UIView *view in views ) {
CGRect frame = view.frame;
frame.origin.x = offset;
view.frame = frame;
offset += view.frame.size.width;
}
}

Why images are not showing in UIScrollView?

I am using this code to show scrolling images but I am only getting a white screen. I drag drop uiscrollview, created the iboutlet, synthesized it and rest of the code is here
#synthesize scrollView1;
const CGFloat kScrollObjHeight = 199.0;
const CGFloat kScrollObjWidth = 280.0;
const NSUInteger kNumImages = 5;
- (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);
}
}
// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
scrollView1 = [[UIScrollView alloc]init];
bgArray = [NSArray arrayWithObjects:#"Bg", #"Bg1.png", #"Bg2.png", #"Bg3.png", #"Bg4.png", #"Bg5.png", #"Bg6.png", #"Bg7.png", #"Bg8.png", nil];
[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 = 0; i < [bgArray count]; i++)
{
NSString *imageName = [NSString stringWithFormat:#"%#", [bgArray objectAtIndex: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 = 199.0;
rect.size.width = 280.0;
imageView.frame = rect;
imageView.tag = i; // tag our images for later use when we place them in serial fashion
[scrollView1 addSubview:imageView];
[scrollView1 setShowsHorizontalScrollIndicator:NO];
[scrollView1 setShowsVerticalScrollIndicator:NO];
}
[self layoutScrollImages];
}
I think if you are create UIScrollView from code
scrollView1 = [[UIScrollView alloc]init];
then please add the scrollView1 in view
Example:-[self.view addSubview:scrollView1];
if you are create UIScrollView from nib then
not use this code
scrollView1 = [[UIScrollView alloc]init];
solve your probem

UIScrollView paging tagging

I've created a UIScrollView with paging containing several images, with 1 image per "page", and i was wondering if there were any way to distinguish the images from each other?
Fx. when the first image is showing, I would have a button to set a UILabel to '1' and when the second image is showing, the same button would set the same UILabel to '2'.
Here's my code:
pictures = [NSArray arrayWithObjects: [UIImage imageNamed:#"AND.png"], [UIImage imageNamed:#"ALB.png"], nil];
for (int i = 0; i < pictures.count; i++) {
CGRect frame;
frame.origin.x = 135 + (self.scrollViewQuiz.frame.size.width * i);
frame.origin.y = 40;
frame.size = CGSizeMake(50, 50);
UIImageView *subview = [[UIImageView alloc] initWithFrame:frame];
subview.image = [pictures objectAtIndex:i];
[self.scrollViewQuiz addSubview:subview];
}
self.scrollViewQuiz.contentSize = CGSizeMake(self.scrollViewQuiz.frame.size.width * pictures.count, self.scrollViewQuiz.frame.size.height);
It sounds like you just want to compute the "page number" that the scroll view is currently displaying. You can try something like this as your button's action:
- (IBAction)buttonWasTapped:(id)sender {
UIScrollView *scrollView = self.scrollViewQuiz;
int pageNumber = (int)roundf(scrollView.contentOffset.x / scrollView.bounds.size.width);
self.label.text = [NSString stringWithFormat:#"%d", pageNumber];
}
You could implement the following scrollview delegate method:
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
In it you would examine the scrollview's contentOffset and set the label accordingly.
Try these two.. these should work.. hope this helps..
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat xOffset = scrollView.contentOffset.x;
int currentPage = floor(xOffset / scrollView.bounds.size.width);
[itsLabel setText:[NSString stringWithFormat:#"%i", currentPage]];
}
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {
CGFloat xOffset = scrollView.contentOffset.x;
int currentPage = floor(xOffset / scrollView.bounds.size.width);
[itsLabel setText:[NSString stringWithFormat:#"%i", currentPage]];
}

Issue with scroll view and accessing its subviews

I have a scroll view that contains image view sized 68x78:
As you could see, all that images except from the centered one have a shadow. It changes when user scrolls, center image is always clear. It goes perfect until for the left edge image:
Here is the code:
-(void) buildSlideView{
fotosJugadores = [[NSArray alloc] initWithObjects:#"cara5.png", #"cara7.png", #"cara8.png", #"cara9.png", #"cara11.png", #"cara13.png", #"cara14.png", #"cara15.png", #"cara18.png",#"cara19.png", #"cara20.png", #"cara32.png",#"cara44.png",#"cara51.png", #"cara100.png", #"cara101.png", #"cara102.png",#"cara103.png", #"cara104.png", #"cara105.png",#"cara106.png",#"cara107.png", nil];
numberOfViews = [fotosJugadores count];
for (int i = 0; i < [fotosJugadores count]; i++) {
UIImage *myImage = [UIImage imageNamed:[fotosJugadores objectAtIndex:i]];
CGFloat yOrigin = i * (myImage.size.width+3) + 120;
UIImageView *awesomeView = [[UIImageView alloc] initWithFrame:CGRectMake(yOrigin, 0, myImage.size.width, myImage.size.height)];
awesomeView.tag = i;
awesomeView.image = myImage;
awesomeView.alpha = 0.5f;
awesomeView.backgroundColor = [UIColor blackColor];
[self.jugadorSlide addSubview:awesomeView];
awesomeView=nil;
}
[jugadorSlide setBackgroundColor:[UIColor blackColor]];
jugadorSlide.contentSize = CGSizeMake(68 * numberOfViews+240,78);
jugadorSlide.layer.cornerRadius = 11;
jugadorSlide.layer.masksToBounds = YES;
[jugadorSlide setContentOffset:CGPointMake(((68 * numberOfViews)/2), 0)];
//jugadorSlide.decelerationRate = UIScrollViewDecelerationRateNormal;
[self scrollViewDidEndDragging:jugadorSlide willDecelerate:NO];
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
currentIndex = roundf(scrollView.contentOffset.x / 68);
NSLog(#"current end %d", currentIndex);
UIImageView *currentImage = [scrollView viewWithTag:currentIndex];
if (currentIndex>0&&currentIndex<=21){
if (currentIndex==currentImage.tag){
currentImage.alpha=1.0f;
[self changePerfilImage:currentImage.tag];}
CGPoint pointZero= CGPointMake(scrollView.contentOffset.x, currentImage.frame.origin.y);
[jugadorSlide setContentOffset:pointZero animated:YES];
}else {
UIImageView *currentImage = [scrollView viewWithTag:0];
NSLog(#"end dragging image tag %d", currentImage.tag);
currentImage.alpha=1.0f;
[self changePerfilImage:currentImage.tag];}
CGPoint pointZero= CGPointMake(currentImage.frame.origin.x+15, 0);
//[jugadorSlide setContentOffset:pointZero animated:YES];
}
As you can see, in the scrollViewDidEndDragging: "else" , I forced the tag as a desesperate solution, but images doesn't get clear.
You are incrementing the tag twice...
awesomeView.tag = i++;
Should just be:
awesomeView.tag = i+1;
I use i+1 because I never use a tag of 0 since any subview that hasn't been assigned a tag will have a tag of 0.
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
NSInteger currentIndex = roundf(scrollView.contentOffset.x / 68.0) + 1;
UIImageView *currentImage = [scrollView viewWithTag:currentIndex];
...
}
If this doesn't work you should NSLog the currentIndex each time you land on a new image and see what is happening when you land on the first one.

page control buttons

I'm doing an project, where I need make an PageControl with 3 images. It's woking, but the image of the page controll, that three little circles appear only on first image. what I'm doing wrong?
[scrollView setScrollEnabled:YES];
CGRect frame;
frame.size = self.scrollView.frame.size;
//INICIO SCROLLVIEW DE FOTOS
//Fotos ---------
NSArray *imagens = [NSArray arrayWithObjects:#"foto1.png",#"foto1.png",#"foto1.png", nil];
//Fotos ---------
for (int i = 0; i < imagens.count; i++) {
CGRect frame;
frame.origin.x = self.listaFotos.frame.size.width * i;
frame.origin.y = 0;
frame.size = self.listaFotos.frame.size;
//Imagem
frame.origin.y = 0;
frame.size = CGSizeMake(491, 330);
UIImage *image = [UIImage imageNamed:[imagens objectAtIndex:i]];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = frame;
[self.listaFotos addSubview:imageView];
frame.origin.x = self.listaFotos.frame.size.width * i;
}
self.listaFotos.contentSize = CGSizeMake(self.listaFotos.frame.size.width * imagens.count, self.listaFotos.frame.size.height);
self.pageControl.currentPage = 0;
self.pageControl.numberOfPages = imagens.count;
You're probably adding the page control to the scroll view. You should add it to the scroll view's superview, i.e. as a sibling of it, and on top of the scroll view. That way it won't scroll with the scroll view.