UIWebViewでiOSインターフェースを構築する
ためにいろいろと調査した結果ログ。
よくまとまってた。
長押しでの選択を無効にする
CSSでハンドルする。
-webkit-touch-callout: none; -webkit-user-select: none;
overflow: scroll;な要素でスムーズスクロール・バウンスを有効にする
-webkit-overflow-scrolling: touch;
ピンチでの拡大を停止する
<meta name='viewport' content='initial-scale=1,userscalable=no'>
Retina用のスタイルを定義する
@media only screen and (-webkit-min-device-pixel-ratio:2) { }
リファレンスの.htmlを[UIImage imageNamed:]みたく検索する
PhoneGapから拝借した。
- (NSString*)resourceNamed:(NSString*)resourcePath { NSBundle* mainBundle = [NSBundle mainBundle]; NSMutableArray* directoryParts = [NSMutableArray arrayWithArray:[resourcePath componentsSeparatedByString:@"/"]]; NSString* filename = [directoryParts lastObject]; [directoryParts removeLastObject]; NSString* directoryPartsJoined = [directoryParts componentsJoinedByString:@"/"]; NSString* directoryStr = @"www"; if ([directoryPartsJoined length] > 0) directoryStr = [NSString stringWithFormat:@"%@/%@", directoryStr, [directoryParts componentsJoinedByString:@"/"]]; return [mainBundle pathForResource:filename ofType:@"" inDirectory:directoryStr]; }
UIWebViewのスクロール速度をUIScrollViewと同等にする
機能制限ではなく意図的に遅延させているらしい。
UIWebView *webview; [webview.scrollView setDecelerationRate:UIScrollViewDecelerationRateNormal];
バウンス時に出現する影レイヤを削除する
UIWebViewを領域外へフリックした際に出現するshadowレイヤを隠蔽します。
背景をネイティブに担当、background: transparentなUIWebViewなどに有効。
for (UIView *webview in [[[self subviews] objectAtIndex:0] subviews]) { if ([webview isKindOfClass:[UIImageView class]]) { [webview setHidden:YES]; } }
ついでに背景を透過する。
[webview setOpaque:NO]; [webview setBackgroundColor:[UIColor clearColor]];
クラス化した
- (id)initWithCoder:(NSCoder *)aDecoder { if ( (self=[super initWithCoder:aDecoder]) ) { [self setOpaque:NO]; [self setBackgroundColor:[UIColor clearColor]]; [self.scrollView setDecelerationRate:UIScrollViewDecelerationRateNormal]; for (UIView *webview in [[[self subviews] objectAtIndex:0] subviews]) { if ([webview isKindOfClass:[UIImageView class]]) { [webview setHidden:YES]; } } } return self; }
input要素へのスタイルを適切に作用させる
input { -webkit-appearance: none; }