Hvordan lage "Look" for din Android App med Java-dummies

En generell retningslinje i Android app utvikling forteller deg å skille logikk fra presentasjon. I mindre tekniske termer advarer retningslinjene mot å forvirre hva en app gjør med hvordan en app ser ut. Retningslinjen gjelder for mange aspekter av livet. For eksempel, hvis du designer et nettsted, har kunstnere layoutet og har geeks gjør kodingen. Hvis du skriver en rapport, få ideene skrevet først. Senere kan du bekymre deg om skrifttyper og stykkstiler.

Litteraturen om apputvikling beskriver spesifikke teknikker og rammer for å hjelpe deg å skille form fra funksjon.

For å legge til knapper, bokser og andre godbiter til appen din, gjør du følgende:

1. Start Android Studio og start et nytt prosjekt. Når du er ferdig med disse trinnene, har du et helt nytt prosjekt med en tom aktivitet. Prosjektet vises i Android Studio hovedvindu.
2. I det nye prosjektets app / res / layout gren (i hovedvinduets prosjektverktøy-vindu), dobbeltklikk activity_main. xml . Som et resultat viser Android Studio Designerverktøy innholdet i activity_main. xml . Designerverktøyet har to moduser: Designmodus for dra-og-slipp-visuell redigering og tekstmodus for XML-kode redigering. Så bunnen av Designer-verktøyet har to faner: Et design-faneblad og en tekstfane.
3. Klikk kategorien Design.

   

   I designmodus ser du paletten, komponenttreet, to forhåndsvisningsskjermbilder og Egenskaper-panelet.

   Hvis du ikke ser paletten, let etter den lille paletten på venstre kant av Designer-verktøyet. Hvis du klikker på knappen, skal paletten vises.

   Komponenttreet har en gren merket TextView - "Hello World! " Denne grenen representerer teksten Hello World! som vises automatisk som en del av appen din. Du trenger ikke denne teksten i appen din.

4. Velg kategorien TextView - "Hei verden!" i komponenttreet, og trykk deretter på Slett. Branchen "Hello World" forsvinner fra komponenttreet, og ordene Hello World! forsvinner fra forhåndsvisningsskjermen.

   De neste trinnene fører deg gjennom etableringen av appen.

   

   Appens oppsett har tre forskjellige typer komponenter, og hver type komponent går av flere forskjellige navn. Her er de tre komponentene:
   • EditText (også kjent som vanlig tekst): Et sted hvor brukeren kan redigere en enkelt tekstlinje. Et vanlig navn for denne typen komponent er et tekstfelt.
   • Knapp : En knapp er en knapp er en knapp. Vil du klikke på knappen? Gå rett fram og klikk på den.
   • Tekstvisning (også kjent som vanlig tekstvisning, stor tekst, middels tekst osv.): Et sted hvor appen viser tekst. Normalt redigerer brukeren ikke teksten i en TextView komponent.

     Komponenter til komponentene er ikke helt forskjellige, for å være smertefullt nøyaktig, er komponentene til EditText , Button og TextView . Hver EditText komponent er en slags TextView , og hver Button er også en slags TextView . I språket for objektorientert programmering utvider klassen EditText klassen TextView . Klassen Button utvider også klassen TextView .

5. Dra en vanlig tekst (det vil si EditText ) fra palettets Widgets-gruppe til en av forhåndsvisningsskjermene. Objektet Vanlig tekst kan lande i et styggt utseende. Det er ok. Du lager ikke et kunstverk. Du lærer å skrive Java-kode.
6. Gjenta trinn 5, denne gangen legger du et knappelement på forhåndsvisningsskjermen. Sett Knapp-komponenten under komponenten Vanlig tekst (EditText). Senere, hvis du ikke liker hvor du legger på Knapp-komponenten, kan du enkelt flytte den ved å dra den andre steder på forhåndsvisningsskjermen.
7. Gjenta trinn 6, denne gangen setter du en TextView komponent på forhåndsvisningsskjermen. Sett TextView -delen under Knapp -delen, men igjen er det opp til deg.

   I de gjenværende trinnene endrer du teksten som vises i hver komponent.

8. Velg komponenten Knapp på forhåndsvisningsskjermen eller i komponenttreet. Som et resultat viser Designer-panelets Egenskaper-panel noen av knappens komponentegenskaper.

   

   Etter at du har valgt komponenten Knapp , kan du se ordet Tekstvisning i Egenskaper-panelet. Ikke forveksle dette med komponenten TextView som du har trukket fra paletten i trinn 7. Med knappen valgt, henviser alle feltene i Egenskaper-panelet til komponenten Knapp . Hvis utseendet på ordet Tekstvisning i Egenskaper-panelet forvirrer deg, se ikonet Tekniske ting i trinn 4. (Hvis ordet Tekstvisning ikke forvirrer deg, må du ikke bry deg om å lese ikonet Technical Stuff!)
9. Skriv inn ordet COPY i ruten Egenskaper i feltet merket tekst. Når du gjør det, vises ordet COPY på forsiden av komponenten Knapp . Du kan sjekke dette ved å se på Visiwyg forhåndsvisning.

   I vinduet Egenskaper kan du se to felt merket tekst. Hvis det er tilfelle, er en for testing, og den andre er for å kjøre appen. Når det er i tvil, gjør det ikke vondt for å skrive ordet KOPIER i begge disse feltene.

10. Gjenta trinn 8 og 9 med aktivitetene dine EditText og TextView , men denne gangen må du ikke sette ordet COPY i disse komponentene. I stedet fjern tegnene fra disse komponentene.Når du er ferdig, ser forhåndsvisningsskjermene ut som på skjermbildene nedenfor. Hvis forhåndsvisningsskjermene dine ikke ser akkurat ut som dette, ikke bekymre deg for det. Komponentene dine kan være spredt på forskjellige steder på forhåndsvisningsskjermbildene, eller skaperne av Android Studio kan ha endret måten forhåndsvisningsskjermene ser ut. Så lenge du har en EditText komponent, en Button komponent og en TextView komponent, er du ok.
11. Velg Fil → Lagre alt for å lagre arbeidet ditt så langt.