I have a UIImageView that contains four ImageView as subviews. Each ImageView acts as a page that the user can scroll forward and go to the next page (image). However, i am unable to achieve this scrolling to next page. It only shows the first image. Here is my implementation
TutorialViewController.h
#import <UIKit/UIKit.h>
#interface TutorialViewController : UIViewController{
}
#property (nonatomic, retain) IBOutlet UIScrollView *tutorialScrollView;
#end
TutorialViewController.m
#import "TutorialViewController.h"
#interface TutorialViewController () <UIScrollViewDelegate>
#end
#implementation TutorialViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.tutorialScrollView.pagingEnabled = YES;
self.tutorialScrollView.showsHorizontalScrollIndicator = NO;
self.tutorialScrollView.scrollEnabled = YES;
self.tutorialScrollView.delegate = self;
}
-(void)viewDidAppear:(BOOL)animated
{
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenWidth = screenRect.size.width;
CGFloat screenHeight = screenRect.size.height;
UIImageView *page1 = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,screenWidth,screenHeight)];
page1.image = [UIImage imageNamed:#"tutorial1.png"];
UIImageView *page2 = [[UIImageView alloc] initWithFrame:CGRectMake(screenWidth * 2,0,screenWidth,screenHeight)];
page2.image = [UIImage imageNamed:#"tutorial2.png"];
UIImageView *page3 = [[UIImageView alloc] initWithFrame:CGRectMake(screenWidth * 3,0,screenWidth, screenHeight)];
page3.image = [UIImage imageNamed:#"tutorial3.png"];
UIImageView *page4 = [[UIImageView alloc] initWithFrame:CGRectMake(screenWidth * 4,0,screenWidth, screenHeight)];
page4.image = [UIImage imageNamed:#"tutorial4.png"];
[self.tutorialScrollView addSubview:page1];
[self.tutorialScrollView addSubview:page2];
[self.tutorialScrollView addSubview:page3];
[self.tutorialScrollView addSubview:page4];
}
#end
You should set contentSize for UIScrollView:
[self.tutorialScrollView setContentSize:CGSizeMake(screenWidth*numOfPages, screenHeight)];
You will need to set the ContentSize of the scrollView.
self.tutorialScrollView.contentSize = CGSizeMake(imageView.frame.size.width * numberOfImages, self.tutorialScrollView.frame.size.height);
This will scroll your scrollView in horizontal direction.
Related
UITapGestureRecognizer is not working with my UIImageView Class on my UIViewController.
HousePictureView *pictureHouse = [[HousePictureView alloc] init:[dictionary objectForKey:#"photo_url"]];
UITapGestureRecognizer *picturestap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(showpictures)];
picturestap.numberOfTapsRequired = 1;
[pictureHouse addGestureRecognizer:picturestap];
[parentScroll addSubview:pictureHouse];
HousePictureView.m
#interface HousePictureView() {
CGFloat screenwidth;
}
#property (strong, nonatomic) UIImageView *pictureView;
#end
#implementation HousePictureView
-(id)init:(NSString*)url
{
screenwidth = [UIScreen mainScreen].bounds.size.width; // Width of this screen
if(self = [super init])
{
_pictureView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,screenwidth,300)];
[_pictureView setImageWithURL:[NSURL URLWithString:url] placeholderImage:[Functions resizeImage:[UIImage imageNamed:#"nophoto"] newSize:CGSizeMake(screenwidth,300)]];
_pictureView.userInteractionEnabled = YES;
[self addSubview:_pictureView];
}
return self;
}
#end
HousePictureView.h
#interface HousePictureView : UIImageView
- (id)init:(NSString*)url;
#end
Why does it not possible to have an event while userInteractionEnabled form views parents are activated?
Thank you for your help :)
mmmhhh you have created an UIImageView custom class with a property UIImageView added like a subview. Why?
Just use "self".
It does not work because you're adding a tap gesture on a UIImageView that is under another.
I've programatically created a UIScrollView using the following code:
.h:
#interface MainController : UIViewController <UIScrollViewDelegate>
#property (nonatomic, retain) UIScrollView *mainScrollView;
#property (nonatomic, retain) UIView *mainView;
.m:
- (void) initVariables
{
// Setters
screenRect = [[UIScreen mainScreen] bounds];
screenWidth = screenRect.size.width;
screenHeight = screenRect.size.height;
// Alloc-init methods
mainScrollView = [[UIScrollView alloc] init];
mainView = [[UIView alloc] init];
}
- (void) setUpScrollView
{
mainScrollView.frame = CGRectMake(0.0f, 0.0f, screenWidth, screenHeight);
mainScrollView.contentSize = CGSizeMake(screenWidth*2, screenHeight*2);
mainScrollView.minimumZoomScale = 1.0;
mainScrollView.maximumZoomScale = 4.0;
mainScrollView.backgroundColor = [UIColor blueColor];
mainScrollView.scrollEnabled = YES;
mainScrollView.delegate = self;
mainView.frame = CGRectMake((screenWidth/2) - 25.0f, (screenHeight/2) - 25.0f, 50.0f, 50.0f);
UIImageView *testImageView = [[UIImageView alloc] init];
testImageView.backgroundColor = [UIColor redColor];
testImageView.frame = CGRectMake(0.0f, 0.0f, 50.0f, 50.0f);
// Add subviews
[self.view addSubview:mainScrollView];
[mainScrollView addSubview:mainView];
[mainView addSubview:testImageView];
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return mainView;
}
The zoom works well now. However, I can only pan when the UIScrollView is at the minimum zoom. All other times, when I pinch-zoom in, when I release my fingers the UIView shifts slightly off-centre, despite being centred when I was zooming, and I can no longer pan the UIScrollView.
Also, after zooming in, if I zoom back out again to minimum zoom, I still cannot pan.
TL;DR - In other words, UIScrollView's pan only before using the pinch zoom feature, after which it breaks.
How can I prevent this from happening, and allow the UIScrollView's pan to always be enabled? All help appreciated.
Try to add another view in scrollView with same size of screen and then add mainView and imageView. It may solve your proble. :)
Im wanting to setup my view within the storyboard so it lays out like the above image. The view has 2 seperate sections when landscape the share 50/50 horizontally then when portrait it rotates to 50/50 vertically.
What is the most appropriate way to set this up inside xcode interface builder? Can I use constraints to achieve this? This will need to be designed so it will scale to ipad and iphone as well.
I build a project to test. It works, check the screenshot
iPad in Portrait
iPad in Landscape
It can't be done in Storyboard, because iPad only got one layout in Storyboard.
but it's very simple to achieve what you need programmatically .
//ViewController.m
#import "ViewController.h"
#interface ViewController ()
#property (nonatomic, strong) UIView *firstView;
#property (nonatomic, strong) UIView *secondView;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.firstView = [[UIView alloc] initWithFrame:CGRectZero];
self.firstView.backgroundColor = [UIColor redColor];
[self.view addSubview:self.firstView];
self.secondView = [[UIView alloc] initWithFrame:CGRectZero];
self.secondView.backgroundColor = [UIColor blueColor];
[self.view addSubview:self.secondView];
[self setupSubViewLayout];
}
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {
[self setupSubViewLayout];
}
- (void)setupSubViewLayout {
CGFloat viewWidth = self.view.frame.size.width;
CGFloat viewHeight = self.view.frame.size.height;
CGRect firstRect;
CGRect secondRect;
if (viewWidth > viewHeight) {
firstRect = CGRectMake(0, 0, viewWidth/2.0, viewHeight);
secondRect = CGRectMake(viewWidth/2.0, 0, viewWidth/2.0, viewHeight);
}else {
firstRect = CGRectMake(0, 0, viewWidth, viewHeight/2.0);
secondRect = CGRectMake(0, viewHeight/2.0, viewWidth, viewHeight/2.0);
}
self.firstView.frame = firstRect;
self.secondView.frame = secondRect;
}
I am working with images in iOS. So when a user presses let's say a button, I want an image to appear to fill up from the bottom to the top.
In order be more precise, imagine a thermometer that is empty and when you press a button the thermometer fills up from the bottom to the top. But I want this with animation.
Do you have any idea how to implement that?
Thanks!
You can easily do it by having a second view acting as a mask over the image view with your image. Then you can apply simple scale transform and animate it revealing the image. Alternatively, you can animate the frame change. Effect will be the same. I'm attaching code for 2 ways of doind this.
Here is what I achieved in both cases:
Code I used for the case I:
#interface MyViewController ()
#property(nonatomic, strong) UIImageView *imageView;
#property(nonatomic, strong) UIView *maskView;
#end
#implementation MyViewController
- (void)viewDidLoad
{
[super viewDidLoad];
_imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Image"]];
_imageView.center = self.view.center;
_imageView.layer.anchorPoint = CGPointMake(0.5, 0.0);
[self.view addSubview:_imageView];
_maskView = [[UIView alloc] initWithFrame:_imageView.frame];
_maskView.backgroundColor = [UIColor whiteColor];
_maskView.center = self.view.center;
_maskView.layer.anchorPoint = CGPointMake(0.5, 0.0);
[self.view addSubview:_maskView];
}
- (IBAction)buttonTapped:(id)sender
{
[UIView animateWithDuration:1.0f
animations:^
{
_maskView.transform = CGAffineTransformMakeScale(1.0, 0.0001);
}];
}
#end
Code I used for the case II:
#interface MyViewController ()
#property(nonatomic, strong) UIImageView *imageView;
#property(nonatomic, assign) CGFloat height;
#end
#implementation MyViewController
- (void)viewDidLoad
{
[super viewDidLoad];
_imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Image"]];
_imageView.center = self.view.center;
_imageView.contentMode = UIViewContentModeBottom;
_height = CGRectGetHeight(_imageView.bounds);
CGRect frame = _imageView.frame;
frame.size.height = 0.00001;
frame.origin.y += _height;
_imageView.frame = frame;
_imageView.clipsToBounds = YES;
[self.view addSubview:_imageView];
}
- (IBAction)buttonTapped:(id)sender
{
[UIView animateWithDuration:1.0f
animations:^
{
CGRect frame = _imageView.frame;
frame.size.height = _height;
frame.origin.y -= _height;
_imageView.frame = frame;
}];
}
#end
In both cases the end effect was the same.
You can do this by changing the frame of the view within the animate block. For example, if myView was a 100x100 sized view:
myView.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height, 0, 0);
[UIView animateWithDuration:1.0f
animations:^
{
myView.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height, 100, 100);
}];
This example should enlarge a 100x100 view in the bottom left corner of the screen, making it appear to reveal itself from the bottom up.
Is it possible to use a UIScrollView to see an image that is about 800px long? I tried using a UIScrollView and the UIImageView but it's not scrolling. Anybody can help please?
Use:
UIScrollView *yourScrollview = [[UIScrollView alloc] initWithFrame:(CGRect){{0,0}, {320,480}}];
UIImageView *yourImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"yourImageHere.png"]];
yourImageView.frame = yourScrollview.bounds;
yourScrollview.contentSize = yourImageView.frame.size;
yourScrollview.minimumZoomScale = 0.4;
yourScrollview.maximumZoomScale = 4.0;
[yourScrollview setZoomScale:yourScrollview.minimumZoomScale];
yourScrollview.delegate = self;
[self.view addSubview:yourScrollview];
Don't forget to add UIScrollViewDelegate in your .h file
Note: ARC code
1. Create a new Project -> Single View Application
2. Put the follow code into:
"ViewController.m"
#import "ViewController.h"
#interface ViewController ()
#end
#implementation ViewController
-(void) viewDidLoad
{
[super viewDidLoad];
UIScrollView * scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
[scrollView setContentSize:CGSizeMake(320, 800)];
UIView * myView = [[UIView alloc] initWithFrame : CGRectMake(0, 0, 320, 800)];
UIImageView * myImage = [[UIImageView alloc]initWithImage : [UIImage imageNamed:#"Test.png"]];
[myView addSubview: myImage];
[myImage release];
[scrollView addSubview: myView];
[myView release];
[self.view addSubview: scrollView];
[scrollView release];
}
- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return YES;
}
#end
3. Put the Image "Test.png" into your Project (Drag Drop into Xcode -> Folder:Supporting Files)
If it is not panning it means you forgot to set the contentSize property. I have a tutorial on my website that shows how to embed a UIImageView inside a UIScrollView and set it up for both panning and zooming. It includes complete downloadable source code. See Panning and Zooming with UIScrollView
#interface ZoomViewController : UIViewController <uiscrollviewdelegate> {
IBOutlet UIScrollView *scroll;
UIImageView *image;
}
#property (nonatomic, retain) UIScrollView *scroll;
#end
</uiscrollviewdelegate></uikit>
Once check your Viewdidload method.
- (void)viewDidLoad {
image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"img_body.png"]];
[super viewDidLoad];
image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"img_body.png"]];
scroll.contentSize = image.frame.size;
[scroll addSubview:image];
scroll.minimumZoomScale = 0.4;
scroll.maximumZoomScale = 4.0;
scroll.delegate = self;
[scroll setZoomScale:scroll.minimumZoomScale];
[super viewDidLoad];
}