.-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 comment(-) trackback(-)
.05 2009

カスタムスライダの作成

Tasaki です。

前回のエントリでロック解除スライダを自作してみましたが、標準のつまみは小さくて非常につまみにくいですよね。
そこで今回は、つまみや背景の画像を置き換えたカスタムスライダを作成する方法を紹介していこうと思います。

まず初めに、スライダを構成する画像は、つまみとつまみの左右の軌道の3点が必要です。またオプションとして、スライダの左右両端にそれぞれ最小値、最大値を表す画像を表示することもできます。

つまみ画像は以下のメソッドで置き換えることができます。
- ( void ) setThumbImage:( UIImage *) image forState:( UIControlState ) state;

image に画像オブジェクトを与えます。state は UIControl のサブクラスに共通の、指定した画像を適用する場合のコントロールの状態です。とりあえず、UIControlStateNormal の場合だけでも設定しておけばいいでしょう。

次に軌道画像についてですが、つまみにオリジナルの画像を設定した段階で標準の軌道は表示されなくなりますので、これも必ず用意しておく必要があります。
軌道画像は以下の2つのメソッドを用いて設定します。
- ( void ) setMinimumTrackImage:( UIImage *) image forState:( UIControlState ) state;
- ( void ) setMaximumTrackImage:( UIImage *) image forState:( UIControlState ) state;

ご覧になってお分かりのように、引数はつまみの場合と全く同じです。
なお、setMinimum... はつまみの左側に表示される部分、setMaximum... はつまみの右側に表示される部分の画像を指定します。
また、軌道画像はスケーリングされますので、角を丸くしている場合などは strechableImageWithLeftCapWidth:topCapHeight: を使って表示がおかしくならないようにしておきましょう。

これだけでスライダの見た目を変えることができるわけですが、標準のロック解除スライダのように、つまみが軌道の内側に表示されるようにする場合には、これだけだと不十分です。やってみると分かりますが、つまみの位置が軌道の中央部分を通ってくれません。

これを実現するためには、UISlider のサブクラスを定義し、その中でこれらのメソッドをオーバーライドして、返り値に適切な値を渡す必要があります。
- ( CGRect ) trackRectForBounds:( CGRect ) bounds;
- ( CGRect ) thumbRectForBounds:( CGRect ) bounds trackRect:( CGRect ) track value:( float ) value;

前者は軌道の描画領域を、後者はつまみの描画領域を返します。
引数についてですが、bounds は、スライダ自身の bounds プロパティ、track は軌道の描画領域を、value はスライダの現在の値を示します。

今回はつまみの中心が軌道の中心を横切るようにするだけなので、trackRectForBounds: は無理に実装する必要はありません。

つまみの幅を thumbWidth、つまみの高さを thumbHeight、軌道のフレーム部分の幅を frameWidth とした場合は、以下のように書くことができます。
- ( CGRect ) thumbRectForBounds:( CGRect ) bounds trackRect:( CGRect ) track value:( float ) value {
CGFloat x = frameWidth + ( CGRectGetWidth( track )- thumbWidth - frameWidth * 2.0f )* value;
return CGRectMake( x, frameWidth, thumbWidth, thumbHeight );
}


まだ試していませんが、これらのメソッドを上手く使うことで、縦のスライダや斜めのスライダなんかも作れると思います。

関連記事
スポンサーサイト

Comment

Post comment

  • comment
  • secret
  • 管理者にだけ表示を許可する

Trackback

trackbackURL:http://appteam.blog114.fc2.com/tb.php/71-57c11d1d

ブログ内検索

関連リンク

製品情報

最新記事

カテゴリ

プロフィール

neoxneo



NEXT-SYSTEM iOS Developers Blog


  • UTO:
    カナダ版iPhone4Sは、マナーモードでシャッター音がならない…


  • Ehara:
    ...


  • Hayate:
    ...


  • Tasaki:
    Developer登録完了...したのはいいけど


  • Ueda:
    ...



リンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。