iOS UI Scroll View, Image View and Web View

iOS Image View & Scroll View (UIImageView & UIScrollView)

Application Delegate header

@interface PhotoAppDelegate : NSObject <UIApplicationDelegate, UIScrollViewDelegate>
{
    UIWindow *window;
    UIImageView *imageView;
}
...

Application Delegate Implementation for iOS Image View and Scroll View

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    UIImage *image = [UIImage imageNamed:@"ipod.jpg"];
    imageView = [[UIImageView alloc] initWithImage:image];

    CGRect applicationFrame = [[UIScreen mainScreen] applicationFrame];
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:applicationFrame];

    scrollView.contentSize = image.size;
    [scrollView addSubview:imageView];

    scrollView.minimumZoomScale = 0.2;
    scrollView.maximumZoomScale = 4.0;

    scrollView.bounces = NO;

    scrollView.delegate = self;

    [window addSubview:scrollView];
    [window makeKeyAndVisible];

    return YES;
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
	return imageView;
}

Create an iOS Image view with an image

    UIImage *image = [UIImage imageNamed:@"ipod.jpg"];
    imageView = [[UIImageView alloc] initWithImage:image];
  • Find the iOS application frame of the screen
    • The screen area available to application
    • Screen area minus the top status bar
  • Create a iOS Scroll View with the size of the application frame
        CGRect applicationFrame = [[UIScreen mainScreen] applicationFrame];
        UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:applicationFrame];
    
  • Set the iOS scrollable area the same as the image area
  • Add the image view to the scrollable view
        scrollView.contentSize = image.size;
        [scrollView addSubview:imageView];
    
  • Set the max/min zooming scale
  • When scrolling, do not create the bouncing effect
        scrollView.minimumZoomScale = 0.2;
        scrollView.maximumZoomScale = 4.0;
    
        scrollView.bounces = NO;
    

Set itself to handle the iOS scroll view events

    scrollView.delegate = self;

Asks the delegate for the view to scale when zooming is about to occur

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

iOS Scroll View Configurable Parameters

Scroll View Configuration Property Description
scrollView.bounces Allow the bouncing visual effect in scrolling to the edge
scrollEnabled Allow scrolling
directionalLockEnabled Allow to scroll in one direction only

Properties and action controlling the scroll bar

@property UIScrollViewIndicatorStyle indicatorStyle;
@property BOOL showsHorizontalScrollIndicator;
-(void)flashScrollIndicators;

Scroll to the target rectangle

- (void)scrollRectToVisible:(CGRect)aRect animated:(BOOL)animated;

Property to skew the image (translate, scale, rotate)

transform
  • To scale an image, the min/max zoom size and the viewForZoomingInScrollView: must be implemented

Zoom programmatically

@property float zoomScale;
- (void)setZoomScale:(float)scale animated:(BOOL)animated;
- (void)zoomToRect:(CGRect)zoomRect animated:(BOOL)animated;

Control the viewing area of an image

Padding area to the scrollable image area

  • So the top navigation bar may not block the top of the image
    contentInset.top
    contentInset.bottom
    

Padding area to the scroll bar so it will not overlap the top navigation bar

scrollIndicatorInsets.top

Content offset

contentOffset

Scroll View Delegate

Scroll View Delegate notification

- (void)scrollViewDidScroll:(UIScrollView *)sender;
- (void)scrollViewDidScrollToTop:(UIScrollView *)sender;
- (void)scrollViewWillBeginZoom:(UIScrollView *)sender withView:(UIView *)zoomView;
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)sender;
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)sender;

Scrolling state of UIScrollView

@property (readonly) BOOL zooming;
@property (readonly) BOOL dragging;
@property (readonly) BOOL tracking;
@property (readonly) BOOL decelerating;

Image View

Replace the image of an Image View

imageView.image = image2;

Create a image view with an image and the corresponding hight light image

  • The highlight image can be used when a button is pressed
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image
                                               highlightedImage:highlightImage];
    

Properties to create an Image Annimation

@property(retain)NSArray*animationImages;
@property NSTimeInterval animationDuration;
@property NSInteger animationRepeatCount;
@property BOOL isAnimating;
- (void)startAnimating;
- (void)stopAnimating;

iOS Web Browser View: UIWebView

- (NSURLRequest *)urlRequest
{
   NSString *urlString = @"http://www.google.com";
   return [NSURLRequest requestWithURL:[NSURL URLWithString:urlString]];
}

- (void)loadView
{
	webView = [[UIWebView alloc] initWithFrame:[[UIScreen mainScreen]
                                       applicationFrame]];
	webView.scalesPageToFit = YES;
	self.view = webView;
}

- (void)viewWillAppear:(BOOL)animated
{
	[super viewWillAppear:animated];
	[webView loadRequest:[self urlRequest]];
}

iOS API in creating an URL Request

+ (NSURLRequest *)requestWithURL:(NSURL *)url;
+ (NSURLRequest *)requestWithURL:(NSURL *)url
                     cachePolicy:(NSURLRequestCachePolicy)policy
                 timeoutInterval:(NSTimeInterval)timeoutInterval;

Create a Web View

webView = [[UIWebView alloc] initWithFrame:[[UIScreen mainScreen]
                                       applicationFrame]];

iOS API in loading URL into an iOS Web View

- (void)loadRequest:(NSURLRequest *)request;
- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;
- (void)loadData:(NSData *)data
        MIMEType:(NSString *)MIMEtype
textEncodingName:(NSString *)encodingName
         baseURL:(NSURL *)baseURL;

Web View API controlling the browser navigation

- (void)reload;
- (void)stopLoading;
- (void)goBack;
- (void)goForward;

Delegate Notification for Web View

- (BOOL)webView:(UIWebView *)sender
    shouldStartLoadWithRequest:(NSURLRequest *)request
    navigationType:(UIWebViewNavigationType)navigationType

- (void)webViewDidStartLoad:(UIWebView *)sender
- (void)webViewDidFinishLoad:(UIWebView *)sender
- (void)webView:(UIWebView *)sender didFailLoadWithError:(NSError *)error;