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.
-
在UI格式的帮助下以html格式显示内容
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:
-
如何构建这些自定义控件?
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屋!