Verlopen op UIView en UILabels op iPhone

Mogelijk duplicaat:
Handmatig een verloop tekenen in iPhone-apps?

Mijn applicatie moet tekst weergeven in een backgroundColorof UILabelmaar de achtergrond moet een verloop zijn in plaats van een echte UIColor. Het is niet goed om een ​​grafisch programma te gebruiken om het gewenste uiterlijk te creëren, aangezien de tekst kan variëren, afhankelijk van de gegevens die door een server worden geretourneerd.

Weet iemand de snelste manier om dit aan te pakken?
Uw mening wordt zeer op prijs gesteld.


Antwoord 1, autoriteit 100%

Ik realiseer me dat dit een oudere thread is, maar voor toekomstig gebruik:

Vanaf iPhone SDK 3.0 kunnen aangepaste verlopen heel eenvoudig worden geïmplementeerd, zonder subclassificatie of afbeeldingen, met behulp van de nieuwe CAGradientLayer:

UIView *view = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 100)] autorelease];
 CAGradientLayer *gradient = [CAGradientLayer layer];
 gradient.frame = view.bounds;
 gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor whiteColor] CGColor], nil];
 [view.layer insertSublayer:gradient atIndex:0];

Bekijk de CAGradientLayer-documenten. Je kunt optioneel begin- en eindpunten specificeren (voor het geval je geen lineair verloop wilt dat recht van boven naar beneden gaat), of zelfs specifieke locaties die op elk van de kleuren passen.


Antwoord 2, autoriteit 16%

Je kunt Core Graphics gebruiken om het verloop te tekenen, zoals aangegeven in de reactie van Mike. Als een meer gedetailleerd voorbeeld kunt u een backgroundColor-subklasse maken om te gebruiken als achtergrond voor uw UILabel. Overschrijf in die backgroundColor-subklasse de methode drawRect:en voeg code in die er ongeveer als volgt uitziet:

- (void)drawRect:(CGRect)rect 
{
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    CGGradientRef glossGradient;
    CGColorSpaceRef rgbColorspace;
    size_t num_locations = 2;
    CGFloat locations[2] = { 0.0, 1.0 };
    CGFloat components[8] = { 1.0, 1.0, 1.0, 0.35,  // Start color
         1.0, 1.0, 1.0, 0.06 }; // End color
    rgbColorspace = CGColorSpaceCreateDeviceRGB();
    glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);
    CGRect currentBounds = self.bounds;
    CGPoint topCenter = CGPointMake(CGRectGetMidX(currentBounds), 0.0f);
    CGPoint midCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetMidY(currentBounds));
    CGContextDrawLinearGradient(currentContext, glossGradient, topCenter, midCenter, 0);
    CGGradientRelease(glossGradient);
    CGColorSpaceRelease(rgbColorspace); 
}

Dit specifieke voorbeeld maakt een wit, glanzend verloop dat wordt getekend vanaf de bovenkant van de backgroundColornaar het verticale midden. U kunt de backgroundColorvan de backgroundColorinstellen op wat u maar wilt en deze glans wordt over die kleur getrokken. U kunt ook een radiaal verloop tekenen met de functie CGContextDrawRadialGradient.

Je hoeft deze backgroundColoralleen de juiste maat te geven en je UILabeltoe te voegen als een subweergave ervan om het gewenste effect te krijgen.

EDIT (4/23/2009): Op voorstel van St3fan heb ik het frame van de view vervangen door zijn grenzen in de code. Dit corrigeert voor het geval dat de oorsprong van de weergave niet (0,0) is.


Antwoord 3, autoriteit 9%

Opmerking:De onderstaande resultaten zijn van toepassing op oudere versies van iOS, maar bij het testen op iOS 13 vindt de stepping niet plaats. Ik weet niet voor welke versie van iOS de stepping is verwijderd.


Bij gebruik van CAGradientLayer, in tegenstelling tot CGGradient, is het verloop niet vloeiend, maar heeft het merkbare stappen ernaartoe. Zie dit voorbeeld:

Om aantrekkelijkere resultaten te krijgen, is het beter om CGGradientte gebruiken.


Antwoord 4, autoriteit 6%

U kunt ook een grafische afbeelding één pixel breed gebruiken als het verloop en de weergave-eigenschap instellen om de afbeelding uit te breiden om de weergave te vullen (ervan uitgaande dat u denkt aan een eenvoudig lineair verloop en niet een soort radiale gradiënt).

Other episodes