Как сделать сайт удобным для работы на планшетах. Верстка планшета


Как сделать сайт удобным для работы на планшетах

В настоящий момент почти 70 миллионов планшетных устройств (это 30% пользователей Интернет) используются только на территории США. И количество их удвоилось за последний год, а трафик с планшетов для e-commerce сайтов вырос на 348% впервые обогнав веб-трафик смартфонов. По прогнозам экспертов ожидается наступление планшетов, которое потеснит рынок настольных ПК, а в ближайшем будущем и ноутбуки. Пора подумать о том, как сделать сайт удобным для разных платформ (в данном случае планшетных ПК). Игнорирование, в ближайшее время негативно скажется уже на другой статистике из веб-аналитики и это будет: низкий процент охваченной аудитории, слабая конверсия при высоком показателе отказов…

Что такое Tappiness?

Когда веб-сайт демонстрирует tappiness (англ. касание, постукивание) — это значит он легок в использовании для пользователей мобильных устройств (планшетов, смартфонов). Tappiness подразумевает разумное использование пространства и текст, который легко читать, логическую взаимосвязь в ходе подачи информации и достаточно большие кнопки для касания пальцами. Все эти удобства необходимы для уверенной навигации по сайту с планшетов.

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

Возможно идеальным решением для сайта будет его редизайн с адаптивной версткой: когда вы используете адаптивный макет с поддержкой различных мобильных платформ. Поставленную задачу поможет решить адаптивный CSS-фреймворк, такой как Twitter  Bootstrap. Еще вариант: создание адаптивного дизайна на подходящем шаблоне Bootstrap. Финансовые и временные факторы могут препятствовать этому, но выход есть! Сайт можно сделать более удобным для сенсорных экранов при помощи несложных изменений в CSS.

Делаем сайт удобнее для пользователей планшетов в 6 шагов

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

1. Увеличьте значения size и margine для кнопок и призывов к действию. Известно, что средняя ширина указательного пальца для большинства людей 45-57 пикселей. Зачем же усложнять жизнь мобильному пользователю, заставляя его сначала отыскивать, а затем пытаться попасть по кнопке «Купить»?

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

3. Увеличьте размер шрифта для лучшей читабельности. Увеличение размера шрифта на пару пикселей или em может иметь большое значение.

4. Используя CSS свойство padding добавьте больше свободного пространства для пунктов меню навигации. Попробуйте сначала увеличить значение padding на 5-10 пикселей — или больше, если позволит дизайн.

5. Используя CSS свойство margin увеличьте размеры полей страниц и текстовых блоков. Это повысит читабельность в целом. Когда мы добавляем «белое пространство» создается впечатление, как будто текст стал восприниматься легче. Особенно заметно в сравнении с перегруженной контентом веб-страницей.

6. Увеличьте размеры полей форм регистрации и пространства между ними. Упростите для ваших посетителей выбор и ввод информации в эти поля. Этого может оказаться достаточным для существенного увеличения конверсии.

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

Сайты, адаптированные под планшеты и мобильные устройства

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

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

Xfinity – крупный текст, много свободного пространства, четко обозначенные ссылки и грамотная структура навигации. Трудно не заметить большие, легкие в использовании поля форм или кнопки выпадающего меню. Хотя e-commerce сайт не имеет адаптивного дизайна, разработчикам удалось сделать его удобным для малых экранов.

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

Не удивительно, что сайт Apple легко просматривать с планшетов (всё же они пионеры технологии портативных тачскринов).

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

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

seo-design.net

Оптимизация сайта для планшетов / Хабрахабр

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

А при вводе адреса электронной почты меняем символы на необходимые:

Стандартная клавиатура:

<input type="text"> URL-параметры:<input type="url"> Email-символы:<input type="email"> Цифровая клавиатура:<input type="text" pattern="[0­9]*">
Отключение автокоррекции и начальных заглавных букв

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

<input type="text" autocapitalize="off" autocorrect="off">
Правильное расположение блоков
Логика взаимодействия пользователя с сайтом на планшете отличается от десктопного. При проектировании интерфейса это необходимо учитывать, делая акцент на самых важных элементах. Вот один пример, где была изменена форма поиска на сайте интернет-магазина.

Слишком мелко:

Хорошо:

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

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

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

Тач-карусели
Если на сайте используется карусель изображений, она должна управляться тачем:

Отключение a:hover
В тач-устройствах отсутствует возможность удобного наведения курсора на объект, поэтому не стоит использовать такой способ взаимодействия с пользователем (На Хабре, кстати, это еще имеет место — всплывающие подсказки при наведении на оценку топика или комментария для просмотра баланса голосов)
Проектирование для альбомной и портретной ориентации экрана
Пользователи могут пользоваться планшетом и в альбомной, и в портретной ориентации при взаимодействии с сайтом. Поэтому необходимо это принимать во внимание при проектировании интерфейса.
Использование камеры
Планшеты открывают нам новые возможности: например при заполнении профиля можно предлагать пользователю сделать фото для аватара камерой планшета:<input type="file" accept="image/*" capture="camera">
Скрытие адресной строки
При использовании планшета на счету каждый пиксель, поэетому можно скрыть адресную строку (в Safari) для увеличения полезной площади экрана:<meta name="apple-mobile-web-app-capable" content="yes" />
Полезное чтиво и использованный материал
.

habrahabr.ru

Как адаптировать сайт под планшет?

Количество пользователей планшетов ежегодно увеличивается примерно в 2 раза, поэтому использование адаптивных шаблонов актуально, как никогда. Этим модным гаджетом сегодня обзаводятся уже не только состоятельные люди, которые могут себе позволить iPad самого «свежего» поколения, но даже студенты-энтузиасты, не брезгующие китайскими не фирменными планшетами с бюджетной маркировкой.

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

О динамике роста интернет-трафика с планшетов можно судить даже по одному показателю – так, количество трафика интернет-магазинов именно с планшетов увеличилось за 2012 год в 3,5 раза. Если вы хотите быть на гребне этого тренда, вам необходимо максимально упростить пользование вашим сайтом, сделав его комфортным для владельцев планшетных компьютеров. Эта проблема стала настолько актуальной, что в Западном интернет-маркетинге был придуман специальный термин – Tappiness.

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

Зачастую сайт, который разработан под стандартный компьютерный экран (а это сегодня примерно 20 дюймов), оказывается крайне неудобным для пользователей планшетов. На многих сайтах текст с экранов планшетов видится мелким и неудобным для чтения, ссылки находятся настолько близко, что на них невозможно нажать пальцем, не задев соседнюю. Все это приводит к дискомфорту и раздражению пользователя. И в 9-ти из 10-ти случаях он уйдет с такого сайта в поисках более комфортной альтернативы. И будьте уверены, он ее найдет.

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

1. Просто увеличьте размер кнопок. Визуально выделите призывы к действию и увеличьте их ограниченную зону. Размер кнопок должен находиться в пределах 45-60 пикселей – это средний размер указательного пальца взрослого человека.

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

3. Пожертвуйте краткостью описания для увеличения размера шрифта. Уже стала расхожей шутка о мелком шрифте в банковских кредитных договорах, которые никто якобы не читает. Зачем много мелкого текста, который никто не сможет прочесть? Если не сможете самостоятельно сделать выжимку рекламного предложения, заплатите копирайтерам, они сделают краткое и ясное рекламное предложение вашим покупателям.

4. Меню навигации должно быть помещено в свободное пространство. Покупатель должен свободно выбрать своим указательным пальцем ту страницу сайта (в частности интернет-магазина), которая его интересует. Если он на интересующую его страницу попадет только с третьего раза, он будет раздражен и в этом состоянии скорее скажет «нет» вашему товару, чем приобретет его.

5. Для увеличения четкости и визуальной доступности страницы увеличьте ее края и края текстовых блоков. Это уменьшит сложность восприятия сайта. Белое пространство по краям создает легкость чтения текста. Это маленькое, но важное преимущество для информативных сайтов. Этот тезис легко можно проверить на любом Word-документе: для начала прочитайте текст со шрифтом №12, полностью заполнившим экран, а затем увеличьте текст до №16, при этом оставьте белые поля по краям страницы. Вы легко убедитесь в том, что последний текст читать лучше.

6. Особое внимание уделите удобству регистрации на сайте. Во многих интернет-магазинах нельзя приобрести покупку, не зарегистрировавшись на сайте. Для удобства пользователей планшетов увеличьте размеры регистрационных бланков и промежутки между ними. Это увеличит продаваемость товара по принципу «здесь и сейчас».

Подводя итоги…

Ваша выгода от пользователей планшетов заключается в том, что они заходят на сайт в выдавшуюся свободную минутку, например, во время обеденного перерыва, в кафе с бесплатной Wi-Fi зоной, стоя в очереди, в транспорте или в другой ситуации, где необходимо «убить время». В этом случае срабатывает рефлекс заняться чем-нибудь — например, купить понравившуюся в Интернете вещицу. Вышеприведенные 6 шагов навстречу пользователям планшетов помогут сделать интернет-шоппинг ваших клиентов простой и удобной затеей. Тем самым вы повысите конверсию своего сайта и увеличите количество лояльной аудитории.

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

www.templatemonster.com

Оптимизация шаблона сайта под планшет и телефон (мобильные устройства)

В этой заметке я не буду на каком-то профессиональном языке что-то там объяснять. Сам не профи. Просто сделаю своего рода запоминалку и возможно она пригодиться еще кому-нибудь.Недавно на глаза мне попались ролики на ютюбе по адаптивной верстке и это не спроста. Просто на моём втором блоге шаблон (бесплатный из паблика) уже адаптирован под мобильные устройства: когда зайти с планшета, или телефона, то он красиво подстраивается под размер экрана. А на этом блоге seodnevnik.ru дела плохи. И я решил тоже в этом шаблоне что-нибудь подправить.

CSS-стили под разное разрешение экрана и устройство

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

Перед тем, как приступить к написанию стилей, убедитесь, что между тегами <head/>, вашего шаблона, прописана meta-строчка:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Итак, в зависимости от размера экрана, мы можем прописать отдельные стили в файле сss: основной стиль для компьютера, потом для размера ниже 992px и 768px (для планшетов), и для 480px и 320px (для телефонов).

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

Пример:

.content{background-color: #FBFBFB; position: relative;margin: 0;padding: 0;border: 0;float: left;overflow: hidden; max-width: 768px; width: 100%;} .sidebar1{background-color: #FBFBFB; position: relative;margin-right: 0;padding: 0;border: 0;float: left;overflow: hidden; width: 100%; max-width: 268px;} blockquote{margin:10px 10px 10px 35px;} /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { .content{max-width: none; width: 100%;} .sidebar1{max-width: none; width: 100%;} blockquote{margin:10px;} } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { .content{max-width: none; width: 100%;} .sidebar1{max-width: none; width: 100%;} blockquote{margin:10px;} } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { .content{max-width: none; width: 100%;} .sidebar1{max-width: none; width: 100%;} blockquote{margin:10px;} } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { }

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

Ну и получается, что можно не делать отдельный шаблон под мобильные устройства, а просто адаптировать основной шаблон.

Посмотреть, как выглядит ваш сайт на разных устройствах, можно на сайтах:

http://quirktools.com/screenfly/

http://ipadpeek.com/ — как выглядит на iPad, iPhone.

http://responsive.is/ (не актуален — сервис перестал работать, используйте другие)

А также здесь: http://www.viewlike.us/operator/?url=seodnevnik.ru и в других подобных сервисах.

Для Хрома есть расширение «Window Resizer». А также можно использовать стандартную фишку — нажав F12, кликните по значку телефона и вы попадете в такую среду:

Для чего нужна адаптация? Дело в том, что если пользователю неудобно находиться на сайте с мобильного устройства, то он быстро закроет страничку и уйдет. Соответственно, уменьшается время нахождения, просмотры, или проще говоря — ухудшаются поведенческие факторы. А также и CTR рекламных объявлений, если они тоже как-то криво показываются на планшетах и телефонах.

Читайте также как пройти проверку если Google пишет «Страница не оптимизирована для мобильных устройств».

Вот те видеоролики, о которых я упомянул вначале заметки:

P.S. На этом блоге я только начал пробовать адаптировать. Может что и получится

seodnevnik.ru

Урок 3. Верстка экранов. Виды Layout

Facebook

Twitter

Вконтакте

Google+

 

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

Визуальные части приложения

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

Два самых важных понятия в интерфейсе Android — это Activity и View.

Activity — это та часть приложения, с которой взаимодействует пользователь. Можно назвать ее «окном» в терминологии десктопных ОС (хотя фактически это не окно, Window в андроиде тоже есть, но с ним мало кто из разработчиков сталкивался). Внутри Activity расположены дочерние элементы интерфейса. К activity мы позже обязательно вернемся и рассмотрим это понятие в отдельном уроке.

View — элемент интерфейса. То же самое, что и в любой другой ОС. Это может быть кнопка, поле для ввода текста, контейнер для картинки, контейнер для других View и т.д.

Так же немаловажный элемент — ViewGroup. Напрямую начинающие с ним не сталкиваются, обычно с этим классом работают более опытные разработчики. Фактически, ViewGrop — это модифицированный View, созданный для того, чтобы служить контейнером для других View. Тут мы уже знакомимся с понятием Layout.

Layouts в Android

Layout — общее название для нескольких наследников ViewGroup. Лэйауты служат контейнерами для View, и созданы они для того, чтобы мы могли удобно располагать всяческие кнопочки, поля для ввода текста и прочие элементы интерфейса.

«Самых нужных» лэйаута всего 3:

  • LinearLayout
  • FrameLayout
  • RelativeLayout

В большинстве приложений они используются в качестве layout’ов в, наверное, 90% случаев.

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

Посмотрите на следующий рисунок:

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

А весь «фон» в виде клеточек — это Activity, внутри которого находятся все остальные элементы интерфейса.

Создание интерфейса в Android

В Android принято использовать декларативный подход к созданию интерфейса, когда это возможно. Под декларативным подходом подразумевается описание интерфейса в XML-файлах. Файлы находятся в директории res/layout/:

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

  • activity_name.xml — для Activity
  • fragment_name.xml — для фрагментов (о них мы обязательно поговорим в следующих статьях)
  • view_name.xml — для View

Здесь «name» — имя элемента интерфейса. Например, для LoginActivity файл будет называться activity_login.xml, для MainFragment — fragment_main.xml и т. д.

При создании проекта с пустой Activity у нас по умолчанию создастся MainActivity и xml-файл с описанием этой активити. Давайте откроем этот файл:

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="ru.android_school.lesson2.MainActivity"> <TextView <strong>android:layout_width</strong>="wrap_content" <strong>android:layout_height</strong>="wrap_content" android:text="Hello World!" /> </RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context="ru.android_school.lesson2.MainActivity">

 

    <TextView

        <strong>android:layout_width</strong>="wrap_content"

        <strong>android:layout_height</strong>="wrap_content"

        android:text="Hello World!" />

</RelativeLayout>

Тут вы видите RelativeLayout — главный контейнер для всего контента в Activity, и TextView, который находится внутри этого контейнера.

Обратите внимание на атрибуты layout_width и layout_height. Этими атрибутами, как нетрудно догадаться, мы задаем ширину и высоту элемента. В абсолютных значениях они задаются редко, как правило используются две константы:

  • match_parent — элемент будет занимать все доступное ему пространство.
  • wrap_content — элемент будет использовать столько места, сколько требуется для отображения контента внутри. Кнопка, например, будет иметь размер текста + отступы.
LinearLayout

LinearLayout, как следует из названия, располагает дочерние элементы в «линейном» порядке, т.е. друг за другом. Линейный лэйаут может быть горизонтальным или вертикальным.

Давайте посмотрим на практике, что это такое.

Удалим весь шаблонный код, и вставим вместо него следующий код:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 2" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 3" /> </LinearLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal">

 

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button 1" />

 

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button 2" />

 

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button 3" />

 

</LinearLayout>

Как видите, мы создали LinearLayout и внутри него поместили три кнопки. Обратите внимание на атрибут orientation у LinearLayout. Он обозначает «направление» контента в лэйауте. Атрибут orientation может принимать два значения — «horizontal» и «vertical«. Как нетрудно догадаться, в первом случае дочерние элементы будут расположены горизонтально слева направо, во втором — вертикально сверху вниз.

В этом примере мы расположили элементы горизонтально. Запустите приложение, и увидите следующую картину:

Теперь давайте изменим ориентацию с горизонтальной на вертикальную:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 2" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 3" /> </LinearLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

 

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button 1" />

 

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button 2" />

 

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button 3" />

 

</LinearLayout>

После запуска проекта мы увидим следующее:

Т.е. теперь элементы расположены вертикально.

У LinearLayout (а точнее, у его дочерних View) есть еще один интересный атрибут — layout_weight. Этим атрибутом мы говорим лэйауту, сколько пространства должен занимать элемент. В качестве значения можно использовать любое число. Например, если мы хотим равномерно распределить пространство между двумя кнопками, мы можем задать обеим кнопкам layout_weight = 1. Тогда они разделят имеющееся пространство на две равных части. Если мы зададим одной кнопке вес = 1, а второй = 2, то вторая кнопка будет занимать в 2 раза больше места, чем первая. Чтобы окончательно понять, как это работает, давайте посмотрим на примере:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button 1" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button 2" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" android:text="Button 3" /> </LinearLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal">

 

    <Button

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:text="Button 1" />

 

    <Button

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:text="Button 2" />

 

    <Button

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_weight="2"

        android:text="Button 3" />

 

</LinearLayout>

Также при использовании атрибута layout_weight рекомендуется заменить ширину (если лэйаут горизонтальный) или высоту (если лэйаут вертикальный) на 0dp. О том, что такое dp, мы поговорим в следующих уроках.

Как видите, первым двум кнопкам мы задали вес = 1, а третьей = 2. Сумма весов = 4, соответственно, первые две кнопки займут левую половину экрана, а третья — правую половину, т.е. ее ширина будет в два раза больше других кнопок. Посмотрим, что получилось:

Получилось не очень симпатично, потому что у первых двух кнопок текст не влез в заданную ширину и часть перенеслась на новую строку, поэтому эти кнопки стали «выше». Однако, суть ясна — третья кнопка в два раза шире, чем остальные.

Для вертикальных лэйаутов это работает точно так же, только меняется, соответственно, высота.

FrameLayout

Пожалуй, это самый простой Layout. Все, что он умеет — располагать элементы друг над другом (по оси «z»). Давайте вспомним немного математики, а точнее, систему координат.

В двухмерном пространстве у нас есть две оси — X и Y. X идет слева направо, Y снизу вверх. В Android немного иначе, Y идет сверху вниз.

В трехмерном пространстве добавляется ось Z. Она идет «на нас». В интерфейсах Z обозначает глубину. Напрямую «глубина» задается редко, однако, например, во FrameLayout она есть. Давайте посмотрим на примере, как это работает. Измените код, чтобы он выглядел вот так:

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:layout_width="300dp" android:layout_height="300dp" android:background="#ff0000" android:textSize="20sp" /> <View android:layout_width="200dp" android:layout_height="200dp" android:background="#00ff00" android:textSize="20sp" /> <View android:layout_width="100dp" android:layout_height="100dp" android:background="#0000ff" android:textSize="20sp" /> </FrameLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

 

    <View

        android:layout_width="300dp"

        android:layout_height="300dp"

        android:background="#ff0000"

        android:textSize="20sp" />

 

    <View

        android:layout_width="200dp"

        android:layout_height="200dp"

        android:background="#00ff00"

        android:textSize="20sp" />

 

    <View

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:background="#0000ff"

        android:textSize="20sp" />

 

</FrameLayout>

Запустим проект, и увидим следующее:

Первым мы создали красный квадрат. Он находится «дальше» всех от нас. Вторым создали зеленый, он находится «над» красным квадратом. Ну и больше всех координата Z у синего квадрата.

Если мы поменяем элементы местами, у них изменится и координата Z.

У FrameLayout, как и у многих других лэйаутов, включая LinearLayout, есть понятие gravity. «Гравитация» может быть задана двумя способами:

  • Атрибутом gravity у лэйаута. В таком случае она будет применена для всех дочерних элементов
  • Атрибутом layout_gravity у дочернего элемента. Тогда она будет применена только для этого элемента.

Gravity задает положение элемента внутри контейнера. Гравитация может быть следующей:

  • bottom — элемент «прижимается» к нижней границе контейнера.
  • center — элемент располагается в центре контейнера
  • center_horizontal — элемент находится в центре по оси X
  • center_vertical — элемент находится в центре по оси Y
  • end — элемент находится «в конце» контейнера. Обычно это означает, что он будет находиться справа, но на локали с написанием справа-налево он будет находиться слева.
  • start — элемент находится «в начале» контейнера. Обычно — слева, на RTL локалях — справа.
  • top — элемент «прижимается» к верхней границе контейнера.

left и right использовать не рекомендуется, поскольку это вызовет проблемы с версткой на RTL локалях.

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

Итак, давайте же попробуем на практике поработать с гравитацией. К сожалению, сам FrameLayout, в отличие от многих других контейнеров, не поддерживает атрибут gravity, однако гравитацию можно реализовать через дочерние элементы. Добавьте атрибут layout_gravity со значением center для каждого дочернего View:

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:layout_width="300dp" android:layout_height="300dp" android:background="#ff0000" android:layout_gravity="center" android:textSize="20sp" /> <View android:layout_width="200dp" android:layout_height="200dp" android:layout_gravity="center" android:background="#00ff00" android:textSize="20sp" /> <View android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="center" android:background="#0000ff" android:textSize="20sp" /> </FrameLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

 

    <View

        android:layout_width="300dp"

        android:layout_height="300dp"

        android:background="#ff0000"

        android:layout_gravity="center"

        android:textSize="20sp" />

 

    <View

        android:layout_width="200dp"

        android:layout_height="200dp"

        android:layout_gravity="center"

        android:background="#00ff00"

        android:textSize="20sp" />

 

    <View

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:layout_gravity="center"

        android:background="#0000ff"

        android:textSize="20sp" />

 

</FrameLayout>

Запустите проект:

Дочерние элементы выровнялись по центру.

Теперь задайте всем элементам высоту в 100 dp, и давайте «раскидаем» их равномерно по углам и центру экрана. Пусть красный элемент будет расположен вверху по центру, зеленый — наверху слева, синий — наверху справа. Соответственно, у них должна быть задана гравитация start, center_horizontal и end:

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:layout_width="100dp" android:layout_height="100dp" android:background="#ff0000" android:layout_gravity="center_horizontal" android:textSize="20sp" /> <View android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="start" android:background="#00ff00" android:textSize="20sp" /> <View android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="end" android:background="#0000ff" android:textSize="20sp" /> </FrameLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

 

    <View

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:background="#ff0000"

        android:layout_gravity="center_horizontal"

        android:textSize="20sp" />

 

    <View

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:layout_gravity="start"

        android:background="#00ff00"

        android:textSize="20sp" />

 

    <View

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:layout_gravity="end"

        android:background="#0000ff"

        android:textSize="20sp" />

 

</FrameLayout>

Получится следующая картина:

Отлично!

А еще атрибуты gravity можно комбинировать. К примеру, мы хотим, чтобы красный квадрат был по центру внизу, а остальные — слева и справа по центру. Тогда нам надо будет написать следующий код:

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:layout_width="100dp" android:layout_height="100dp" android:background="#ff0000" android:layout_gravity="center_horizontal|bottom" android:textSize="20sp" /> <View android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="start|center_vertical" android:background="#00ff00" android:textSize="20sp" /> <View android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="end|center_vertical" android:background="#0000ff" android:textSize="20sp" /> </FrameLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

 

    <View

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:background="#ff0000"

        android:layout_gravity="center_horizontal|bottom"

        android:textSize="20sp" />

 

    <View

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:layout_gravity="start|center_vertical"

        android:background="#00ff00"

        android:textSize="20sp" />

 

    <View

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:layout_gravity="end|center_vertical"

        android:background="#0000ff"

        android:textSize="20sp" />

 

</FrameLayout>

И мы получим желаемое:

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

Давайте закончим на этом наш урок, а RelativeLayout разберем в следующем занятии, поскольку это достаточно обширная тема, и лучше выделить ее в отдельный урок.

 

Спасибо за внимание, и не забывайте про две вещи:

  • Не стесняйтесь задавать вопросы. Можете сделать это в комментариях внизу, в сообщениях в нашей группе, или отправить вопрос на почту [email protected]
  • Обязательно делитесь этой статьей с друзьями — им тоже может быть интересно :)

Новые уроки добавляются каждый день! Чтобы ничего не пропустить, подпишитесь на нашу группу ВКонтакте, или на рассылку по e-mail (обещаем, спама не будет. честно.)

Facebook

Twitter

Вконтакте

Google+

android-school.ru


Смотрите также