Hur man skapar "Look" för din Android App med Java - dummies

En allmän riktlinje i Android App Development berättar att du separerar logiken från presentationen. I mindre tekniska termer varnar guiden mot att förvirra vad en app gör med hur en app ser ut. Riktlinjen gäller många aspekter av livet. Om du till exempel utformar en webbplats, har artister layouten och geekarna gör kodningen. Om du skriver en rapport, få idéerna skrivna först. Senare kan du oroa dig om teckensnitt och styckeformat.

Litteraturen om apputveckling beskriver specifika tekniker och ramar som hjälper dig att skilja form från funktion.

Gör så här om du vill lägga till knappar, lådor och andra godsaker i din app:

1. Starta Android Studio och starta ett nytt projekt. När du är klar med dessa steg har du ett helt nytt projekt med en tom aktivitet. Projektet visas i Android Studio huvudfönster.
2. I det nya projektets app / res / layout -gren (i huvudfönstret Projektverktygsfönster) dubbelklickar du på activity_main. xml . Som ett resultat visar Android Studio Designerverktyg innehållet i activity_main. xml . Designerverktyget har två lägen: Designläge för dra och släpp visuell redigering och textläge för XML-kodredigering. Så i botten av Designer-verktyget finns två flikar: en Design-flik och en textflik.
3. Klicka på fliken Design.

   

   I designläge ser du paletten, komponentträdet, två förhandsgranskningsskärmar och fönstret Egenskaper.

   Om du inte ser paletten, leta efter den lilla paletten på den vänstra kanten av Designer-verktyget. Om du klickar på den här knappen ska paletten visas.

   Komponentträdet har en gren märkt TextView - "Hello World! " Den här grenen representerar texten Hello World! som visas automatiskt som en del av din app. Du behöver inte den här texten i din app.

4. Välj kategorin TextView - "Hello World!" i komponentträdet och tryck sedan på Delete. Branchen "Hello World" försvinner från komponentträdet, och orden Hello World! försvinner från förhandsgranskningsskärmen.

   Nästa steg leder dig genom att skapa appen.

   

   Appens layout har tre olika typer av komponenter, och varje typ av komponent går av flera olika namn. Här är de tre typerna av komponenter:
   • EditText (även kallad vanlig text): En plats där användaren kan redigera en enda textrad. Ett vanligt namn för denna typ av komponent är ett textfält.
   • Knapp : En knapp är en knapp är en knapp. Vill du klicka på knappen? Gå direkt och klicka på den.
   • TextView (även kallad vanlig textvisning, stor text, medium text osv.): En plats där appen visar text. Normalt ändrar inte användaren texten i en komponent TextView .

     Komponenterna är inte helt olika typer av komponenter för Android, EditText , Button och TextView . Varje EditText -komponent är en typ av TextView , och varje Knapp är också en typ av TextView . I språket för objektorienterad programmering sträcker sig EditText klassen TextView . Klassen Knapp utökar även klassen TextView .

5. Drag en vanlig text (det vill säga EditText ) från palettens Widgets-grupp till någon av förhandsgranskningsskärmarna. Objektet Enkel text kan landa på en fula plats. Det är okej. Du skapar inte ett konstverk. Du lär dig att skriva Java-kod.
6. Repetera steg 5, den här gången sätter en knapp på förhandsgranskningsskärmen. Sätt knappen Knapp under komponenten Vanlig text (EditText). Senare, om du inte gillar var du placerar knappkomponenten, kan du enkelt flytta den genom att dra den någon annanstans på förhandsgranskningsskärmen.
7. Repetera steg 6, den här gången sätter en komponent TextView på förhandsgranskningsskärmen. Placera komponenten TextView under komponenten Button , men än en gång är det upp till dig.

   I de återstående stegen ändrar du texten som visas i varje komponent.

8. Välj komponenten Knapp på förhandsgranskningsskärmen eller i komponentträdet. Som ett resultat visar Designer-verktygets Egenskaper-panel några av knappkomponentens egenskaper.

   

   Efter att ha valt komponenten Knapp kan du se ordet TextView i fönstret Egenskaper. Förväxla inte detta med komponenten TextView som du släpade från paletten i steg 7. Med den valda knappen hänvisas alla fält i fönstret Egenskaper till komponenten Knapp . Om utseendet på ordet TextView i panelen Egenskaper förvirrar dig, se ikonen Technical Stuff i steg 4. (Om ordet TextView inte förvirrar dig, gör inte det bry sig om att läsa ikonen Technical Stuff!)
9. Skriv ordet COPY i fältet Egenskaper, i fältet märkt text. När du gör visas ordet COPY på sidan Knapp . Du kan kolla detta genom att titta på visiwyg-förhandsgranskningsskärmen.

   I fönstret Egenskaper kan du se två fält märkta text. Om så är fallet är en för testning och den andra är för att köra appen. När det är osäkert gör det inte ont för att skriva ordet COPY i båda dessa fält.

10. Repetera steg 8 och 9 med dina aktiviteter EditText och TextView -komponenter, men denna gång lägger du inte ordet COPY i de här komponenterna. Ta istället bort tecknen från dessa komponenter.När du är klar ser förhandsgranskningsskärmen ut på skärmarna nedan. Om dina förhandsgranskningsskärmar inte ser ut så här, oroa dig inte om det. Dina komponenter kan vara spridda på olika ställen på förhandsgranskningsskärmarna, eller skaparna av Android Studio kan ha ändrat hur förhandsgranskningsskärmen ser ut. Så länge du har en komponent EditText , en Button komponent och en TextView komponent, är du okej.
11. Välj Arkiv → Spara alla för att spara ditt arbete hittills.