web-dev-qa-db-ja.com

iPhone UISliderバーの画像を変更する

アプリでUISliderを使用していますが、カスタムの「ルックアンドフィール」を使用したいと思います。親指を自分の画像に変更しましたが、バーも変更する方法はありますか？使用したいバーのイメージがありますが、これを行う方法がわかりません。

最大および最小画像を変更する方法を見つけましたが、バー自体は変更しませんでした。

iosobjective-ciphoneimageuislider
31
Fogmeister

あなたは-setMinimumTrackImage:forState:および-setMaximumTrackImage:forState:メソッド。あなたが見逃したのは、ストレッチ可能なUIImageを提供する必要があるということです。残りは自動的に処理されます：

UIImage *sliderLeftTrackImage = [[UIImage imageNamed: @"SliderMin.png"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0];
UIImage *sliderRightTrackImage = [[UIImage imageNamed: @"SliderMax.png"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0];
[mySlider setMinimumTrackImage: sliderLeftTrackImage forState: UIControlStateNormal];
[mySlider setMaximumTrackImage: sliderRightTrackImage forState: UIControlStateNormal];

最小部分と最大部分の両方に同じ画像を使用できます。

60
Costique

最も簡単な解決策は、トラックを表すためにコントロールの背後にUIImageをレンダリングすることです。サムノブは次の方法で変更できます。

[mySlider setThumbImage:[UIImage imageNamed:@"thumb_image.png"] forState:UIControlStateNormal];

これの副作用は、トラックを提供しない限り、トラックがレンダリングされないことです。これをUIImageと組み合わせると、サブクラス化することなくカスタムUISliderが提供されます。

25
Stephen Melvin

すべてを現代的な方法でまとめる

ストーリーボードでUISliderを定義する場合、スライダーをスタイルする最適な場所はビューのサブクラスです。 awakeFromNibでは、ボタン、左右のトラックを変更できます。

この呼び出しはiOS 5で非推奨ですstretchableImageWithLeftCapWidth:topCapHeight:

- (void)awakeFromNib
{
    [super awakeFromNib];

    UIImage *thumbImage = [UIImage imageNamed:@"slider-button"];
    [self.slider setThumbImage:thumbImage forState:UIControlStateNormal];

    UIImage *sliderLeftTrackImage = [UIImage imageNamed: @"slider-fill"];
    sliderLeftTrackImage = [sliderLeftTrackImage resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeStretch];
    UIImage *sliderRightTrackImage = [UIImage imageNamed: @"slider-track"];
    sliderRightTrackImage = [sliderRightTrackImage resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeStretch];
    [self.slider setMinimumTrackImage:sliderLeftTrackImage forState:UIControlStateNormal];
    [self.slider setMaximumTrackImage:sliderRightTrackImage forState:UIControlStateNormal];
}
7
Cameron Lowell Palmer

stretchableImageWithLeftCapWidth：はiOS 5.0以降廃止されました。ドキュメントでは、代わりに「capInsets」プロパティを使用するように指示されています。これを行う簡単な方法を次に示します。

3つの画像、最小（左）トラック、最大（右）トラック、およびサムを作成します。この例では、最小トラック画像と最大トラック画像が次のような34p H x 18p Wであると仮定します。 min track この： enter image description here。

通常どおりに画像を作成します。

UIImage *thumbImage = [UIImage imageNamed:@"sliderThumb.png"];

UIImage *sliderMinTrackImage = [UIImage imageNamed: @"sliderMin.png"];

UIImage *sliderMaxTrackImage = [UIImage imageNamed: @"sliderMax.png"];

私の18ポイント幅の画像の例では、左右の内側のポイントをトラックに合わせて引き伸ばすことができますが、端は17ポイント幅の伸縮不可能なキャップサイズでなければなりません（したがってcapInsets）：

sliderMinTrackImage = [sliderMinTrackImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, 17, 0, 0)];

sliderMaxTrackImage = [sliderMaxTrackImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 17)];

次に、UISliderで画像を常に設定します。

[slider setThumbImage:thumbImage forState:UIControlStateNormal];
[slider setMinimumTrackImage:sliderMinTrackImage forState:UIControlStateNormal];
[slider setMaximumTrackImage:sliderMaxTrackImage forState:UIControlStateNormal];
4
Scotty

enter image description here

以下は、ストレッチされていないトラック画像を追加する方法です。 OPが尋ねたように、背景にくさび形：

Swift 3.0：

let trackImg = image.resizableImage(withCapInsets: .zero, resizingMode: .tile)
slider.setMinimumTrackImage(trackImg, for: .normal)
slider.setMaximumTrackImage(trackImg, for: .normal)

重要：スライダーの幅が画像の幅と正確に同じであることを確認してください！

3
Dorian Roy

サブクラス ISlider をオーバーライドし、オーバーライドする必要があります。

- (CGRect)trackRectForBounds:(CGRect)bounds

ディスカッションこのメソッドを直接呼び出さないでください。トラックの四角形をカスタマイズする場合は、このメソッドをオーバーライドして別の四角形を返すことができます。返された長方形は、描画中にトラックとサムの画像を拡大縮小するために使用されます。

1
willcodejavaforfood

私はこれをやっていますが、iOS 5.1ではバックバーが完全に表示されませんが、iOS 6.0では表示されます

ここに私のコードがあります

 UIImage *stetchLeftTrack = [[UIImage imageNamed:@"spectrum_horizontal_bar.png"]
                                stretchableImageWithLeftCapWidth:15.0 topCapHeight:0.0];
 UIImage *stetchRightTrack = [[UIImage imageNamed:@"spectrum_horizontal_bar.png"]
                                 stretchableImageWithLeftCapWidth:15.0 topCapHeight:0.0];
 [self.slider_Sprectrum setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
 [self.slider_Sprectrum setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];
0
Dk Kumar