Komponenty graficzne odpowiadają elementom, które pozwolą użytkownikowi na interakcję z systemem, kiedy mówimy o GUI, mamy na myśli graficzne interfejsy użytkownika, dlatego te interfejsy są zbudowane za pomocą elementów graficznych, takich jak przyciski, menu, ikony, pola tekstowe, etykiety itp. między innymi tekst, GUI łączy projekt wizualny i zdarzenia z nim związane, więc jeśli dodamy przycisk, musimy zaprogramować zdarzenie powiązane z tym przyciskiem, gdy zostanie on naciśnięty przez użytkownika.
Jak wspomniano, skupmy się na komponentach graficznych, które są używane z plików XML, zobaczmy niektóre z właściwości wymienionych powyżej.
Podstawowe właściwości.
Zobaczmy kilka podstawowych właściwości używanych w komponentach graficznych, można je zastosować do dowolnego komponentu niezależnie od jego typu, ponieważ jak wspomniano, wszystkie komponenty są widokami, więc mają te same właściwości, niektóre z najczęściej używanych to:
android: id.
Bardzo ważna właściwość ponieważ pozwala na zdefiniowanie identyfikatora dla kontrolki, ta właściwość jest przypisana do dowolnego widoku, na przykład jeśli jest przypisana do pola wprowadzania danych to zostanie użyte do przechwycenia informacji o użytkowniku, więc musimy użyć nazwy różnicującej jest jasne.
Prawidłowy sposób generowania identyfikatora jest następujący:
android:id="@+id/miTextField"
Symbol @+identyfikator/ oznacza, że generowany jest nowy identyfikator, spowoduje to utworzenie klasy R. z pakietu gen projektu, utwórz odwołanie do tego obiektu, aby można było później nim manipulować za pomocą kodu.
W przykładzie identyfikator „moje pole tekstowe” dla komponentu.
Android: szerokość_układu.
Określa szerokość powiązaną z widokiem, jest to właściwość obowiązkowa i jej wartość można określić w wartościach bezwzględnych lub poprzez wskazanie jednej z dwóch wartości:
-
zawijana_zawartość (Zajmuje miejsce zgodnie z zawartością)
-
Twoi rodzice (Zajmuje całą dostępną przestrzeń)
Przykład:
android:layout_width="match_parent"każdyandroid:layout_width="290dp"
Android: wysokość_układu.
Określa wysokość skojarzoną z widokiem, jest to właściwość obowiązkowa i jej wartość można określić w wartościach bezwzględnych lub wskazując jedną z dwóch poniższych wartości:
-
zawijana_zawartość (Zajmuje miejsce zgodnie z zawartością)
-
Twoi rodzice (Zajmuje całą dostępną przestrzeń)
Przykład:
android:layout_height="wrap_content"każdyandroid:layout_height="58dp"
android:układ_marginesu.
Definiuje margines dla komponentu, umożliwiając ustalenie przestrzeni powyżej, poniżej i po jego bokach, jako warianty w przypadku, gdy chcesz nadać niezależne przestrzenie, można to zrobić za pomocą właściwości marginLeft, marginRight, marginTop lub marginBottom (lub wszystkie)
Przykład: android:layout_margin="20dp" | android:layout_marginTop="20dp" | android:layout_marginLeft="20dp" | android:layout_marginRight="20dp" | android:layout_marginBottom="20dp"
Android: wskazówka.
Ta właściwość umożliwia wyświetlanie tekstu w kontrolce jako pomocy, gdy użytkownik nie wprowadził jeszcze informacji. (Preferowane w stosunku do właściwości text)
Przykład: android:hint="Wprowadź nazwę"
Android: typ wejścia.
Określa, jaki typ danych wejściowych będzie dozwolony w polu tekstowym, pozwala to na pewien rodzaj sprawdzania poprawności danych, a także informuje system operacyjny, jakiego typu (wirtualnej) klawiatury użyć.
Wśród opcji, które możemy powiązać z tą właściwością, są takie jak:
- Tekst
- numer
- tekstura
- hasło tekstowe
- telefon
- spotkanie
- tekstowy adres e-mail
Istnieje wiele innych opcji, które można wykorzystać w zależności od potrzeb.
Przykład: android:inputType="liczba" | android:inputType="textEmailAddress"
android: rozmiar tekstu.
Określa rozmiar tekstu, który ma być wyświetlany na ekranie, jednostki miary muszą być brane pod uwagę, gdy sp jest używane dla tekstów
Przykład: android:textSize="25sp"
Android: styl tekstu.
Definiuje styl tekstu, będąc w stanie zdefiniować tekst jako normalny, pogrubiony, kursywa (lub oba).
Przykład: android:textStyle="bold" | android:textStyle="kursywa" | android:textStyle="bold|kursywa"
android:kolor tekstu.
Definiuje kolor tekstu, mając możliwość dodania koloru z pliku właściwości „kolory” lub wartości szesnastkowej
Przykład: android:textColor="@kolor/turkusowy_700" | android:textColor="#9C27B0"
android:odcień tła.
Definiuje kolor tła dla komponentu, kolor można również uzyskać z właściwości „colors” lub wartości szesnastkowej
Przykład: android:backgroundTint="@color/teal_200" | android:backgroundTint="#FF5722"
Android: tekst.
Definiuje zawartość tekstową skojarzoną z widokiem. Chociaż jego wartość można przypisać bezpośrednio, zdecydowanie zaleca się użycie pliku strings dostępnego w folderze zasobów.
Przykład: android:text="Bienvenidos" | android:text="@string/tytuł"
Ta właściwość jest typowa w widokach, które wyświetlają tekst w interfejsie urządzenia. Poniższy ekran przedstawia plik zasobów strings.xml, w którym dodawane są różne wartości dla tekstów
a później te wartości są dostępne z widoków
Po wyczyszczeniu poprzednich właściwości, zobaczmy, jakie są podstawowe elementy graficzne.
Przycisk.
Odpowiadają one znanym nam podstawowym przyciskom, po prostu pokazuje przycisk z wewnętrznym tekstem i zdefiniowanym marginesem.
Przycisk po naciśnięciu spełniałby podstawową funkcję oczekiwania na zdarzenie.
przycisk przełączania
Typ ToggleButton odpowiada typowi przycisku, który może być utrzymywany w 2 możliwych stanach, wciśnięty lub niewciśnięty, w tym celu zdefiniowana jest nie tylko pojedyncza właściwość tekstowa, ale 2 w zależności od stanu, jaki ma w danym momencie, przy użyciu właściwości Android: textOn i Android:textOff.
Podobnie jak tradycyjne przyciski, ToggleButton można zaprogramować tak, aby reagował na zdarzenie kliknięcia, ale prawdopodobnie wystarczy wiedzieć, w jakim jest stanie. Można to zrobić, sprawdzając metodę isChecked(), która zwraca wartość true w przypadku naciśnięcia zdarzenia i wartość false w przeciwnym przypadku.
dojeżdżać
Ta kontrolka może symulować przełącznik bardzo podobny do działania ToggleButton, ale z innym wyglądem.
Pamiętaj, że w zależności od wersji Androida, z której korzystamy, wygląd naszych komponentów może się zmieniać, w tym przypadku kontroler Switcha dla wersji Androida 5.0 i wyższych wyglądałby tak:
Przycisk obrazu
Ten typ przycisku umożliwia powiązanie z nim obrazu, aby był wyświetlany użytkownikowi zamiast tekstu, jak zwykle, w tym celu możemy pobrać obraz z folderów /res/drawable i załadować go za pomocą właściwości android:src, w tym przypadku użyjemy obrazu bezpośrednio z zasobów Androida.
Widok tekstu
Odpowiadają one podstawowym etykietom tekstowym, które są wyświetlane użytkownikom, te w innych językach są znane jako etykiety i umożliwiają wyświetlanie tekstu powiązanego z właściwością android:text, te etykiety mają inne właściwości, które pozwalają manipulować ich rozmiarem, tłem kolor, kolor i typ czcionki, styl itp.
edytować tekst
Widok Android EditText jest odpowiednikiem ASP i C# Textbox lub JAVA JTextField, jest to kontrolka, która pozwala przechwytywać tekst wpisany przez użytkownika w czasie wykonywania.
pole wyboru
Kontrolka pola wyboru służy do zaznaczania lub odznaczania opcji w aplikacji. Sposób definiowania go w interfejsie i właściwości dostępne do manipulowania nim za pomocą kodu są analogiczne do tych skomentowanych w kontrolce ToogleButton.
Ta kontrolka dziedziczy z kontrolki TextView, więc wszystkie opcje formatowania wspomniane dla tej kontrolki obowiązują również dla kontrolki checkBox.
W kodzie aplikacji możesz sprawdzić, czy ta kontrolka jest zaznaczona, czy nie, poprzez metodę isChecked(), która zwraca wartość PRAWDA jeśli zostałeś wybrany lub FAŁSZ w przeciwnym razie możesz również użyć metody setChecked(value), aby ustawić określony stan kontrolki, gdzie value PRAWDA byłoby dla wybranych i FAŁSZ przez nie wybrane.
Zdarzenie, które jest normalnie zaprogramowane dla tej kontrolki i które jest wykonywane za każdym razem, gdy zmienia się jej stan (wybrany/niewybrany) to onCheckedChanged.
Przycisk radiowy
Podobnie jak kontrolka CheckBox, RadioButton służy do zaznaczenia lub odznaczenia danej opcji, różnica polega na rodzaju zaznaczenia, którego chcesz dokonać. Przyciski radiowe są zwykle używane w grupach w celu zdefiniowania zestawu opcji, z których można wybrać tylko jedną, tj. każda opcja wzajemnie się wyklucza, więc po wybraniu opcji ta, która została wcześniej wybrana, zostanie automatycznie odznaczona. Grupy te są definiowane przez element RadioGroup, który z kolei będzie zawierał wszystkie elementy RadioButton reprezentujące opcje.
RadioGroups może ustawić właściwość Android:orientation na „Vertical” lub „Horizontal”, aby określić, w jaki sposób zostaną uporządkowane RadioButtons, które zawiera.
Z kolei RadioButton, oprócz szerokości i wysokości, musi zdefiniować właściwość android:text, aby powiązać tekst reprezentowanej opcji, oraz android:id, aby powiązać kod z kontrolką, aby można było nią manipulować z poziomu logiki aplikacji.
Aby manipulować sterowaniem z poziomu logiki aplikacji, można użyć różnych metod, wśród których znajdziemy check(poszedłbym), który służy do ustawiania zidentyfikowanego przycisku opcji z identyfikatorem przekazywanym jako parametr jako wybrany, metoda clearCheck() służy do odznaczania wszystkich przycisków opcji w grupie, a metoda getCheckedRadioButtonId() służy do uzyskania identyfikatora radiobutton, który znajduje się w wybranej grupie lub wartość -1, jeśli żaden element nie jest wybrany.
Najważniejszym zdarzeniem tej kontrolki jest również onCheckedChanged, które jest wyzwalane w momencie zaznaczenia elementu grupy (pamiętaj, że zaznaczenie elementu grupy oznacza odznaczenie innego).
I to wszystko, to tylko niektóre z podstawowych komponentów graficznych, których będziemy używać w trakcie kursu, w kolejnych postach będziemy kontynuować z innymi komponentami lub układami.
Może Cię to również zainteresować.
Czy jest coś, co chciałbyś dodać lub skomentować na temat tego wpisu? śmiało rób….A jeśli Ci się podobało... Zapraszam do udostępniania Y Zasubskrybuj, klikając przycisk „Dołącz do tej witryny”, aby usłyszeć więcej postów takich jak ten 😉