How do I animate a UIImageView left to right with UIPageControl? - animation

I want to animate a UIImageView left to right with UIPageControl. I have this code but it seems a bit odd...Specifically because what would I do when I reach image 3? I would have to return and that would mess up the mathematical calculations of the views in the pageControl array the way I have it set up:
-(void)createUIViews{
UIImage *image1 = [UIImage imageNamed:#"GiftCard.png"];
firstView = [[UIImageView alloc] initWithImage:image1];
firstView.backgroundColor = [UIColor grayColor];
firstView.tag = 1;
firstView.autoresizingMask = (UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin);
[self.view addSubview:firstView];
CGRect newFrame = firstView.frame;
newFrame.origin.x += 40; // shift right by 50pts
newFrame.origin.y += 40;
[UIView animateWithDuration:1.0
animations:^{
firstView.frame = newFrame;
}];
UIImage *image2 = [UIImage imageNamed:#"MyCard.png"];
secondView = [[UIImageView alloc] initWithImage:image2];
secondView.backgroundColor = [UIColor grayColor];
secondView.tag = 1;
secondView.autoresizingMask = (UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin);
UIImage *image3 = [UIImage imageNamed:#"GiftCard.png"];
thirdView = [[UIImageView alloc] initWithImage:image3];
thirdView.backgroundColor = [UIColor grayColor];
thirdView.tag = 1;
thirdView.autoresizingMask = (UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin);
}
- (void)viewDidLoad
{
[super viewDidLoad];
[self createUIViews];
// Set up the views array with 3 UIImageViews
views = [[NSArray alloc] initWithObjects:firstView, secondView, thirdView, nil];
// Set pageControl's numberOfPages to 3
self.pageControl.numberOfPages = [views count];
// Set pageControl's currentPage to 0
self.pageControl.currentPage = 0;
// Call changePage each time value of pageControl changes
[self.pageControl addTarget:self action:#selector(changePage:) forControlEvents:UIControlEventValueChanged];
}
- (IBAction) changePage:(id)sender {
NSLog(#"pageControl position %d", [self.pageControl currentPage]);
int oldPageControlPosition = [self.pageControl currentPage] - 1;
NSLog(#"old pageControl position %d", oldPageControlPosition);
//0 Get the currentview as referenced by pageControl
UIImageView *oldView = [views objectAtIndex:oldPageControlPosition];
//NSLog(#"views objectAtIndex = %#",[views objectAtIndex:[self.pageControl currentPage]]);
//1 Animate out the old view
CGRect oldViewFrame = oldView.frame;
oldViewFrame.origin.x -= 300;
[UIView animateWithDuration:2.0
delay: 0.5
options: UIViewAnimationOptionCurveEaseIn
animations:^{
oldView.frame = oldViewFrame;
}
completion:nil];
//3 Get next view from array
UIImageView *nextView = [views objectAtIndex:[self.pageControl currentPage]];
//4 Add it to mainview
[self.view addSubview:nextView];
//5 Animate in
CGRect nextViewFrame = nextView.frame;
nextViewFrame.origin.x += 40; // shift right by 50pts
nextViewFrame.origin.y += 40;
[UIView animateWithDuration:1.0
animations:^{
nextView.frame = nextViewFrame;
}];
}
When I reach the end, I try to return, the last position is 2 and oldPosition at that time is 1. Which is correct, array goes from 0 to 1 to 2 for a total of 3 positions. But when I return, the log displays position as 1 instead of 2, which is fine, because I reversed...but old position shows 0 instead of 2.

I couldnt get it to determine direction so I ended up using gesture recognizers with swipe left and swipe right instances. Here is the code:
//Help determine direction of swipe
UISwipeGestureRecognizer *swipeLeft = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(swipeNext:)];
swipeLeft.direction = UISwipeGestureRecognizerDirectionLeft;
[self.scrollView addGestureRecognizer:swipeLeft];
UISwipeGestureRecognizer *swipeRight = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:#selector(swipePrev:)];
swipeRight.direction = UISwipeGestureRecognizerDirectionRight;
[self.scrollView addGestureRecognizer:swipeRight];

Related

fullscreen uiview not worked perfectly

good morning,
i have a problem when i tried to pass to a full screen by clicking on the zoom button.In fact when i tapped the button displays a video and a toolbar that allows to move in the video. it's seems worked perfectly but i discovered that when I move through the slider to a level almost 60% I can not move forward or backward.
i think that the problem is due to layout setting.
this the code :
- (void)changeFullScreen:(BOOL)isFullScreen index:(int)index{
if (isFullScreen == YES) {
CGAffineTransform affineTransforme = CGAffineTransformMakeRotation(M_PI_2);
//CGFloat scale = [UIScreen mainScreen].bounds.size.height / [UIScreen mainScreen].bounds.size.width;
//affineTransforme = CGAffineTransformScale(affineTransforme,scale , scale);
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:index inSection:0];
EMPOIVideoCell *cell = [poiTableView cellForRowAtIndexPath:indexPath];
tmpVideoPlayerview = [cell.containerView viewWithTag:101];
//tmpVideoPlayerview.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
tmpVideoPlayerview.transform = affineTransforme; //CGAffineTransformTranslate(affineTransforme, 190, 0);
fullScreenView = [[UIViewController alloc] init];
tmpVideoPlayerview.frame = CGRectMake(-248, 0, fullScreenView.view.bounds.size.height , fullScreenView.view.bounds.size.width);
tmpVideoPlayerview.videoContainer.frame = tmpVideoPlayerview.frame;
tmpVideoPlayerview.videoContainer.layer.frame = tmpVideoPlayerview.frame;
playerLayer = [AVPlayerLayer playerLayerWithPlayer:tmpVideoPlayerview.videoPlayer];
playerLayer.frame = tmpVideoPlayerview.videoContainer.bounds;
[tmpVideoPlayerview.avPlayerLayer removeFromSuperlayer];
[tmpVideoPlayerview.videoContainer.layer addSublayer:playerLayer];
tmpVideoPlayerview.contentMode = UIViewContentModeScaleToFill;
//[tmpVideoPlayerview updateConstraints];
[tmpVideoPlayerview setNeedsLayout] ;
[tmpVideoPlayerview layoutIfNeeded];
fullScreenView.view.clipsToBounds = YES;
[fullScreenView.view addSubview:tmpVideoPlayerview];
[self addChildViewController:fullScreenView];
[self.view addSubview:fullScreenView.view];
//[fullScreenView.view updateConstraints];
//[fullScreenView.view layoutIfNeeded];
[[UIApplication sharedApplication] setStatusBarHidden:YES];
}
photo to explain the situation

how can I make a scrollView autoscroll?

I have this scrollView:
self.scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
self.scrollView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
self.scrollView.contentSize = CGSizeMake(320,3000);
_scrollView.frame = CGRectMake(0, 45, 320, 420);
and I want to make it autoscroll very slowly downward to the end so that the user can see the content (as in movie credits), eventually with a button to stop/play, but to follow the user gestures when touching the interface.
How can I do this?
Thanks,
You can use:
[_scrollView setContentOffset:CGPointMake(x,y) animated:YES];
and use the x and y as the touch points on the screen you can capture.
You can also do an animation with CoreAnimation:
[UIScrollView beginAnimations:#"scrollAnimation" context:nil];
[UIScrollView setAnimationDuration:1.0f];
[scroll setContentOffset:CGPointMake(x, y)];
[UIScrollView commitAnimations];
this adapted code did the trick (source http://sugartin.info/2012/01/21/image-sliding-page-by-page-uiscrollview-auto-scrolling-like-image-slider/)
PS : each image is 280 by 200
- (void)viewDidLoad
{
[super viewDidLoad];
UIScrollView *scr=[[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
scr.tag = 1;
scr.autoresizingMask=UIViewAutoresizingNone;
[self.view addSubview:scr];
[self setupScrollView:scr];
UIPageControl *pgCtr = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 264, 480, 36)];
[pgCtr setTag:12];
pgCtr.numberOfPages=10;
pgCtr.autoresizingMask=UIViewAutoresizingNone;
[self.view addSubview:pgCtr];
}
- (void)setupScrollView:(UIScrollView*)scrMain {
// we have 10 images here.
// we will add all images into a scrollView & set the appropriate size.
for (int i=1; i<=10; i++) {
// create image
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:#"sti%02i.jpg",i]];
// create imageView
UIImageView *imgV = [[UIImageView alloc] initWithFrame:CGRectMake(20, ((i-1)*scrMain.frame.size.height+100), 280, 200)];
// set scale to fill
imgV.contentMode=UIViewContentModeScaleToFill;
// set image
[imgV setImage:image];
// apply tag to access in future
imgV.tag=i+1;
// add to scrollView
[scrMain addSubview:imgV];
}
// set the content size to 10 image width
[scrMain setContentSize:CGSizeMake(scrMain.frame.size.width, scrMain.frame.size.height*10)];
// enable timer after each 2 seconds for scrolling.
[NSTimer scheduledTimerWithTimeInterval:2 target:self selector:#selector(scrollingTimer) userInfo:nil repeats:YES];
}
- (void)scrollingTimer {
// access the scroll view with the tag
UIScrollView *scrMain = (UIScrollView*) [self.view viewWithTag:1];
// same way, access pagecontroll access
UIPageControl *pgCtr = (UIPageControl*) [self.view viewWithTag:12];
// get the current offset ( which page is being displayed )
CGFloat contentOffset = scrMain.contentOffset.y;
// calculate next page to display
int nextPage = (int)(contentOffset/scrMain.frame.size.height) + 1 ;
// if page is not 10, display it
if( nextPage!=10 ) {
[scrMain scrollRectToVisible:CGRectMake(0, nextPage*scrMain.frame.size.height, scrMain.frame.size.width, scrMain.frame.size.height) animated:YES];
pgCtr.currentPage=nextPage;
// else start sliding form 1 :)
} else {
[scrMain scrollRectToVisible:CGRectMake(0, 0, scrMain.frame.size.width, scrMain.frame.size.height) animated:YES];
pgCtr.currentPage=0;
}
}
You can set x if you want to scroll horizontally, otherwise set y to scroll vertical.
[_scrollView setContentOffset:CGPointMake(x, y) animated:YES];
and modify the co-ordinates accordingly.

scrollview stacks images on top of each other -xcode

I have a scrollview with subview as images.. when I made the pictures center to the scrollview they all appear on top of each other as a stack.. I need them to scroll horizontally.. how do I fix that? this is my code so far..
- (void)viewDidLoad
{
[super viewDidLoad];
for (int i = 1; i < 18; i++) {
UIImageView *images = [[UIImageView alloc] initWithImage:[UIImage imageNamed: [NSString stringWithFormat:#"%d.jpg", i]]];
images.frame = CGRectMake((i-1)*320, 0, 320, 330);
[scroller setContentOffset:CGPointMake(0, 0)];
[scroller addSubview:images];
[images setContentMode:UIViewContentModeScaleAspectFill];
[images sizeToFit];
//center image
CGSize boundsSize = scroller.bounds.size;
CGRect frameToCenter = images.frame;
// center horizontally
if (frameToCenter.size.width < boundsSize.width) {
frameToCenter.origin.x = (boundsSize.width - frameToCenter.size.width) / 2;
NSLog(#"%f", frameToCenter.origin.x);
}
else
frameToCenter.origin.x = 0;
// center vertically
if (frameToCenter.size.height < boundsSize.height)
frameToCenter.origin.y = (boundsSize.height - frameToCenter.size.height) / 2;
else
frameToCenter.origin.y = 0;
images.frame = frameToCenter;
scroller.pagingEnabled = NO;
}
[scroller setContentMode:UIViewContentModeScaleAspectFit];
scroller.delegate =self;
scroller.contentSize = CGSizeMake(320*17, 330);
scroller.backgroundColor = [UIColor blackColor];
pageControl.numberOfPages =17;
pageControl.currentPage = 0;
To center the images horizontally just use the code below
float scrollHeight = 0;
for (int col = 0; col < index; ++col)
{
CGRect selectFrame = CGRectMake(0,0,kOvrW,kOvrH);
selectionIndicator = [[UIImageView alloc] initWithFrame:selectFrame];
selectionIndicator.contentMode = UIViewContentModeBottomRight;
[selectionIndicator setImage:[UIImage imageNamed:#"checked"]];
CGRect frame = CGRectMake(5,kOvrPreY+col*(kOvrPreH+kOvrH),kOvrW,kOvrH);
UIView *fr = [[UIView alloc] initWithFrame:frame];
CGRect imgFrame = CGRectMake(5, 4, 68, 55);
UIImageView *imgView = [[UIImageView alloc]initWithFrame:imgFrame];
imgView.image = [UIImage imageNamed:[[subCategories objectAtIndex:col] valueForKey:#"add"]];
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:#selector(tapAction:)];
tapGesture.numberOfTapsRequired = 1;
tapGesture.numberOfTouchesRequired = 1;
[fr setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"small-thumb"]]];
[fr addGestureRecognizer:tapGesture];
[fr addSubview:imgView];
fr.tag = col;
[subCatScroll addSubview:fr];
[subCatScroll bringSubviewToFront:fr];
scrollHeight += kOvrPreH+kOvrH;
}
subCatScroll.contentSize = CGSizeMake(subCatScroll.frame.size.width, scrollHeight+kOvrPreH);

How can I crop my UIPickerView?

Here is my horizontal UIPickerView (by rotate & scale the ori UIpicker) : htp://s7.postimage.org/qzez9d0pn/Original.png
And now, what I want to do is cut off these two spaces : http://s7.postimage.org/bryzp08uz/Process.png
To have this better look result : http://s7.postimage.org/6ulf3w6vv/Result.png
Somebody please help me how to do it...?
my rotate & scale code :
thePickerView.delegate = self;
thePickerView.showsSelectionIndicator =YES;
thePickerView.center = CGPointMake(xVar, yVar); // position
CGAffineTransform rotate = CGAffineTransformMakeRotation(-3.14/2); // rotate
rotate = CGAffineTransformScale(rotate, 0.1, 1); // scale
[thePickerView setTransform:rotate];
UILabel *theview[num];
CGAffineTransform rotateItem = CGAffineTransformMakeRotation(3.14/2);
for (int i=0;i<num;i++) {
theview[i] = [[UILabel alloc] init];
theview[i].text = [NSString stringWithFormat:#"%d",i+1];
theview[i].textColor = [UIColor blackColor];
theview[i].frame = CGRectMake(0,0, 100, 100);
theview[i].backgroundColor = [UIColor clearColor];
theview[i].textAlignment = UITextAlignmentCenter;
theview[i].shadowColor = [UIColor whiteColor];
theview[i].shadowOffset = CGSizeMake(-1,-1);
theview[i].adjustsFontSizeToFitWidth = YES;
theview[i].transform = CGAffineTransformScale(rotateItem, 1, 10);
}
itemArray = [[NSMutableArray alloc] init];
for (int j=0;j<num;j++) {[itemArray addObject:theview[j]];}
[thePickerView selectRow:row inComponent:0 animated:NO];
[self.view addSubview:thePickerView];
My temporary solution while searching & waiting for better coding answer is create an overlay background image then transparent the desire space of PickerView =.=

Image size resets to original after performing pich using UIPichGestureRecognizer in iphone

I have one view controller in which I have added UIScrollView & UIImageView programatically. I have added UIPichGestureRecognizer to the UIImageView. My UIImageView is added to UIScrollView as a subview.
My problem is when I try to pinch the image , it zoom in. But when I release the touches from screen it again come to its default size. I can not find the error in code. Please help me.
Below is my code
- (void)createUserInterface {
scrollViewForImage = [[UIScrollView alloc]initWithFrame:CGRectMake(20.0f, 60.0f, 280.0f, 200.0f)];
scrollViewForImage.userInteractionEnabled = YES;
scrollViewForImage.multipleTouchEnabled = YES;
scrollViewForImage.backgroundColor = [UIColor redColor];
scrollViewForImage.autoresizesSubviews = YES;
scrollViewForImage.maximumZoomScale = 1;
scrollViewForImage.minimumZoomScale = .50;
scrollViewForImage.clipsToBounds = YES;
scrollViewForImage.delegate = self;
scrollViewForImage.bouncesZoom = YES;
scrollViewForImage.contentMode = UIViewContentModeScaleToFill;
[self.contentView addSubview:scrollViewForImage];
imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0.0f, 0.0f, 280.0f, 200.0f)];
[imageView setBackgroundColor:[UIColor clearColor]];
imageView.userInteractionEnabled = YES;
imageView.multipleTouchEnabled = YES;
UIPinchGestureRecognizer *pinchRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:#selector(pinch:)];
[pinchRecognizer setDelegate:self];
[imageView addGestureRecognizer:pinchRecognizer];
//[self.contentView addSubview:imageView];
[self.scrollViewForImage addSubview:imageView];
scrollViewForImage.contentSize = CGSizeMake(imageView.frame.size.width , imageView.frame.size.height);
}
-(UIView *) viewForZoomingInScrollView:(UIScrollView *)inScroll {
return imageView;
}
-(void)pinch:(id)sender {
[self.view bringSubviewToFront:[(UIPinchGestureRecognizer*)sender view]];
if([(UIPinchGestureRecognizer*)sender state] == UIGestureRecognizerStateEnded) {
lastScale = 1.0;
return;
}
CGFloat scale = 1.0 - (lastScale - [(UIPinchGestureRecognizer*)sender scale]);
CGAffineTransform currentTransform = [(UIPinchGestureRecognizer*)sender view].transform;
CGAffineTransform newTransform = CGAffineTransformScale(currentTransform, scale, scale);
[[(UIPinchGestureRecognizer*)sender view] setTransform:newTransform];
lastScale = [(UIPinchGestureRecognizer*)sender scale];
}
From what I can see the problem lies here:
scrollViewForImage.maximumZoomScale = 1;
You are setting the maximum zoom scale of the image to 1 x its full size. This means once you finish pinching the image, it will scale back to 1 x its size.
If you want to be able to zoom the image to a larger size, try settings this value to be higher than 1. e.g.
scrollViewForImage.maximumZoomScale = 3;

Resources