Overview :
A UIPageControl presents that set of horizontal dots representing pages. The current page representing the white dots (default color for dots). We can go to the next page or to the previous page.
Steps :
- Open Xcode 6.
- Create new project.
- Select: iOS ⇒ Application ⇒ Single View Application.
- Give the project name as PageControl, iPhone as target device and click Finish.
- Here, I have Customized the UIPageControl and UIScrollView with UIImageView.
- First we add UIScrollView delegate in .h file and declare PageControl, ScrollView and ImageView .h file.
- Import the FXPageControl.h and FXPageControl.m class file to the project from
https://github.com/nicklockwood/FXPageControl - Here, we add Class File for Page Control to give image for the indicator and set space and size for the indicator (dot size and dot space).
- In ViewDidLoad Method
- (void)viewDidLoad
{
[super viewDidLoad];}
// Do any additional setup after loading the view, typically from a nib.
images=[[NSArray alloc]initWithObjects:@"image1.png", @"image2.png", @"image3.png", @"image4.png", nil];
///UIScrollView
scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, 320, 467)];
scrollView.backgroundColor = [UIColor clearColor];
scrollView.delegate = self;
scrollView.pagingEnabled = YES;
scrollView.showsHorizontalScrollIndicator = NO;
[scrollView setContentSize:CGSizeMake(scrollView.frame.size.width*images.count, scrollView.frame.size.height)];
/// PageControl
pageControl = [[FXPageControl alloc]init ];
[pageControl setFrame:CGRectMake(110, 540, 100, 36)];
pageControl.defersCurrentPageDisplay = NO;
pageControl.selectedDotColor = [UIColor redColor];
pageControl.backgroundColor = [UIColor clearColor];
pageControl.selectedDotSize = 15.0;
pageControl.dotSize = 11.0;
pageControl.dotColor = [UIColor blueColor];
pageControl.dotSpacing = 10.0;
pageControl.wrapEnabled = YES;
pageControl.selectedDotImage = [UIImage imageNamed:@"selectedslider.png"];
pageControl.dotImage = [UIImage imageNamed:@"unselectedslider.png"];
[pageControl addTarget:self action:@selector(pageChanged) forControlEvents:UIControlEventValueChanged];
UIImageView *dottedImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 434, 320, 27)];
[dottedImage setImage:[UIImage imageNamed:@"dottedline.png"]];
for (int i = 0; i <[images count]; i++)
{
CGRect frame;}
frame.origin.x = scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = scrollView.frame.size;
UIImageView *imageView = [[UIImageView alloc] init];
imageView.image = [UIImage imageNamed:[images objectAtIndex:i]];
imageView.frame = frame;
[scrollView addSubview:imageView];
pageControl.numberOfPages = images.count;
pageControl.currentPage = 0;
[self.view addSubview:scrollView];
[self.view addSubview:pageControl];
10.This Method to change the Page
- (void)pageChanged
{
// pageControl.currentPage=PageIndicator.currentPage;}
CGRect frame;
frame.origin.x = scrollView.frame.size.width * pageControl.currentPage;
frame.origin.y = 0;
frame.size = scrollView.frame.size;
[scrollView scrollRectToVisible:frame animated:NO];
11.We implement the ScrollView Delegate Method.
- (void)scrollViewDidScroll:(UIScrollView *)_scrollView
{
CGFloat viewWidth = scrollView.frame.size.width;}
// content offset - tells by how much the scroll view has scrolled.
int pageNumber = floor((scrollView.contentOffset.x - viewWidth/50) / viewWidth) +1;
pageControl.currentPage = pageNumber;
Screenshot :
Udayapandi Mariappan is a Junior Software Engineer at Span Technology Services
