webentwicklung-frage-antwort-db.com.de

Ändern Sie das Bild der iPhone UISlider-Leiste

Ich verwende eine UISlider in meiner App, möchte aber ein benutzerdefiniertes "Look-and-Feel" dafür verwenden. Ich habe den Daumen zu meinem eigenen Bild geändert, aber gibt es eine Möglichkeit, die Leiste auch zu ändern? Ich habe ein Balkenbild, das ich gerne verwenden würde, kann aber nicht sehen, wie das geht.

Ich habe herausgefunden, wie man das Max- und Min-Bild ändert, aber nicht die Leiste selbst.

iosobjective-ciphoneimageuislider
31
Fogmeister

Sie hatten Recht, -setMinimumTrackImage:forState:- und -setMaximumTrackImage:forState:-Methoden zu verwenden. Was Sie verpasst haben, ist, dass Sie ihnen dehnbare UIImage zur Verfügung stellen sollten.

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];

Sie können dasselbe Bild für die minimalen und maximalen Teile verwenden.

60
Costique

Die einfachste Lösung wäre, einen UIImage hinter dem Steuerelement wiederzugeben, um die Spur darzustellen. Der Daumenknopf kann geändert werden mit:

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

Ein Nebeneffekt ist, dass der Track nur dann gerendert wird, wenn Sie Ihren eigenen angeben. In Kombination mit dem UIImage erhalten Sie einen benutzerdefinierten UISlider, ohne dass Sie irgendetwas unterordnen müssen.

25
Stephen Melvin

Alles auf moderne Weise zusammenstellen

Wenn Sie den UISlider in einem Storyboard definieren, befindet sich der Slider am besten in der Unterklasse der Ansicht. In awakeFromNib können Sie die linke und rechte Spur der Schaltfläche ändern.

Dieser Aufruf ist in iOS 5 stretchableImageWithLeftCapWidth:topCapHeight: veraltet.

- (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: ist seit iOS 5.0 veraltet. Die Dokumente geben an, stattdessen die Eigenschaft 'capInsets' zu verwenden. Hier ist eine einfache Möglichkeit, dies zu tun:

Erstellen Sie drei Bilder, die minimale (linke) Spur, die maximale (rechte) Spur und den Daumen. Nehmen Sie für dieses Beispiel an, dass die minimalen und maximalen Spurbilder 34p x 18p sind. min track und das: enter image description here.

Erstellen Sie die Bilder wie gewohnt:

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

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

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

Für meine 18 Punkte breiten Bildbeispiele kann der innere Punkt auf der linken und rechten Seite entsprechend der Spur gedehnt werden, aber die Enden sollten nicht dehnbare Kappengrößen aufweisen, die 17 Punkte breit sind (daher capInsets):

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

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

Stellen Sie dann die Bilder wie gewohnt auf Ihrem UISlider ein:

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

 enter image description here

Hier können Sie ein Spurbild hinzufügen, das nicht gestreckt ist, sodass Sie z. eine Keilform im Hintergrund, wie es vom OP verlangt wurde:

Swift 3.0:

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

Wichtig: Stellen Sie sicher, dass die Breite Ihres Schiebereglers genau der Breite des Bildes entspricht!

2
Dorian Roy

Sie müssen die Unterklasse UISlider und überschreiben:

- (CGRect)trackRectForBounds:(CGRect)bounds

Diskussion Sie sollten dies nicht nennen Methode direkt. Wenn du möchtest Passen Sie das Spurrechteck an Überschreiben Sie diese Methode und geben Sie eine .__ zurück. anderes Rechteck. Das zurückgegebene Rechteck wird zum Skalieren der Spur verwendet und Daumenbilder während des Zeichnens.

1
willcodejavaforfood

Ich mache das zwar, aber die hintere Leiste wird in iOS 5.1 nicht perfekt angezeigt, in iOS 6.0 jedoch die Anzeige 

hier ist mein code 

 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