Android как растянуть элементы

Полный список

На этом уроке мы:

— разбираемся в характеристиках экрана
— рассматриваем layout параметры (высота, ширина, отступ, гравитация, вес)

Экраны

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

Возьмем в качестве примера экран смартфона HTC Desire. Диагональ = 3,7 дюйма, разрешение = 800х480 пикселей.

Кол-во пикселей в одном дюйме называется dpi (dot per inch). Узнаем чему равно dpi в данном случае, вспомнив классику: c 2 = a 2 + b 2 , где с – кол-во пикселей по диагонали, т.е. вмещаемое в 3,7 дюйма. a и b – стороны экрана.

c = 3,7 * dpi
(3,7 * dpi) 2 = 480 2 + 800 2
dpi 2 = 870400 / 13,69 = 63579
dpi = 252. Т.е. в одном дюйме экрана помещается ряд из 252 пикселей.

Возвращаемся к теме урока. Рассмотрим подробно следующие параметры View элементов

Layout width и Layout height

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

Абсолютные значения:

Используются следующие единицы измерения (ЕИ):

dp или dip — Density-independent Pixels. Абстрактная ЕИ, позволяющая приложениям выглядеть одинаково на различных экранах и разрешениях.

sp — Scale-independent Pixels. То же, что и dp, только используется для размеров шрифта в View элементах

pt — 1/72 дюйма, определяется по физическому размеру экрана. Эта ЕИ из типографии.

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

mm – миллиметр, определяется по физическому размеру экрана

in – дюйм, определяется по физическому размеру экрана

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

Константы

match_parent (fill_parent) – означает, что элемент займет всю доступную ему в родительском элементе ширину/высоту.

wrap_content – ширина/высота элемента будет определяться его содержимым

Project name: P0072_LayoutProp
Build Target: Android 2.3.3
Application name: LayoutProp
Package name: ru.startandroid.develop.layoutprop
Create Activity: MainActivity

Открываем main.xml. Настроим корневой LinearLayout на горизонтальную ориентацию, удалим TextView, и добавим Button с шириной и высотой равной wrap_content. Она отображается на экране и ее ширина соответствует тексту на ней.

Изменим текст с «Button» на «Button with text», сохраним и посмотрим на экран.

Кнопка стала шире, т.к. ширина определяется по содержимому. Если же мы сейчас явно укажем ей ширину 250 dp, то кнопка растянется независимо от содержимого.

Теперь сделаем ширину равной match_parent. Кнопка растянулась на всю ширину родителя, т.е. LinearLayout. А LinearLayout в свою очередь занимет всю ширину экрана.

Если у нас родитель содержит несколько элементов и мы хотим, чтобы они заняли все пространство необходимо использовать параметр Layout weight – вес. Свободное пространство распределяется между элементами пропорционально их weight-значениям.

Изменим текст нашей кнопки на B1 и добавим ей соседа по LinearLayout – вторую кнопку с текстом B2. Ширину для обоих поставьте wrap_content

Займемся дележом. Если мы хотим, чтобы кнопки поделили пространство родителя поровну – то для обеих укажем weight = 1. В этом случае кнопки равны по ширине.

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

Если нужно, чтобы B1 занимала четверть, а B2 три четверти свободного пространства, то проставляем weight = 1 для B1 и weight = 3 для B2.

Кол-во элементов может быть любым. Добавим еще кнопку с текстом B3, weight = 2 и width = wrap_content.

xml-код получившегося экрана:

Теперь для B2 и B3 укажите weight = 0. Они больше не претендуют на свободное пространство и занимают ширину по содержимому, а B1 забирает все себе.

Разумеется, все выше сказанное применимо и для параметра высоты — height.

При использовании weight вы можете указать значение height или width = 0dp. В этом случае не будет учитываться содержимое элементов и результат будет более соответствующий коэффициентам веса.

Layout gravity

Параметр layout_gravity аналогичен выравниванию из Word или Excel. Удобнее всего продемонстрировать его с использованием FrameLayout. Я не описывал этот Layout на прошлом уроке, т.к. он совсем простой. Все помещаемые в него элементы он по умолчанию помещает в левый верхний угол и никак их не выстраивает. Нам это очень подходит для демонстрации настроек выравнивания.

Создадим grlayout.xml:

На экране видим:

Для наглядности текст кнопки отображает ее свойства. Все очевидно и несложно.

Я честно пытался понять зачем нужны значения gravity fill_* и clip_*, но так и не понял. То, что написано про них в хелпе у меня не работает. Если у вас есть сведения по этому поводу – пишите в каменты.

Layout margin

Параметры margin полностью аналогичны margin из html. Это отступ. Он может быть со всех сторон сразу, либо только с необходимых сторон. Продемонстрируем это на примере TableLayout. Создадим marginlayout.xml и нарисуем таблицу три на три с кнопками.

И на кнопке в центре будем экспериментировать.

margin = 50 dp
Вокруг кнопки со всех сторон образовался отступ = 50 dp.

margin left = 10 dp
margin top = 20 dp
Отступ слева и сверху.

margin right = 30 dp
margin bottom = 40 dp
Отступ справа и снизу.

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

Стили

Если кто использовал HTML, то наверняка слышали про каскадные стили — CSS. Стили позволяют вам группировать атрибуты элементов (кнопок, таблиц, параграфов и т.д.). Далее вы просто применяете к элементам стили, и элемент рисуется с учетом всех атрибутов стиля. И нет необходимости повторять несколько раз один и тот же код для элементов, которые должны выглядеть одинаково. Особенно это удобно в случае изменения атрибутов. Вы просто меняете один раз стиль и все элементы с этим стилем меняются.

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

На следующем уроке:

— научимся обращаться к View-элементам из кода и менять их свойства

Присоединяйтесь к нам в Telegram:

— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.

— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование

— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня

— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме

Источник

Настройка масштаба интерфейса на Android

Масштаб интерфейса на устройстве Андроид – это размер всех элементов меню. Благодаря возможности его настроек, можно легко отрегулировать все под максимально удобный вид. Изменять масштаб можно, начиная с версии ОС Android 7.0 Nougat. Но на устройствах некоторых производителей, имеющих свою фирменную оболочку, функция уменьшения или увеличения масштаба присутствует уже давно. Они внедрили её еще на более ранних версиях Андроид.

Из статьи вы узнаете

Зачем менять масштаб?

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

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

В качестве примера посмотрите на эти два скриншота. На одном масштаб маленький, а на другом большой:

На что влияет масштаб?

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

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

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

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

Масштаб будет применен к следующим частям системы:

• Меню системных настроек;
• Приложения, не имеющие особого дизайна (некоторые мессенджеры, настройщики и так далее);
• Статус бар и шторка уведомлений;
• Приложение для звонков и СМС;
• Календарь, почта, переводчик и прочие сервисы от Google и других компаний;
• Play Market (или Google Play);
• Экран разблокировки;
• Размер диалоговых окон и иконок в лаунчере.

А вот эти элементы не будут изменяться:

• Отдаленность заставки;
• Отдаленность фоновых изображений и живых обоев;
• Странички в браузере и прочие веб-элементы;
• Игры;
• Видео и музыкальные плееры;
• Картинки в галереях;
• Интерфейс входящего и исходящего вызовов;
• Шрифт, то есть любой текст;
• Клавиатура;
• И так далее…

Первый способ

1. Для начала нам нужно зайти в настройки смартфона. Для этого нажмите на шестерёнку в шторке уведомлений либо запустите ярлык настроек через лаунчер.
2. Далее в настройках откройте пункт «Экран».

В пункте «Экран» следует перейти в «Масштаб изображения на экране» .

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

В данном случае доступно лишь 4 режима:

• очень крупный;
• средний;
• маленький;
• очень маленький.

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

Второй способ

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

Для применения нужно зайти в режим «Для разработчиков». Делаем следующие шаги:

1. Откройте настройки смартфона. Сделать это можно через шторку уведомлений, нажав на шестеренку вверху, либо открыв настройки через ярлык в лаунчере смартфона.
2. В настройках листаем в самый низ и открываем пункт «Система» или «О телефоне» в зависимости от версии Андроида.

В этом меню открываем «О телефоне» если вы ранее открывали «Система» .

Теперь перед нами появится список информации о смартфоне. Нам нужно найти пункт «Номер сборки» и нажать на него пять раз под ряд до тех пор, пока система не покажет уведомление «Вы стали разработчиком!» .

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

Переходим в меню «Для разработчиков» и в нем ищем пункт «Минимальная ширина» . Именно этот пункт отвечает за масштаб интерфейса.

4 Replies to “ Настройка масштаба интерфейса на Android ”

я решил попробовать это на устройстве BQ SPRING я использовал второй способ и изменил ширину с 320 на 3200 и у меня произошёл сбой в системе то есть появилось окно: сбой в приложении «интерфейс системы» (и 1 вариант) закрыть приложение, я нажимаю появляется чёрный экран. Я пробовал включить безопасный режим, просто перезагрузить, подключил к ПК, посмотрел, единственная информация о телефоне — это заряд батареи издатель модель и серийный номер ВСЁ. ПОЖАЛУЙСТА СКАЖИТЕ КАК ИСПРАВИТЬ.

У меня тоже такая проблема как ты решил? Скажи пожалуйста

я решил попробовать это на устройстве doogee x60l я использовал второй способ и изменил ширину с 320 на 648 и у меня произошёл сбой в системе то есть появилось окно: сбой в приложении «интерфейс системы» (и 1 вариант) закрыть приложение, я нажимаю появляется чёрный экран. Я пробовал включить безопасный режим, просто перезагрузить, подключил к ПК, посмотрел, единственная информация о телефоне — это заряд батареи издатель модель и серийный номер ВСЁ. ПОЖАЛУЙСТА СКАЖИТЕ КАК ИСПРАВИТЬ.

У меня тоже такая проблема что ты сделал скажи пожалуйста?

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

Источник