UIWebViewでiOSインターフェースを構築する

ためにいろいろと調査した結果ログ。

UIWebViewでつくるUI

よくまとまってた。

長押しでの選択を無効にする

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;
}