[iPhone]UISliderのつまみ(thumb)を独自の画像に変更するときの注意
簡単にできたようで出来てなくてちょっとはまったのでメモ
基本的にはメソッドが用意されます。
//setThumbImage //使用例 //speedLevelSliderというUISliderが宣言してあって、Resourceに"sliderThumb.pngがあるとして //sliderThumb.pngはwidth:100px,height:100pxとする //通常状態 [speedLevelSlider setThumbImage:[UIImage imageNamed:@"sliderThumb.png"] forState:UIControlStateNormal]; //つまみをタッチ状態も登録しておかないとデフォルトが表示されちゃう [speedLevelSlider setThumbImage:[UIImage imageNamed:@"sliderThumb2.png"] forState:UIControlStateHighlighted];
これだけで指定した画像につまみが変更される。
が、UISliderをInterfaceBuilderで配置した場合にはこれだけではうまくいかない場合がある。
デフォルトのUISliderのheightは23になるのだけど、自分で用意したつまみ画像の高さが23を超える場合は、はみ出した部分はタッチ領域にならない。
上記の例だとつまみの高さは100pxなので見た目はでかいつまみになっているけど、実機でタッチできる領域は中心の23px分しか反応しないことになる。
InterfaceBuilder上からheightを修正してあげればいいかと思うと、Hの領域だけグレイアウトされていて修正ができない.
なのでframeプロパティを修正して描画領域を書き換えてあげないといけないのでした。
//変更前 //Sliderのx,y座標やwidthはInterfaceBuilderから確認 speedLevelSlider.frame = CGRectMake( 10, 200, 200, 23); //変更後 //(実際は左上基準なので、つまみが大きくなった分、y座標も修正する必要あります) speedLevelSlider.frame = CGRectMake( 10, 200, 200, 100);
/////////////////////////////////////////////////////////////////////////////////////////////////////////
というようなことが下記のブログには、しっかり書かれていましたのですが、、
スライダーバー(UISlider)のカスタマイズ的:いまログ
細かいところが理解できずに結構はまってしまった。。。
Tweet