UISlider mit ProgressView kombiniert

Hier ist eine einfache version von dem, was Sie beschreiben.

Es ist "einfach" in dem Sinne, dass ich nicht die Mühe zu versuchen, hinzufügen von Schattierungen und andere Feinheiten. Aber es ist einfach zu bauen, und Sie können zwicken, ziehen Sie in eine subtilere Art und Weise, wenn Sie mögen. Zum Beispiel könnten Sie machen sich Ihr eigenes Bild und nutzen Sie es als Sie den Schieberegler.

Dies ist eigentlich ein UISlider Unterklasse liegen auf der Oberseite eine UIView-Unterklasse, (MyTherm), zieht der thermometer, plus zwei UILabels, dass das ziehen der Nummern.

Den UISlider Unterklasse eliminiert die integrierte track, so dass das thermometer dahinter durchscheint. Aber die UISlider Daumen (Drehregler) ist noch ziehbar in der üblichen Weise, und Sie können ein benutzerdefiniertes Bild, um den Wert Geändert-Ereignis, wenn der Benutzer zieht, und so weiter. Hier ist der code für den UISlider Unterklasse, der beseitigt seine eigene Spur:

- (CGRect)trackRectForBounds:(CGRect)bounds {
    CGRect result = [super trackRectForBounds:bounds];
    result.size.height = 0;
    return result;
}

Dem thermometer ist eine Instanz einer benutzerdefinierten UIView-Unterklasse, MyTherm. Ich instanziiert es in der Spitze und deaktiviert seine Undurchsichtige und gab es eine Hintergrundfarbe, die der Farbe "Clear". Es hat eine value - Eigenschaft, damit er weiß, wie viel zum füllen der thermometer. Hier ist seine drawRect: code:

- (void)drawRect:(CGRect)rect {
    CGContextRef c = UIGraphicsGetCurrentContext();
    [[UIColor whiteColor] set];
    CGFloat ins = 2.0;
    CGRect r = CGRectInset(self.bounds, ins, ins);
    CGFloat radius = r.size.height / 2.0;
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, CGRectGetMaxX(r) - radius, ins);
    CGPathAddArc(path, NULL, radius+ins, radius+ins, radius, -M_PI/2.0, M_PI/2.0, true);
    CGPathAddArc(path, NULL, CGRectGetMaxX(r) - radius, radius+ins, radius, M_PI/2.0, -M_PI/2.0, true);
    CGPathCloseSubpath(path);
    CGContextAddPath(c, path);
    CGContextSetLineWidth(c, 2);
    CGContextStrokePath(c);
    CGContextAddPath(c, path);
    CGContextClip(c);
    CGContextFillRect(c, CGRectMake(r.origin.x, r.origin.y, r.size.width * self.value, r.size.height));
}

Ändern das thermometer Wert, ändern Sie die MyTherm Instanz value eine Zahl zwischen 0 und 1, und sagen, es neu zu zeichnen, sich mit setNeedsDisplay.

InformationsquelleAutor der Antwort matt

Erstellen Sie einen UISlider:

//1
//Make the slider as a public propriety so you can access it
playerSlider = [[UISlider alloc] init];
[playerSlider setContinuous:YES];
[playerSlider setHighlighted:YES];
//remove the slider filling default blue color
[playerSlider setMaximumTrackTintColor:[UIColor clearColor]];
[playerSlider setMinimumTrackTintColor:[UIColor clearColor]];
//Chose your frame
playerSlider.frame = CGRectMake(--- , -- , yourSliderWith , ----);

//2
//create a UIView that u can access and make it the shadow of your slider 
shadowSlider = [[UIView alloc] init];
shadowSlider.backgroundColor = [UIColor lightTextColor];
shadowSlider.frame = CGRectMake(playerSlider.frame.origin.x , playerSlider.frame.origin.y , playerSlider.frame.size.width , playerSlider.frame.origin.size.height);
shadowSlider.layer.cornerRadius = 4;
shadowSlider.layer.masksToBounds = YES;
[playerSlider addSubview:shadowSlider];
[playerSlider sendSubviewToBack:shadowSlider];


//3
//Add a timer Update your slider and shadow slider programatically 
 [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(updateSlider) userInfo:nil repeats:YES];


-(void)updateSlider {

    //Update the slider about the music time
    playerSlider.value = audioPlayer.currentTime; //based on ur case 
    playerSlider.maximumValue = audioPlayer.duration;

    float smartWidth = 0.0;
    smartWidth = (yourSliderFullWidth * audioPlayer.duration ) / 100;
    shadowSlider.frame = CGRectMake( shadowSlider.frame.origin.x , shadowSlider.frame.origin.y , smartWidth , shadowSlider.frame.size.height);

   }

Genießen! P. S. ich hätte einige Tippfehler.

InformationsquelleAutor der Antwort Emile Khattar

Idee 1:
Sie könnte leicht verwenden Sie den UISlider als einen Fortschritt ansehen, indem bilden von Unterklassen. Es reagiert auf Methoden wie 'setValue:animiert:' mit denen können Sie den Wert festlegen, (ich.e: Fortschritt) in der Ansicht.

Ihre einzige 'Einschränkung' zu erschaffen, was Sie sehen in Ihrem Beispiel ist die Puffer-bar, die Sie erstellen, indem Sie 'kreativ' skinning den UISlider (da können Sie benutzerdefinierte skins, um es), und vielleicht, dass die Haut programmgesteuert.

Idee 2:
Eine andere (einfachere) Möglichkeit ist die Unterklasse UIProgressView, und erstellen Sie einen UISlider innen, die Unterklasse. Sie können Haut den UISlider haben eine durchsichtige Haut (keine bar, nur der Knopf ist sichtbar), und legen Sie es über die UIProgressView.

Können Sie die UIProgressView für die pre-laden (buffering) und den UISlider für die Film Steuerung /Fortschritt-Anzeige.

Scheint ziemlich einfach 🙂

Edit: tatsächlich Ihre Frage zu beantworten, es gibt keine in-house way", aber es wäre einfach zu erreichen mit den Werkzeugen gegeben.

InformationsquelleAutor der Antwort Jake

Hinzufügen auf matt ' s Lösung, beachten Sie, dass ab iOS 7.0, Umsetzung trackRectForBounds: unmöglich. Hier ist meine Lösung für dieses problem :

In Ihrem UISlider Unterklasse :

-(void)awakeFromNib
{
    [super awakeFromNib];

    UIImage* clearColorImage = [UIImage imageWithColor:[UIColor clearColor]];
    [self setMinimumTrackImage:clearColorImage forState:UIControlStateNormal];
    [self setMaximumTrackImage:clearColorImage forState:UIControlStateNormal];
}

mit imageWithColor, da diese Funktion :

+ (UIImage*) imageWithColor:(UIColor*)color
{
    return [UIImage imageWithColor:color andSize:CGSizeMake(1.0f, 1.0f)];
}

Dass Sie richtig kümmern sich um diese lästige trackRectangle.

Ich verbrachte zu viel Zeit mit der Suche nach einer Lösung für dieses problem, hier ist der Hoffnung, dass Sie einige Zeit, um eine andere Arme Seele ;).

InformationsquelleAutor der Antwort CyberDandy