UIWebViewにオリジナルの小さな操作ボタンをつける

UIWebViewに戻るボタンや更新ボタンをつける予定です。こういう場合、UIToolBarをUIWebViewの下だか上だかに配置してそこにボタンを並べるのが一般的だと思うのですが、あえてそうはしません。というのは、UIToolBarはスペースをとり過ぎるからです。今つくっているアプリにはタブがあるので、そこにさらにツールバーがのっかると、広告を表示するスペースがなくなってしまい収益化が困難になってしまうという大問題が発生します。（広告なんて邪魔なだけと思う人もいるかもしれませんが、開発者にとっては重要です。収益があがらなかったら開発を続けることができません！）

Androidアプリの場合は、電話機のメニューボタンが押されたときに「戻る」とか「更新」とかメニューを表示してやればいいので普段は画面のスペースを占拠せずに機能を実装することができるのですが、iPhoneアプリではこれができないので、画面のどこかにボタンを表示してやらなければなりません。なるべく小さく表示したいと思います。Mercuryというブラウザアプリで全画面機能をつかっているときに、ボタンがUIWebView内部の下の方に、ちっちゃなボタンが並ぶのですが、だいたいそんなイメージです。

実現する方法としては、二つほど考えられます。

1. 背景の透明なUIToolbarをつくって、そこにボタンを並べる
2. UIWebViewの上に直接ボタンを並べる

背景な透明なUIToolbarを利用する場合の懸念点は、透明ではあってもツールバーが存在する領域がユーザーを惑わすことにならないかということです。たとえば、ボタンとボタンの間に十分にスペースがあるように見えるために、ユーザーがそこでリンクをクリックしようとするかもしれません。特に、デバイスを横向きにしたときにはそうです。

それに対して、UIWebViewの上に直接ボタンを並べる方法には、懸念すべき点があまりありません。スクリーンの向きを変えたときのアニメーションが変になるかもしれないということぐらいでしょうか。実装するのはこちらの方が時間がかかりそうですが、この方法で行きたいと思います。

まず、ボタンの画像を粗くつくって、その後それをつかって機能を実装。それからボタン画像の完成度を高めるという手順で、今日中に完了させたいです。

アイコンはいつもInkscapeというソフトで作成しています。
必要なのは、戻るボタン、進むボタン、更新ボタン、中止ボタン、メニュー表示ボタン、以上の５つです。
画像大きさはだいたい20px（ratina用は40px）くらいで良さそうです。半透明の灰色のボタン枠をつくって、それを白で切り抜くということにします。選択状態のときの画像などは、デフォルトの挙動に任せます。
アイコンはいつも無料のInkscapeでつくるのですが、PNGで出力する画像全体を透明にする方法がよく分からないので、この部分はGIMPで処理した方が良いかもしれません。

＊透過画像をGIMPでつくるのではなく、UIButtonにalphaをしてしてやれば済む話かもしれません。UIBarButtonItemにはalphaを指定できませんが、UIButtonなら可能です。（ちなみにUIBarButtonItemの親クラスは、UIButtonではなくてUIBarItemです。）