De grafiska komponenterna motsvarar de element som gör att användaren kan interagera med systemet, när vi talar om GUI hänvisar vi till de grafiska användargränssnitten, därför är dessa gränssnitt byggda genom grafiska element som knappar, menyer, ikoner, textfält, etiketter etc. text bland annat, ett GUI kombinerar den visuella designen och händelserna som är associerade med den designen, så om vi lägger till en knapp måste vi programmera händelsen som är kopplad till den knappen när den trycks av en användare.
Som nämnts, låt oss fokusera på de grafiska komponenterna som används från XML-filer, låt oss se några av egenskaperna som nämns ovan.
Grundläggande egenskaper.
Låt oss se några grundläggande egenskaper som används i grafiska komponenter, dessa kan appliceras på vilken komponent som helst oavsett dess typ, eftersom som nämnts alla komponenter är Views så de delar samma egenskaper, några av de mest använda är:
android: id.
Mycket viktig egenskap eftersom den tillåter att definiera en identifierare för kontrollen, den här egenskapen tilldelas vilken vy som helst, till exempel om den är tilldelad ett datainmatningsfält kommer detta att användas för att fånga användarinformation, så vi måste använda ett särskiljande namn det är klart.
Det korrekta sättet att generera en identifierare är som följer:
android:id="@+id/miTextField"
Symbolen @+id/ betyder att en ny identifierare genereras, kommer detta att göra klassen R. från projektets gen-paket, skapa en referens till detta objekt så att det senare kan manipuleras med kod.
I exemplet, identifieraren "myTextField" för komponenten.
android:layout_width.
Definierar bredden som är associerad med vyn, det är en obligatorisk egenskap och dess värde kan definieras i absoluta värden eller genom att ange ett av följande två värden:
-
wrap_content (Det upptar utrymmet enligt dess innehåll)
-
match_parent (upptar allt tillgängligt utrymme)
Exempel:
android:layout_width="match_parent"någraandroid:layout_width="290dp"
android:layout_height.
Definierar höjden som är associerad med vyn, det är en obligatorisk egenskap och dess värde kan definieras i absoluta värden eller anger ett av följande två värden:
-
wrap_content (Det upptar utrymmet enligt dess innehåll)
-
match_parent (upptar allt tillgängligt utrymme)
Exempel:
android:layout_height="wrap_content"någraandroid:layout_height="58dp"
android:layout_margin.
Definierar en marginal för komponenten, vilket gör det möjligt att skapa ett mellanslag ovanför, under och på dess sidor, som varianter om du vill ge oberoende mellanslag, kan det göras med egenskaperna marginLeft, marginRight, marginTop eller marginBottom (eller alla)
Exempel: android:layout_margin="20dp" | android:layout_marginTop="20dp" | android:layout_marginLeft="20dp" | android:layout_marginRight="20dp" | android:layout_marginBottom="20dp"
android: tips.
Denna egenskap tillåter att text visas i kontrollen som hjälp medan användaren ännu inte har angett information. (Gäller framför textegenskapen)
Exempel: android:hint="Ange namnet"
android:inputType.
Det bestämmer vilken typ av inmatning som kommer att tillåtas för textrutan, detta möjliggör någon form av datavalidering och talar också om för operativsystemet vilken typ av (virtuellt) tangentbord som ska användas.
Bland alternativen som vi kan associera med den här egenskapen finns några som:
- Text
- siffra
- textur
- textlösenord
- telefon
- möte
- TextE-postadress
Det finns många andra alternativ som kan användas beroende på behov.
Exempel: android:inputType="nummer" | android:inputType="textE-postadress"
android:textstorlek.
Definierar en storlek för texten som ska visas på skärmen, måttenheter måste beaktas där sp används för texter
Exempel: android:textSize="25sp"
android:styletext.
Definierar en stil för texten, att kunna definiera texten som normal, fetstil, kursiv (eller båda).
Exempel: android:textStyle="bold" | android:textStyle="kursiv" | android:textStyle="bold|kursiv"
android:textColor.
Definierar en färg för texten, att kunna lägga till en färg från egenskapsfilen "färger" eller ett hexadecimalt värde
Exempel: android:textColor="@color/teal_700" | android:textColor="#9C27B0"
android:backgroundTint.
Definierar en bakgrundsfärg för komponenten, du kan också få färgen från egenskaperna "färger" eller ett hexadecimalt värde
Exempel: android:backgroundTint="@color/teal_200" | android:backgroundTint="#FF5722"
android:text.
Definierar textinnehållet som är kopplat till vyn. Även om dess värde kan tilldelas direkt, rekommenderas det starkt att använda strängfilen som finns tillgänglig i resursmappen.
Exempel: android:text="Bienvenidos" | android:text="@string/titel"
Den här egenskapen är vanlig i vyer som visar text i enhetens gränssnitt. Följande skärm visar resursfilen strings.xml där olika värden för texterna läggs till
och senare nås dessa värden från vyerna
Efter att ha rensat de tidigare egenskaperna, låt oss se vad de grundläggande grafiska komponenterna är.
Knapp.
Dessa motsvarar de grundläggande knapparna vi känner till, den visar bara en knapp med sin interna text och en definierad marginal.
Knappen skulle fylla den grundläggande funktionen att vänta på en händelse när den trycks ned.
växlingsknapp
ToggleButton-typen motsvarar en typ av knapp som kan hållas i 2 möjliga lägen, intryckt eller inte nedtryckt, för detta definieras inte bara en enskild textegenskap, utan 2 beroende på vilket tillstånd den har för tillfället, med hjälp av egenskaperna för Android: textOn och android:textOff.
Som traditionella knappar kan ToggleButton programmeras för att svara på klickhändelsen, men du behöver förmodligen bara veta vilket tillstånd den är i. Detta kan göras genom att konsultera isChecked()-metoden, som returnerar värdet true i händelse som trycks ned och falskt annars.
pendla
Denna kontroll kan simulera en omkopplare som mycket liknar hur ToggleButton fungerar, men med ett annat visuellt utseende.
Kom ihåg att beroende på vilken Android-version vi använder kan det visuella utseendet på våra komponenter ändras, i det här fallet skulle Switch-kontrollern för Android-versioner 5.0 och högre se ut så här:
Bildknapp
Denna typ av knapp låter dig länka en bild till den för att visas för användaren istället för en text som vanligt, för detta kan vi ta bilden från /res/drawable-mapparna och ladda den med android:src-egenskapen, i det här fallet kommer vi att använda en bild direkt från Android-resurser.
TextView
Dessa motsvarar de grundläggande textetiketterna som visas för användarna, dessa på andra språk kallas etiketter och tillåter visning av en text associerad med egenskapen android:text, dessa etiketter har andra egenskaper som låter dig manipulera deras storlek, bakgrund färg, färg och typsnitt, stil, etc.
redigera text
Android EditText-vyn är likvärdig med ASP och C# Textbox eller JAVA JTextField, det är en kontroll som gör det möjligt att fånga texten som skrivits av användaren vid körning.
urvalsrutan
Kryssrutan används för att markera eller avmarkera alternativ i ett program. Sättet att definiera det i gränssnittet och de egenskaper som är tillgängliga för dess manipulering med kod är analoga med de som kommenteras i ToogleButton-kontrollen.
Denna kontroll ärver från TextView-kontrollen, så alla formateringsalternativ som redan nämnts för denna kontroll är också giltiga för kryssrutan.
I applikationskoden kan du kontrollera om denna kontroll är vald eller inte genom metoden isChecked() som returnerar värdet på SANN om du blev utvald eller falsk annars kan du också använda metoden setChecked(value) för att ställa in ett specifikt tillstånd för kontrollen, där värde SANN skulle vara för utvalda och falsk av inte vald.
Händelsen som normalt är programmerad för denna kontroll och som exekveras varje gång dess tillstånd ändras (vald/ej vald) är onCheckedChanged.
Radio knapp
Precis som CheckBox-kontrollen tjänar RadioButton till att markera eller avmarkera ett givet alternativ, skillnaden ligger i vilken typ av val du vill göra. RadioButtons används normalt i grupper för att definiera en uppsättning alternativ från vilka du bara kan välja ett, dvs varje alternativ är ömsesidigt uteslutande, så när du väljer ett alternativ kommer det som tidigare valts automatiskt att avmarkeras. Dessa grupper definieras av RadioGroup-elementet, som i sin tur kommer att innehålla alla RadioButton-element som representerar alternativen.
RadioGroups kan ställa in egenskapen android:orientation till "Vertical" eller "Horizontal" för att bestämma hur RadioButtons den innehåller kommer att ordnas.
RadioButton måste i sin tur, förutom bredd och höjd, definiera egenskapen android:text för att associera texten för det representerade alternativet och android:id för att associera en kod till kontrollen så att den kan manipuleras från applikationens logik.
För att manipulera kontrollen från applikationslogiken kan olika metoder användas, bland annat hittar vi check(jag skulle gå) som används för att ställa in den identifierade radioknappen med det id som skickas som en parameter som valts, metoden clearCheck() används för att avmarkera alla radioknappar i gruppen och metoden getCheckedRadioButtonId() används för att få id för radioknapp som finns inom den valda gruppen eller värdet -1 om inget objekt är valt.
Den viktigaste händelsen i denna kontroll är också onCheckedChanged, som utlöses när ett element i gruppen väljs (kom ihåg att valet av ett element i gruppen indikerar att ett annat element avmarkeras).
Och det är det, det här är några av de grundläggande grafiska komponenterna som vi kommer att använda under hela kursen, i nästa inlägg kommer vi att fortsätta med andra komponenter eller layouter.
Det kan också intressera dig.
Finns det något du vill lägga till eller kommentera om det här inlägget? gör gärna....Och om du gillade det... Jag inbjuder dig att dela y Prenumerera genom att klicka på knappen "Gå med på den här webbplatsen" för att höra fler inlägg som detta 😉