Hoe u de "Look" voor uw Android-app maakt met Java - dummies

Een algemene richtlijn bij het ontwikkelen van Android-apps vertelt u hoe logica en presentatie kunnen worden gescheiden. In minder technische termen waarschuwt de richtlijn voor verwisseling van wat een app doet met hoe een app eruit ziet. De richtlijn is van toepassing op vele aspecten van het leven. Als u bijvoorbeeld een website ontwerpt, laat u de lay-out van artiesten uitvoeren en laat nerds de codering doen. Als u een rapport schrijft, moet u de ideeën eerst laten schrijven. Later kunt u zich zorgen maken over lettertypen en alineastijlen.

De literatuur over app-ontwikkeling beschrijft specifieke technieken en raamwerken om u te helpen vorm van functie te scheiden.

Ga als volgt te werk om knoppen, vakken en andere goodies aan uw app toe te voegen:

1. Start Android Studio en begin een nieuw project. Wanneer u klaar bent met deze stappen, heeft u een gloednieuw project met een lege activiteit. Het project verschijnt in het hoofdvenster van Android Studio.
2. In de app / res / layout -tak van het nieuwe project (in het venster met het Project-hulpmiddel van het hoofdvenster) dubbelklikt u op activity_main. xml . Als gevolg hiervan geeft de Designer-tool van Android Studio de inhoud van activity_main weer. xml . De Designer-tool heeft twee modi: Ontwerpmodus voor visuele bewerking met slepen en neerzetten en Tekstmodus voor bewerken van XML-code. De onderkant van de Designer-tool heeft dus twee tabbladen: een tabblad Ontwerpen en een tabblad Tekst.
3. Klik op het tabblad Ontwerpen.

   

   In ontwerpmodus ziet u het palet, de componentboom, twee voorbeeldschermen en het deelvenster Eigenschappen.

   Als u het palet niet ziet, zoekt u de kleine paletknop aan de linkerrand van het Designer-gereedschap. Als u op die knop klikt, zou het palet moeten verschijnen.

   De componentboom heeft een vertakking met het label TextView - "Hallo wereld! " Deze tak vertegenwoordigt de tekst Hallo wereld! dat automatisch wordt weergegeven als onderdeel van uw app. Je hebt deze tekst niet nodig in je app.

4. Selecteer de TextView - "Hello World!" -tak in de componentboom en druk vervolgens op Delete. De "Hello World" -tak verdwijnt uit de componentboom en de woorden Hello World! verdwijnen uit het voorbeeldscherm.

   De volgende verschillende stappen begeleiden u bij het maken van de app.

   

   De lay-out van de app bestaat uit drie verschillende soorten componenten en elk soort component heeft verschillende namen. Hier zijn de drie soorten componenten:
   • EditText (ook bekend als Plain Text): Een plaats waar de gebruiker een enkele regel tekst kan bewerken. Een algemene naam voor dit soort componenten is een tekstveld.
   • Knop : Een knop is een knop is een knop. Wil je op de knop klikken? Ga door en klik erop.
   • TextView (ook bekend als Plain TextView, Large Text, Medium Text, etc.): Een plaats waar de app tekst weergeeft. Normaal bewerkt de gebruiker de tekst in een TextView -component niet.

     Om pijnlijk precies te zijn, zijn de EditText , knoppen en TextView -onderdelen van Android niet echt verschillende soorten componenten. Elke EditText -component is een soort TextView en elke knop is ook een soort TextView . In de taal van objectgeoriënteerd programmeren breidt de klasse EditText de klasse TextView uit. Met de klasse Knop wordt ook de klasse TextView uitgebreid.

5. Sleep een tekst zonder opmaak (dat wil zeggen EditText ) uit de groep Widgets van het palet naar een van de voorbeeldschermen. Het gewone tekstitem kan op een lelijk uitziende plaats terechtkomen. Dat is goed. Je maakt geen kunstwerk. Je leert Java-code te schrijven.
6. Herhaal stap 5 en plaats dit keer een knopitem op het voorbeeldscherm. Plaats het component Button onder het gedeelte Plain Text (EditText). Later, als het u niet bevalt waar u het component Button plaatst, kunt u het gemakkelijk verplaatsen door het ergens anders op het voorbeeldscherm te slepen.
7. Herhaal stap 6 en plaats dit keer een TextView -component in het voorbeeldscherm. Plaats het TextView -onderdeel onder de knop , maar nogmaals, het is aan u.

   In de resterende stappen wijzigt u de tekst die in elk onderdeel wordt weergegeven.

8. Selecteer het onderdeel Knop in het voorbeeldscherm of in de componentstructuur. Als gevolg hiervan geeft het eigenschappenvenster van de Designer-tool enkele eigenschappen van de component Button weer.

   

   Nadat u het onderdeel Knop hebt geselecteerd, ziet u mogelijk het woord Tekstweergave in het deelvenster Eigenschappen. Verwar dit niet met het TextView -onderdeel dat u in stap 7 uit het palet hebt gesleept. Met de geselecteerde knop verwijzen alle velden in het deelvenster Eigenschappen naar dat onderdeel Button . Als het uiterlijk van het woord TextView in het deelvenster Eigenschappen u verwart, raadpleegt u het pictogram Technische items in stap 4. (Als het woord TextView u niet in verwarring brengt, doe dat dan niet moeite doen het pictogram Technische spullen te lezen!)
9. Typ in het deelvenster Eigenschappen in het veld met het label tekst het woord EXEMPLAAR. Wanneer u dit doet, wordt het woord COPY weergegeven in de voorzijde van het onderdeel Knop . U kunt dit controleren door naar het wysiwyg-voorbeeldscherm te kijken.

   In het deelvenster Eigenschappen ziet u mogelijk twee velden met de naam tekst. Als dat zo is, is er een om te testen en de andere is voor het uitvoeren van de app. In geval van twijfel doet het geen pijn om het woord COPY in beide velden te typen.

10. Herhaal stap 8 en 9 met de bewerkte tekst en tekstweergave van de activiteit, maar plaats het woord KOPIE deze keer niet in deze componenten. Verwijder in plaats daarvan de tekens uit deze componenten.Als u klaar bent, lijken de voorbeeldschermen op de onderstaande schermen. Als uw voorbeeldschermen er niet precies zo uitzien, hoeft u zich daar geen zorgen over te maken. Uw componenten kunnen op verschillende plaatsen op de voorbeeldschermen zijn verspreid, of de makers van Android Studio hebben de weergave van de voorbeeldschermen mogelijk gewijzigd. Zolang u een EditText -component, een knop -component en een TextView -component heeft, is alles goed.
11. Kies Bestand → Alles opslaan om uw werk tot nu toe op te slaan.