Egendefinert Visning

Android-tilpasning Jeg kjøpte en klokke i fjor

Android Customization I Bought Watch Last Year



Forord:
Dette er den andre artikkelen i tilpasset visning. Egendefinert visning er et nødvendig ferdighetspunkt for Android-ingeniører å komme videre, så hvis du vil utvikle deg til senioringeniør, må du lære definisjonen Vis, mange sier at tilpasning er vanskeligere, men det er det ikke. Tilpasset visning er bare mer tungvint og krever mer oppmerksomhet, for eksempel: måling, layout, tegning og tegning er nok til at du kan se den i en uke. Det er selvfølgelig også samspill med utsikten, så du må roe deg ned, ikke haste eller utålmodig, og lære steg for steg. La oss tegne et bord for moro skyld.

Se først på gjengivelsene ( Nedenfor tegner vi trinn for trinn for å gjøre det lettere for deg ） ：



bilde

initialisering:



bilde
Kommentaren til er veldig klar, jeg snakker hovedsakelig om denne metoden:



protected void onSizeChanged(int w, int h, int oldw, int oldh)

Denne metoden kalles når visningsstørrelsen endres. Så vi får bredden og høyden her, trenger bare å ta hensyn til de to første parametrene.

Tegn den ytre sirkelen:

Følgende kode blir alle utført i onDraw () -metoden:
bilde
Jeg tror barn som kjenner Canva og Paint må være kjent med API for sirkeltegning. De fire parametrene er:
Senter X-koordinat: mBredde / 2
Y-koordinat for sirkelsenter: mHøyde / 2
Sirkelradius: mRadius
Penselobjekt: mCirclePaint
Dette må ikke forklares ~

Tegn skala og skalaverdi:

bilde

Siden det er for mange kommentarer inne, kan det hende at bildet er litt uklart, det anbefales å zoome inn og se
Det er fet skala og liten skala i tabellen. Den dristige skalaen er timens time. Dette er lettere å forstå. Så har vi 60 skalaverdier på skiven, så jeg bestemte meg for å tegne dem i en løkke. Selvfølgelig vil løkken skille mellom fet og liten skala:

Fet skala : Det er henholdsvis 12,1,2 ... 11 på skiven. Så lenge det er delbart med 5, er skalaen fet. For å si det tydelig er å tegne et linjesegment, vær oppmerksom på denne metoden:

//As shown in Figure 1: The coordinates of point A (mWidth / 2, mHeight / 2-mWidth / 2) Point B (mWidth / 2, mHeight / 2-mWidth / 2 + 60, mDegreePaint) canvas.drawLine(mWidth / 2, mHeight / 2 - mWidth / 2, mWidth / 2, mHeight / 2 - mWidth / 2 + 60, mDegreePaint)

1

For å fremme vår forståelse, la oss ta en titt på bildet:
Android-koordinatsystemet er forskjellig fra det matematiske koordinatsystemet, I android er det øvre venstre hjørnet av innholdsoppsettet koordinatopprinnelsen, det horisontale til høyre er den positive retningen til X-aksen, og den vertikale nedover er den positive retningen til Y-aksen. Som vist i figuren er punkt A-koordinater (mBredde / 2, mHøyde / 2-mBredde / 2) og punkt B (mBredde / 2, mHøyde / 2-mBredde / 2 + 60, mDegreePaint) to punkter som bestemmer en rett linje, bra Dette er den dristige skalaen, og den lille skalaen er den samme, men den er litt kortere og den er allerede veldig detaljert ~

Tegn skalaverdi :

String num = String.valueOf(i / 5) if ('0'.equals(num)) { num = '12' } //Draw time value, X coordinate: radius-half the width of the value text Y coordinate: 90 canvas.drawText(num, mWidth / 2 - mDegreePaint.measureText(num) / 2, mHeight / 2 - mWidth / 2 + 90, mDegreePaint)

Jeg vil ikke snakke om API. Du kan forstå det med et øyeblikk. Vi må tegne teksten fra bunnen av venstre side av teksten, det vil si å sitte ned. Hvorfor forstår du ikke?
bilde
Bare snakk om koordinatene:
O er sentrum av sirkelen
M-punkt er midtpunktet for X-koordinaten til '12' -teksten (du tenker på 12 som en rektangulær rute) M-punktet er midtpunktet på bunnen av den rektangulære ruten
L er den nedre venstre koordinaten jeg nettopp nevnte. Stedet der vi tegner teksten, er nederst og til venstre på 12
H starter fra punkt L, og forbinder LH parallelt med MO
Nå er det lettere å snakke om det: Vårt formål er å finne koordinatene til punkt L?
Sirkelens radius = mBredde / 2
X-koordinat for punkt L = mBredde / 2-LM
Hva er LM? Halvparten av bredden på 12, android har allerede API for å beregne tekstbredden: mDegreePaint.measureText (num)
Y-koordinaten til punkt L er avstanden fra X-aksen, noe som er mer vilkårlig. For eksempel setter vi 90
Så pek L (mBredde / 2-mDegreePaint.measureText (num) / 2, mHøyde / 2-mBredde / 2 + 90)
Er det enkelt?

Noen kan skjelle ut gaten! Du er den første vertikale skalaen, de andre skrå skalaene er også! Skremte meg tett:

Se på koden, å nei! Se på koden:

//Canvas rotation operation: a circle of 360 degrees, there are 60 scale divisions, each 6 degrees, so each rotation is 6 degrees, which is the first parameter of the following method, and the latter two parameters are actually the center of rotation canvas.rotate(6, mWidth / 2, mHeight / 2)

Canvas gir forskyvning, skalering, rotasjon og feilskjæring. Ovenfor brukte vi bare rotasjonsstillingen ~
På denne måten trenger vi bare å kalle denne metoden i for loop, og skalaene tegnes en etter en. Er det ikke veldig glad ~

Tegningspeker:

bilde

Tegn timeviseren:
ta raskt ut klokken du kjøpte i fjor! Trenger det neste!

canvas.rotate((hour * 5*6)+(minute*0.5f),mWidth/2,mHeight/2) canvas.drawLine(mWidth/2,mHeight/2, mWidth / 2, mHeight / 2 - mWidth / 2 + 250, mHourPaint)

Vi vet at timeviseren har blitt rotert i en time, og skanningsvinkelen er: 30 grader = 5 * 6 det vil si 5 skalainndelinger x hver skaleringsgrad
Men dette er alle vinkler som feies hele tiden, hva om vi ikke er hele tiden? For eksempel 5:08 så vi må legge til vinkelen på minuttsveipingen
Tenk deg: hvis vi gjør en revolusjon i løpet av et minutt, skanner timesviseren vår 30 grader, det vil si 0,5 grader / min (timesviseren skanner 0,5 grader per minutt)
Vel, dette er timeshåndsberegningsprosessen!
Deretter er det to API-beskrivelser:
canvas.save (): Før vi utfører nye operasjoner, lagrer vi først tingene vi har tegnet før, det vil si redde staten
canvas.restore (): Det er å gjenopprette operasjonen før save (), beholde den nåværende operasjonen, jeg tror det betyr flette (personlig forståelse)

Minutter og sekunder

//Minute hand canvas.save() canvas.rotate(minute * 6,mWidth/2,mHeight/2) canvas.drawLine(mWidth/2,mHeight/2, mWidth / 2, mHeight / 2 - mWidth / 2 + 150, mMinutePaint) canvas.restore() //Second hand canvas.save() canvas.rotate(second * 6,mWidth/2,mHeight/2) canvas.drawLine(mWidth/2,mHeight/2, mWidth / 2, mHeight / 2 - mWidth / 2 + 100, mSecondPaint) canvas.restore()

Det er relativt enkelt uten forklaring her ~
Sekundhånden vår må oppdateres hvert sekund for å simulere en klokke, så ring postInvalidateDelayed (1000) redraw onDraw ()

Metode beskrivelse:

Vi brukte hovedsakelig rotasjonen av lerretet ovenfor. Selvfølgelig er det andre operasjoner på lerretet:
som for eksempel:
forskyvning (oversette)
zoom (skala)
skjev
Dette er lerretets grunnleggende operasjoner. Hvis du er interessert, kan du google det selv. Tross alt er det mange online opplæringsprogrammer, så jeg vil ikke si mer.

Saksanbefaling:


github-adresse (Hvis du liker det, vær så snill å kysse ~ gi en start takk ~)
bilde