how to create scroll view with images in Horizontal through programmatically? - ios

Question

Hi I am new to iOS how to create scroll view with images programmatically
like this I have tried, I am getting scroll view with images in horizontal but the images are placed like below pic
Am I doing in correct way?
please help me .
Thanks
#property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
#property (strong, nonatomic) IBOutlet UIImageView *imageView;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// CGRectMake(0, 0, 600, 200);
_scrollView.tag = 1;
_scrollView.autoresizingMask=UIViewAutoresizingNone;
NSLog(#"--->%#",_scrollView);
[self.view addSubview:_scrollView];
[self setupScrollView:_scrollView];
UIPageControl *pgCtr = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 154, 480, 36)];
NSLog(#"--->%#",pgCtr);
[pgCtr setTag:12];
pgCtr.numberOfPages=10;
pgCtr.autoresizingMask=UIViewAutoresizingNone;
[self.view addSubview:pgCtr];
// Do any additional setup after loading the view, typically from a nib.
}
- (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<=3; i++) {
// create image
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:#"abc%d.png",i]];
// create imageView
_imageView = [[UIImageView alloc] initWithFrame:CGRectMake(((i-1)*scrMain.frame.size.height+5), 0, 320, 195)];
// set scale to fill
_imageView.contentMode=UIViewContentModeScaleToFill;
// set image
[_imageView setImage:image];
// apply tag to access in future
_imageView.tag=i+1;
NSLog(#"--->%#",_imageView);
// add to scrollView
[scrMain addSubview:_imageView];
}
// set the content size to 10 image width
[scrMain setContentSize:CGSizeMake(320*3, scrMain.frame.size.height)];
NSLog(#"--->%#",scrMain);
// enable timer after each 2 seconds for scrolling.
[NSTimer scheduledTimerWithTimeInterval:7 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];
NSLog(#"--->%#",scrMain);
// same way, access pagecontroll access
UIPageControl *pgCtr = (UIPageControl*) [self.view viewWithTag:12];
NSLog(#"--->%#",pgCtr);
// get the current offset ( which page is being displayed )
CGFloat contentOffset = 194;
NSLog(#"------------------->%f",contentOffset);
// calculate next page to display
int nextPage = (int)(contentOffset/scrMain.frame.size.height) + 1 ;
NSLog(#"%d",nextPage);
// 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];
NSLog(#"--->%#",scrMain);
pgCtr.currentPage=nextPage;
// else start sliding form 1 :)
} else {
[scrMain scrollRectToVisible:CGRectMake(0, 0, scrMain.frame.size.width, scrMain.frame.size.height) animated:YES];
NSLog(#"-------------------------------------------->%#",scrMain);
pgCtr.currentPage=0;
}
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#end

Answer 1

I think, you are wrong at this line:
// create imageView
_imageView = [[UIImageView alloc] initWithFrame:CGRectMake(((i-1)*scrMain.frame.size.height+5), 0, 320, 195)];
It should be:
// create imageView // change height to width
_imageView = [[UIImageView alloc] initWithFrame:CGRectMake(((i-1)*scrMain.frame.size.width+5), 0, 320, 195)];

Answer 2

Please implement this code.Hope this works and use these macros.
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
- (void)setupScrollView:(UIScrollView*)scrMain
{
for (int i=0; i<3; i++)
{
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:#"abc%d.png",i]];
UIImageView *_imageView = [[UIImageView alloc] initWithFrame:CGRectMake(i*SCREEN_WIDTH, 0, SCREEN_WIDTH, 195)];
_imageView.contentMode=UIViewContentModeScaleToFill;
[_imageView setImage:image];
_imageView.tag=i;
[scrMain addSubview:_imageView];
}
[scrMain setContentSize:CGSizeMake(SCREEN_WIDTH*3, scrMain.frame.size.height)];
[NSTimer scheduledTimerWithTimeInterval:7 target:self selector:#selector(scrollingTimer) userInfo:nil repeats:YES];
}

Answer 3

You can add custom view to Scrollview and in Custom view add UIImageview as subview with some padding left and right?