Grafische componenten komen overeen met de elementen die gebruikersinteractie met het systeem mogelijk maken. Als we het over GUI hebben, bedoelen we grafische gebruikersinterfaces. Daarom zijn deze interfaces opgebouwd uit grafische elementen zoals knoppen, menu's, pictogrammen, tekstvelden, labels, enz. tekst, een GUI combineert het visuele ontwerp en de gebeurtenissen die bij dat ontwerp horen, dus als we een knop toevoegen, moeten we de gebeurtenis programmeren die bij die knop hoort wanneer deze door een gebruiker wordt ingedrukt.
Zoals gezegd zullen we ons concentreren op de grafische componenten die worden gebruikt in XML-bestanden. Laten we eens kijken naar enkele van de hierboven genoemde eigenschappen.
Basiseigenschappen.
Laten we eens kijken naar enkele basiseigenschappen die in grafische componenten worden gebruikt. Deze kunnen op elk onderdeel worden toegepast, ongeacht het type. Zoals gezegd zijn alle componenten weergaven, dus ze delen dezelfde eigenschappen. Enkele van de meest gebruikte zijn:
Android: idd.
Zeer belangrijke eigenschap omdat u hiermee een ID voor het besturingselement kunt definiëren. Deze eigenschap wordt aan elke weergave toegewezen, als deze bijvoorbeeld aan een gegevensinvoerveld is toegewezen, wordt deze gebruikt om gebruikersinformatie vast te leggen, dus we moeten een onderscheidende naam is het duidelijk.
De juiste manier om een ID te genereren is als volgt:
android:id="@+id/miCampoDeTexto"
Het symbool @+id/ betekent dat er een nieuwe identificatie wordt gegenereerd, dit zal de klasse veroorzaken A. Maak vanuit het genpakket van het project een verwijzing naar dit object, zodat het later door de code kan worden gemanipuleerd.
In het voorbeeld is de identificatie “mijnTekstveld” voor het onderdeel.
Android: layout_width.
Het definieert de breedte die aan het aanzicht is gekoppeld, het is een verplichte eigenschap en de waarde ervan kan worden gedefinieerd in absolute waarden of door een van de volgende twee waarden aan te geven:
-
de inhoud verpakken (Neemt ruimte in beslag afhankelijk van de inhoud)
-
passende ouder (Neemt alle beschikbare ruimte in beslag)
Voorbeeld:
android:layout_width = "match_parent"elkandroid:layout_width = "290dp"
android: layout_hoogte.
Definieert de hoogte die aan het aanzicht is gekoppeld, het is een verplichte eigenschap en de waarde ervan kan worden gedefinieerd in absolute waarden of door een van de twee volgende waarden aan te geven:
-
de inhoud verpakken (Neemt ruimte in beslag afhankelijk van de inhoud)
-
passende ouder (Neemt alle beschikbare ruimte in beslag)
Voorbeeld:
android:layout_height = "wrap_content"elkandroid:layout_height = "58dp"
android: layout_marge.
Definieert een marge voor de component, waardoor u een ruimte boven, onder en aan de zijkanten kunt instellen. Als u in varianten onafhankelijke spaties wilt aanbrengen, kunt u dit doen met behulp van de eigenschappen marginLeft, marginRight, marginTop of marginBottom (of alle)
Voorbeeld: android:layout_margin = "20dp" | android:layout_marginTop = "20dp" | android:layout_marginLeft = "20dp" | android:layout_marginRight = "20dp" | android:layout_marginBottom = "20dp"
androïde: tip.
Met deze eigenschap kan tekst als hulpmiddel in het besturingselement worden weergegeven, terwijl de gebruiker nog geen informatie heeft ingevoerd. (Bij voorkeur boven teksteigenschap)
Voorbeeld: android:hint="Voer de naam in"
android:invoertype.
Het bepaalt het type invoer dat is toegestaan voor het tekstvak, dit maakt een vorm van validatie van de gegevens mogelijk en vertelt het besturingssysteem ook welk type (virtueel) toetsenbord moet worden gebruikt.
Onder de opties die we aan deze woning kunnen koppelen, zijn er enkele:
- Tekst
- nummer
- textuur
- Tekstwachtwoord
- telefoon
- ontmoeting
- TekstE-mailadres
Er zijn nog veel meer opties die kunnen worden gebruikt, afhankelijk van de behoefte.
Voorbeeld: android:inputType = "nummer" | android:inputType="textEmailAddress"
Android: tekstgrootte.
Definieert een grootte voor de tekst die op het scherm moet worden weergegeven. Er moet rekening worden gehouden met maateenheden wanneer sp wordt gebruikt voor teksten
Voorbeeld: android:textSize = "25sp"
android:stijltekst.
Definieert een stijl voor de tekst, waarbij de tekst kan worden gedefinieerd als normaal, vet, cursief (of beide).
Voorbeeld: android:textStyle=”vet” | android:textStyle=”cursief” | android:textStyle="vet|cursief"
Android: tekstkleur.
Definieert een kleur voor de tekst, waarbij een kleur kan worden toegevoegd uit het eigenschappenbestand “kleuren” of een hexadecimale waarde
Voorbeeld: android:textColor="@color/teal_700" | android:textColor = "#9C27B0"
android:achtergrondTint.
Definieert een achtergrondkleur voor de component. U kunt de kleur ook verkrijgen via de eigenschappen “kleuren” of een hexadecimale waarde
Voorbeeld: android:backgroundTint="@color/teal_200" | android:backgroundTint = "#FF5722"
Android: tekst.
Definieert de tekstuele inhoud die aan de weergave is gekoppeld. Hoewel de waarde ervan rechtstreeks kan worden toegewezen, wordt het ten zeerste aanbevolen om het tekenreeksbestand te gebruiken dat beschikbaar is in de map Resources.
Voorbeeld: android:text="Bienvenidos" | android:text="@string/titel"
Deze eigenschap is gebruikelijk in weergaven waarin tekst wordt weergegeven in de apparaatinterface. Het volgende scherm toont het strings.xml-bronbestand waarin verschillende waarden voor teksten zijn toegevoegd
en later zijn deze waarden toegankelijk vanuit de weergaven
Laten we, nadat we de vorige eigenschappen hebben gewist, kijken wat de grafische basiscomponenten zijn
Knop.
Deze komen overeen met de basisknoppen die we kennen, ze presenteren alleen een knop met de interne tekst en een gedefinieerde marge.
De knop zou de basisfunctie vervullen van het wachten op een gebeurtenis wanneer deze wordt ingedrukt.
Schakelknop
Het ToggleButton-type komt overeen met een type knop dat in 2 mogelijke statussen kan worden gehouden, ingedrukt of niet ingedrukt. Hiervoor wordt niet alleen een enkele teksteigenschap gedefinieerd, maar 2 afhankelijk van de status die deze momenteel heeft, met behulp van de eigenschappen van de Android : tekstAan en Android:tekstUit.
Net als traditionele knoppen kan de ToggleButton worden geprogrammeerd om te reageren op de klikgebeurtenis, maar u hoeft waarschijnlijk alleen maar te weten in welke staat deze zich bevindt. Dit kan worden gedaan door te verwijzen naar de methode isChecked(), die de waarde true retourneert als deze wordt ingedrukt en anders false.
pendelen
Dit besturingselement kan een schakelaar simuleren die sterk lijkt op de werking van een ToggleButton, maar met een ander uiterlijk.
Houd er rekening mee dat, afhankelijk van de versie van Android die we gebruiken, het uiterlijk van onze componenten kan veranderen. In dat geval zou de schakelbediening voor Android-versies 5.0 en hoger er als volgt uitzien:
AfbeeldingKnop
Met dit type knop kunt u er een afbeelding aan koppelen zodat deze aan de gebruiker wordt getoond in plaats van tekst, zoals gebruikelijk. Hiervoor kunnen we de afbeelding uit de /res/drawable-mappen halen en deze laden met de eigenschap android:src, in in dit geval gebruiken we een afbeelding rechtstreeks uit Android-bronnen.
Tekstweergave
Deze komen overeen met de basistekstlabels die aan gebruikers worden getoond. Deze staan in andere talen bekend als labels en stellen u in staat tekst weer te geven die is gekoppeld aan de eigenschap android:text. Deze labels hebben andere eigenschappen waarmee u hun grootte kunt manipuleren, achtergrondkleur, kleur en lettertype, stijl, enz.
Tekst bewerken
De Android EditText-weergave is gelijk aan ASP en C# Textbox of JAVA JTextField. Het is een besturingselement waarmee tekst kan worden vastgelegd die de gebruiker tijdens runtime heeft ingevoerd.
selectievak
Het selectievakje wordt gebruikt om opties in een toepassing te selecteren of deselecteren. De manier om het in de interface te definiëren en de eigenschappen die beschikbaar zijn voor manipulatie door code zijn analoog aan de eigenschappen die zijn becommentarieerd in het ToogleButton-besturingselement.
Dit besturingselement erft van het TextView-besturingselement, dus alle opmaakopties die al voor dit besturingselement zijn vermeld, zijn ook geldig voor de checkBox.
In de applicatiecode kunt u controleren of dit besturingselement is geselecteerd of niet via de methode isChecked() die de waarde van retourneert WAAR als u geselecteerd bent of vals anders kunt u ook de methode setChecked(value) gebruiken om een specifieke status voor het besturingselement in te stellen, waarbij value WAAR zou zijn voor geselecteerd en vals door niet geselecteerd.
De gebeurtenis die normaal gesproken voor dit besturingselement wordt geprogrammeerd en die wordt uitgevoerd telkens wanneer de status ervan verandert (geselecteerd/niet-geselecteerd), is onCheckedChanged.
Radio knop
Net als het CheckBox-besturingselement wordt de RadioButton gebruikt om een bepaalde optie te selecteren of deselecteren, het verschil ligt in het type selectie dat u wilt maken. RadioButtons worden normaal gesproken in groepen gebruikt om een reeks opties te definiëren waaruit u er slechts één kunt selecteren. Dat wil zeggen dat elke optie elkaar wederzijds uitsluit, dus wanneer u een optie selecteert, wordt de optie die eerder was geselecteerd automatisch gedeselecteerd. Deze groepen worden gedefinieerd door het RadioGroup-element, dat op zijn beurt alle RadioButton-elementen bevat die de opties vertegenwoordigen.
RadioGroups kan de eigenschap android:orientation instellen op "verticaal" of "Horizontaal" om te bepalen hoe de RadioButtons die deze bevat, worden geordend.
De RadioButton moet op zijn beurt, naast de breedte en hoogte, de eigenschap android:text definiëren om de tekst van de weergegeven optie te associëren en android:id om een code aan het besturingselement te koppelen, zodat deze vanuit de applicatie kan worden gemanipuleerd logica.
Om de controle vanuit de applicatielogica te manipuleren, kunnen verschillende methoden worden gebruikt, waaronder check(ik zou gaan) die wordt gebruikt om het keuzerondje te definiëren dat wordt geïdentificeerd met de id die wordt doorgegeven als parameter zoals geselecteerd, de clearCheck()-methode wordt gebruikt om alle keuzerondjes in de groep te deselecteren en de getCheckedRadioButtonId()-methode wordt gebruikt om de id van het keuzerondje te verkrijgen dat is binnen de geselecteerde groep of de waarde -1 als er geen item is geselecteerd.
De belangrijkste gebeurtenis van dit besturingselement is ook onCheckedChanged, die wordt geactiveerd wanneer een element in de groep wordt geselecteerd (onthoud dat het selecteren van één element in de groep het deselecteren van een ander element aangeeft).
En dat is alles, dit zijn enkele van de grafische basiscomponenten die we tijdens de cursus zullen gebruiken, in de volgende berichten zullen we doorgaan met andere componenten of lay-outs.
Het kan u ook interesseren.
Is er iets dat u wilt toevoegen of opmerken over dit bericht? doe gerust….En als je het leuk vond... nodig ik je uit om het te delen Y Meld u aan door de knop 'Word lid van deze site' te gebruiken om meer van dit soort berichten te zien 😉