CODEWITHSUNDEEP
iosswiftuiscrollviewuiwebviewuiwebviewdelegate
mohitm
mohitm

Reputation: 163

Image and Html content on app screen with combined scrolling

Problem

I want to display an image and Html text on the app screen. The text is large so it may not fit on a screen so I want the content to be scrollable. WebView by default has scroll functionality for content going beyond screen size. But I don't want just the text to move upwards as I scroll down but also the image to move upwards i.e. I do not want the image to stick around on the screen when I scroll downwards.

One simple solution for this is to have the image rendered within the html content, but I do not want to do that because ImageView allows me additional functionality that I want to use.

Possible solution

The solution I tried for this was having an ImageView and a WebView within a ScrollView but when I try implementing it, only the webview content is scrolling and the image is fixed. (This is possibly because the WebView's scroll is getting preference over the parent ScrollView's scroll. I even tried setting WebView's child scroll view's delegate to outer scroll View but that didn't help and html text was not scrollable at all after build:

webview.scrollView.delegate = self.scrollView

How can I solve the problem of combined scrolling for ImageView and content in WebView possibly using other container views (if necessary)?

Upvotes: 2

Views: 988

Answers (2)

iPhoneDeveloper
iPhoneDeveloper

Reputation: 996

You can try this method :

Disable the scrolling of webview. Place the image on top of webview. 

self.yourScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];

self.yourWebView = [[UIWebView alloc] initWithFrame:CGRectMake(x position, y position, width, height)];`

self.yourWebView.opaque = NO;
self.yourWebView.scrollView.scrollEnabled = NO;

self.yourNewsArticleImageData = ({
        UIImageView* imgView = [[UIImageView alloc] initWithFrame:CGRectMake(x position, y position, width, height)];
        imgView.contentMode = UIViewContentModeScaleAspectFit;
        imgView.backgroundColor = [UIColor clearColor];
        imgView;
    });

[self.yourScrollView addSubview:self.yourWebView];
[self.yourScrollView addSubview:self.yourNewsArticleImageData];
self.yourScrollView.contentSize = CGSizeMake(self.view.frame.size.width, self.view.frame.size.height);

self.yourScrollView.scrollEnabled = YES;
[self.view addSubview:self.yourScrollView];

Main thing you need to do is disable the scrolling of webview and enable scrolling of your scroll view. Put image and webview content as subviews of scrollview.

You can change the height of the scroll view in the webview didFinish delegate method. Once you get the height of the webView loaded content change the "content size" of scroll view accordingly.

Upvotes: 0

JAL
JAL

Reputation: 42459

It sounds like you could use a UITableView with a UIImageView as your tableViewHeader. The UIWebView component could be a UITableViewCell or a tableFooterView depending on how you want to architect your view.

  1. Set your UIImageView as your UITableView's tableHeaderView. That way, as the table scrolls, your image will scroll off screen.

  2. Create a UITableViewCell that contains a UIWebView. You can set the height of the cell to whatever your content size is, or the screen size. The webview itself will be scrollable in this cell, and the user also is able to scroll back up to see the image header.

Upvotes: 1

Related Questions