Полный список
Давайте посмотрим, как в Андроид приложениях формируется то, что мы видим на экране.
Урок обновлен 07.07.2017
Если проводить аналогию с Windows, то приложение состоит из окон, называемых Activity. В конкретный момент времени обычно отображается одно Activity и занимает весь экран, а приложение переключается между ними. В качестве примера можно рассмотреть почтовое приложение. В нем одно Activity – список писем, другое – просмотр письма, третье – настройки ящика. При работе вы перемещаетесь по ним.
Содержимое Activity формируется из различных компонентов, называемых View. Самые распространенные View — это кнопка, поле ввода, чекбокс и т.д.
Примерно это можно изобразить так:
Необходимо заметить, что View обычно размещаются в ViewGroup. Самый распространенный пример ViewGroup – это Layout. Layout бывает различных типов и отвечает за то, как будут расположены его дочерние View на экране (таблицей, строкой, столбцом …)
Также, в версии 3.0 в Android появилась новая сущность – Fragment. Но тему фрагментов мы рассмотрим в более поздних уроках, чтобы сейчас не усложнять материал.
Наверно уже запутал новыми словами и терминами, давайте посмотрим это все на практике.
Создадим приложение к этому уроку. Для этого запускайте Android Studio и открывайте проект Android lessons, который мы создали на прошлом уроке. Скорее всего, этот проект сразу откроется у вас по умолчанию.
Напомню, что мы решили создавать в этом проекте все модули (приложения) для уроков. А не создавать отдельный проект под каждый урок.
Создадим модуль. В меню File >New > New Module. Все шаги аналогичны тем, что мы проделывали на прошлом уроке, только будут другие названия приложения и модуля
Application/Library name: BasicViews
Module name: p0041basicviews
Package name: ru.startandroid.p0041basicviews
Модуль p0041basicviews создан и виден в списке модулей слева:
В этом модуле нам интересен файл: res > layout > activity_main.xml
Это layout-файл. В нем мы определяем набор и расположение View компонентов, которые хотим видеть на экране. При запуске приложения, Activity читает этот файл и отображает нам то, что мы настроили. Скорее всего, он у вас уже открыт на редактирование, но на всякий случай давайте еще раз откроем его двойным кликом и посмотрим, как он выглядит.
Куча кнопок, надписей и т.п. Я отметил важные зоны цифрами (с 1 по 6). Пройдемся по ним
1) Design и Text
Desing — это графическое представление экрана. Оно сейчас открыто. А Text — это текстовое представление. Оно выглядит так:
Мало что понятно. Мы пока что будем использовать только Design-представление.
2) Режимы отображения экрана
На скриншоте в области 3 вы видите два экрана. Обычный белый и рядом с ним какой-то синий. Это один и тот же экран, но он отображен в двух разных режимах:
Design — в нем мы видим View компоненты так, как они обычно выглядят на экране.
Blueprint — отображаются только контуры View компонентов
Кнопки в области 2 позволяют вам переключать режимы:
— Design
— Blueprint
— Design + Blueprint
Я в уроках обычно буду использовать Design режим. Вы можете использовать, какой вам удобнее.
3) Экран
Здесь вы можете видеть, как выглядит экран вашего приложения. Сюда мы будем добавлять различные компоненты из области 4.
4) Палитра
Это список всех View компонентов, которые вы можете добавлять на ваш экран: кнопки, поля ввода, чекбоксы, прогрессбары и прочее.
5) Дерево компонентов
Здесь представлена иерархия View компонентов вашего экрана. Сейчас, например, корневой элемент — это ConstraintLayout. А в него вложен TextView.
6) Свойства
Эта область пока пуста. При работе с каким либо View компонентом здесь будут отображаться свойства этого компонента. С помощью свойств вы сможете настраивать внешний вид, расположение и содержимое View компонента.
Чтобы вы понимали, о чем дальше пойдет речь, посмотрите пожалуйста этот урок:
Он хоть и под номером 180, но написан просто и понятно. В нем вы научитесь добавлять View компоненты на экран. После прочтения возвращайтесь сюда и продолжим.
Теперь, когда вы знаете, как добавлять компоненты на экран, мы можем продолжить.
Сейчас у нас на экране только TextView. Давайте добавим еще несколько компонентов. Например, Button и CheckBox.
Настройте им какие-нибудь привязки, чтобы они не уехали при запуске.
Обратите внимание, что компоненты появились в Component Tree
Значения button и checkBox — это ID, которые были присвоены компонентам автоматически. Пока оставим их такими, позднее научимся их менять и будем делать более осмысленными.
Теперь давайте изменим надписи на этих компонентах. Во вкладке Component Tree (слева-снизу) жмем на TextView, чтобы выделить этот компонент.
Теперь нам нужна вкладка Properties (справа). На скриншоте она была обозначена, как область 6. Здесь мы можем настроить свойства выделенного в Component Tree (или на экране) View компонента.
Найдем во вкладке Properties свойство text. Сейчас там прописан текст Hello World!, который и отображается на экране. Давайте поменяем его на свой текст. Поставьте курсор в это поле и напишите там, например, “Google Android”.
Жать в этом поле Enter я не советую, т.к. студия иногда предлагает автозаполнение, которое вам может не подойти. Поэтому, после того, как вы написали там свой текст, просто нажмите мышкой в любом месте экрана с компонентами.
Текст на экране изменился. Был Hello World! Стал Google Android.
Аналогично вы можете изменить тексты на кнопке и чекбоксе. Просто выделяйте эти компоненты на экране или в Component Tree, в Properties ищите свойство text и пишите там свой текст. Можно даже на русском языке.
Все, что вы настроили в этом экране, сохранится в файле res > layout > activity_main.xml.
Теперь давайте запустим приложение. Для этого надо выбрать ваш модуль в списке доступных и нажать чуть правее на зеленый треугольник.
Студия спросит вас, запускать ли эмулятор
Выберите эмулятор и жмите OK. Название эмулятора у вас может быть другим
Ждем пока запускается эмулятор и, затем, любуемся результатом
Все ваши новые тексты должны отобразится на экране
Приложение отображает нам MainActivity, а оно в свою очередь читает файл activity_main.xml и отображает все View, которые мы в нем создавали и настраивали.
На следующем уроке мы:
рассмотрим layout-файл с другого ракурса – XML
разберем, откуда Activity знает, какой layout-файл надо читать и попробуем настроить на чтение другого файла
узнаем, какой layout-файл используется при смене ориентации экрана (горизонтальная/вертикальная)
Присоединяйтесь к нам в Telegram:
— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.
— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование
— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня
— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме
Источник
Элементы Android
Материал из AOW
Содержание
ViewGroup
Класс Layout является базовым при создании интерфейсов для андроид и управляет принципом расстановки своего содержимого. Вы можете выбирать из расстановки в виде линейного списка(LinearLayout), таблицы (TableLayout), последовательного расположения(RelativeLayout) и т.д.
В этой серии статей мы исследуем каждый из видов подробно.
Содержимым Layout могут быть любые управляющие элементы или что-либо, что является View (или наследует View). Все layout`ы наследуют ViewGroup (который наследует View), таким образом, вы можете вложить layout`ы друг в друга!
Вы можете также создать свое собственное правило расположения, создав класс, который наследует ViewGroup.
Стандартные виды layout:
FrameLayout
FrameLayout предназначен, чтобы зафиксировать на экране отображение единственного элемента. Как правило, FrameLayout должен быть использован для закрепления единственного элемента интерфейса, так как обычно трудно обеспечить это при масштабирование под разный размер экрана без перекрытия элементами друг друга. Однако вы можете, добавить несколько элементов в FrameLayout и контролировать их положение в FrameLayout путем назначения привязки к каждому элементу, используя android:layout_gravity атрибут.
Последние добавленные View-элементы отображаются поверх остальных. Размер FrameLayout определяется размером самого крупнного view-элемента (плюс отступы), видимого либо скрытого (если родитель FrameLayout это позволяет). View-элементы которые скрыты (GONE) используются для определения размера, только если setConsiderGoneChildrenWhenMeasuring() установлен в true.
ScrollView
При большом количестве информации, которую нужно поместить на экране приходится использовать полосы прокрутки. В Android существуют специальные виджеты ScrollView и HorizontalScrollView, которые являются контейнерными элементами и наследуются от ViewGroup. Обратите внимание, что класс TextView использует свою собственную прокрутку и не нуждается в добавлении отдельных полос прокрутки. Но использование отдельных полос даже с TextView может улучшить вид вашего приложения и повышает удобство работы для пользователя.
В контейнеры ScrollView и HorizontalScrollView можно размещать только один дочерний элемент (обычно LinearLayout), который в свою очередь может быть контейнером для других элементов. Виджет ScrollView, несмотря на свое название, поддерживает только вертикальную прокрутку, поэтому для создания вертикальной и горизонтальной прокрутки необходимо использовать ScrollView в сочетании с HorizontalScrollView. Обычно ScrollView используют в качестве корневого элемента, а HorizontalScrollView — дочернего.
Если полосы прокрутки вас раздражают, то используйте атрибут android:scrollbars=»none», который скроет их.
В в теле метода onCreate() создайте ссылку на элемент TextView, объявленный в XML-разметке, и запишите в него через метод setText() какой-нибуль длинный текст, который не поместится в видимые размеры экрана устройства:
TextView text (TextView)findViewById(R.id.textview); // загружаем текст text.setText(«здесь должен быть длинный текст»);
LinearLayout
Макет разметка LinearLayout выравнивает все дочерние объекты в одном направлении — вертикально или горизонтально. Направление задается при помощи атрибута ориентации android:orientation.
Все дочерние элементы помещаются в стек один за другим, так что вертикальный список представлений будет иметь только один дочерний элемент в строке независимо от того, насколько широким он является. Горизонтальное расположение списка будет размещать элементы в одну строку с высотой, равной высоте самого высокого дочернего элемента списка.
Ниже приведен код разметки с основным макетом LinearLayout и двумя вложенными дочерними макетами, один из которых имеет горизонтальную ориентацию другой вертикальную.
TableLayout
Разметка макет TableLayout (Табличная разметка) — позиционирует свои дочерние элементы в строки и столбцы, как это привыкли делать веб-мастера в теге
RelativeLayout
RelativeLayout — является ViewGroup, который отображает дочерние View-элементы с относительным позиционированием. Положение View может быть задано как относительно соседних элементов (например, выравнен по левой или нижней стороне элемента), либо позиционированно относительно области макета RelativeLayout (например, привязано к низу, левой стороне или к центру макета).
RelativeLayout предоставляет очень полезную возможность проектирования пользовательского интерфейса, без необходимости использовать вложенные ViewGroup-элементы. Если вы используете несколько вложенных LinearLayout, вы можете заменить их одним RelativeLayout.
Обратите внимание, на каждый из android:layout_ * атрибутов, такие как layout_below, layout_alignParentRight и layout_toLeftOf. При использовании RelativeLayout, вы можете использовать эти атрибуты, для описания положение каждого View. Каждый из этих атрибутов определяет различные варианты относительного позиционирования. Некоторые атрибуты используют идентификатор соседнего View-элемента чтобы определить своё положение. Например, для последней кнопки определено положение слева и выравнивание по верху относительно View-элемента имеющего ID ok.
TextView
Виджет TextView предназначен для отображения текста без возможности редактирования его пользователем, что видно из его названия (Text — текст, view — просмотр).
Иерархия классов текстовых полей
TextView один из самых используемых виджетов. С его помощью пользователю удобнее ориентироваться в программе. По сути, это как таблички: Руками не трогать, По газону не ходить, Вход с собаками воспрещен, Часы работы с 9.00 до 18.00. и т.д., и служит для представления пользователю описательного текста.
Для отображения текста в Textview в файле разметки используется атрибут android:text, например:
Такой подход является нежелательным. Рекомендуется всегда использовать текстовые ресурсы. В будущем эта привычка позволит вам обеспечить многоязыковую поддержку:
Программно текст можно задать методом setText():
- Загружаем виджет из ресурсов
- Задаем текст
- Задаем текст с использованием текстовых ресурсов
- Размер текста. При установке размера текста используются несколько единиц измерения: px (пиксели), dp, sp, in (дюймы), pt, mm. Для текстов рекомендуется использовать sp: android:textSize=»48sp»
- Стиль текста. Используются константы: normal, bold, italic. Например, android:textStyle=»bold»
- Цвет текста. Используются четыре формата в шестнадцатеричной кодировке: #RGB; #ARGB; #RRGGBB; #AARRGGBB, где R, G, B — соответствующий цвет, А — прозрачность (alpha-channel). Значение А, установленное в 0, означает прозрачность 100%.
Для всех вышеперечисленных атрибутов в классе Textview есть соответствующие методы для чтения или задания соответствующих свойств.
- Если вы хотите создать многострочный текст в TextView, то используйте символы \n для переноса строк.
EditText
Виджет EditText — это текстовое поле для пользовательского ввода, которое используется, если необходимо редактирование текста. Следует заметить, что EditText является наследником TextView.
Веб-мастера знают о таком атрибуте HTML5 как placeholder, когда в текстовом поле выводится строчка-подсказка приглушенным (обычно серым цветом). Живой пример приведен ниже.
Подсказка видна, если текстовый элемент не содержит пользовательского текста. Как только пользователь начинает вводить текст, то подсказка исчезает. Соответственно, если удалить пользовательский текст, то подсказка появляется снова. Это очень удобное решение во многих случаях, когда на экране мало места для элементов.
В Android у многих элементов есть свойство Hint (атрибут hint), который работает аналогичным образом. Установите у данного свойства нужный текст и у вас появится текстовое поле с подсказкой.
- Вызов нужной клавиатуры
Не во всех случаях нужна стандартная клавиатура с буковками и цифрами. Если вы пишете калькулятор, то проще показать пользователю цифровую клавиатуру. А если нужно ввести электронный адрес, то удобнее показать клавиатуру, где уже есть символ @. Ну а если ваше приложение пишется для котов, то достаточно вывести только те буквы, из которых можно составить слова Мяу и Жрать давай (к сожалению, такой клавиатуры еще нет, но Google работает в этом направлении).
У элемента EditText на этот случай есть атрибут inputType:
В данном случае с атрибутом inputType=»textCapWords» каждый первый символ предложения автоматически будет преобразовываться в прописную. Удобно, не так ли?
Если вам нужен режим CapsLock, то используйте значение textCapCharacters и все буквы сразу будут большими при наборе.
Для набора телефоного номера используйте phone, и тогда вам будут доступны только цифры, звездочка (*), решетка (#).
Для ввода веб-адресов удобно использовать значение textUri. В этом случае у вас появится дополнительная кнопочка .com (при долгом нажатии на нее появятся альтернативные варианты .net, .org и др.).
- Вот вам целый список доступных значений (иногда различия очень трудно различимы)
Позволяют ограничить количество строк текста, которое можно ввести в текстовом поле
Позволяет задать максимальное количество символов для ввода
Основной метод класса EditText — getText(), который возвращает текст, содержащийся в окне элемента EditText. Возвращаемое значение имеет специальный тип Editable, а не String.
Соответственно, для установки текста используется метод setText().
Большинство методов для работы с текстом унаследованы от базового класса TextView: setTypeface(null, Typeface), setTextSize(int textSize), SetTextColor(int Color).
У EditText есть специальные методы для выделения текста:
Предположим, нам нужно выделить популярное слово из трёх букв в большом слове (это слово «кот», а вы что подумали?).
// выделяем 4, 5, 6 символы edit.setSelection(3, 6);
У EditText есть специальные методы для выделения текста:
Предположим, нам нужно выделить популярное слово из трёх букв в большом слове (это слово «кот», а вы что подумали?).
- Обработка нажатий клавиш
Для обработки нажатий клавиш необходимо зарегистрировать обработчик View.OnKeyListener, используя метод setOnKeyListener() элемента EditText. Например, для прослушивания события нажатия клавиши Enter во время ввода текста пользователем (или котом), используйте следующий код:
- Сравнение текстовых полей при наборе текста
Другой вариант — представьте себе, что у вас есть два текстовых поля для ввода пароля и повторный ввод для его подтверждения. Добавим также элемент TextView, в котором будем отображать информацию о том, совпадают ли введенные пароли или нет. Мы будем проверять на совпадение строки в момент набора текста пользователем.
В этом примере пользователь вводит сначала любой пароль в первом поле. Когда он начинает вводить пароль во втором поле, то после каждого введенного символа идет проверка на совпадение паролей и присваивает соответствующий текст элементу TextView. Пустой ли EditText
- Чтобы проверить, пустой ли EditText, можно воспользоваться кодом:
- Также можно проверять длину текста, если она равно 0, значит текст пуст.
- Убрать фокус с текстового поля
Если вам нужно убрать мигающий курсор с текстового поля, то можно пойти на хитрость. Добавьте перед EditText в файле разметки следующий код:
Этот элемент заберёт на себя фокус. Также попробуйте прописать в манифесте для нужной активности строчку android:windowSoftInputMode=»stateHidden». Удалить текст при получении фокуса
Если логика вашего приложения требует убрать текст из EditText при получении фокуса, то вам необходимо отслеживать момент получения этого фокуса
Виджет AutoCompleteTextView — это текстовое поле с автозаполнением и возможностью редактирования вводимого текста. Использование виджета удобно в том случае, когда требуется ускорить процесс ввода текста.
На панели инструментов элемент можно найти в той же папке Text Fields.
AutoCompleteTextView является подклассом EditText, поэтому доступны все возможности форматирования и редактирования текста родительского класса, описанного выше.
Дополнительно, у AutoCompleteTextView есть свойство completionThreshold для указания минимального числа символов, которое должен ввести пользователь, чтобы включилась функция автозаполнения. Для связывания с данными необходимо задействовать адаптер, содержащий список значений через метод setAdapter().
Для упрощения создадим статический массив строк с именами котов и свяжем его через адаптер с нашим элементом в Java-коде. В реальных приложениях лучше использовать строковые ресурсы.
Если вы напечатаете два символа му, то появится выпадающий список с вариантами слов для продолжения. Дальше текст можно не набирать, а просто коснуться нужного варианта и готовый текст сразу вставится в текстовое поле. Вот так все просто и работает.
- Удалить текст при получении фокуса
Button
Кнопка — один из самых распространенных элементов управления в программировании. Наследуется от Textview и является базовым классом для класса СompoundButton. От класса CompoundButton в свою очередь наследуются такие элементы как CheckBox, ToggleButton и RadioButton. В Android для кнопки используется класс android.widget.Button. На кнопке располагается текст и на кнопку нужно нажать, чтобы получить результат. Альтернативой ему может служить элемент ImageButton (android.widget.ImageButton), у которого вместо текста используется изображение.
CompoundButton
Элемент управления ToggleButton по своей функциональности похож на флажок (checkbox) или переключатель (radiobutton) — Это кнопка, которая может находиться в одном из двух состояний: активна (On) или неактивна (Off). По умолчанию на кнопке написано Оn, если она активна, и Off — если нет. По внешнему виду это обычная кнопка с декоративной полоской в нижней части, которая подсвечивается в включенном состоянии (имитация LED-индикатора).
Если надписи On/Off для вашей программы не подходят, их можно изменить при помощи свойств Text on (атрибут android:textOn) и Text off (атрибут android:textOff). Поскольку надписи Оn и Off на кнопке-переключателе являются отдельными атрибутами, атрибут android: text не используется, он доступен, так как наследуется от ТextView, но в данном случае без него можно обойтись. В программном коде им соответствуют методы setTextOff() и setTextOn().
По умолчанию, ToggleButton находится в выключенном состоянии, чтобы его «включить», установите свойство checked в значение true. Свойству соответствует метод setChecked(boolean checked).
Основное событие ToggleButton — изменение состояния кнопки onCheckedChanged().
Напишем демонстрационную программу с использованием ToggleButton. Добавим на форму метку, изображение и кнопку-переключатель:
Для создания обработчика события изменения состояния кнопки необходима реализация интерфейса CompoundButton.OnCheckedChangeListener. Интерфейс имеет единственный метод onCheckedChanged(), который необходимо переопределить в нашем классе. При обработке события для определения состояния используется параметр isChecked.
CheckBox
Элемент CheckBox является флажком, с помощью которого пользователь может отметить(поставить галочку) определенную опцию. Очень часто флажки используются в настройках, когда нужно выборочно выбрать определенные пункты, необходимые для комфортной работы пользователю.
Для экспериментов воспользуемся программой «Счетчик ворон», которую писали при изучении щелчка кнопки.
Как вы помните, в программе была кнопка и текстовое поле. Добавим еще два элемента CheckBox, а также четыре текстовые метки TextView. Нам нужно постараться, чтобы элементы были аккуратно сгруппированы. Для этой цели воспользуемся вложенными LinearLayout. Заодно применим интересный прием — мы не будем использовать текст у флажков CheckBox, а воспользуемся текстовыми метками с разными размерами шрифтов. Верхняя метка с крупным шрифтом будет указывать на основную функциональность флажка, а нижняя метка с мелким шрифтом будет использоваться в качестве своеобразной подсказки, в которой содержится дополнительная информация для пользователя.
Флажки в нашем приложении нужны для того, чтобы пользователь мог менять вывод текста в текстовом поле. По желанию, можно выводить текст красным цветом и жирным стилем по отдельности или в совокупности. Для этого нам нужно добавить дополнительные строчки кода в обработчик щелчка кнопки.
Запустите проект и попробуйте снимать и ставить галочки у флажков в разным комбинациях, чтобы увидеть, как меняется текст после щелчка кнопки. Код очень простой — проверяется свойство isChecked. Если галочка у флажка установлена, то свойство возвращает True и мы меняем цвет (красный) или стиль текста (жирный). Если флажок не отмечен, то свойство возвращает False, и мы используем стандартные настройки текста.
ToggleButton
RadioButton
ImageView
ImageView — Компонент отображающий произвольное изображение, например иконки. Класс ImageView можете загружать изображения из различных источников. Виджет ImageView предназначен для отображения графики.
ImageView является базовым элементом-контейнером для использования графики. Можно загружать изображения из разных источников, например, из ресурсов программы, контент-провайдеров. В классе ImageView существует есть несколько методов для загрузки изображений:
Для загрузки изображения в XML-файле используется атрибут android:src.
Также вам часто придется использовать методы, связанные с размерами и масштабированием: setMaxHeight(), setMaxWidth(), getMinimunHeight(), getMinimunWidth(), getScaleType(), setScaleType().
- Загрузка изображения из интернета (Не работает с Android 4.0)
Загрузки изображения по его URL в ImageView. Разместим на форме текстовое поле и контейнер для изображения.
Источник
