Paint i Android: vad är det, konfigurationsmetoder och hur det fungerar

Vad är Paint i Android?

Paint — en klass från paketet android.graphics som lagrar alla stilinställningar för ritoperationer på Canvas. Den innehåller inte själva pixlarna, utan bestämmer hur linjer, former och text kommer att se ut. Varje anrop av Canvas-metoder — drawCircle, drawLine, drawText — använder Paint för tolkning av den visuella representationen.

Paint fungerar enligt principen för ett konfigurationsobjekt. Du skapar en instans, ställer in parametrarna en gång och återanvänder den för flera operationer. Detta minimerar antalet allokeringar i ritloopen och ökar prestandan med upp till 30% jämfört med att skapa ett nytt objekt varje bildruta. Enligt Google I/O 2024 är optimering av Paint en av nyckelpraxis för att uppnå 60 FPS i anpassad grafik.

Alla Paint-inställningar delas in i flera kategorier: färg och genomskinlighet, kontur- och fyllningsstil, arbete med text och typsnitt, oskärpe- och maskeringseffekter. Varje kategori hanteras av separata setter-metoder som kan kombineras i valfria kombinationer. Detta gör Paint API flexibelt, men kräver förståelse för parameterinteraktion — till exempel påverkar Style om Shader tillämpas på konturen eller fyllningen.

Färg och genomskinlighet i Paint

setColor — huvudmetoden för att ställa in färg för alla efterföljande ritoperationer. Färgen skickas i ARGB-format (32-bitars heltal), där de översta 8 bitarna är alfakanalen och resten är röda, gröna och blå kanaler. Värdet 0xFF0000FF ställer in ogenomskinlig blå färg.

Hantera alfakanalen

Metoden setAlpha gör det möjligt att oberoende reglera genomskinligheten i intervallet 0 (helt genomskinlig) till 255 (helt ogenomskinlig). Till skillnad från att specificera alfa i setColor påverkar denna metod inte den redan inställda färgtonen — den modulerar bara den allmänna genomskinligheten. Detta är praktiskt för animationer av att element visas och försvinner utan färgändring.

ColorFilter för färgkorrigering

ColorFilter — mekanism för färgtransformering av varje pixel före ritning. Tre lägen stöds: LightingColorFilter för multiplikation och addition av kanaler, PorterDuffColorFilter för överlagring med blandningslägen och ColorMatrixColorFilter för full matristransformering. ColorFilter tillämpas efter Shader, men före utmatning till Canvas.

För de flesta uppgifter räcker standard setColor eller setAlpha. ColorFilter används främst för effekter av avfärgning, sepia eller invertering. Användning av ColorFilter ökar GPU-belastningen, därför rekommenderar Google att minimera användningen i cykliska anrop av onDraw.

Stil och linjetjocklek

Metoden setStyle accepterar ett av tre värden för Paint.Style: FILL (fyllning), STROKE (kontur) eller FILL_AND_STROKE (samtidigt). Av stilvalet beror om figuren visas som siluett, som skelett eller som kontur med inre fyllning. Som standard skapas Paint med stilen FILL.

Linjetjocklek och förbindelser

setStrokeWidth ställer in linjetjockleken i pixlar för STROKE-läget. För rundade former och rundade hörn används setStrokeCap (Cap.ROUND, BUTT, SQUARE) och setStrokeJoin (Join.MITER, ROUND, BEVEL). Dessa parametrar påverkar kritiskt utseendet på diagram, banor och ramar i anpassade View.

Vid tjocklek mindre än 1 pixel ritas linjen med subpixelprecision, men kan se suddig ut på skärmar med låg densitet. För Android Retina-skärmar använd TypedValue.applyDimension för omvandling av dp till pixlar. En tjocklek på 2 dp ger tydlig synlighet på de flesta enheter.

Skrafferingsmönster (DashPathEffect)

DashPathEffect skapar streckade och punkterade linjer. Konstruktorn accepterar en array av längder av växlande streck och mellanrum och en initial fasförskjutning. Till exempel skapar arrayen [10, 5, 3, 5] en linje med ett långt streck, kort mellanrum, kort streck och mellanrum. Denna effekt används aktivt i grafiska redigerare och annoteringsverktyg.

Kombinering av stilar sker via setPathEffect. Genom att kombinera CornerPathEffect, DashPathEffect och DiscretePathEffect kan komplexa visuella linjer skapas för diagram, bildtexter och dekorativa element. Varje PathEffect beräknas på CPU, därför rekommenderas i animationer med många linjer att förrasterisera effekten till Bitmap.

val paint = Paint().apply {
    setStyle(Paint.Style.STROKE)
    setStrokeWidth(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2f, resources.displayMetrics))
    setPathEffect(DashPathEffect(floatArrayOf(10f, 5f, 3f, 5f), 0f))
}

Typsnitt och textrendering

Typeface — objekt som bestämmer typsnittet för alla textoperationer i Paint. Android stöder systemtypsnitt (Roboto, Noto Sans), anpassade typsnitt från assets-resurser och typsnitt som laddas via Downloadable Fonts API. Inställning av Typeface görs via setTypeface på Paint-instansen.

Textstorlek och radavstånd

Metoden setTextSize ställer in teckenstorleken i pixlar. För korrekt visning på olika skärmar rekommenderas att ange storleken i sp med TypedValue.applyDimension. Radavståndet regleras via setTextScaleX för horisontell sträckning och ingår i det inbyggda stödet för MultiLine-text via Canvas.drawText.

För textjustering används setTextAlign med värdena LEFT, CENTER och RIGHT. Vid CENTER blir x-koordinaten som skickas till drawText textens mittpunkt — detta är särskilt praktiskt för bildtexter under ikoner och rubriker inuti former. För exakt positionering används metoderna measureText och getTextBounds, som returnerar textens bredd och begränsningsrektangel.

Understrykning och genomstrykning

setUnderlineText och setStrikeThruText aktiverar understrykning respektive genomstrykning. Dessa parametrar fungerar på typsnittsnivå och tillämpas på all text som ritas av den aktuella Paint. För flexibel formatering av olika delar av samma rad, använd separata Paint-objekt med olika inställningar eller växla parametrar mellan drawText-anrop.

Gradienter och avancerade effekter

Shader — basklass för att fylla former med gradienter, bitmappstexturer och kompositer. Via metoden setShader kan vilken som helst av underklasserna tilldelas: LinearGradient, RadialGradient, SweepGradient, BitmapShader eller ComposeShader. Shader ersätter färgen som ställts in av setColor och tillämpas på alla ritade element.

Linjära och radiella gradienter

LinearGradient skapar en mjuk övergång mellan två eller flera färger längs en rak linje. Konstruktorn accepterar start- och slutpunkter, en array av färger och deras positioner (plattläge). Plattläget bestämmer beteendet utanför gradienten: CLAMP (upprepning av sista färgen), MIRROR (spegling) eller REPEAT (upprepning). LinearGradient används aktivt för bakgrundsfyllningar och förloppsindikatorer.

RadialGradient skapar en cirkulär gradient från mitten till kanterna. Mitten bestäms av koordinater, radien definierar färgövergångszonen. Utseendet av en radiell gradient påminner om belysning från en punktkälla — detta används ofta för simulering av knappglöd och belysning av aktiva element.

Oskärpa och skuggor (BlurMaskFilter)

BlurMaskFilter lägger till en oskärpeeffekt runt ritade element. Konstruktorn accepterar oskärperadie och stil: NORMAL (oskärpa i alla riktningar), INNER (endast inuti formen), OUTER (endast utanför) och SOLID (form + extern oskärpa). BlurMaskFilter fungerar med alla typer av Paint och används ofta för att skapa skuggor och glödeffekter.

val paint = Paint().apply {
    setShader(LinearGradient(
        0f, 0f, width, height,
        intArrayOf(Color.RED, Color.BLUE),
        null,
        Shader.TileMode.CLAMP
    ))
    setMaskFilter(BlurMaskFilter(20f, BlurMaskFilter.Blur.NORMAL))
}

Exempel på användning av Paint med Canvas

Låt oss titta på ett komplett exempel på en anpassad View som ritar en cirkel med gradientfyllning och textbildtext. Kombinationen av Paint och Canvas gör det möjligt att skapa komplex grafik med minimal kod. Alla inställningar har flyttats till initiering för prestanda.

class GradientCircleView@JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null
) : View(context, attrs) {

    private val fillPaint = Paint().apply {
        setShader(RadialGradient(
            0f, 0f, 200f,
            intArrayOf(Color.CYAN, Color.DKGRAY),
            null, Shader.TileMode.CLAMP
        ))
    }

    private val textPaint = Paint().apply {
        setColor(Color.WHITE)
        setTextSize(TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_SP, 24f, resources.displayMetrics
        ))
        setTextAlign(Paint.Align.CENTER)
        setMaskFilter(BlurMaskFilter(5f, BlurMaskFilter.Blur.NORMAL))
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawCircle(200f, 200f, 150f, fillPaint)
        canvas.drawText("Gradient", 200f, 210f, textPaint)
    }
}

I koden används två separata Paint-objekt: ett för att fylla cirkeln med radiell gradient, det andra för text med skugga via BlurMaskFilter. En sådan separation gör det möjligt att oberoende konfigurera parametrar och undvika återställning av Paint-status mellan ritning av olika elementtyper. För ökad prestanda skapas båda Paint i konstruktorn, inte i onDraw.

Vid skalning på enheter med olika pixeltäthet måste storleksvärdena beräknas om via TypedValue.applyDimension. Utan detta kommer text och gradient att se olika ut på mdpi och xxxhdpi-skärmar. I exemplet är textstorleken inställd i sp, vilket automatiskt anpassar sig till användarens systeminställningar för teckenstorlek.