Hvordan man laver "Look" til din Android App med Java - dummies

En generel retningslinje i Android appudvikling fortæller dig at adskille logikken fra præsentationen. I mindre tekniske termer advarer retningslinjen mod at forvirre, hvad en app gør med, hvordan en app ser ud. Retningslinjerne gælder for mange aspekter af livet. For eksempel, hvis du designer en hjemmeside, har kunstnere layoutet og har geeks gør kodningen. Hvis du skriver en rapport, skal du få ideerne skrevet først. Senere kan du bekymre dig om skrifttyper og stykkeformater.

Litteraturen om app-udvikling beskriver specifikke teknikker og rammer for at hjælpe dig med at adskille form fra funktion.

Gør følgende for at tilføje knapper, bokse og andre godbidder til din app:

1. Start Android Studio og start et nyt projekt. Når du er færdig med disse trin, har du et helt nyt projekt med en tom aktivitet. Projektet vises i Android Studio hovedvindue.
2. I det nye projekts app / res / layout filial (i hovedvinduets projektværktøj vindue) skal du dobbeltklikke på activity_main. xml . Som et resultat viser Android Studio's Designer-værktøj indholdet af activity_main. xml . Designerværktøjet har to tilstande: Designtilstand til træk-og-slip visuel redigering og Tekst-tilstand til XML-kode redigering. Så i bunden af ​​Designer-værktøjet er der to faner: Et design-faneblad og en tekstfaneblad.
3. Klik på fanen Design.

   

   I designtilstand ser du paletten, komponenttræet, to forhåndsvisningsskærme og egenskabsruden.

   Hvis du ikke ser paletten, skal du kigge efter den lille paletteknap på den venstre kant af Designer-værktøjet. Hvis du klikker på knappen, skal paletten vises.

   Komponistræet har en fil mærket TextView - "Hej verden! " Denne filial repræsenterer teksten Hej verden!, der vises automatisk som en del af din app. Du behøver ikke denne tekst i din app.

4. Vælg fanen TextView - "Hello World!" i komponenttræet, og tryk derefter på Slet. Branchet "Hello World" forsvinder fra komponenttræet, og ordene Hello World! forsvinder fra forhåndsvisningsskærmen.

   De næste trin fører dig gennem oprettelsen af ​​appen.

   

   Appens layout har tre forskellige slags komponenter, og hver type komponent går af flere forskellige navne. Her er de tre typer af komponenter:
   • EditText (også kendt som almindelig tekst): Et sted hvor brugeren kan redigere en enkelt tekstlinje. Et almindeligt navn for denne type komponent er et tekstfelt.
   • Button : En knap er en knap er en knap. Vil du klikke på knappen? Gå lige og klik på det.
   • Tekstvisning (også kendt som Almindelig tekstvisning, Stor tekst, Mellemtekst osv.): Et sted hvor appen viser tekst. Normalt ændrer brugeren ikke teksten i en TextView komponent.

     For at være smerteligt præcist, er Android's EditText , Button og TextView komponenter ikke helt forskellige typer af komponenter. Hver EditText komponent er en slags TextView , og hver Button er også en slags TextView . I sproget med objektorienteret programmering forlænger klassen EditText klassen TextView . Klassen Button udvider også klassen TextView .

5. Træk en almindelig tekst (det vil sige EditText ) fra paletten Widgets-gruppen til en af ​​forhåndsvisningsskærmen. Objektet Almindeligt tekst kan lande i et grimt udseende. Det er okay. Du laver ikke et kunstværk. Du lærer at skrive Java-kode.
6. Gentag trin 5, denne gang sætter en knap på forhåndsvisningsskærmen. Sæt knappen Knappen under komponenten Almindelig tekst (EditText). Senere, hvis du ikke kan lide, hvor du placerer knappen Knappen, kan du nemt flytte den ved at trække den andre steder på forhåndsvisningsskærmen.
7. Gentag trin 6, denne gang sætter en TextView komponent på forhåndsvisningsskærmen. Sæt komponenten TextView under komponenten Button , men det er endnu en gang for dig.

   I de resterende trin ændrer du teksten, der vises i hver komponent.

8. Vælg komponenten Button på forhåndsvisningsskærmen eller i komponenttræet. Som et resultat viser Designer-værktøjets egenskabsrude nogle af knappekomponentens egenskaber.

   

   Når du har valgt komponenten Button , kan du muligvis se ordet TextView i egenskabsruden. Forveks det ikke med komponenten TextView , som du har trukket fra paletten i trin 7. Med den valgte knap henviser alle felterne i egenskabspanelet til komponenten Button . Hvis udseendet af ordet Tekstvisning i panelet Egenskaber forvirrer dig, skal du se ikonet Tekniske ting i trin 4. (Hvis ordet Tekstvisning ikke forvirrer dig, må du ikke genstand læsning af ikonet Tekniske ting!)
9. Indtast ordet COPY i feltet Egenskaber i feltet tekst. Når du gør det, vises ordet COPY på forsiden af ​​komponenten Button . Du kan tjekke dette ved at kigge på visiwyg preview skærmbilledet.

   I vinduet Egenskaber kan du muligvis se to felter mærket tekst. Hvis det er tilfældet, er en til test og den anden er til at køre appen. Når det er i tvivl, gør det ikke ondt at skrive ordet COPY i begge disse felter.

10. Gentag trin 8 og 9 med dine aktiviteter EditText og TextView komponenter, men denne gang skal du ikke sætte ordet COPY i disse komponenter. I stedet skal du fjerne tegnene fra disse komponenter.Når du er færdig, ser forhåndsvisningsskærmen ud på skærmen nedenfor. Hvis dine preview-skærme ikke ser sådan ud, skal du ikke bekymre dig om det. Dine komponenter kan være spredt på forskellige steder på forhåndsvisningsskærmbillederne, eller skaberne af Android Studio kan have ændret den måde, som forevisningsskærmen ser ud. Så længe du har en komponent EditText , en Button komponent og en TextView komponent, er du okay.
11. Vælg Filer → Gem alle for at gemme dit arbejde hidtil.