Дизайн пользовательского интерфейса Android SDK

Android SDK: дизайн пользовательского интерфейса.

В этой серии мы узнаем о разработке Android SDK с нуля! В этом уроке мы создадим простой макет пользовательского интерфейса с несколькими визуальными элементами..

Введение.

Мы добавим макет в первый проект приложения, который мы создали и исследовали в течение нескольких последних руководств, и продолжим работу над проектом на протяжении всей этой серии. В этой части мы в основном будем работать с XML и интерфейсом Eclipse ADT, но в следующих двух частях мы начнем немного использовать Java. Кодирование как XML, так и Java задействовано во многих аспектах разработки Android, поэтому вам нужно будет понять основы этих языков, если вы еще этого не сделали. Если вы новичок в любом языке, вы будете использовать то, что мы узнаем из этой серии, в качестве основы для дальнейшего обучения.

1. Основы XML.

Прежде чем мы начнем с макетов, давайте рассмотрим некоторые основы XML для тех, кто раньше не использовал язык разметки. Если вы уже знакомы с XML, перейдите ко второй части этого руководства. XML — это язык, на котором хранятся значения данных. Файлы XML используются для самых разных целей. В некоторых проектах они работают как базы данных и часто моделируют вывод веб-страниц. Если вы раньше использовали HTML, вы должны быть знакомы с основными функциями.

В XML значения данных хранятся в элементах. Один элемент обычно включает открывающий тег и закрывающий тег, как в этом примере:

Как видите, открывающий и закрывающий теги одинаковы, за исключением ведущей косой черты. "/" с указанием закрывающего тега. Значение данных в этом случае — это содержимое элемента, текстовая строка. "Лук". Открывающий тег также может содержать атрибуты для дополнительной информации об элементе данных:

У каждого атрибута есть имя и значение, заключенное в кавычки. Элементы также могут содержать другие элементы:

В такой структуре мы говорим, что элемент section является родительским, а продукты — дочерними элементами. Два дочерних элемента также называются братьями и сестрами. В XML-документе должен быть один корневой элемент, который действует как родительский для всех содержащихся элементов, или "вложенный", внутри. Это создает древовидную структуру с дочерними элементами, отходящими от родительских элементов. Дочерний элемент также может быть родительским, если он также содержит дополнительные дочерние элементы..

Еще одна структура XML, которую вы увидите, — это самозакрывающийся элемент, у которого нет отдельных открывающих и закрывающих тегов:

Слэш "/" символ в конце элемента закрывает его.

Все файлы ресурсов, с которыми мы работаем на Android, используют разметку XML, включая файлы макетов, чертежи, значения данных и манифест..

2. Макеты Android.

Шаг 1.

Когда вы работаете с XML в Eclipse IDE с установленным ADT, процесс кодирования немного упрощается благодаря контекстным подсказкам, которые вы будете видеть по мере ввода. Откройте основной файл макета вашего нового приложения в редакторе и убедитесь, что у вас выбрана вкладка редактирования XML, чтобы мы могли напрямую работать с кодом. Это макет основного экрана, который пользователи видят при запуске приложения. Eclipse представил базовый макет, с которым мы можем работать:

Как видите, корневой элемент — это элемент макета, в данном случае RelativeLayout. На Android есть несколько разных типов макетов, и вы можете вкладывать макеты друг в друга. Здесь корневой элемент макета имеет ряд атрибутов, указывающих дополнительную информацию о макете, например ширину, высоту и поля. Внутри элемента макета находится TextView — он позволяет отображать текстовую строку. TextView — это тип представления. Представления — это видимые и интерактивные элементы, составляющие пользовательский интерфейс вашего приложения. Поэтому каждый экран в вашем приложении представляет собой набор представлений, упорядоченных с использованием одного или нескольких макетов. В Android макеты описываются как объекты ViewGroup, причем каждая ViewGroup содержит одно или несколько представлений. .

Шаг 2.

Чтобы сосредоточиться на основных строительных блоках макета, удалите существующее содержимое вашего основного файла макета, и мы начнем с нуля. Как мы упоминали ранее в этой серии, вы можете создавать свои макеты и представления в коде Java, но инструменты Android позволяют использовать XML для разработки пользовательских интерфейсов приложения, поскольку вы можете видеть видимые результаты при создании элементов. Могут быть случаи, когда имеет смысл создать часть или весь пользовательский интерфейс на Java, но по большей части вы должны использовать XML. Эта практика также разделяет логику приложения и элементы представления..

Первой задачей при построении макета является выбор типа макета. Начнем с одного из самых простых: LinearLayout. .

LinearLayout упорядочивает представления, которые мы хотим отображать, по горизонтальной или вертикальной линии. В этом случае ориентация вертикальная, поэтому каждый вид добавляется на экран под последним. Горизонтальный макет добавляет просмотры слева направо. Макет заполняет доступное пространство как по горизонтали, так и по вертикали с помощью "layout_width" и "layout_height" атрибуты (в Android их часто называют параметрами макета).

Добавьте новую строку после строки, в которой "layout_height" объявляется. Начните вводить атрибут, введя "андроид:". Когда вы вводите двоеточие, Eclipse должен предложить вам список соответствующих атрибутов. Вы можете продолжить ввод, чтобы сузить список предложений, или прокрутите его, чтобы выбрать нужный с помощью мыши. Выберите "андроид: гравитация" атрибут.

Входить "center_horizontal" в качестве значения силы тяжести, чтобы содержащиеся элементы отображались по центру оси X:

Это относится ко всему внутри макета. Мы можем установить несколько дополнительных свойств отображения, таких как отступы, поля и фон. Но давайте пока будем проще.

3. Добавление просмотров.

Шаг 1.

Затем мы добавим в макет несколько видов. Представления — это видимые элементы пользовательского интерфейса. Добавим текст и кнопку. Внутри элемента LinearLayout (между открывающим и закрывающим тегами) начните с ввода "

Выберите TextView из списка. Обратите внимание, что это самозакрывающийся элемент, как и большинство представлений. Задайте атрибуты TextView, начиная с ширины и высоты макета (введите "андроид:" и воспользуйтесь подсказками):

Мы устанавливаем вид достаточно широким, чтобы вместить его содержимое, используя "обернуть содержимое", вместо заполнения родительского элемента, как мы это делали с макетом. Добавьте еще один атрибут в TextView, на этот раз перечислив текстовую строку, отображаемую в нем:

Когда вы сохраните файл, вы увидите, что Eclipse отображает предупреждающее сообщение. Если вы наведете на него курсор, в поле редактора отобразится текст, который также отображается в представлении «Проблемы». Он гласит "Жестко запрограммированная строка. следует использовать ресурс @string". Рекомендуемая практика — хранить каждое значение текстовой строки как ресурс значений, а не включать его непосредственно в XML макета. Хотя поначалу это может показаться лишней работой без всякой причины, стоит выработать привычку делать это, поскольку вы увидите выгоду от этого, когда ваши проекты станут больше. Найди "res / values ​​/ strings.xml" файл в проводнике пакетов и откройте его. Переключитесь на "strings.xml" вкладка для редактирования кода.

Вы увидите, что Eclipse уже добавил несколько строк. Добавьте еще один, задав ему имя и значение:

Это означает, что если вы используете одну и ту же строку более чем в одном месте пользовательского интерфейса приложения и если позже вы решите изменить ее, вам нужно будет сделать это только в одном месте. Сохраните файл строк и вернитесь к файлу макета. Измените свой TextView "текст" атрибут для ссылки на строку в файле значений:

Мы используем имя строки, которому предшествует "@нить" чтобы сообщить инструментам Android, где найти строковый ресурс. Предупреждение должно исчезнуть. Eclipse часто делает это, пока вы пишете код, чтобы указывать на ошибки и предупреждения. Вы можете выбрать, следует ли наблюдать предупреждения, но в случае ошибок вам необходимо принять меры, иначе ваше приложение не будет работать..

Шаг 2.

После TextView добавьте кнопку:

В этом случае Button использует те же атрибуты, что и TextView. Но возможно гораздо больше атрибутов, и, как правило, для разных представлений требуются разные атрибуты. В "текст" значение атрибута отображается на кнопке. Добавьте строку в свой "res / values ​​/ strings.xml" файл как раньше:

В следующем уроке мы будем обрабатывать нажатия на кнопку. Вернитесь к файлу макета. Посмотрите на вид Outline справа от редактора, он отображает другой интерфейс для файловых элементов. Двойной щелчок по перечисленным элементам позволяет перейти к их местоположению в коде. Вы также можете разворачивать и сворачивать родительские элементы. Это особенно полезно, когда ваши макеты становятся более сложными..

4. Графический макет.

Шаг 1.

Убедитесь, что ваш файл макета сохранен, и перейдите на вкладку Graphical Layout..

Вы можете видеть визуальное представление своего макета в процессе его разработки. Область палитры слева позволяет выбирать элементы пользовательского интерфейса и перетаскивать их на макет. Однако для начала вам следует использовать XML, по крайней мере, до тех пор, пока вы не разберетесь с основами. XML дает вам контроль над деталями, поэтому даже если вы используете графические инструменты, вам, вероятно, потребуется отредактировать результаты XML..

В верхней части представления «Графический макет» находится раскрывающийся список, в котором вы можете выбрать устройства, на которых будет отображаться макет, а также инструменты для переключения ориентации и масштабирования. Поэкспериментируйте с элементами управления графическим макетом при создании макетов. Есть еще несколько других элементов макета и настроек, которые стоит изучить..

Шаг 2.

Сначала вы могли заметить, что видимые элементы в макете появляются очень близко к верхнему краю экрана. Давайте разберемся с этим. Вернитесь на вкладку редактирования XML и добавьте атрибут поля в LinearLayout:

Мы используем "дп" для пикселей, не зависящих от плотности, чтобы дизайн автоматически масштабировался до плотности экрана пользователя. Сохраните файл и вернитесь к графическому макету, чтобы увидеть эффект..

Графический макет — полезный справочный инструмент при разработке макетов, но это только руководство. Чтобы увидеть, как ваши макеты выглядят и работают во время работы ваших приложений, вы должны загрузить их на виртуальные или физические устройства. Мы рассмотрим это позже в этой серии..

5. Параметры.

Вы можете включать различные типы макетов и представления на экраны приложений, но основной процесс остается прежним. Выше мы использовали LinearLayout, но есть и многие другие. Среди наиболее распространенных — RelativeLayout, FrameLayout, AbsoluteLayout и GridLayout. Вы найдете все эти типы в палитре графического макета, так что не стесняйтесь попробовать некоторые из них и добавить к ним несколько видов по вашему выбору. Когда вы добавляете элементы из инструмента Graphical Layout, переключайтесь на XML каждый раз, чтобы увидеть, какой код разметки это создает..

Платформа Android предоставляет представления для многих общих целей, таких как переключатели, флажки и поля ввода текста. Это экономит количество функций, которые вы реализуете вручную, но если вам нужен элемент пользовательского интерфейса, который не предоставляется, вы можете создать собственный пользовательский класс View. В общем, лучше делать это только в том случае, если у вас нет другого выбора, поскольку стандартные элементы пользовательского интерфейса более надежны на пользовательских устройствах. Они также экономят время на разработку и тестирование..

Заключение.

В этом руководстве мы рассмотрели основы, необходимые для разработки макетов пользовательского интерфейса на Android, но мы лишь коснулись поверхности того, что возможно. В следующей части этой серии мы добавим некоторое взаимодействие с пользователем в приложение, а также будем обнаруживать и реагировать на щелчки по добавленной нами кнопке. После этого мы рассмотрим наиболее актуальные концепции Java, которые нам нужно знать об Android, прежде чем углубляться в различные ингредиенты и методы, используемые при разработке приложений..

Похожие статьи