iphone上单击Tap / Touch上的UIWebView上的自定义控件覆盖 [英] custom control overlay on UIWebView on single Tap/Touch in iphone

问题描述

http://startupmeme.com/wp- content / uploads / 2008/09 / stanza-on-iphone.png

我想实现像着名的Stanza应用程序截图所示的功能。

I want to achieve functionality like the famous Stanza application screenshot shows.

1. 在UI格式的帮助下以html格式显示内容

1. Content is displayed with the help of UIWebView in html format

在UIWebView上单击一下即可显示两个叠加控件（顶部和底部）

A single tap on the UIWebView would show two overlay controls (top & bottom)

底部工具栏由控件&一个用于分页的滑块

The bottom toolbar consists of controls & a slider to give pagination

请帮忙。

我将如何通过以下方式实现上述目标：

How would I achieve the above in following way:

1. 如何构建这些自定义控件？

1. How do i build up these custom controls?

单击时，我将如何覆盖这些控件？

On single tap, how will i overlay these controls?

如何组合UIToolbar（包含控件）&滑块？

How do i combine the UIToolbar(which contains controls) & the slider?

此外还需要过渡滑动效果，顶部标题来自屏幕顶部，底部控制&滑块来自屏幕底部。我将如何实现这一目标？

Also there is a need of transition slide effect, top header comes from top of screen, bottom control & slider come from bottom of screen. How will i achieve this?

请详细说明（a） - （d）。一些代码指南会非常有用。

Please help me out elaborately for (a) - (d). Some code guidance would be very helpful.

谢谢

推荐答案

我正在寻找你想要的东西我最近一直在做的一个项目。

I am doing what you are looking for in a project I've been working on recently.

基本上我在UINavigationController里面有一个UIWebView，UIToolbar是UIWebView的兄弟。我使用IB设置了所有这些的布局，以创建链接到我的视图控制器类的nib。我认为你知道如何使用IB以及如何正确设置所有代表，IBOutlets等，所以不会在这里讨论。

Basically I have a UIWebView inside of a UINavigationController with a UIToolbar as a sibling to the UIWebView. I setup the layout of all of this using IB to create a nib linked to my view controller class. I presume you know how to use IB and how to correctly setup all of the delegates, IBOutlets, etc. so will not cover that here.

你需要实现适当的在您的视图控制器中代表所有工作。这是我的视图控制器类的接口：

You need to implement the appropriate delegates in your view controller for this to all work. Here is my interface for the view controller class:

@interface MyViewController : UIViewController <UIWebViewDelegate, UIGestureRecognizerDelegate> {

}

@property (retain) IBOutlet UIWebView *webView;
@property (retain) IBOutlet UINavigationItem *navigationItem;
@property (retain) IBOutlet UIToolbar *toolbar;

- (void)handleTapFrom:(UITapGestureRecognizer *)recognizer;

// UIGestureRecognizerDelegate methods
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer;
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer;
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch;

// UIWebViewDelegate methods
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
- (void)webViewDidStartLoad:(UIWebView *)webView;
- (void)webViewDidFinishLoad:(UIWebView *)webView;
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;

@end

从技术上讲，您所询问的只需要UIGestureRecognizerDelegate实现但我认为你会在你的webView中做一些有趣的事情，因此也想要实现UIWebViewDelegate

Technically what you are asking about only requires the UIGestureRecognizerDelegate implementation but I presume you will be doing something interesting in your webView and thus will want to also implement the UIWebViewDelegate

我发现为这三个UGestureRecognizer委托实现以下内容至关重要由于UIWebView也识别了水龙头，所以这一切都有效：

I found it was critical to implement the following for these three UGestureRecognizer delegate methods to make this all work since the UIWebView is also recognizing taps:

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    return YES;
}

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
{
    return YES;
}

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
{
    return YES;
}

我在我的控制器的viewDidLoad方法中的webView上注册一个UITapGestureRecognizer：

I register a UITapGestureRecognizer on the webView inside my controller's viewDidLoad method:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.

    // I perform other appropriate initialization here like adding or removing items from the navigation bar or toolbar

    UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapFrom:)];
    tapRecognizer.numberOfTapsRequired = 1;
    tapRecognizer.delegate = self;
    [self.webView addGestureRecognizer:tapRecognizer];
    [tapRecognizer release];
}

这是我的handleTapFrom回调：

Here is my handleTapFrom callback:

- (void)handleTapFrom:(UITapGestureRecognizer *)recognizer
{
    CGPoint location = [recognizer locationInView:self.navigationController.topViewController.view];
    CGRect bounds = self.navigationController.topViewController.view.bounds;

    if (location.x < bounds.size.width / 5.0) {
        // This is in the left most quadrant

        // I implement code here to perform a "previous page" action
    } else if (location.x > bounds.size.width * 4.0 / 5.0) {
        // This is in the right most quadrant

        // I implement code here to perform a "next page" action
    } else if ((location.x > bounds.size.width / 3.0) && (location.x < bounds.size.width * 2.0 / 3.0)) {
        // This is in the middle third
        BOOL hidden = [self.navigationController isNavigationBarHidden];

        // resize the height of self.webView1, self.webView2, and self.webView3 based on the toolbar hiding / showing
        CGRect webViewControllerFrame = self.webView.frame;
        webViewControllerFrame.size.height += (hidden ? -44 : 44);
        self.webView.frame = webViewControllerFrame;

        // I hide all of the upper status bar and navigation bar, and bottom toolbar for a clean reading screen
        [[UIApplication sharedApplication] setStatusBarHidden:!hidden];
        [self.navigationController setNavigationBarHidden:!hidden animated:YES];
        self.toolbar.hidden = !hidden;

        // I perform content relayout here in the now modified webView screen real estate
    }
}

这个基本框架让我走了，希望能回答你的问题，或者至少指出你正确的方向。

This basic framework got me going and hopefully answers your question or at least points you in the right direction.

注意：

我还没有处理过这样一个事实，即我可能会将水龙头解释为显示/隐藏状态/导航/工具栏而UIWebView可能会在同一个水龙头上操作作为一个点击链接，等等。我打算很快调查...

I have not yet dealt with the fact that I may interpret a tap as "show/hide the status/nav/toolbars" AND the UIWebView may act on this same tap as a clicked link, etc. I am planning on looking into that shortly…

你在Stanza屏幕截图中显示的透明度并不是什么大问题。您必须使用各种导航/工具栏上的alpha设置来完成此操作，并在上面的UIWebView上更改调整大小代码。事实上，我会定期覆盖一个额外的半透明工具栏，用于临时状态，警报等，并且不要调整UIWebView的大小，使其位于下方，并且通过此警报工具栏仍然可见。

The transparency you show in the Stanza screen shot is not a big deal. You will have to play with the alpha settings on the various nav/toolbars to accomplish that plus change the resizing code on the UIWebView above. I in fact periodically overlay an additional semi-transparent toolbar for temporary status, alerts, etc and do not resize the UIWebView so that it is underneath and still somewhat visible through this alert toolbar.

这篇关于iphone上单击Tap / Touch上的UIWebView上的自定义控件覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！