UISegmentedControlをオリジナルの外観にしよう

最近、結構熱心にXcodeをいじっています。きょうはUISegmentedControlをいじってました。

3、4つ程度の選択肢があるときに適しているUISegmentedControlですが、iOS6以降、UIImageがテクスチャの貼り付けに対応したためアピアランスのカスタマイズができるようになりました。

UIImage *img = [[UIImage imageNamed:@”image”] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 8, 0, 8) resizingMode:UIImageResizingModeTile]

テクスチャ用の画像を用意してUIImageに対して「resizableImageWithCapInsets:  resizingMode:」メソッドを適用すればボタンなどのサイズを変更しても華麗に調整してくれます。

resizableImageWithCapInsetsでテクスチャから切り出す範囲を指定して、resizeingModeで画像による補間をどのように行うかを指定します。UIImageResizingModeTileだと画像をリピートさせます。Macの梨地加工のようにノイズをかけたい時に最適です。UIImageResizingModeStretchだとグラデーションの効果をイメージで適用したい時に使うことになると思います。

下の画像はどちらも同じイメージデータをUIButtonに使用したものですが、ご覧のようにキレイに描画してくれます。

130110_blog4-1 130110_blog4-2

さて、UIButtonの場合はマッピングが割とシンプルなので問題がありません。しかし、UISegmentedControlの場合は少し異なります。

まず、用意しなければいけない画像が5種類あります。以下のような感じです。

ちなみにこちらを参考にしました。ドイツ語のブログですが、サンプルのプロジェクトが入っているので大変参考になります。

まずはUISegmentedControlの端っこに使用する画像。左が「何も選択されていない」状態。右が「選択」された状態。

130110_blog1-1 130110_blog1-2

次にボタンの分割ポイントに表示する画像。左から「左:非選択・右:非選択」、中央が「左:選択・右:非選択」、右が「左:非選択・右:選択」

130110_blog1-3 130110_blog1-4 130110_blog1-5

とりあえずこれらがあれば独自の外観にすることができます。上の画像を色分けしているのはUISegmentedControlのどこに、なんの画像が割り当てられているかわかりやすくするためです。

上の画像を適用したのが以下のの画像です。

130110_blog2-1

130110_blog2-2

130110_blog2-3

真ん中のセグメントでも端っこの画像を元にイメージを作り上げていることが分かります。

あまりカスタマイズする人がいないのか、検索をしても引っかからなかったので備忘録として。

これらのテクスチャを使った方法は小さな画像を用意すれば、レイアウトの変更などがあった時にボタンのサイズを変更しても画像の調整が必要ないという点で便利だと思います。

iPhoneアプリ開発関係の記事はこちらからどうぞ。

広告

“UISegmentedControlをオリジナルの外観にしよう” への 2 件のフィードバック

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中