Maccle

iOS 6で UISlider のスライダー用画像の端が角丸にならない場合の対処法

 2013.01.23
約 4 分

uisliderUISlider をカスタムして、スライダーのデザイン(バーとハンドル)を独自のスキン(画像)に置き換えてたものが、iOS 6からちょっとおかしな状態に。

何が問題かというと、スライダーのバー用のイメージとして端の角が丸い画像を使用していたところ、iOS 6では従来のコードだとスライダーのハンドルが左にあればあるほど、バーの左端は角丸じゃなく直角に近くなり、逆もまたしかりになってしまっていた。

そう、ちょうどこんな感じに↓。mQbjC

問題のコード

UISlider *slider = [[UISlider alloc] init];
    
// スライダーの左側
UIImage *imgMinimum = [UIImage imageNamed:@"imgMinimum.png"];
[slider setMinimumTrackImage:imgMinimum forState:UIControlStateNormal];

// スライダーの右側
UIImage *imgMaximum = [UIImage imageNamed:@"imgMaximum.png"];
[slider setMaximumTrackImage:imgMaximum forState:UIControlStateNormal];

// スライダーのハンドル
UIImage *imgHandle = [UIImage imageNamed:@"imgHandle.png"];
[slider setThumbImage:imgHandle forState:UIControlStateNormal];
[slider setThumbImage:imgHandle forState:UIControlStateHighlighted];

これは、バー用の画像をUIImageで生成するときに、”resizableImageWithCapInsets” で常に角丸を維持した状態でイメージをリサイズするよう、UIEdgeInsetsMake関数を使用すれば解決できます。

具体的には以下のように修正することで解決できました。

修正後のコード

UISlider *slider = [[UISlider alloc] init];
    
// スライダーの左側
UIImage *imgMinimum = [[UIImage imageNamed:@"imgMinimum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
[slider setMinimumTrackImage:imgMinimum forState:UIControlStateNormal];

// スライダーの右側
UIImage *imgMaximum = [[UIImage imageNamed:@"imgMaximum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 5)];
[slider setMaximumTrackImage:imgMaximum forState:UIControlStateNormal];

// スライダーのハンドル
UIImage *imgHandle = [UIImage imageNamed:@"imgHandle.png"];
[slider setThumbImage:imgHandle forState:UIControlStateNormal];
[slider setThumbImage:imgHandle forState:UIControlStateHighlighted];

参考 : iPhone Custom UISlider preload and rounded edges issues

About The Author

某IT系なんちゃってエンジニアヨーダ
Apple好きだけど盲目マカーは気持ち悪いと思ってる中道だと思い込んでるしがないダメダメエンジニア。

今もってるApple製品↓
Macbook Pro 15 inch, iMac 27 inch (Late 2009), iPhone 6 Plus, iPad (初代! いらない!)
Follow :

Leave A Reply

*

Comment On Facebook