Paged UIScrollView with UIImageViews only showing first UIImageVIew - iphone

I am working on a paged UIScrollView, but it only wants to show the first UIImageView within it. I add each UIImageView at an offset of the width of the scroll view, so that should create each page. When run, it says the scroll view is the right number of pages, but the images don't show.
Any help would be much appreciated!
int numSlides = NUM_TUTORIAL_SLIDES;
NSString *fileName;
UIImageView *slideImageView;
CGRect slideFrame;
for (int i = 1; i <= numSlides; i++)
{
slideFrame.origin.x = self.tutorialScrollView.frame.size.width * (i-1);
slideFrame.origin.y = 0;
slideFrame.size = self.tutorialScrollView.frame.size;
slideImageView = [[UIImageView alloc] initWithFrame:slideFrame];
if([[AppManager sharedManager] is4inchScreen])
{
fileName = [NSString stringWithFormat:#"Slide%d4in#2x.png", i];
}
else
{
fileName = [NSString stringWithFormat:#"Slide%d#2x.png", i];
}
slideImageView.image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:fileName ofType:nil]];
[self.tutorialScrollView addSubview:slideImageView];
[slideImageView release];
}
self.tutorialScrollView.contentSize = CGSizeMake(self.tutorialScrollView.frame.size.width * numSlides, self.tutorialScrollView.frame.size.height);
self.tutorialScrollView.delegate = self;

Maybe change the following code will help
slideImageView.image = [UIImage imageNamed:fileName];

Turns out that the issue had to do with rounding the corners of the scroll view.
I had this code:
//Round header image
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.tutorialScrollView.bounds
byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight)
cornerRadii:CGSizeMake(DEFAULT_CORNER_RADIUS_HEADER, DEFAULT_CORNER_RADIUS_HEADER)];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = maskPath.CGPath;
self.tutorialScrollView.layer.mask = maskLayer;
and apparently that causes issues with the scroll view

Related

Having problems splitting up UIImageView into smaller images

I'm trying to take a UIImageView, resize that image and display it. Then i want to break up that image into smaller pieces and display them.
The resized image displays correctly but it appears that the "split up" images are too big; i'm thinking they are coming from the original (slightly bigger) image. The following screenshot shows the resized image on the left and the a column of split up images from the left hand side.
The fact that the resized image is displaying correctly and the smaller ones aren't has me confused. Any ideas would be appreciated - or even an alternative. Here is my code:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
width = imgOriginal.frame.size.width;
height = imgOriginal.frame.size.height;
whratio = width/height;
[self getOriginalImageInfo];
[self resizeImage];
resizedImage = [self resizeImage];
}
-(void) getOriginalImageInfo {
lblWidth.text = [NSString stringWithFormat:#"%0.2f", width];
lblHeight.text = [NSString stringWithFormat:#"%0.2f", height];
lblWHRatio.text = [NSString stringWithFormat:#"%0.2f", whratio];
}
-(UIImageView*) resizeImage {
if (whratio >= 0.7 && whratio <=0.89) {
imgOriginal.frame = CGRectMake(20, 20, 500, 600);
imgOriginal.autoresizingMask = NO;
float resizedWHRatio = (imgOriginal.frame.size.width)/(imgOriginal.frame.size.height);
lblResizedWidth.text = [NSString stringWithFormat:#"%0.2f", imgOriginal.frame.size.width];
lblResizedHeight.text = [NSString stringWithFormat:#"%0.2f", imgOriginal.frame.size.height];
lblResizedWHRatio.text = [NSString stringWithFormat:#"%0.2f", resizedWHRatio];
return imgOriginal;
}
return nil;
}
- (IBAction)easyPressed:(id)sender {
NSLog(#"Easy button pressed");
CGImageRef original = [resizedImage.image CGImage];
float pieceWidth = (resizedImage.frame.size.width) / 5;
float pieceHeight = (resizedImage.frame.size.height) / 6;
for (int i =0; i<6; i++) {
CGRect rectangle = CGRectMake(0, 0+((float)i*pieceHeight), pieceWidth, pieceHeight);
CGImageRef newTile = CGImageCreateWithImageInRect(original, rectangle);
UIImageView *puzzlePiece = [[UIImageView alloc] initWithFrame:CGRectMake(611, 20+((float)i*pieceHeight), pieceWidth, pieceHeight)];
puzzlePiece.tag = i+1;
puzzlePiece.image = [UIImage imageWithCGImage:newTile];
puzzlePiece.alpha = 0.5;
[puzzlePiece.layer setBorderColor: [[UIColor blackColor] CGColor]];
[puzzlePiece.layer setBorderWidth: 1.0];
[self.view addSubview:puzzlePiece];
}
}
Try applying the same scaling factor to the partial images as you are to the main image!!!
OR
Take the screenshot of the UIImageView being displayed and split that up instead.

Can I add UIImageView inside custom UIAlertView?

I already have a custom UIAlertView and in which i want to add UIImageView for adding custom UIAlertView.
I have already added UIImageView with array and start animating it but it doesn't work. If you want, I can post the code.
Please help me ASAP. I'm stuck :(
Here is code
- (id)initWithImage:(UIImage *)image text:(NSString *)text
{
//CGSize imageSize = self.backgroundImage.size;
CGRect frame = [[UIScreen mainScreen] bounds];
width = frame.size.width;
height = frame.size.height;
if (self = [super init])
{
loadtext = [[UILabel alloc]initWithFrame:CGRectZero];
loadtext.textColor = [UIColor blackColor];
loadtext.backgroundColor = [UIColor whiteColor];
[self addSubview:loadtext];
//Create the first status image and the indicator view
UIImage *statusImage = [UIImage imageNamed:#"status1.png"];
activityImageView = [[UIImageView alloc]
initWithImage:statusImage];
//Add more images which will be used for the animation
activityImageView.animationImages = [NSArray arrayWithObjects:
[UIImage imageNamed:#"status1.png"],
[UIImage imageNamed:#"status2.png"],
[UIImage imageNamed:#"status3.png"],
[UIImage imageNamed:#"status4.png"],
[UIImage imageNamed:#"status5.png"],
[UIImage imageNamed:#"status6.png"],
[UIImage imageNamed:#"status7.png"],
nil];
//Set the duration of the animation (play with it
//until it looks nice for you)
activityImageView.animationDuration = 1.0;
//Position the activity image view somewhere in
//the middle of your current view
activityImageView.frame = CGRectZero;
//Start the animation
[activityImageView startAnimating];
//Add your custom activity indicator to your current view
[self addSubview:activityImageView];
//self.backgroundImage = image;
}
return self;
}
- (void) layoutSubviews{
//lblUserName.transform = CGAffineTransformMake;
//[lblUserName sizeToFit];
CGRect textRect = activityImageView.frame;
textRect.origin.x = (CGRectGetWidth(self.bounds) - CGRectGetWidth(textRect))/2;
textRect.origin.y = (CGRectGetHeight(self.bounds) - CGRectGetHeight(textRect))/2;
textRect.origin.x -= 100.0;
textRect.origin.y -= 60.0;
textRect.size.height = 30;
textRect.size.width = self.bounds.size.width - 50;
activityImageView.frame = textRect;
}
This code started working. But now this UIImageView is taking my whole screen and coming in front of UIAlertView. Though i give 10px height and width. It shows same. Can anyone help please?
Thanks,
Anks
Yes, you can add image view - in custom alert-view. instead of taking as UIView custom class, need to take UIImage-View & you can use image-view properties.
Change activityImageView.frame = CGRectZero;
to some custom frame.
eg:
activityImageView.frame = CGRectMake(0,0,100,100);

Horizontal UIScrollView and hundreds of thumbnail images in iOS?

I need to create a horizontal UIScrollView which to hold hundreds of thumbnail images, just like a slide of thumbnails.
For example, there will be 10 thumbnails showing in a single screen, each of them are horizontally adjacent to each other.
My problem is that I don't know how to make a horizontal UIScrollView to hold the multiple thumbnails which showing at the same time ?
A sample photo is as below. See the bottom part of the screen.
Thanks.
You can add all the thumbnails programatically to your scrollview and use the setContentSize method of UIScrollView. you have to pass 2 values in contentOffset. 1 for width and 1 for height. Please follow link to explore more on this. If you need further help please leave a comment.
Hope it helps.
Please consider Following example.
- (void)setupHorizontalScrollView
{
scrollView.delegate = self;
[self.scrollView setBackgroundColor:[UIColor blackColor]];
[scrollView setCanCancelContentTouches:NO];
scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView.clipsToBounds = NO;
scrollView.scrollEnabled = YES;
scrollView.pagingEnabled = YES;
NSUInteger nimages = 0;
NSInteger tot=0;
CGFloat cx = 0;
for (; ; nimages++) {
NSString *imageName = [NSString stringWithFormat:#"image%d.jpg", (nimages + 1)];
UIImage *image = [UIImage imageNamed:imageName];
if (tot==15) {
break;
}
if (4==nimages) {
nimages=0;
}
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.height = 40;
rect.size.width = 40;
rect.origin.x = cx;
rect.origin.y = 0;
imageView.frame = rect;
[scrollView addSubview:imageView];
[imageView release];
cx += imageView.frame.size.width+5;
tot++;
}
self.pageControl.numberOfPages = nimages;
[scrollView setContentSize:CGSizeMake(cx, [scrollView bounds].size.height)];
}
I suggest you to look at nimbus
Check out bjhomer's HSImageSidebarView project. It lets you load a scrollview horizontally or vertically and load in the images. Super easy to implement.
First of all, at storyboard drag and drop the scroll view and make the outlet of scrollview named scrollView. Two array one is mutable and one is immutable.
#property(nonatomic,strong)IBOutlet UIScrollView *scrollView;
#property(nonatomic,strong)NSMutableArray *images;
#property(nonatomic,strong)NSArray *imagesName;
The immutable array only store the images which we want to show on the scroll view.Make sure UIscrollview delegate is defined.
In viewcontoller.m file in didload function do following code:
imagesName = [[NSArray alloc]initWithObjects:#"centipede.jpg",#"ladybug.jpg",#"potatoBug.jpg",#"wolfSpider.jpg", #"ladybug.jpg",#"potatoBug.jpg",#"centipede.jpg",#"wolfSpider.jpg",nil];
// mutable array used to show the images on scrollview dynamic becaus after one
// image when scroll other will come
images = [[NSMutableArray alloc]init];
scrollView.delegate = self;
scrollView.scrollEnabled = YES;
int scrollWidth = 120;
scrollView.contentSize = CGSizeMake(scrollWidth,80);
int xOffset = 0;
//the loop go till all images will load
for(int index=0; index < [imagesName count]; index++)
{
UIImageView *img = [[UIImageView alloc] init];
// make the imageview object because in scrollview we need image
img.frame = CGRectMake(5+xOffset, 0, 160, 110);
// the offset represent the values, used so that topleft for each image will
// change with(5+xOffset, 0)and the bottomright(160, 110)
NSLog(#"image: %#",[imagesName objectAtIndex:index]);
img.image = [UIImage imageNamed:[imagesName objectAtIndex:index]];
// The image will put on the img object
[images insertObject:img atIndex:index];
// Put the img object at the images array which is mutable array
scrollView.contentSize = CGSizeMake(scrollWidth+xOffset,110);
//scroll view size show after 125 width the scroll view enabled
[scrollView addSubview:[images objectAtIndex:index]];
// set images on scroll view
xOffset += 170;
}
You can calculate content size width of the scrollview as width = number of images * size of each image. Then set contentSize of the scrollview to this width and the height that you want (scrollView.contentSize = CGSizeMake(width, height))

How can I place an image behind an imageView

I've got an image which contains multiple layers. The user can set a picture as a layer. However when there isn't a picture available I'd like to have a replacement picture.
I think I got two options:
check if the image (taken photo) is loaded into my directory. if not place the other image.
placing the other image (photo_icon.png) to the back of the UIImageView (image1). When a photo hasn't been taken the image becomes visible.
Here's a snippit of my code so far.
NSString *docDir = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) objectAtIndex:0];
NSString *pngFilePath = [NSString stringWithFormat:#"%#/photo1.png",docDir];
UIImage *img = [[UIImage alloc] initWithContentsOfFile:pngFilePath];
[image1 setImage:img];
image1.layer.cornerRadius = 15.0;
image1.layer.masksToBounds = YES;
CALayer *sublayer = [CALayer layer];
image1.layer.borderColor = [UIColor blackColor].CGColor;
image1.layer.borderWidth = 3.5;
[image1.layer addSublayer:sublayer];
CALayer *imageLayer = [CALayer layer];
imageLayer.frame = image1.bounds;
imageLayer.cornerRadius = 10.0;
imageLayer.contents = (id) [UIImage imageNamed:#"Upperlayer.png"].CGImage;
imageLayer.masksToBounds = YES;
[sublayer addSublayer:imageLayer];
replacing the image1 for the image which is needed I use:
CALayer *imageBackLayer = [CALayer layer];
imageBackLayer.frame = image1.bounds;
imageBackLayer.cornerRadius = 10.0;
imageBackLayer.contents = (id) [UIImage imageNamed:#"photo_icon.png"].CGImage;
imageBackLayer.masksToBounds = NO;
[sublayer insertSublayer:imageBackLayer below: image1.layer ];
Thanks in advance!
you can use opacity for the image to show/hide.

How can I make a UIScrollView image gallery? (iPhone SDK)

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;
}