Image slightly distorted in UIScrollView - ios

I have a UIScrollView, inside that are UIImageViews all 198*198pts. The images in this scrollview all seem to be slightly distorted. The edges are more jagged (I am working with png files and the images are cartoons/stickers). In a normal UIImageView not contained in a UIScrollView they look fine. Could anyone give me some pointers to why this might be happening?
UIView *content = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.scrollView.frame.size.width*[self.stickers count], self.scrollView.frame.size.height)];
for(int i=0; i<[self.stickers count]; i++){
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(i*self.scrollView.frame.size.width, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height)];
MySticker *sticker = self.stickers[i];
imageView.image=sticker.image;
imageView.contentMode=UIViewContentModeScaleAspectFill;
[content addSubview:imageView];
//NSLog(#"scroll view width is %f",self.scrollView.frame.size.width);
//NSLog(#"ImageView width is %f", imageView.frame.size.width);
}
self.scrollView.contentSize=CGSizeMake(content.frame.size.width ,content.frame.size.height);
[self.scrollView addSubview:content];
EDIT ^ added my scrollview setup above

Related

Make UIImages inside UIView Grow When Zooming

I have a UIView Just like images aligned in gridlike view.
Created using the code.
for (int i=_farmView.bounds.origin.x; i<_farmView.bounds.size.width; i+=originalBagWidth*2) {
for (int j=_farmView.bounds.origin.y; j<_farmView.bounds.size.height; j+=originalBagHeight*2) {
//adding bag
n+=1;
CGRect frame = CGRectMake(i, j, originalBagWidth, originalBagHeight);
UIView *v = [[UIView alloc] initWithFrame:frame];
UIImage *image = [UIImage imageNamed:#"bag"];
image = [self imageResize:image andResizeTo:v.bounds.size];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[v addSubview:imageView];
[_farmView addSubview: v];
[v setBackgroundColor: [UIColor darkGrayColor]];
}
}
And I have added proper Code for zooming the UIView using Pinch Recognizers. Now when user zooms the UIView The Image Becomes unclear.
I want to grow the pixel size when zooming the UIView. How can i
achive this functionality
Note: The number of UIImages inside UIView and size of UIView is decided at runtime and cannot be predicted.

How to implement fling feature on an ImageView with Objective C?

I have an UIImageView and I want to implement fling feature, when users flings on the screen the page can go up or down quickly.
Now my thinks is add two UISwipeGesturesRecognizers, but I don't know how to do next, should I use an animation to do this, and how to calculate the animation distance and time?
Also I find other answers said no need gesture recognizer can use scroll view, I am totally confused, are there any sample I can learn?
You can do it like that :
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[scrollView setPagingEnabled:YES];
[scrollView setAlwaysBounceVertical:YES];
NSArray *imagesArray = [NSArray arrayWithObjects:#"img1.png", #"img2.png", #"img3.png", nil];
for (int i = 0; i < [imagesArray count]; i++)
{
CGFloat xOrigin = i * scrollView.frame.size.width;
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(xOrigin, 0, scrollView.frame.size.width, scrollView.frame.size.height)];
[imageView setImage:[UIImage imageNamed:[imagesArray objectAtIndex:i]]];
[imageView setContentMode:UIViewContentModeScaleAspectFit];
[scrollView addSubview:imageView];
}
[scrollView setContentSize:CGSizeMake(scrollView.frame.size.width, scrollView.frame.size.height*[imagesArray count])];

Add images to UIScrollView horizontally with paging

I am trying to display images in a horizontal row using pages,with each page containing 4 images probably separated by a little space of one line or without space. As the user scrolls horizontally, next four images are displayed in the center of view. But using this code:
UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, screenHeight/4, screenWidth, screenHeight/4)];
scroll.showsHorizontalScrollIndicator = YES;
scroll.showsVerticalScrollIndicator=NO;
scroll.pagingEnabled = YES;
NSInteger numberOfViews = 3;
int k=1;
for (int i = 0; i < numberOfViews; i++) {
CGFloat xOrigin = i * self.view.frame.size.width;
UIView *awesomeView = [[UIView alloc] initWithFrame:CGRectMake(xOrigin, 0, self.view.frame.size.width, self.view.frame.size.height)];
awesomeView.backgroundColor = [UIColor colorWithRed:0.5/i green:0.5 blue:0.5 alpha:1];
[scroll addSubview:awesomeView];
for (int j=0; j<4; j++) {
NSString *imageName = [NSString stringWithFormat:#"image%d.png", k];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect imageFrame=CGRectMake(0, k*screenHeight/4, screenWidth/5, screenHeight/5);
imageView.frame=imageFrame;
[awesomeView addSubview:imageView];
k++;
}
images are displayed vertically on first page view. Moreover it looks like vertical scrolling is working. What I am missing?
In this line:
CGRect imageFrame=CGRectMake(0, k*screenHeight/4, screenWidth/5, screenHeight/5);
You are messing with frame your imageView (inside UIView - awesomeView).
Your k variable is 1,2,3,4
So i assume that you have 4 imageViews in vertical, and next 'column' with four image on the left, right?
Also you don't set contentSize for your scrollView anywhere so, you might not see the second 'column'

How to enable zoom for two different UIScrollview in single UIView?

I am displaying two images on single view where both images must have zoom functionality.My page height is around 1000 pixels and images must be display on top and bottom of page. For that I have added two different scroll view and added image views on scroll views.
Now Zoom is working properly for second image .But first image is getting displayed in top left corner of scroll view once zoomed out. It seems there are two images.
Here is the delegate method i am using:
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
return [[scrollView subviews] objectAtIndex:0];
}
Is there anything i am missing ? or is this not really possible to enable zoom when there are two scroll views for single page.
Here is the code its working for enable zoom when there are two scroll views for single page.
//Create First ImageView
image1 =[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 320, 220)];
image1.image = [UIImage imageNamed:#"image1.png"];
image1.contentMode = UIViewContentModeScaleToFill;
//Create and Set Values for Scrollview 1
scroll1 =[[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 220)];
scroll1.contentSize = image1.frame.size;
[scroll1 setMinimumZoomScale:1.0];
[scroll1 setMaximumZoomScale:4.0];
scroll1.delegate = self;
scroll1.clipsToBounds = YES;
scroll1.tag =0;
[scroll1 addSubview:image1];
image1.userInteractionEnabled =YES;
scroll1.zoomScale = 1;
[self.view addSubview:scroll1];
Second Scrollview and ImageView
// Create Second ImageView
image2 =[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 320, 260)];
image2.image = [UIImage imageNamed:#"image2.png"];
image2.contentMode = UIViewContentModeScaleToFill;
// Create Second ScrollView
scroll2 =[[UIScrollView alloc] initWithFrame:CGRectMake(0, 220, 320, 260)];
scroll2.contentSize = image2.frame.size;
[scroll2 setMinimumZoomScale:1.0];
[scroll2 setMaximumZoomScale:4.0];
scroll2.delegate = self;
scroll2.clipsToBounds = YES;
scroll2.tag =1;
[scroll2 addSubview:image2];
image2.userInteractionEnabled =YES;
scroll2.zoomScale = 1;
[self.view addSubview:scroll2];
This will help you, since it is already working for me.
Delegate method as follow:
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
if (scrollView.tag ==0) {
return image1;
}
else return image2;
}

How to correctly work with UIScrollView and UIPageControl?

I have a UIScrollView that I would like to use with a UIPageControl to have different pages to swipe horizontally. I need to add a UITextView and a number of UIImageView for every page.
In my ViewController I call a webservice and, when data arrive, I add items as follows:
for(int i=0;i<[arrData count];i++) {
NSString *body=#"Dummy text";
CGRect frame;
frame.origin.x = self.scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size.width = self.scrollView.frame.size.width;
frame.size.height = 40; //vedere landscape
UILabel *label = [[UILabel alloc] initWithFrame:frame];
[label setText:body];
label.numberOfLines=0;
[label sizeToFit];
label.autoresizingMask=UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.scrollView addSubview:label];
[label setBackgroundColor:[UIColor whiteColor]];
[self.scrollView addSubview:label];
int y_pos=label.frame.size.height+10;
int x_pos=0;
for(int img=0; img<[[[arrData objectAtIndex:i]objectForKey:#"images"] count]; img++) {
NSString *imageURL=[[[[arrData objectAtIndex:i] objectForKey:#"images"] objectAtIndex:img] objectForKey:#"fn"];
NSData *imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:imageURL]];
UIImage *image = [UIImage imageWithData:imageData];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[imageView setFrame:CGRectMake(self.scrollView.frame.size.width * i+img*100, y_pos, image.size.width, image.size.height)];
[self.scrollView addSubview:imageView];
}
}
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * [arrData count], self.scrollView.frame.size.height);
It runs fine in portrait, but when the device is rotated, obviously, the layout is ruined ... which is the best way to work with a ScrollView with PageControl? Do I have to handle rotation and change the distance between the inserted items or (as I think) is there a better way to build everything?
yes you have to set your scrollviews frame again every time orientation changes, because flexible width stretches the width of scrollview from both sides in landscape mode,so its contents get overlapped and causes problem when you have horizontal scrolling. one thing you can do is set you scrollview's auto resizing mask to flexibleRightMargin|flexibleLeftMargin. it will keep the contents of your scrollview at the center but scrolling will not look clean.

Resources