# УФ4. Компоненты пользовательского интерфейса

Существует 3 основных объекта, которые используются для создания пользовательского интерфейса:

* `TextView` - простое текстовое поле, куда обычно выводят информацию;
* `EditText` - поле ввода информации;
* `Button` - кнопка, по нажатию на которую введённая информация выводится в текстовое поле.

Важно помнить, что данные компоненты наследуются от класса View, а значит большинство атрибутов для них общие. Например, `TextView` может использовать атрибут `onClick`, хоть обычно для нажатия и существует компонент `Button`.

Каждый объект при объявлении в коде XML должен обладать открывающим и закрывающий тегом. Рассмотрим эти объекты на примере проекта из "Модуль 2. Компоненты приложений".

## TextView

Данный объект обладает следующими основными атрибутами:

* `android:text`: устанавливает текст элемента;
* `android:textSize`: устанавливает высоту текста, в качестве единиц измерения для указания высоты используются sp;
* `android:background`: задает фоновый цвет элемента в виде цвета в шестнадцатиричной записи или в виде цветового ресурса;
* `android:textColor`: задает цвет текста;
* `android:textAllCaps`: при значении true делает все символы в тексте заглавными;
* `android:textDirection`: устанавливает направление текста. По умолчанию используется направление слева направо, но с помощью значения rtl можно установить направление справо налево;
* `android:textAlignment`: задает выравнивание текста;
* `android:fontFamily`: устанавливает тип шрифта.

Данный объект мы использовали для вывода информации в `MessageActivity`.

```markup
<TextView
        android:id="@+id/messageText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
```

## EditText

Данный объект является подклассом класса `EditText`. Это значит, что кроме особенности ввода текста, он обладает всеми возможностями объекта `TextView`. Данный объект обладает всеми отличительными атрибутами `TextView`. Следует выделить разве что атрибуты:

* `android:hint` - задает подсказку по вводу информации. При вводе текста подсказка не будет видна;
* `android:inputType` - позволяет выбрать тип вводимого текста и используемую для этого клавиатуру.

Данный объект мы использовали для ввода информации в `MainActivity`.

```markup
<EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:hint="Введите текст"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button"
        app:layout_constraintTop_toTopOf="parent" />
```

## Button

Данный объект взаимодействует с пользователем через нажатие. Обладает следящими основными атрибутами:

* `text`: задает текст на кнопке;
* `textColor`: задает цвет текста на кнопке;
* `background`: задает фоновый цвет кнопки;
* `textAllCaps`: при значении true устанавливает текст в верхнем регистре. По умолчанию как раз и применяется значение true;
* `onClick`: задает обработчик нажатия кнопки.

Данный объект мы использовали для отправки информации, введённой в поле `EditText` в `MainActivity`. Обратите внимание на то, как мы это делали. В атрибуте `android::onClick` мы написали имя функции, которую используем для отправки информации.

```markup
<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="sendMessage"
        android:text="Отправить"
        app:layout_constraintLeft_toRightOf="@+id/editText"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
```

## Контроль

1. Модифицируйте TextView в MessageActivity таким образом, чтобы выводимая информация была выравнена по середине, шрифт был курсивным. Также настройте размер текста, цвет текста и цвет фона по своему желанию.
2. EditText - настройте размер текста, цвет текста и цвет фона по своему желанию. Выберите тип вводимого текста - номер телефона.
3. Button - настройте размер текста, цвет текста и цвет фона по своему желанию. Напишите функцию, которая будет генерировать случайное число и привяжите эту функцию к кнопке.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://m-v-ponomarev98.gitbook.io/oer-mobile/android/android-native/razdel-3.-polzovatelskii-interfeis/modul-2.-komponenty-polzovatelskogo-interfeisa.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.