Графичните компоненти съответстват на елементите, които ще позволят на потребителя да взаимодейства със системата, когато говорим за GUI, се отнасяме до графичните потребителски интерфейси, следователно тези интерфейси са изградени чрез графични елементи като бутони, менюта, икони, текстови полета, етикети и др. текст между другото, GUI съчетава визуалния дизайн и събитията, свързани с този дизайн, така че ако добавим бутон, трябва да програмираме събитието, свързано с този бутон, когато бъде натиснат от потребител.
Както споменахме, нека се съсредоточим върху графичните компоненти, които се използват от XML файлове, нека видим някои от свойствата, споменати по-горе.
Основни свойства.
Нека видим някои основни свойства, използвани в графичните компоненти, те могат да бъдат приложени към всеки компонент, независимо от неговия тип, тъй като, както споменахме, всички компоненти са изгледи, така че споделят едни и същи свойства, някои от най-използваните са:
android: id.
Много важно свойство, тъй като позволява дефиниране на идентификатор за контролата, това свойство се присвоява на всеки изглед, например ако е присвоено на поле за въвеждане на данни, тогава това ще се използва за улавяне на потребителска информация, така че трябва да използваме разграничаващо име чисто е.
Правилният начин за генериране на идентификатор е както следва:
android:id="@+id/miTextField"
Символът @+id/ означава, че се генерира нов идентификатор, това ще направи класа Р. от пакета gen на проекта създайте препратка към този обект, така че по-късно да може да бъде манипулиран от код.
В примера идентификаторът „myTextField” за компонента.
android:layout_width.
Определя ширината, свързана с изгледа, това е задължително свойство и стойността му може да бъде дефинирана в абсолютни стойности или чрез посочване на една от следните две стойности:
-
wrap_content (Заема мястото според съдържанието си)
-
match_parent (Заема цялото налично пространство)
Пример:
android:layout_width="match_parent"всякаквиandroid:layout_width="290dp"
android:layout_height.
Определя височината, свързана с изгледа, това е задължително свойство и стойността му може да бъде дефинирана в абсолютни стойности или като посочи една от следните две стойности:
-
wrap_content (Заема мястото според съдържанието си)
-
match_parent (Заема цялото налично пространство)
Пример:
android:layout_height="wrap_content"всякаквиandroid:layout_height="58dp"
android:layout_margin.
Дефинира поле за компонента, което позволява да се установи пространство отгоре, отдолу и отстрани, като варианти, в случай че искате да дадете независими пространства, това може да стане с помощта на свойствата marginLeft, marginRight, marginTop или marginBottom (или всички)
Пример: android:layout_margin="20dp" | android:layout_marginTop="20dp" | android:layout_marginLeft="20dp" | android:layout_marginRight="20dp" | android:layout_marginBottom="20dp"
android: съвет.
Това свойство позволява текстът да се показва в контролата като помощ, докато потребителят все още не е въвел информация. (За предпочитане пред свойството text)
Пример: android:hint="Въведете името"
android:inputType.
Той определя какъв тип въвеждане ще бъде разрешен за текстовото поле, това позволява някакъв вид валидиране на данни и също така казва на операционната система какъв тип (виртуална) клавиатура да използва.
Сред опциите, които можем да свържем с този имот, са някои като:
- Текст
- номер
- текстура
- текстова парола
- телефон
- среща
- TextEmailAddress
Има много други опции, които могат да се използват в зависимост от нуждите.
Пример: android:inputType="номер" | android:inputType="textEmailAddress"
android:textSize.
Определя размер за текста, който да се показва на екрана, трябва да се вземат предвид мерните единици, когато sp се използва за текстове
Пример: android:textSize="25sp"
android:styletext.
Определя стил за текста, като може да дефинира текста като нормален, получер, курсив (или и двете).
Пример: android:textStyle="удебелен" | android:textStyle="курсив" | android:textStyle="удебелен|курсив"
android:textColor.
Определя цвят за текста, като има възможност за добавяне на цвят от файла със свойства „colors“ или шестнадесетична стойност
Пример: android:textColor="@color/teal_700" | android:textColor="#9C27B0"
android:backgroundTint.
Определя фонов цвят за компонента, можете също да получите цвета от свойствата на „цветовете“ или шестнадесетична стойност
Пример: android:backgroundTint="@color/teal_200" | android:backgroundTint="#FF5722"
android: текст.
Дефинира текстовото съдържание, свързано с изгледа. Въпреки че стойността му може да бъде присвоена директно, силно се препоръчва да използвате файла с низове, наличен в папката с ресурси.
Пример: android:text="Bienvenidos" | android:text="@string/title"
Това свойство е често срещано в изгледи, които показват текст в интерфейса на устройството. Следващият екран показва ресурсния файл strings.xml, където се добавят различни стойности за текстовете
и по-късно тези стойности са достъпни от изгледите
След като изчистим предишните свойства, нека да видим кои са основните графични компоненти.
Бутон.
Те съответстват на основните бутони, които познаваме, просто показва бутон с неговия вътрешен текст и дефинирано поле.
Бутонът ще изпълнява основната функция на изчакване на събитие при натискане.
бутон за превключване
Типът ToggleButton съответства на тип бутон, който може да бъде поддържан в 2 възможни състояния, натиснат или не, за това е дефинирано не само едно текстово свойство, но 2 в зависимост от състоянието, което има в момента, като се използват свойствата на android: textOn и android:textOff.
Подобно на традиционните бутони, ToggleButton може да бъде програмиран да реагира на събитието щракване, но вероятно просто трябва да знаете в какво състояние е. Това може да стане чрез справка с метода isChecked(), който връща стойността true в случай на натискане и false в противен случай.
Заменям
Този контрол може да симулира превключвател, много подобен на начина, по който работи ToggleButton, но с различен визуален облик.
Не забравяйте, че в зависимост от версията на Android, която използваме, визуалният облик на нашите компоненти може да се промени, в този случай контролерът Switch за Android версии 5.0 и по-нови ще изглежда така:
ImageButton
Този тип бутон ви позволява да свържете изображение към него, което да се показва на потребителя вместо текст, както е обичайно, за това можем да вземем изображението от папките /res/drawable и да го заредим с помощта на свойството android:src, в този случай ще използваме изображение директно от ресурси на Android.
TextView
Те съответстват на основните текстови етикети, които се показват на потребителите, те на други езици са известни като етикети и позволяват показване на текст, свързан със свойството android:text, тези етикети имат други свойства, които ви позволяват да манипулирате техния размер, фон цвят, тип цвят и шрифт, стил и др.
редактиране на текст
Изгледът на Android EditText е еквивалентен на ASP и C# Textbox или JAVA JTextField, това е контрола, която позволява улавяне на текста, въведен от потребителя по време на изпълнение.
поле за избор
Контролното поле за отметка се използва за отметка или премахване на отметка от опции в приложение. Начинът за дефинирането му в интерфейса и наличните свойства за неговото манипулиране чрез код са аналогични на тези, коментирани в контролата ToogleButton.
Тази контрола наследява от контролата TextView, така че всички вече споменати опции за форматиране за тази контрола са валидни и за квадратчето за отметка.
В кода на приложението можете да проверите дали тази контрола е избрана или не чрез метода isChecked(), който връща стойността на ВЯРНО ако сте избрани или невярно в противен случай можете също да използвате метода setChecked(value), за да зададете конкретно състояние за контролата, където стойност ВЯРНО би било за избрани и невярно от не е избрано.
Събитието, което обикновено се програмира за тази контрола и което се изпълнява всеки път, когато нейното състояние се промени (избрано/неизбрано), е onCheckedChanged.
радио бутон
Подобно на контролата CheckBox, RadioButton служи за отметка или премахване на отметка от дадена опция, разликата е в типа избор, който искате да направите. RadioButtons обикновено се използват в групи за дефиниране на набор от опции, от които можете да изберете само една, т.е. всяка опция е взаимно изключваща се, така че при избиране на опция избраната преди това автоматично ще бъде премахната. Тези групи се дефинират от елемента RadioGroup, който от своя страна ще съдържа всички елементи RadioButton, които представляват опциите.
RadioGroups може да зададе свойството android:orientation на „Вертикално“ или „Хоризонтално“, за да определи как ще бъдат подредени RadioButtons, които съдържа.
RadioButton от своя страна, в допълнение към ширината и височината, трябва да дефинира свойството android:text, за да асоциира текста на представената опция и android:id, за да асоциира код към контролата, така че да може да се манипулира от логиката на приложението.
За манипулиране на контрола от логиката на приложението могат да се използват различни методи, сред които намираме check(бих отишъл), който се използва за задаване на бутона за избор, идентифициран с идентификатора, който се предава като параметър, както е избран, методът clearCheck() се използва за премахване на отметките от всички бутони за избор в групата и методът getCheckedRadioButtonId() се използва за получаване на идентификатора на радиобутон, който е в рамките на избраната група или стойността на -1, ако не е избран елемент.
Най-важното събитие на този контрол също е onCheckedChanged, което се задейства, когато е избран елемент от групата (не забравяйте, че изборът на елемент от групата показва премахването на избора на друг).
И това е всичко, това са някои от основните графични компоненти, които ще използваме в курса, в следващите публикации ще продължим с други компоненти или оформления.
Може също да ви заинтересува.
Има ли нещо, което искате да добавите или коментирате за този запис? чувствайте се свободни да правите....И ако ви е харесало... каня ви да споделите г Абонирайте се, като щракнете върху бутона „Присъединете се към този сайт“, за да чуете повече публикации като тази 😉