セグメント

iTunesやAppStoreで良く見かけたのですが、iOS6リリースに伴うリニューアルによって、あまり見られなくなりましたね。
それでも、カレンダーなどで目にする機会は多々あります。
サブメニュー的に使われることの多いボタンです。
ラジオボタンのようなものでしょうか。

オリジナル画像サイズ詳細

使われ方によっていろいろな画像が用意されています。



参考にして下さい。

テーマ構成ファイル一覧 & オリジナル画像

テーマ名/UIImages/
UISegmentBarBlackButton@2x.png

(24×60)


UISegmentBarBlackButtonHighlighted@2x.png

(24×60)


UISegmentBarBlackDivider@2x.png

(2×60)


UISegmentBarBlackDividerHighlighted@2x.png

(2×60)


UISegmentBarBlackMiniButton@2x.png

(20×48)


UISegmentBarBlackMiniButtonHighlighted@2x.png

(20×48)


UISegmentBarBlackMiniDivider@2x.png

(2×48)


UISegmentBarBlackMiniDividerHighlighted@2x.png

(2×48)


UISegmentBarButton@2x.png

(24×60)


UISegmentBarButtonHighlighted@2x.png

(24×60)


UISegmentBarDivider@2x.png

(2×60)


UISegmentBarDividerHighlighted@2x.png

(2×60)


UISegmentBarMiniButton@2x.png

(20×48)


UISegmentBarMiniButtonHighlighted@2x.png

(20×48)


UISegmentBarMiniDivider@2x.png

(2×48)


UISegmentBarMiniDividerHighlighted@2x.png

(2×48)


UISegmentBarPopoverButton@2x.png

(26×60)


UISegmentBarPopoverButtonHighlighted@2x.png

(26×60)


UISegmentBarPopoverDivider@2x.png

(2×60)


UISegmentBarPopoverDividerHighlighted@2x.png

(2×60)


UISegmentBorderedButton@2x.png

(44×88)


UISegmentBorderedButtonHighlighted@2x.png

(44×88)


UISegmentBorderedDivider@2x.png

(2×88)


UISegmentBorderedDividerHilightedLeft@2x.png

(12×88)


UISegmentBorderedDividerHilightedRight@2x.png

(12×88)


UISegmentButton@2x.png

(44×88)


UISegmentButtonHighlighted@2x.png

(44×88)


UISegmentDivider@2x.png

(2×88)


UISegmentDividerHilightedLeft@2x.png

(12×88)


UISegmentDividerHilightedRight@2x.png

(12×88)


UISegmentOptionsBackground@2x.png

(2×88)


UISegmentOptionsButton@2x.png

(22×60)


UISegmentOptionsButtonBlackTranslucent@2x.png

(22×60)


UISegmentOptionsButtonBlue@2x.png

(22×60)


UISegmentOptionsButtonSelected@2x.png

(22×60)


UISegmentOptionsButtonSelectedBlackTranslucent@2x.png

(22×60)


UISegmentOptionsButtonSelectedBlue@2x.png

(22×60)


UISegmentOptionsDivider@2x.png

(2×60)


UISegmentOptionsDividerBlackTranslucent@2x.png

(2×60)


UISegmentOptionsDividerBlue@2x.png

(2×60)


UISegmentOptionsDividerSelected@2x.png

(2×60)


UISegmentOptionsDividerSelectedBlackTranslucent@2x.png

(2×60)


UISegmentOptionsDividerSelectedBlue@2x.png

(2×60)


UISegmentTexturedButtonHighlightedCenter@2x.png

(92×92)


UISegmentTexturedButtonHighlightedLeftCap@2x.png

(18×92)


UISegmentTexturedButtonHighlightedRightCap@2x.png

(18×92)


UISegmentTexturedButtonSelectedCenter@2x.png

(92×92)


UISegmentTexturedButtonSelectedHighlightedCenter@2x.png

(92×92)


UISegmentTexturedButtonSelectedHighlightedLeftCap@2x.png

(18×92)


UISegmentTexturedButtonSelectedHighlightedRightCap@2x.png

(18×92)


UISegmentTexturedButtonSelectedLeftCap@2x.png

(18×92)


UISegmentTexturedButtonSelectedRightCap@2x.png

(18×92)


UISegmentTexturedDivider@2x.png

(2×92)


UISegmentTexturedHighlightedDivider@2x.png

(2×92)


UISegmentTexturedSelectedDivider@2x.png

(2×92)


UISegmentTexturedSelectedHighlightedDivider@2x.png

(2×92)


<注意>
"Divider"と名のつく画像は幅2pxですが、背景画像ではないので伸ばしていません。
テクスチャー画像がどこで使われているか分かりません。

ページトップへ

作ってみた

オリジナルデザインをそのままに、カラーバリエーションを増やしてみました。

<注意>
今回も変更がありませんので、iPhone4からの使い回しによる再検証です。
そのままwinterboardで適用できるファイル構成にはしていますが、Retinaディスプレイではないデバイスで適用するときは、リサイズして下さい。


boke_brown_segment.zipのダウンロード


boke_green_segment.zipのダウンロード


boke_lightblue_segment.zipのダウンロード


boke_orange_segment.zipのダウンロード


boke_pink_segment.zipのダウンロード


boke_red_segment.zipのダウンロード


boke_violet_segment.zipのダウンロード


boke_yellow_segment.zipのダウンロード

ページトップへ

2012/12/21