Skip to main content

Use of UIPageControl with UIScrollView




UIPageControl in IOS is a control that is used mostly in help screens or info screens for IOS apps. In this we are going to create a small tutorial for custom UIPageControl using UIScrollView and UIPagecontrol in which we will change background color of UIImageView as per page number selected by user on tapping on UIPageControl or swiping UIScrollViewUIScrollView is used with UIPageControl as the page control itself is set of dots and does not has display interface. We are not covering the default UIPageViewController provided by default in xcode.

Open ViewController.h and create IBOutlets for UIPageControl and UIScrollView and an IBActionchangePage that we are going to assign to UIPageControl ValueChanged event so that we can detect that user has taped on UIPageControl.
@interface ViewController : UIViewController {
IBOutlet UIPageControl *pageControl;
IBOutlet UIScrollView *scrollView;
}
-(IBAction)changePage:(id)sender;
@end
We add three UIImageView to our scroll and set different background color to it.
#define SCROLLWIDTH 279
- (void)viewDidLoad {
scrollView.contentSize=CGSizeMake(SCROLLWIDTH*3,
scrollView.frame.size.height);
scrollView.delegate = self;
for (int i =0; i<=3; i++) {
UIImageView *imageView = [[UIImageView alloc]initWithFrame:
CGRectMake(SCROLLWIDTH*i, 0, scrollView.frame.size.width,
scrollView.frame.size.height)];
if (i==0) {
imageView.backgroundColor = [UIColor redColor];
}
else if (i==1) {
imageView.backgroundColor = [UIColor greenColor];
}
else {
imageView.backgroundColor = [UIColor yellowColor];
}
[scrollView addSubview:imageView];
}
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}



Note: SCROLLWIDTH is width of our UIScrollView.

 In our changePage action, we will use scrollRectToVisible  method of UIScrollView so that we can scroll our UIScrollView as per user tap on UIPageControl.

#pragma mark changePage
-(IBAction)changePage:(id)sender
{
[scrollView scrollRectToVisible:CGRectMake(SCROLLWIDTH*pageControl.currentPage, scrollView.frame.origin.y, SCROLLWIDTH, scrollView.frame.size.height) animated:YES];
}



Lastly. we ned to implement scrollViewDidEndDecelerating delegate of UIScrollView so that we can calculate page number if user did not use UIPageControl and simple scroll down UIScrollView.

- (void)scrollViewDidEndDecelerating:(UIScrollView *)sender {
[self setIndiactorForCurrentPage];
}
-(void)setIndiactorForCurrentPage
{
uint page = scrollView.contentOffset.x / SCROLLWIDTH;
[pageControl setCurrentPage:page];
}

Comments

Popular posts from this blog

Draggable Marker and Drawing the routes between them using Google Maps | IOS | Swift

This blog is about how we can make the marker draggable and get the current location from it and to draw the routes between them. For that we have to install the pods of Google maps from developer.google.com. Then we have to add the following    pod 'GoogleMaps'   pod 'GooglePlaces'   pod 'GooglePlacesAPI'   pod 'SwiftyJSON' And we have to save the pods into the pod file. Then, we have to install all the pods through terminal. Again we have to make the outlet for textfield and button as discussed below. 2 TextField and 3 Buttons. Hope you will enjoy the coding. Happy coding.! import UIKit import GoogleMaps import GooglePlaces import SwiftyJSON import Alamofire enum Location { case startLocation case destinationLocation } class ViewController: UIViewController , GMSMapViewDelegate ,  CLLocationManagerDelegate { @IBOutlet weak var googleMaps: GMSMapView ! @IBOutlet weak

Route between two places using Google Maps iOS SDK.

Its very interesting to have the Google maps  Firstly. We have to install the pods of Google maps. So, follow the steps for installing the pods of Google maps on developers.google.com 1. Create the pod file as on the site. 2. In Podfile add the pod of Alamofire and SwiftyJSON. 3. Save the pod file.      pod 'GoogleMaps'     pod 'GooglePlaces'     pod 'Alamofire' , '~> 4.2.0'     pod 'SwiftyJSON' 4. Install the pods. Here is the code for route. import UIKit import GoogleMaps import GooglePlaces import Alamofire import SwiftyJSON class GoogleViewController: UIViewController , GMSMapViewDelegate {     @IBOutlet weak var googleView: GMSMapView !          // AIzaSyC907BQBnrZK0UjA2zARtE6Mq7L__yqw5Q     override func viewDidLoad() {         super . viewDidLoad ()         GMSServices . provideAPIKey ( "AIzaSyC907BQBnrZK0UjA2zARtE6Mq7L__yqw5Q" )         GMSPlacesClient . pr

Cancellable Task with Dispatch Work Item | iOS | Swift

In some scenarios, we all want that the task we want to perform should be cancellable later on. For this kind of behaviour, we already have OperationQueue but the use of It seems difficult for beginners. Most of us didn't use OperationQueue so frequently and were only familiar with Grand Central Dispatch (GCD) . by performing UI operations in the main thread, Dispatch Group, etc. By the use of DispatachWorkItem , we can create some tasks that can be cancelled later on. Here is the example, let workItem = DispatchWorkItem {     // Here is our task     debugPrint ( "Task is to print some text..." ) } This is DispatchWorkItem containing a task to print something. To perform this task, we need to make use of DispatchQueue like this by adding delay if required. DispatchQueue . main . asyncAfter (deadline: . now () + . seconds ( 1 ), execute: workItem ) Here is the basic example to add a task and perform it using DispatchQueue. Now to cancel that we need to keep the referen