Основы верстки android studio

Layout

Что такое Layout

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

Компоновка (также используются термины разметка или макет) хранится в виде XML-файла в папке /res/layout. Это сделано для того, чтобы отделить код от дизайна, как это принято во многих технологиях (HTML и CSS). Кроме основной компоновки для всего экрана, существуют дочерние элементы компоновки для группы элементов. По сути, компоновка – это некий визуальный шаблон для пользовательского интерфейса вашего приложения, который позволяет управлять элементами управления, их свойствами и расположением. В своей практике вам придется познакомиться со всеми способами размещения. Поэтому здесь мы рассмотрим только базовую часть теории, чтобы вы поняли саму сущность разметки. Кроме того, разметку можно создавать программным способом, который будет описан в конце статьи. Если вы будет обращаться к элементам управления через Java-код, то необходимо присваивать элементам уникальный идентификатор через атрибут android:id. Сам идентификатор назначается через выражение @+id/your_value. После этого вы можете обращаться к элементу через код при помощи метода findViewById(R.id.your_value).

Android Studio включает в себя специальный редактор для создания разметки двумя способами. Редактор имеет две вкладки: одна позволяет увидеть, как будут отображаться элементы управления, а вторая – создавать XML-разметку вручную.

Создавая пользовательский интерфейс в XML-файле, вы можете отделить представление приложения от программного кода. Вы можете изменять пользовательский интерфейс в файле разметки без необходимости изменения вашего программного кода. Например, вы можете создавать XML-разметки для различных ориентаций экрана мобильного устройства (portrait, landscape), размеров экрана и языков интерфейса.

Каждый файл разметки должен содержать только один корневой элемент компоновки, который должен быть объектом View или ViewGroup. Внутри корневого элемента вы можете добавлять дополнительные объекты разметки или виджеты как дочерние элементы, чтобы постепенно формировать иерархию элементов, которую определяет создаваемая разметка.

Виды разметок

Существует несколько стандартных типов разметок:

Все описываемые разметки являются подклассами ViewGroup и наследуют свойства, определённые в классе View.

Комбинирование

Компоновка ведёт себя как элемент управления и их можно группировать. Расположение элементов управления может быть вложенным. Например, вы можете использовать RelativeLayout в LinearLayout и так далее. Но будьте осторожны: слишком большая вложенность элементов управления вызывает проблемы с производительностью.

Можно внедрить готовый файл компоновки в существующую разметку при помощи тега :

Подробнее в отдельной статье Include Other Layout

Программный способ создания разметки

Для подключения созданной разметки используется код в методе onCreate():

Естественно, вы можете придумать и свое имя для файла, а также в приложениях с несколькими экранами у вас будет несколько файлов разметки: game.xml, activity_settings.xml, fragment_about.xml и т.д.

В большинстве случаев вы будете использовать XML-способ задания разметки и подключать его способом, указанным выше. Но, иногда бывают ситуации, когда вам понадобится программный способ (или придётся разбираться с чужим кодом). Вам доступны для работы классы android.widget.LinearLayout, LinearLayout.LayoutParams, а также Android.view.ViewGroup.LayoutParams, ViewGroup.MarginLayoutParams. Вместо стандартного подключения ресурса разметки через метод setContentView(), вы строите содержимое разметки в Java, а затем уже в самом конце передаёте методу setContentView() родительский объект макета:

Число макетов постоянно меняется. Например, недавно появились новые виды CoordinatorLayout и ConstraintLayout. Кроме стандартных элементов разметки существуют и сторонние разработки.

Источник

Верстка Android макетов без боли

Разрабатывать интерфейс Android приложений — непростая задача. Приходится учитывать разнообразие разрешений и плотностей пикселей (DPI). Под катом практические советы о верстке макетов дизайна Android приложений в Layout, который совпадает с макетом на одном устройстве а на остальных растягивается без явных нарушений дизайна: выхода шрифтов за границы; огромных пустых мест и других артефактов.

На iPhone layout задаются абсолютно и всего под два экрана iPhone 4 и iPhone 5. Рисуем два макета, пишем приложение и накладываем полупрозрачные скриншоты на макеты. Проблем нет, воля дизайнера ясна, проверить что она исполнена может сам разработчик, тестировщик или, даже, билд-сервер.

Под Android у нас две проблемы: нельзя нарисовать бесконечное число макетов и нельзя сверить бесконечное число устройств с конечным числом макетов. Дизайнеры проверяют вручную. Разработчики же часто понятия не имеют как правильно растягивать элементы и масштабировать шрифты. Количество итераций стремится к бесконечности.

Чтобы упорядочить хаос мы пришли к следующему алгоритму верстки. Макеты рисуются и верстаются под любой флагманский full-hd телефон. На остальных красиво адаптируются. Готовое приложение проверяет дизайнер на популярных моделях смартфонов. Метод работает для всех телефонов, для планшетов (>6.5 дюймов) требуются отдельные макеты и верстка.

Под рукой у меня только Nexus 4 возьмем его характеристики экрана для примера.

Макеты ненастоящего приложения-портфолио которые будем верстать (полноразмерные по клику).

Layout

Основную верстку делаем через вложенные LinearLayout. Размеры элементов и блоков в пикселях переносим с макета в weight и weightSum соответственно. Отступы верстаем FrameLayout или в нужных местах добавляем Gravity.

Для примера сверстаем ячейку списка приложений:

Дальше нам потребуется много DisplayMetrics-магии, напишем для него static helper.

1184 это высота Nexus 4 без кнопок, 768 — ширина. Эти значения используются, чтобы выяснить во сколько раз высота и ширина устройства, на котором запущено приложение, отличаются от эталонного.

ScrollView и List

Подход с weightSum не примемим к прокручивающимся элементам, их внутренний размер вдоль прокрутки ничем не ограничен. Для верстки ScrollView и List нам потребуется задать их размеры в коде (130 — высота элемента списка).

И дальше можно применять трюк с weightSum.

Картинки

Размер иконок приложений задается в коде:

Где 240 высота элемента списка, 20 высота отступа сверху и снизу.

Шрифты

Андроид не предоставляет единицу измерения пропорциональную размеру экрана. Размеры шрифтов рассчитываем на основании диагонали устройства:

Да, размеры шрифта придется задавать в коде (36 размер шрифта в пикселях на оригинальном макете).

Советы по работе с графикой

1. Используйте Nine-patch везде где возможно, где невозможно — перерисуйте дизайн.
2. Простые элементы рисуйте с помощью Shape
3. Избегайте масштабирования изображений в runtime

Nine-patch это графический ресурс содержащий в себе мета-информацию о том как он должен растягиваться. Подробнее в документации Android или на Хабре.

Nine-patch нужно нарезать под все dpi: ldpi mdpi tvdpi hdpi, xhdpi, xxhdpi. Масштабирование ресурсов во время работы приложения это плохо, а масштабирование Nine-Patch приводит к неожиданным артефактам. Ни в коем случае не задавайте в Nine-patch отступы, они оформляются отдельными элементами layout, чтобы растягиваться пропорционально контенту.

Shape

Если ресурс легко раскладывается на простые геометрические фигуры и градиенты лучше вместо нарезки использовать xml-shape. Для примера нарисуем фон рамку вокруг проекта в списке, которую мы выше нарезали как Nine-patch.

Картинки

Масштабирование графики силами Android трудоемкая и затратная по памяти операция. Картинки внутри Android обрабатываются как bitmap. Например, наш логотип в размере 500×500 со сплешскрина распакуется в bitmap размером 1мб (4 байта на пиксель), при масштабировании создается еще один bitmap, скажем в 500кб. Или 1,5мб из доступных 24мб на процесс. Мы не раз сталкивались с нехваткой памяти в богатых на графику проектах.

Поэтому картинки которые нельзя описать ни Nine-patch ни Shape я предлагаю поставлять в приложении как огромный ресурс в папке nodpi и при первом запуске масштабировать изображение до нужного размера и кешировать результат. Это позволит нам ускорить работу приложения (не считая первого запуска) и уменьшить потребление памяти.

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

Источник

Русские Блоги

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

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

Что такое макет?

Разработчики Android используют термин «макет» для обозначения одного из двух значений. Оба определения используются в этом руководстве, и, к сожалению, в сообществе разработчиков Android они смешаны. Два определения макета следующие:

Ресурс, определяющий, что рисовать на экране. Ресурсы макета хранятся в файле XML в каталоге ресурсов / res / layout приложения. Ресурс макета — это просто шаблон для экрана пользовательского интерфейса или части экрана и содержимого.

Класс представления, который в основном используется для организации других элементов управления. Эти классы макета (LinearLayout, RelativeLayout, TableLayout и т. Д.) Используются для отображения дочерних элементов управления на экране, таких как текстовые элементы управления, кнопки или изображения.

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

Используйте Eclipse для разработки ресурсов макета

Подключаемый модуль разработки Eclipse для Android включает очень удобный дизайнер ресурсов макета для проектирования и предварительного просмотра ресурсов макета. Этот инструмент включает в себя два представления вкладок: представление макета позволяет вам предварительно просмотреть, как элементы управления будут отображаться на разных экранах и для каждого направления; представление XML сообщает вам определение XML ресурса. Конструктор ресурсов макета выглядит следующим образом:

Вот несколько советов по использованию редактора ресурсов макета в Eclipse:

◆ Используйте панель «Структура» для добавления и удаления элементов управления в ресурсах макета.

◆ Выберите конкретный элемент управления (в окне предварительного просмотра или сводки) и используйте панель свойств для настройки свойств конкретного элемента управления.

◆ Используйте теги XML для непосредственного редактирования определений XML.

Важно помнить, что редактор ресурсов макета Eclipse не может точно имитировать внешний вид макета для конечного пользователя. Для этого вы должны выполнить тестирование в правильно настроенном симуляторе и, что более важно, протестировать на целевом устройстве. А некоторые «сложные» элементы управления, включая теги или средства просмотра видео, нельзя предварительно просмотреть в Eclipse.

Определите ресурсы макета XML

Самый удобный и поддерживаемый способ разработки пользовательского интерфейса программы — это создание ресурсов макета XML. Этот метод доступа значительно упрощает процесс разработки пользовательского интерфейса, перемещая статический продукт и макет многих элементов управления пользовательского интерфейса, а также определения атрибутов элемента управления в XML вместо написания кода. Он адаптируется к потенциальной разнице между дизайнерами пользовательского интерфейса (больше озабоченными компоновкой) и разработчиками (понимающими Java и реализующими функции приложения). Разработчики по-прежнему могут динамически изменять содержимое экрана при необходимости. Сложные элементы управления, такие как ListView или GridView, обычно используют программы для динамической обработки данных.

Ресурсы макета XML должны храниться в / res / layout в каталоге проекта. Создание ресурса макета XML для каждого экрана (тесно связанного с действием) является обычной практикой, но это не обязательно. Теоретически вы можете создать ресурс макета XML и использовать его в различных действиях для предоставления различных данных для экрана. При необходимости вы также можете распределить ресурсы макета и включить их в другой файл.

Ниже приведен простой ресурс макета XML, шаблон LinearLayout содержит TextView и ImageView, определенные в XML:

1. xml version = «1.0» encoding = «utf-8» ?>
2. LinearLayout xmlns:android = «http://schemas.android.com/apk/res/android»
3. android:orientation = «vertical»
4. android:layout_width = «fill_parent»
5. android:layout_height = «fill_parent»
6. android:gravity = «center» >
7. TextView
8. android:layout_width = «fill_parent»
9. android:id = «@+id/PhotoLabel»
10. android:layout_height = «wrap_content»
11. android:text = «@string/my_text_label»
12. android:gravity = «center_horizontal»
13. android:textSize = «20dp»/>
14. ImageView
15. android:layout_width = «wrap_content»
16. android:layout_height = «wrap_content»
17. android:src = «@drawable/matterhorn»
18. android:adjustViewBounds = «true»
19. android:scaleType = «fitXY»
20. android:maxHeight = «250dp»
21. android:maxWidth = «250dp»
22. android:id = «@+id/Photo»/>
23. LinearLayout >

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

Для отображения ресурса макета на экране требуется только одна строка кода, включая onCreate (). Если ресурсы макета хранятся в файле /res/layout/main.xml, код может быть следующим:

Используйте программу для динамического определения макета

Вы также можете использовать программы для создания компонентов пользовательского интерфейса. Для простоты организации и удобства обслуживания делайте это только в особые моменты, а не в общем. Вместо использования метода setContentView () для загрузки ресурсов макета напрямую необходимо создать содержимое экрана, а затем предоставить методу setContentView () родительский объект макета, который содержит содержимое всех отображаемых дочерних элементов управления.

Например, в следующем коде показано, как программно создать экземпляр представления LinearLayout и разместить в нем два TextView. Ресурсы не используются.

1. public void onCreate(BundlesavedInstanceState) <
2. super .onCreate(savedInstanceState);
3. //setContentView(R.layout.main);
4. TextViewlabel= new TextView( this );
5. label.setText(R.string.my_text_label);
6. label.setTextSize( 20 );
7. label.setGravity(Gravity.CENTER_HORIZONTAL);
8. ImageViewpic= new ImageView( this );
9. pic.setImageResource(R.drawable.matterhorn);
10. pic.setLayoutParams( new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
11. pic.setAdjustViewBounds( true );
12. pic.setScaleType(ScaleType.FIT_XY);
13. pic.setMaxHeight( 250 );
14. pic.setMaxWidth( 250 );
15. LinearLayoutll= new LinearLayout( this );
16. ll.setOrientation(LinearLayout.VERTICAL);
17. ll.setLayoutParams( new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
18. ll.setGravity(Gravity.CENTER);
19. ll.addView(label);
20. ll.addView(pic);
21. setContentView(ll);
22. >

Как видите, размер этих кодов будет быстро увеличиваться по мере добавления дополнительных элементов управления на экран, что затрудняет поддержку и повторное использование содержимого экрана.

Изучите различные типы макетов

Теперь давайте обратим наше внимание на элементы управления макетом, которые полезны для организации других элементов управления. Наиболее часто используемые классы компоновки:

◆ FrameLayout. Используется для отображения набора элементов управления суб-представления. К этому макету можно добавить элементы управления несколькими видами. Его можно использовать для отображения нескольких элементов управления в одном пространстве экрана.

◆ LinearLayout — используется для отображения элементов управления вспомогательного представления в одной строке или одном столбце. Это очень удобный метод верстки для создания форм.

◆ RelativeLayout — используется для отображения элементов управления подчиненного представления относительно друг друга. Например, вы можете установить для одного элемента управления положение «выше», «ниже», «слева» или «справа» относительно другого элемента управления. Вы также можете разместить дочерние элементы управления представлением относительно границы родительского элемента.

◆ TableLayout. Используется для организации элементов управления вложенного представления в строки или столбцы. Для каждой строки таблицы в каждую строку таблицы добавляется отдельный элемент управления представлением с использованием представления макета TableRow.

Используйте составные макеты для организации элементов управления

Макет (LinearLayout, TableLayout, RelativeLayout и т. д.) также является элементом управления, как и другие элементы управления. Это означает, что элементы управления макетом могут быть вложенными. Например, чтобы организовать элементы управления на экране, вы можете использовать RelativeLayout в LinearLayout и наоборот. На следующем рисунке показан экран, у него есть LinearLayout (родительский), TableLayout (верхний дочерний узел) и FrameLayout (нижний дочерний узел).

Но будьте осторожны! Убедитесь, что ваш экран относительно простой, сложные макеты загружаются медленно и могут вызвать проблемы с производительностью.

Предоставьте дополнительные ресурсы макета

Учитывайте различия устройств при разработке ресурсов макета программы. В нормальных условиях можно разработать гибкий макет, который будет хорошо смотреться на различных устройствах, будь то портретная ориентация или режим. При необходимости вы можете ввести дополнительные ресурсы макета для обработки особых ситуаций. Например, вы можете предоставить разные макеты для загрузки в зависимости от ориентации устройства или того, имеет ли устройство большой экран (например, веб-планшет).

Для получения дополнительных сведений об использовании дополнительных ресурсов см.Документация по Android-ресурсам AndroidSDK.

Инструменты верстки и оптимизация

AndroidSDK включает несколько инструментов, которые могут помочь нам разрабатывать, отлаживать и оптимизировать ресурсы макета. Помимо встроенного конструктора ресурсов макета в подключаемом модуле Eclipse для Android, вы можете использовать HierarchyViewer (средство просмотра иерархии) и Layoutopt, предоставляемые AndroidSDK. Эти инструменты можно найти в каталоге / tools вашего AndroidSDK.

Вы можете использовать HierarchyViewer для просмотра деталей макета во время выполнения. Вы можете узнать больше в разделе HierarchyViewer на веб-сайте разработчика Android.

Вы можете использовать инструмент командной строки Layoutopt (оптимизация макета) для оптимизации файлов макета. Оптимизация макета очень важна, потому что файлы сложных макетов загружаются медленно. Инструмент layoutopt просто сканирует файл макета XML и находит ненужные элементы управления. См. Дополнительную информацию в разделе Layoutopt на веб-сайте разработчика Android.

Пользовательский интерфейс приложения Android определяется с помощью макета. Существует множество различных типов макетов, которые можно использовать для организации элементов управления на экране. Макет может быть определен с использованием ресурсов XML или может быть определен во время выполнения с помощью программы Java. Дополнительные макеты могут быть загружены при особых обстоятельствах, например при предоставлении дополнительного пользовательского интерфейса в ландшафтном и портретном режимах. Наконец, хорошо продуманный макет важен для производительности приложения; используйте инструменты AndroidSDK, такие как HierarchyViewer и layoutopt, для отладки и оптимизации макета приложения.

Источник