I am using the following code to try and display an image in a UIScrollView.
[self.jarView addSubview:imgView];
It does not work. However, it works when I add the subview to my normal view. My UIScrollView is called jarView and imgView is a UIImageView.
Thanks
This works fine for me:
UIScrollView *scrollview;
scrollview= [[UIScrollView alloc] initWithFrame:CGRectMake(,,,)];// set scroll view size
view = [[UIView alloc] initWithFrame:CGRectMake(y1,x1,y2,x2)]; //set the view size
UIImage *image1 = [UIImage imageNamed:imageName];
image=[[UIImageView alloc]initWithImage:image1];// take image size according to view
[view addSubview:image];
[scrollview addSubview:view];
[view release];
At last define how much scrollview is scroll:
scrollview.contentSize = CGSizeMake(width,height);
Make sure that your scrollView.contentSize property value is set correctly (width and height should be > 0).
Here I am posting my answer. Try it.
You can load all the images to an array. And you can design a view having one image view and try the below code:
array name: examplearray and view name :exampleview
-(void)updateImagesInScrollView
{
int cnt = [examplearray count];
for(int j=0; j< cnt; ++j)
{
NSArray *nibContents = [[NSBundle mainBundle] loadNibNamed:#"exampleview"
owner:self
options:nil];
UIView *myView = [nibContents objectAtIndex:0];
exampleview * rview= (exampleview *)myView;
/* you can get your image from the array and set the image*/
rview.imageview.image = yourimage;
/*adding the view to your scrollview*/
[self.ScrollView addSubview:rview];
}
/* you need to set the content size of the scroll view */
self.ScrollView.contentSize = CGSizeMake(X, self.mHorizontalScrollView.contentSize.height);
}
I am giving you my sample code. In this code i add multiple images on scroll view and this work fine for me:
UIScrollView *scrollview;
- (void)anyFunction
{
scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 30, 320, 50)];
NSInteger viewcount = [cat_Products count]; // if you have four content your view count is 4..(four)..in my case i fetch it from database
CGFloat y2 = 0;
UIView *view;
UIImageView *imageView;
NSString *imageName;
for(int i = 0; i< viewcount; i++)
{
CGFloat y = i * 64;
y2 = y2 + 64;
view = [[UIView alloc] initWithFrame:CGRectMake(y, 0, y2, 50)];
imageName = [[NSString alloc] initWithFormat:#"c%i", (i + 1)]; // my image name is c1, c2, c3, c4 so i use this
UIImage *image1 = [UIImage imageNamed:imageName];
imageView = [[UIImageView alloc] initWithImage:image1];
[view addSubview:imageView];
[scrollview addSubview:view];
[view release];
[imageView release];
[imageName release];
}
scrollview.contentSize = CGSizeMake(viewcount*64,0); //viewcount*64 because i use image width 64..and second parameter is 0..because i not wants vertical scrolling...
[myView addSubview:scrollview];
[scrollview release];
}
I hope this helps.
Related
- (void)viewDidLoad
{
MyData *data = [MyData SharedData];
scrollerView.pagingEnabled = YES;
scrollerView.bounces = YES;
int numberOfViews = [data.placePhotos count];
for (int i = 0; i < numberOfViews; i++) {
CGFloat yOrigin = i * self.view.frame.size.width;
UIView *awesomeView = [[UIView alloc] initWithFrame:CGRectMake(yOrigin, 0, self.view.frame.size.width, self.view.frame.size.height)];
awesomeView.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:1];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 0, 300 , 320)];
NSString * photourl = [[data.placePhotos objectAtIndex:i] stringByReplacingOccurrencesOfString:#"150x75" withString:#"440x440"];
[imageView setImageWithURL:[NSURL URLWithString:photourl]];
[awesomeView addSubview:imageView];
[scrollerView addSubview:awesomeView];
awesomeView = nil;
imageView =nil;
}
I added the UIScrollView in the .xib file , when i tried to pull the scroll view from left to right it does not move, i have 4 subviews added but why i can not view them ?
you should set the content size the scrollView
[self. scrollerView setContentSize:CGSizeMake(320, 1000)];
Give your width and heigth.
add scrollerView.contentSize = CGSizeMake(yOrigin + self.view.frame.size.width, scrollerView.frame.size.height); after the loop (even though I'm a little bit confused about why the x-origin is called yOrigin in your code...)
I have a scrollview of images, I will like to tab them and will pushed to another view.
once i tab on the image, the whole view should push to another view.
From this View to another view
Detail view
Sorry for not asking the question clearly.
my scrollview
-(void)pictureScrolling
{
//init scrollview in location on screen
scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 100, 320, 290)];
scrollview.backgroundColor = [UIColor redColor];
//pass image filenames
NSMutableArray *fileNames = nearbyFrog.imageFiles; //[[[NSMutableArray alloc] init] autorelease];
//setup the array of uiimageviews
NSMutableArray *imgArray = [[NSMutableArray alloc] init];
UIImageView *imageView;
//loop through the array imgNames to add file names to imgArray
for (NSString *imageName in fileNames) {
imageView = [[UIImageView alloc] init];
imageView.image = [UIImage imageNamed:imageName];
imageView.contentMode = UIViewContentModeScaleAspectFit;
[imgArray addObject:imageView];
[imageView release];
}
CGSize pageSize = scrollview.frame.size;
NSUInteger page = 0;
for (UIView *viewForScrollView in imgArray) {
[scrollview addSubview:viewForScrollView];
viewForScrollView.frame = CGRectMake(pageSize.width * page++ +10, 0, pageSize.width -20 , pageSize.height);
// making use of the scrollView's frame size (pageSize) so we need to;
// +10 to left offset of image pos (1/2 the gap)
// -20 for UIImageView's width (to leave 10 gap at left and right)
}
//add scroll view to view
[self.view addSubview:scrollview];
scrollview.contentSize = CGSizeMake(pageSize.width * [imgArray count], pageSize.height);
//scrollview.contentSize = CGSizeMake(320 *viewcount + 20, 290 );
scrollview.showsHorizontalScrollIndicator =NO;
[scrollview setPagingEnabled:YES];
scrollview.delegate =self;
//paging function for scrollview
CGRect frame = [[UIScreen mainScreen] applicationFrame];
self.pageControl = [[[UIPageControl alloc] initWithFrame:CGRectMake(0, 100, 100, 50)] autorelease];
self.pageControl.center = CGPointMake(frame.size.width/2, frame.size.height-60);
self.pageControl.numberOfPages = [fileNames count];
[self.view addSubview:self.pageControl];
//handle Touch Even
[pageControl addTarget:self action:#selector(changePage:) forControlEvents:UIControlEventValueChanged];
[imgArray release];
}
anybody knows how to do it or can show me a tutorial?
Thanks
I think this is the best way to implement it
Create your own Custom UIImageView class. This is required to store an additional property which will help you identify which image for clicked.
Create a delegate for that class which is called with the single tap event is raised in the UIImageView
Add the Images inside the scrollview using this custom class. The delegate of this class will tell you which image was tapped. You can use this to push a new view controller passing the image details (if necessary).
You can find some sample code in the ThumbImageView class in the scrollviewSuite sample
http://developer.apple.com/library/ios/#samplecode/ScrollViewSuite/Introduction/Intro.html#//apple_ref/doc/uid/DTS40008904-Intro-DontLinkElementID_2
i have an iPhone app in which i have several images. These images add in image view. That image view add sub view with scroll view. Now i want to add a transparent button on every image. How can i do that? I have shown my code below:
- (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 += (kScrollWidth);
}
}
// set the content size so it can be scrollable
[scrollView1 setContentSize:CGSizeMake((kNoImages * 500), 700)];
}
- (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;
//imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"image0.jpg"]];
[scrollView1 addSubview:imageView];
[scrollView1 setContentSize:CGSizeMake(500,700)];
scrollView1.minimumZoomScale = 1;
scrollView1.maximumZoomScale = 3;
scrollView1.delegate = self;
[scrollView1 setScrollEnabled: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 <= kNoImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"page-%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 = kScrollHeight;
rect.size.width = kScrollWidth;
ImageView.frame = rect;
ImageView.tag = i; // tag our images for later use when we place them in serial fashion
UIButton *btnView2= [UIButton buttonWithType:UIButtonTypeCustom];
[btnView2 setTitle:#"view" forState:UIControlStateNormal];
[btnView2 addTarget:self action:#selector(View:)forControlEvents:UIControlEventTouchDown];
[btnView2 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btnView2.frame=CGRectMake(0,0,460,460 );
[scrollView1 addSubview:btnView2];
scrollView1.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
[scrollView1 addSubview:ImageView];
[ImageView release];
}
[self layoutScrollImages]; // now place the photos in serial layout within the scrollview
}
-(IBAction)View:(id)sender{
NSURL *imgUrl=[[NSURL alloc] initWithString:#"http://farm4.static.flickr.com/3567/3523321514_371d9ac42f.jpg"];
NSData *imgData = [NSData dataWithContentsOfURL:imgUrl];
UIImage *img = [UIImage imageWithData:imgData];
UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
[self.view addSubview:imgView];
//[self.navigationController pushViewController:ivc animated:YES];
[imgUrl release];
}
Instead of adding Imageview and transparent button on top of Imageview. You can just add UIButton customtype and set button image to your image in your scrollview. There is no need to take imageview and UIButton both. Just take UIButton and setImage and you will be fine. I tried to give you sample code below from my app. Please modify it as per your need. I think it is what you need.
First of Take all constant in one of global file. I took it in en.lproj. like below.
"TotalThumbnailCount"="6";
"Coloumn"="2";
"ThumbnailHeight"="151";
"ThumbnailWidth"="151";
//Marging between two images
"MarginX" = "6";
"MarginY" = "6";
Then initialize all your local varaibles from global variables. like below
-(void)PopulateVariables{
TotalThumbnail = [NSLocalizedString(#"TotalThumbnailCount",nil) intValue];
Colomn = [NSLocalizedString(#"Coloumn",nil) intValue];
ThumbnailHeight = [NSLocalizedString(#"ThumbnailHeight",nil) intValue];
ThumbnailWidth = [NSLocalizedString(#"ThumbnailWidth",nil) intValue];
MarginX = [NSLocalizedString(#"MarginX",nil) intValue];
MarginY= [NSLocalizedString(#"MarginY",nil) intValue];
}
Now, you should initiate your thumbnail images using UIButton from below function.
-(void)PopulateThumbnails
{
NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];
XCordinate=MarginX;
YCordinate = MarginY;file:
for(int i=1; i <=TotalThumbnail;i++){
UIButton *btnMenu = [UIButton buttonWithType:UIButtonTypeCustom];
//NSData *data =UIImageJPEGRepresentation(, 1);
[btnMenu setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:#"%d.png",i]] forState:UIControlStateNormal];
CGRect frame = btnMenu.frame;
frame.size.width=ThumbnailWidth;
frame.size.height=ThumbnailHeight;
frame.origin.x=XCordinate;
frame.origin.y=YCordinate;
btnMenu.frame=frame;
btnMenu.tag=i;
btnMenu.alpha = 1;
[btnMenu addTarget:self action:#selector(btnSelected:) forControlEvents:UIControlEventTouchUpInside];
[scrollView addSubview:btnMenu];
XCordinate = btnMenu.frame.origin.x + btnMenu.frame.size.width + MarginX;
if(i%Colomn==0)
{
XPosition = XCordinate;
YCordinate = btnMenu.frame.origin.y + btnMenu.frame.size.height + MarginY;
XCordinate = MarginX;
}
}
[pool release];
}
And then set your scrollview contentsize
scrollView.contentSize = CGSizeMake(XPosition, YCordinate);
When some one tap on any image it will goes in below event.
-(IBAction)btnSelected:(id)sender{
UIButton *btnSelected = sender;
switch (btnSelected.tag) {
}
Let me know if I miss anything and if you don't understand.. Hope this help.
You can add UITapGestureRecognizer to each image:
UITapGestureRecognizer *tapGesture = [[[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(tapAction:)] autorelease];
[imageView addGestureRecognizer:tapGesture];
[self.view addSubview:imageView];
When you create your imageview, create a uibutton and add it as a subview to the imageview.
Set the properties of the button to be custom type. Also set the frame of the button same as that of the imageview.
button = [UIButton buttonWithType:UIButtonTypeCustom];
Google how to create a uibutton programatically. You can then add the necessary selectors to handle button press events.
Alternatively you can create a element in Interfacebuilder. A custom class which has a uiimageview and clear uibutton. You can then use this element to add to your uiscrollview.
I've searched and searched for a tutorial for this but none of them are what I'm looking for. I've tried Apple's sample but it is just colors and I don't know how to make it views. All I'm looking for is a screen that will page while showing the page control. Each time the scroll view pages i want it to show a completely different view with buttons, a lot like the home screen of the iPhone. I found the sample code below which works very well with just images, but I'd like to modify to work with separate views. Please Help! Thank you.
- (void)setupPage {
scrollView.delegate = self;
[self.scrollView setBackgroundColor:[UIColor clearColor]];
[scrollView setCanCancelContentTouches:NO];
scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView.clipsToBounds = YES;
scrollView.scrollEnabled = YES;
scrollView.pagingEnabled = YES;
NSUInteger nimages = 0;
CGFloat cx = 0;
for (; ; nimages++) {
NSString *imageName = [NSString stringWithFormat:#"image%d.jpg", (nimages + 1)];
UIImage *image = [UIImage imageNamed:imageName];
if (image == nil) {
break;
}
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.height = image.size.height;
rect.size.width = image.size.width;
rect.origin.x = ((scrollView.frame.size.width - image.size.width) / 2) + cx;
rect.origin.y = ((scrollView.frame.size.height - image.size.height) / 2);
imageView.frame = rect;
[scrollView addSubview:imageView];
[imageView release];
cx += scrollView.frame.size.width;
}
self.pageControl.numberOfPages = nimages;
[scrollView setContentSize:CGSizeMake(cx, [scrollView bounds].size.height)];
}
I was experimenting with this just the other day. I'm still getting used to using a UIScrollView but here's how you can add views to your UIScrollView:
UIView *blueView = [[UIView alloc] init];
blueView.frame = CGRectMake(100, 0, 500, 1024);
blueView.backgroundColor = [UIColor colorWithRed:164.0/256 green:176.0/256 blue:224.0/256 alpha:1];
[scrollView addSubview:blueView];
[blueView release];
UIView *orangeView = [[UIView alloc] init];
orangeView.frame = CGRectMake(700, 0, 500, 1024);
orangeView.backgroundColor = [UIColor colorWithRed:252.0/256 green:196.0/256 blue:131.1/256 alpha:1];
[scrollView addSubview:orangeView];
[orangeView release];
Notice that I'm setting the x value in frame.origin of each view so that they're sitting adjacent to each other. You also have to set the content size of the UIScrollView with something like [scrollView setContentSize:CGSizeMake(1200, 1024)]; so that it knows how big its subviews are.
Then, if you need to control a UIPageControl, you would set its numberOfPages to 2 (for the example scrollview above) and change its currentPage property. You could do this by implementing scrollViewDidEndDecelerating:, which is a method in the UIScrollViewDelegate. You could check which "page" the scrollview is at by checking its contentOffset.x value.
Hope this helps!
Here's the Apple PageControl code with images. To use, just drag your images to the project. The default images are image1.jpg, image2.jpg, etc. If you need png, just change the extension to .png.
Then replace the MyViewController.m code with this code, and you've got pagecontrol with Images.
Cheers, Jordan
http://pastebin.com/raw.php?i=c3hS29sC
// Adding UIView to PageControl example
- (id)initWithPageNumber:(int)page {
UIScreen *screen = [UIScreen mainScreen];
CGRect frame = [screen applicationFrame];
frame.origin.y=0;
if (self = [super initWithNibName:#"MyView" bundle:nil]) {
UIView *view = [[UIView alloc] initWithFrame:frame];
[self.view addSubview:view];
// Add whatever you want to the view here.
[view release];
pageNumber = page;
}
return self;
}
Here's another answer...
NSArray* nibViews = [[NSBundle mainBundle] loadNibNamed:#"Views" owner:self options:nil];
infoView = [nibViews objectAtIndex:0];
[self.view addSubview:infoView];
Then you have your view.
Cheers
I try to make following: Horizontal list of images, that I can select and do something with it. For example flip image around x axis. I know how to rotate image. I created scrollview and load it with images. I added event handler when I tap on image. But I don't know how to do something with tapped image. How to code method to do something with tapped image?
- (void)viewDidLoad {
[super viewDidLoad];
img1 = [UIImage imageNamed:#"imgTest.jpg"];
img2 = [UIImage imageNamed:#"imgTest2.jpg"];
arrayOfImages = [[NSMutableArray alloc] init];
[arrayOfImages addObject:img1];
[arrayOfImages addObject:img2];
[arrayOfImages addObject:img1];
[arrayOfImages addObject:img2];
scrollView = [[UIScrollView alloc] init];
scrollView.scrollEnabled = YES;
scrollView.pagingEnabled = YES;
scrollView.directionalLockEnabled = YES;
scrollView.showsVerticalScrollIndicator = NO;
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.delegate = self;
scrollView.backgroundColor = [UIColor blueColor];
scrollView.autoresizesSubviews = YES;
scrollView.frame = CGRectMake(0, 0, 320, 128);
[self.view addSubview:scrollView];
UIImage *imageToAdd;
int x = 0;
int y = 0;
for(imageToAdd in arrayOfImages)
{
UIImageView *temp = [[UIImageView alloc] initWithImage:imageToAdd];
temp.frame = CGRectMake(x, y, 128, 128);
temp.userInteractionEnabled = YES;
x += 135;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(imageTapped:)];
[temp addGestureRecognizer:tap];
[scrollView addSubview:temp];
}
...
- (void)imageTapped:(UIGestureRecognizer *)sender
{
// how to get reference on selected item in scrollview???
}
A gesture recognizer has a view property that returns the view associated with the recognizer. Since you know that it'll be a UIImageView you can simply cast it and use it as in:
UIImageView *iv = (UIImageView *)[sender view];
And your image can then be queried via:
UIImage *image = [iv image];
If you need to know the index in your array, there are two ways: either simply use [arrayOfImages indexOfObject:image];, or you can assign tags (numbers) to views and use them. A tag is not used by Apple, it's only here so we developers can "mark" views in some way. For example:
NSInteger counter = 0;
for(imageToAdd in arrayOfImages)
{
UIImageView *temp = [[UIImageView alloc] initWithImage:imageToAdd];
count.tag = counter++;
...
}
Then, in your imageTapped:, you can query the index via tag:
NSInteger index = [imageView tag];