Стоимость адаптивная верстка: Сколько стоит адаптивная верстка: цены на адаптацию сайта под мобильные устройства

Адаптивная html верстка сайта, заказать верстку, цена ниже у нас👍

Что такое адаптивная верстка? Она представляет собой неотъемлемую часть современного веб-сервиса, которая может изменять дизайн страницы, учитывая диагональ экрана, особенности платформы, ориентацию устройства и поведение пользователя.

Адаптивная верстка не предполагает наличие горизонтальной прокрутки и областей для масштабирования, только читабельный текст и объемные площади для кликабельного элемента. Благодаря медиа запросам можно компоновать и перестраивать шаблоны так, чтобы они адаптировались под определенный размер экрана.

Актуальность вопроса

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

Но это оказалось совсем недешево, долго и неудобно. Решила проблему такая инновация, как верстка адаптивного сайта. Благодаря ей веб-страницы могут адаптироваться под диагональ любого гаджета. С помощью верстки можно экономить средства, не рисуя новый дизайн для каждого разрешения, а просто менять размеры и размещение отдельных элементов.

Верстка многостраничного сайта

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

Создавать мобильную версию параллельно с основной или внедрять адаптивную верстку многостраничного сайта, которая легко подстроится под нужный экран? Для этого стоит оценить плюсы и минусы двух технологий, а также их способность воздействовать на “поведение” сайта.

В 2015 году исследователи компании TNS опубликовали результаты проекта, во время которого они изучали поведение интернет российских пользователей. Оказалось, что больше 60% аудитории выходят в сеть с мобильного устройства.

Аналогичную статистику опубликовал сервис MobilizeToday.ru. – из 50% смарт-пользователей, которые заходят на сайт с неудобной навигацией, половина сразу же покидает его.

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

Причин, которые указали на необходимость оптимизировать сайты под мобильную технику, оказалось несколько:

1. Удобная навигация – не нужно увеличивать поле для ввода текста и, нажимая нужную кнопку, пользователь не промахивается.
2. Отсутствие необходимости для владельца, покупать приложения для разных платформ – его сайт сможет открываться на любом устройстве.
3. Увеличение покупок и сделок – клиенты в любой момент могут зайти на мобильный сайт и приобрести то, что нужно.
4. Коммерческая надежность – форма заказа также адаптируется под гаджет и позволяет сделать заказ быстро и просто.

Благодаря адаптации сайтов владельцы резюмируют, что мобильный трафик растет с каждым годом. Нежелание принимать новшество приводит к удару по конверсии, значительной потере клиентов и снижению доходности бизнеса. Отзывы сотрудников западных фирм подтверждают тот факт, что после верстки сайта по psd макету, конверсия существенно вырастает и цифры достигают 400%. Конечно, большую роль играет и качество адаптивной версии, поэтому за такими услугами обращаться нужно только к опытному верстальщику – компании “Нужен сайт”.

Как это работает

Для того, чтобы создать ресурс, дружественный с мобильным гаджетом, применяются две стратегии – адаптивная верстка и создание мобильного варианта.

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

Это не требует создания отдельного дизайна для каждого девайса, а функциональность сайта при этом остается на высоком уровне. Эффективными инструментами в процессе создания ресурса может стать верстка wordpress или же верстка opencart. Адаптивный дизайн больше подходит для владельцев блогов, небольших сайтов или интернет-магазинов, где покупателей не так много, а также для компаний, которые занимаются доставкой контента.

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

Адаптивная верстка сайта в Москве — YouDo

Адаптивная верстка сайта, цены на которую у мастеров Юду невысоки, выполняется в короткие сроки. На youdo.com вы сможете найти опытных фрилансеров или специализированные фирмы, которые оказывают широкий спектр услуг в Москве.

Стоимость создания адаптивного дизайна сайтов или оптимизации страниц, предлагаемая мастерами Юду, на 30-35% ниже, чем расценки в веб-студиях из Москвы. Невысокие цены обусловлены отсутствием расходов на аренду помещений, рекламу и посреднические услуги.

Какие работы могут сделать мастера Юду?

Фрилансеры и специализированные компании, найти которых можно на YouDo, справятся с любым заданием. Ответственные специалисты выполнят следующие виды работ:

• адаптивная, статическая верстка сайта
• разработка дизайна
• написание HTML-кодов для сайта
• создание каталогов, журналов, буклетов

Обратившись к верстальщику, зарегистрированному на Юду, вы сэкономите свои финансы и время. Заказать адаптацию главной страницы сайта под смартфоны и планшеты можно, разместив соответствующее задание на youdo.com.

Особенности работы мастеров Юду

Создать хорошие адаптивные сайты могут профессионалы, зарегистрированные на Юду. Опытные верстальщики, найти которых можно на YouDo, прекрасно разбираются в особенностях разработки дизайна и написания HTML-кодов для корректного отображения на экранах смартфонов и планшетов. Выбранный вами исполнитель быстро сверстает одну страницу. Благодаря этому сайты будут адаптированы под любое разрешение экрана и станут доступны для удобного просмотра посетителям вашего ресурса.

Сверстанные мастерами Юду адаптивные страницы отлично открываются на:

• телефонах с операционной системой iOS, Android, Windows Phone
• стационарных персональных компьютерах, нетбуках
• планшетах

Верстка сайтов позволяет обеспечить:

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

Обратитесь за помощью к мастерам Юду и закажите создание адаптивных страниц для интернет-магазинов, строительных и производственных компаний. При поиске исполнителя ознакомьтесь с отзывами, которые оставили другие клиенты в профилях специалистов на сайте YouDo.

Стоимость услуг специалистов Юду

Адаптивная верстка сайта, цены на которую доступны, проводится исполнителями YouDo в короткие сроки. Узнать, сколько стоит сделать макеты веб-страниц у специалистов и компаний, можно, ознакомившись с прейскурантами, размещенными на Юду. Расценки, по которым профессионалы, зарегистрированные на youdo.com, делают сайты для интернет-магазинов, определяются:

• сложностью выполнения задания (оптимизация сайта, разработка дизайна, поиск графических элементов)
• спецификой работы
• необходимостью с

Адаптивная верстка сайта: цена. +7(964)788-22-11

Адаптивная верстка сайта

Адаптивная верстка – стиль современности

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

Зачем это нужно

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

Как это работает

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

Особые требования к дизайну

Очевидно, что подобные технические превращения создают определенные требования к дизайну. Чтобы настроить адаптивную верстку нужно использовать

• минималистичный стиль
• минимум фоновых изображений
• акцентирование на главные блоки информации
• выпадающее меню.

Увидеть, как это работает можно в портфолио. Загляните, например, на сайт нашего клиента компании «3 пирога» с мобильного телефона. Вы получите  не только представление об адаптивной верстке, но и ощутите на себе удобство пользования таким сайтом.

Итог

Перед принятием решения об изменениях нужно изучить данные счетчиков Яндекс.Метрики или Google Analitics. Перевод сайта на адаптивную версию оправдан в том случае, если доля мобильного трафика достаточно велика или начинает увеличиваться. Оставлять сайт в прежнем виде в такой ситуации – значит терять клиентов.

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

Если Ваш сайт приносит стабильный доход, находится в лидерах поисковых запросов, и Вы опасаетесь что-то менять на нем, то более осторожным решением может стать создание мобильной версии. Многие солидные ресурсы именно так и поступают: предлагают своим посетителям выбор – перейти на мобильную версию или остаться на основном сайте.

Техника адаптивной компоновки — список разделенных

Жидкая верстка на основе CSS зарекомендовала себя успешно во время правления экранов с разрешением от 800 до 1024 пикселей, но поскольку мы используем более широкий спектр устройств для доступа в Интернет, нам нужны более мощные и гибкие способы управления макетом. Если мы хотим обслуживать устройства с диапазоном окон просмотра от 240 до примерно 1680 пикселей и с разрешением от 72 до 150 пикселей на дюйм, нам нужен новый метод.

Продолжение статьи ниже

В чем проблема с жидкими макетами? # Section2

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

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

Switchy McLayout спешит на помощь # section3

Switchy McLayout позволяет вам определять размеры, информационную насыщенность и внешний вид ваших объектов контента для заданных диапазонов размеров экрана.Например, новостной сайт может иметь один макет и внешний вид для широких экранов, один для экранов среднего размера и другой для КПК. Изображения могут уменьшаться или даже исчезать в зависимости от размера экрана, столбцы могут появляться и исчезать по мере необходимости для обеспечения удобочитаемости, и вы можете добиться более эффективного использования доступного пространства для каждого размера экрана.

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

Рис. 1. Постепенное состояние появления новости.

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

Теперь, когда мы определили диапазон макетов, нам нужно определить фактический размер экрана пользователя и активировать соответствующую группу стилей.Мы будем использовать метод переключения стилей, который зависит от класса элемента body .

JavaScript, наш помощник по CSS # section5

Чтобы отслеживать фактический размер экрана пользователя и переключать классы в body-element, мы используем небольшой ненавязчивый JavaScript. Посредством события onresize объекта window мы получаем размер окна / экрана. Тернарный оператор выбирает соответствующий макет и имя класса, и этот класс добавляется через DOM к классам, уже находящимся в элементе body .Когда JavaScript недоступен, макет деградирует до жидкого макета «старой школы».

Обратите внимание, что разные браузеры используют разные модели событий. IE6, например, запускает событие onresize в реальном времени, тогда как Firefox запускает событие onresize только в конце фактического изменения размера.

Прогрессивное сжатие контента # section6

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

Рисунок 2: Различные состояния прогрессивного сжатия контента

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

Растущее число популярных размеров и разрешений экранов заставит веб-дизайнеров предлагать привлекательный контент для самых разных устройств. Switchy McLayout — это шаг к решению этой проблемы.

Благодарности и альтернативы # section9

Хотя техника, представленная выше, была разработана независимо, многие связанные методы были внедрены в других местах.Ричард Раттер собирает серию таких техник в Clagnut, а Кевин Хейл представляет технику, которая дает аналогичный результат, используя несколько иной метод в Particletree. Пионерская работа Энди Кларка и Джеймса Эдвардса «Вторжение переключателей тел» помогла популяризировать использование классов body для изменения макетов.

.

Adaptive UI Tutorial для Android с Kotlin

Примечание об обновлении : в этом руководстве теперь установлена ​​последняя версия Android Studio версии 3.0.1, и для разработки приложений используется Kotlin. Обновление Джо Ховарда. Оригинальное руководство Джеймса Ночентини.

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

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

• Квалификаторы конфигурации
• Альтернативные схемы и чертежи
• И предварительный просмотр макета в Android Studio — чрезвычайно полезный инструмент

Что было бы за учебник, если бы с чем не пришлось возиться? Было бы довольно скучно.Итак, вы создадите пользовательский интерфейс для простого погодного приложения полностью с нуля! Когда вы закончите, на экране отобразятся изображение, текстовые метки и карта в трех различных конфигурациях. Приложения выглядят такими крутыми и хорошо построенными, когда у них есть адаптивный интерфейс. :]

Начало работы

Загрузите стартовый проект Adaptive Weather здесь и откройте его в Android Studio 3.0.1 или более поздней версии. Затем собери и беги.

Приложение отображает простой RecyclerView со списком нескольких городов.

Чтобы узнать все о RecyclerViews, мы рекомендуем прочитать наше руководство по Android RecyclerView.

Откройте файл build.gradle модуля app , чтобы объявить следующую зависимость:

dependencies {
  ...
  реализация 'com.google.android:flexbox:0.3.2'
}
 

FlexBox от Google обеспечивает реализацию спецификации FlexBox на платформе Android. Как вы увидите позже, это очень полезный инструмент для разработки адаптивных макетов.А сочетание его с системой квалификаторов ресурсов Android делает его еще более мощным!

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

Во время этого руководства вы часто будете переключаться между режимами Android и Project в навигаторе Project .Вообще говоря:

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

Иконки погоды

Устройства

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

• ldpi (низкое) ~ 120 dpi
• mdpi (среднее) ~ 160 dpi
• hdpi (высокое) ~ 240 dpi
• xhdpi (сверхвысокое) ~ 320dpi
• xxhdpi (сверхвысокое) ~ 480dpi
• xxxhdpi (экстра-экстра-сверхвысокое) ~ 640 dpi

Хотя некоторые редакторы пользовательского интерфейса упрощают экспорт изображений разных размеров, в этом руководстве мы рассмотрим другой подход.Android Studio недавно добавила поддержку Vector Drawables . Это означает, что все ваши активы могут быть импортированы один раз и будут масштабироваться во время выполнения в зависимости от конфигурации устройства (размера и ориентации экрана).

Загрузите иконки погоды и распакуйте. В Android Studio щелкните правой кнопкой мыши res / drawable и выберите пункт меню New \ Vector Asset :

Выберите Локальный файл (SVG, PSD) под Тип актива .В окне выбора расположения файловой системы в разделе Путь найдите папку weather-icons и выберите первый значок, cloud.svg . Обязательно проверьте значение Override при настройке Size , иначе ваши значки будут выглядеть немного искаженными позже (¯ \ _ (ツ) _ / ¯). Нажмите Далее и Готово :

Теперь вы должны увидеть свой значок в Android Studio как res / drawable / ic_cloud.xml . Повторите те же операции для других значков: туман, дождь, снег, солнце, гром.

Наконец, разрешите использование векторных чертежей в приложении app module build.gradle следующим образом:

android {
  ...

  defaultConfig {
      ...
      vectorDrawables.useSupportLibrary = true
  }
}
 

Теперь, когда в проекте есть масштабируемые ресурсы, вы готовы приступить к настройке макетов.

Планы зданий

С объявленными зависимостями вы можете переключить свое внимание на создание некоторых макетов!

Это простое приложение содержит только один экран, который представлен MainActivity .В навигаторе Project откройте res / layout / activity_main.xml . Нажмите кнопку Preview справа, чтобы увидеть его в действии.

Действие включает класс Kotlin или Java — в данном случае MainActivity.kt — и файл макета. Фактически, одно действие может иметь несколько макетов, как вы вскоре увидите. На данный момент важно помнить, что существующий файл макета, activity_main.xml , является макетом по умолчанию.

Сетка прогнозов

Сначала определите макет по умолчанию для вашего основного вида деятельности.Для этого откройте res / values ​​/ colors.xml и замените его содержимое следующим:

<ресурсы>
   # 9B26AF 
   # 89229b 
   # ffffff 
   ​​# 89bef2 

 

Здесь вы переопределяете цвета темы материала по умолчанию и задаете цвет фона для сетки прогнозов.Затем щелкните правой кнопкой мыши папку values ​​ и выберите меню New \ Value resource file :

Введите fractions.xml в качестве имени файла и вставьте следующее:

<ресурсы>
   33% 

 

Здесь вы указываете, что ширина каждого значка должна составлять 1/3 от общей ширины.

Затем создайте новый макет в res / layout с именем прогноз_grid.xml и добавьте следующий список изображений внутри FlexboxLayout :

В отношении вышеуказанного блока следует отметить пару вещей:

1. Вы используете ресурс com.google.android.flexbox.FlexboxLayout для размещения значков на экране.
2. Вы используете ресурс android.support.v7.widget.AppCompatImageView для рисования значков погоды на экране. Обычно ресурс ImageView используется с простыми изображениями ( .png, , .jpg ), но для векторных чертежей вы должны вместо этого использовать этот компонент.

Примечание: Если действие / диалоговое окно предоставлено appcompat из библиотеки поддержки, то система Android будет использовать AppCompatImageView под капотом, если вы укажете в макете обычный ImageView . Итак, в этом случае вы можете просто использовать обычный ImageView с вашими векторными ресурсами.

На панели предварительного просмотра вы увидите, правильно ли выровнены значки погоды:

Это уже начинает казаться адаптивным!

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

Основная деятельность

Откройте res / layout / activity_main.xml и замените его содержимое следующим:

  <включить
    layout = "@ layout / прогноз_грид"
    android: layout_width = "match_parent"
    android: layout_height = "0dp"
    android: layout_weight = "1" />

  


 

Вот что происходит в этом макете:

• Ориентация для LinearLayout установлена ​​на вертикальную
• Размеры: используя атрибут layout_weight XML, вы устанавливаете для каждого дочернего представления половину высоты экрана.
• Повторное использование макета: используя тег include XML, вы размещаете сетку прогнозов в верхней половине, ссылаясь на прогноз_grid.xml макет. Это одна из основных функций для создания разных макетов без дублирования кода.

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

Сборка и запуск. Теперь вы должны увидеть значки погоды над списком локаций.

Обновление прогноза погоды

Взгляните на статические данные JSON в активах / данных.json . Прогноз для данного местоположения представлен в виде массива строк. Вы можете создать еще один RecyclerView с GridLayout для динамического создания прогноза, но это вызывает проблемы:]. Вместо этого вы напишете метод, который сопоставляет каждое возможное значение прогноза с соответствующим значком, который можно рисовать.

В MainActivity добавьте новый метод:

частная забавная картаWeatherToDrawable (прогноз: String): Drawable? {
  var drawableId = 0
  when (прогноз) {
    "солнце" -> drawableId = R.drawable.ic_sun
    "дождь" -> drawableId = R.drawable.ic_rain
    "туман" -> drawableId = R.drawable.ic_fog
    "гром" -> drawableId = R.drawable.ic_thunder
    "облако" -> drawableId = R.drawable.ic_cloud
    "снег" -> drawableId = R.drawable.ic_snow
  }
  вернуть ContextCompat.getDrawable (это, drawableId)
}
 

Теперь вы готовы написать код, который реагирует на событие щелчка строки RecyclerView. Добавьте следующий метод в MainActivity :

частное развлечение loadForecast (прогноз: Список ) {
  val прогнозView = findViewById  (R.id.forecast) как FlexboxLayout
  for (я нахожусь в 0, пока прогнозView.childCount) {
    val dayView = прогнозView.getChildAt (i) как AppCompatImageView
    dayView.setImageDrawable (mapWeatherToDrawable (прогноз [i]))
  }
}
 

Затем найдите // TODO в MainActivity и замените его следующим:

loadForecast (location.forecast)
 

Сборка и запуск. Нажмите на название места и обратите внимание, что прогноз погоды обновляется:

Хорошая работа, какое красивое погодное приложение! Но погода в Сан-Франциско не такая уж и красивая:].

Создание адаптивного пользовательского интерфейса: ландшафтный макет

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

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

К счастью, Android Studio имеет обширные возможности предварительного просмотра. Откройте файл activity_main.xml по умолчанию и наведите указатель мыши на правый нижний угол экрана, чтобы изменить размер макета. Обратите внимание, что при нажатии на ручку Android Studio автоматически отображает руководства для устройств разных размеров.

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

Квалификаторы макета

Вернувшись в Android Studio, щелкните правой кнопкой мыши на res / layout и выберите New \ Layout resource file , меню:

Назовите файл activity_main и добавьте квалификатор ресурса ландшафта:

.

Редактор макета теперь показывает пустой экран для ландшафтного режима, поскольку он выбрал только что созданный файл макета layout-land / activity_main.xml . Он содержит только пустой ConstraintLayout , но ненадолго:]. Добавьте следующее, чтобы на этот раз повторно использовать макет прогноза погоды и RecyclerView в горизонтальной ориентации.

  <включить
    layout = "@ layout / прогноз_грид"
    android: layout_width = "0dp"
    android: layout_height = "match_parent"
    android: layout_weight = "1" />

  


 

И редактор макета теперь показывает все ваши элементы в альбомной ориентации.

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

Квалификаторы ресурсов

Еще одно улучшение, которое вы могли бы внести в макет, — это организовать значки погоды в виде 2 столбцов и 3 строк, в отличие от текущего макета из 3 столбцов и 2 строк. Мы могли бы продублировать макет прогноз_grid.xml , но тогда это будет дублированный код, и его будет труднее поддерживать. Ширина, занимаемая каждым значком погоды по отношению к ширине обзора FlexBox, определяется атрибутом layout_flexBasisPercent :

Значение является дробным типом и в настоящее время равно 33% в файле квалификатора ресурса res / values ​​/ fractions.xml . Следуя тому же подходу к созданию ландшафтного макета, вы можете создавать файлы ресурсов для ландшафтной конфигурации.Щелкните правой кнопкой мыши на res / values ​​ и выберите пункт меню New \ Values ​​resource file . Назовите файл дроби и добавьте квалификатор альбомной ориентации:

.

Внутри тега XML resources добавьте следующее:

 49% 
 

Вернитесь к макету основного занятия в альбомном режиме и обратите внимание, что значки погоды расположены в 2 столбцах и 3 рядах:

Молодец! Вы можете сделать паузу здесь и оценить тот факт, что вам снова не нужно было развертывать приложение для достижения этого результата.Конечно, теперь вы должны собрать и запустить и убедиться, что он работает:]

Квалификаторы конфигурации могут применяться к любому типу атрибута в вашем XML-макете (размер шрифта, цвета, поля и т. Д.).

Очень большой макет

Вернитесь в книжную ориентацию в редакторе макета и полностью перетащите размер экрана до диапазона X-Large.

Для устройств с таким большим размером экрана вы можете отображать все значки погоды в одной строке. Идите вперед и щелкните правой кнопкой мыши на res / values ​​ и выберите пункт меню New \ Values ​​resource file .Назовите файл fractions и добавьте квалификатор X-Large Size :

Добавьте в тег ресурсов XML следующее:

 16% 
 

Вернитесь в редактор макета и обратите внимание, что все значки погоды выровнены в 1 строку.

Расчет конфигурации

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

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

Если вы еще не удивлены, что прогноз погоды в Лондоне всю неделю будет солнечным, то вы также можете заметить, что выбранная строка была снята с выбора после переключения на пейзаж.

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

Добавьте следующее вверху MainActivity под свойствами:

companion object {
  private const val SELECTED_LOCATION_INDEX = "selectedLocationIndex"
}
 

Затем добавьте следующий метод в MainActivity под методом onCreate () :

переопределить веселье onSaveInstanceState (outState: Bundle) {
  супер.onSaveInstanceState (outState)
  outState.putInt (SELECTED_LOCATION_INDEX, locationAdapter.selectedLocationIndex)
}
 

Добавьте следующее в конец onCreate () :

if (savedInstanceState! = null) {
  val index = savedInstanceState.getInt (SELECTED_LOCATION_INDEX)
  if (index> = 0 && index 
 Выполните сборку и снова запустите, и на этот раз местоположение останется выбранным при изменении конфигурации.Ура!
 Куда идти дальше 
 Молодец! Вы создали свое первое приложение для Android с адаптивными макетами и узнали, как в действиях можно использовать несколько макетов. Вы узнали, как чертежи работают с разными дисплеями и как оживить ваше приложение практически на любом устройстве Android.
 Конечно, Android - это гораздо больше, чем макеты, и нет недостатка в способах построения на принципах адаптивного пользовательского интерфейса, которые вы обнаружили в этом руководстве по адаптивному пользовательскому интерфейсу для Android.Чтобы узнать больше, ознакомьтесь с рекомендациями Google по лучшим практикам пользовательского интерфейса. Если хотите, можете испытать себя, попробовав следующее:
 Используйте другой доступный квалификатор, чтобы получить еще один тип макета. Например, что, если вы хотите иметь другой цвет фона в зависимости от квалификатора локали?
 Или попробуйте использовать квалификатор размера для других ресурсов, таких как строки. Вы можете добавить TextView, который показывает короткое сообщение или более длинное сообщение с тем же именем, если экран находится в альбомной ориентации?
 Получите полный исходный код этого проекта в виде загружаемого zip-архива.
 Не стесняйтесь делиться своими отзывами, выводами или задавать любые вопросы в комментариях ниже или на форумах. До скорого!
 raywenderlich.com Еженедельно 
 Информационный бюллетень raywenderlich.com - это самый простой способ оставаться в курсе всего, что вам нужно знать как разработчику мобильных приложений.
 Получайте еженедельный дайджест наших руководств и курсов, а в качестве бонуса получите бесплатный углубленный курс по электронной почте!
 .