Rounded rectangle что за приложение
Закругляем экраны на android-устройствах: Cornerfly, Roundr и Rounded Corner (страница 3)
Rounded Corner (Easy4u)
Знакомство
реклама
Помимо двух рассмотренных приложений, придать вашему экрану индивидуальности может еще одна программа – Rounded Corner.
Работа приложения
При первом запуске Rounded Corner нам необходимо разрешить приложению отображаться поверх других окон и предоставить доступ к обработке нашей информации. Само приложение не русифицировано, все на английском языке; надеюсь, новички справятся с активацией программы.
После этого мы попадаем в меню с настройками, где предлагается выбрать следующие опции:
реклама
Если с первыми двумя опциями вопросов не возникает и возникать не может, то что за эффекты предлагают нам разработчики Rounded Corner? Тут все очень интересно.
Помимо уже привычного нам скругления дисплея, можно выбрать различные рисунки по краям экрана, рамки, формы и даже эффекты самого экрана.
Выглядит необычно и при хорошем сочетании с чехлом или другим аксессуаром обеспечивает классный симбиоз.
Кроме того, можно выбрать размер скруглений или рамок и их дополнительные параметры. Но помните, что не все это бесплатно, и поскольку труд разработчика должен оплачиваться, то в данном случае программисты установили себе неплохой уровень оплаты.
Тестирование
Как бы это странно не звучало, но и с Rounded Corner у меня не возникло никаких проблем. Скорее всего, программы данного класса настолько просты, что нареканий к ним быть не может.
реклама
Версия приложения | 2.0.5 |
Размер дистрибутива | 41.25 Мбайт |
Размер приложения в установленном виде | 45.17 Мбайт |
Потребление ОЗУ | 30-50 Мбайт |
Rounded Corner потребляет наибольшее количество ресурсов среди всех протестированных приложений. Правда, и это отнюдь не много: до 50 Мбайт ОЗУ и около 42 Мбайт встроенной памяти (с учетом дополнительных пользовательских данных). О нагрузке на процессор или повышении расхода батареи вряд ли стоит рассказывать – ресурсоемкость и энергозатратность утилиты не более 1% от общего количества.
Выводы
Rounded Corner – довольно непростая программа для изменения углов дисплея мобильного устройства. Помимо скругления экрана, она предлагает различные рамки, эффекты экрана и прочие плюшки. Работает все хорошо, но за дополнительные преимущества придется доплатить.
реклама
Сводное сравнение приложений
Название | Cornerfly | Roundr | Rounded Corner (Easy4u) |
Регулируемый радиус закруглений | Есть | Есть | Есть |
Дополнительные варианты закруглений | Нет | Только в платной версии | Частично, в платной версии больше функций |
Выбор закругляемых углов | Есть | Есть | Есть |
Закругления перед статус-баром и навигационной панелью | Нет | Есть | Есть |
Выбор цвета закругляемой области | Есть | Есть | Есть |
Требования | OC Android 4.0 | OC Android 2.1 | OC Android 4.1 |
Потребление ОЗУ, Мбайт | 50-80 | 5-15 | 30-50 |
Наличие рекламы | Есть | Есть | Есть |
Стоимость платной версии | $1.99 | $1.99 | $4.99 |
Общая оценка, максимум 10 баллов | 7 | 8 | 9 |
Подведение итогов
Вот и завершился наш небольшой обзор популярных утилит для скругления дисплеев на android-устройствах. Да, приложения очень специфические и подойдут не всем, но и среди них можно выявить фаворита. Для данного теста были отобраны три наиболее интересные и функциональные программы: Cornerfly, Roundr и Rounded Corner (Easy4u).
И поскольку эдакий отборочный тур, осуществленный мной при подготовке к обзору, уже прошел, то все три программы пригодны к работе и максимально хорошо выполняют поставленную задачу. Лучшей же стала Rounded Corner (Easy4u). Она предлагает то же самое, что и конкуренты, но ее возможности шире за счет дополнительных рамок, эффектов и параметров по настройке. Выбор очевиден.
Скругление углов в Android. Быстро, качественно, недорого.
Довольно часто при разработке мобильных приложений требуется придавать содержимому некую форму, например, сделать круглое изображение для аватарки. Если для статичных элементов (ImageView) можно обойтись таким инструментом как Picasso transformation, то для динамического содержимого дела обстоят сложнее. Например, есть список элементов, который можно прокручивать и нужно закруглить края. Для этого вполне может подойти виджет CardView.
Но что если нужно задать форму отличную от прямоугольника, и при этом эта форма будет динамически меняться? Это и потребовалось сделать в одном из наших проектов. Подходящих стандартных компонентов UI для данных целей не нашлось, что сподвигло меня на исследование, какие вообще есть инструменты Android для придания формы контенту.
Статья длинная — для тех, кому лень читать всё, самое важное и исходный код в конце статьи.
Дизайнерская верстка
В нашей компании работают довольно креативные дизайнеры. Их безумные идеи порой могут озадачить даже самого опытного разработчика. Посмотрим, что на этот раз нам приготовили.
У нас есть некая карточка с содержимым, которое может прокручиваться. У карточки есть закругление верхних углов, нижние углы должны быть прямыми. Карточку можно потянуть вверх, и, когда карточка заполняет весь экран, закругление убирается.
Все просто, на первый взгляд.
Протоптанная дорожка
На первый взгляд, можно использовать виджет CardView, но в процессе разработки был выявлен ряд недостатков:
Тернистый путь
Итак, стандартный виджет нам не подходит. Придется искать подходящее решение и писать инструмент самостоятельно. А для начала разобраться, какие есть возможности в этом направлении у других Android инструментов.
Критерии для реализации инструмента:
Это, конечно, был бы универсальный инструмент. В вариантах, которые я исследовал, не все критерии соблюдаются, но для реализации части случаев вполне подходят.
Я попробовал 4 различных варианта:
Свойство View.clipToOutline
Этот подход используется в виджете CardView. Глянем, что он умеет.
Как это работает:
Задаем фоновое изображение нужной формы и выставляем в поле View.clipToOutline значение “true”.
Но мы знаем, что работаем с API Android, и слишком легко, чтобы быть правдой. Смотрим документацию метода View.setClipToOutline()
Sets whether the View’s Outline should be used to clip the contents of the View…Note that this flag will only be respected if the View’s Outline returns true from Outline.canClip()
Returns whether the outline can be used to clip a View. Currently, only Outlines that can be represented as a rectangle, circle, or round rect support clipping.
Получается, что пока доступен ограниченный набор форм. Вот так, задумка хорошая, но возможности не позволяют реализовать весь полет фантазий.
Для того, чтобы динамически менять форму фонового изображения, можно создать класс, наследованный от Drawable. В методе getOutline() задаем нужный контур.
Хорошо подходит для ситуации, когда нужно задать форму прямоугольника, овала и прямоугольника со скругленными краями, при условии, что приложение разрабатывается для версий Android Lollipop и выше. Возможно, в будущем появится поддержка любой формы контура, но это в будущем.
Метод Canvas.clipPath() при отрисовке дочерних элементов в контейнере
Данный подход состоит в наследовании от класса контейнера. В методе dispatchDraw() делаем обрезку по нужной форме с помощью метода Canvas.clipPath()
Подход относительно прост в реализации и подойдет для случаев, когда требуется быстро добавить в проект необходимую функциональность, а сглаживание линий непринципиально.
Метод Canvas.drawPath() при отрисовке дочерних элементов в контейнере, View.LAYER_TYPE_SOFTWARE
Соответственно, данная настройка ведет к падению производительности. Но насколько это критично, видно на графике производительности.
В процессе тестирования выяснилось, что перестают работать такие вещи как тень у кнопки. Похоже, проблема именно в View.LAYER_TYPE_SOFTWARE.
Метод Canvas.drawPath() при отрисовке дочерних элементов в контейнере, View.LAYER_TYPE_HARDWARE
Как это выглядит в реализации:
Для решения проблемы с закруглением углов в нашем проекте мы использовали данный метод. Избавились от мерцания при переходе между экранами, создав для каждого экрана свой контейнер. Это сказалось на производительности при смене экранов, но не критично и практически незаметно, так как переход занимает менее секунды.
Схематично было так:
Extra
Получив достаточно информации по методам отсечения в Android, хочется проверить, как это работает с изменяемой формой в виде анимации. За основу анимации взял следующее: трансформация звезды в многоугольник и обратно в звезду. Все это вращается вокруг своего центра. Посмотрим, что получилось и как это влияет на производительность.
Метод PorterDuff.Mode + View.LAYER_TYPE_HARDWARE
Метод Canvas.clipPath()
Мнение автора
Каждый из подходов хорошо применим в определенной ситуации.
Ух, это была довольно большая статья. Кто дочитал, тому виртуальный приз 🍬
Удачного кода, меньше багов, больше счастливых пользователей!
Русские Блоги
Разница между android: icon и android: roundIcon в приложении
8.0 адаптация иконки системного приложения
Зачем нужно адаптировать иконку приложения?
Некоторые друзья могут растеряться. Значок приложения существует с древних времен Android, а функция чрезвычайно проста, достаточно поставить картинку. Что лучше всего подходит для этого? Но на самом деле в текущей среде Android функция значка приложения очень сбивает с толку.
Если мы хотим поговорить об истории значков приложений для мобильных телефонов, мы должны начать с Apple. В 1980-х годах, когда Apple еще разрабатывала компьютеры Lisa и Macintosh, Джобс был ярым сторонником закругленных прямоугольников. В то время инженеры Apple написали замечательный алгоритм, который может рисовать круги и эллипсы на компьютере. Все зрители были шокированы, кроме Джобса, потому что Джобс считал, что хотя круги и эллипсы тоже хороши, если бы они могли нарисовать полосу Еще лучше прямоугольник со скругленными углами. В то время инженер считал, что это невозможно, и что прямоугольники с закругленными углами не нужны вообще, если они соответствуют основным требованиям чертежа. Джобс злобно потащил его по трем улицам, указывал на различные примеры скругленных прямоугольников на улице, и, наконец, на следующий день инженер сделал функцию рисования скругленных прямоугольников.
Поэтому, когда в 2007 году родился iPhone, не все значки приложений былиНеожиданныйЗакругленные прямоугольные значки используются в земле, даже сторонние приложения вынуждены использовать закругленные прямоугольные значки, и это правило сохраняется до сегодняшней iOS 11, как показано на следующем рисунке:
Напротив, когда разрабатывалась система Android, ей не нравилась закрытость и принужденность Apple. Вместо этого она выбрала свободу и открытость и не выдвигала никаких обязательных требований к форме значка приложения. Разработчики могут выбирать:
Как видите, на Android значок приложения может быть квадратом, кругом, прямоугольником с закругленными углами или любой другой неправильной графикой.
Изначально это были разные дизайнерские концепции двух компаний, и трудно сказать, какая из них выше. Но поскольку операционная система Android имеет открытый исходный код, некоторые отечественные производители мобильных телефонов изменили эту функцию при настройке операционной системы. Например, мобильные телефоны Xiaomi решили приблизиться к Apple и заставить значки приложений округляться. Что делать, если значки некоторых приложений не являются прямоугольниками со скругленными углами? Система Xiaomi автоматически добавит к нему эффект закругленных углов, как показано на рисунке ниже:
Такой подход Xiaomi, похоже, учится у Apple, но на самом деле это довольно отвратительно. Поскольку каждый может видеть, что этот автоматически добавленный прямоугольник с закругленными углами очень уродлив, многие компании просто проектируют значки приложений в виде прямоугольников с закругленными углами, и бывает, что Android и iOS используют один и тот же набор значков, чтобы избежать проблем.
Но это огорчает Google. Разве это не изменение, которое заставляет разработчиков создавать значки в виде прямоугольников с закругленными углами? Поэтому на прошлогодней конференции Google I / O Google раскритиковал подход Xiaomi по имени, заявив, что он нарушает философию свободы и открытости Android.
В дополнение к обязательным закругленным углам значка приложения, необходимым для изменения направления, метод обработки Xiaomi имеет еще один недостаток, то есть, если закругленная дуга значка приложения отличается от той, которая требуется системой Xiaomi, произойдет необычно уродливый эффект:
Видеть такие значки приложений действительно неловко. Просто потому, что скругленные углы двух значков приложений предназначены для большего размера, чем закругленные углы, требуемые системой Xiaomi, такие уродливые белые границы добавляются автоматически.
Проблема уже существует, как ее решить? Если честно, это действительно проблема, которая долгое время была головной болью, и Google уже много лет закрывает на это глаза. Наконец, в системе Android 8.0 Google намерен внимательно изучить стандартизацию значков приложений Android, сегодня мы узнаем. Чтобы
8.0 адаптация иконки системного приложения
Эту проблему Google все еще довольно сложно решить. Поскольку Google делает упор на свободу и открытость, для Xiaomi также есть свобода людей заставлять все значки приложений округляться. Нарушает ли это понятие свободы и открытости, если вы запрещаете людям это делать? Конечно, мы здесь, чтобы обсудить это, как сначала обсудить курицу или яйцо, но Google все же нашел идеальное решение.
Начиная с системы Android 8.0, значки приложений разделены на два уровня: слой переднего плана и слой фона. Другими словами, когда мы разрабатываем значок приложения, нам нужно разделить передний план и фон. Передний план используется для отображения логотипа значка приложения, а фон используется для выделения логотипа значка приложения. Следует отметить, что фоновый слой может определять только цвета и текстуры, но не формы.
Так кто же определяет форму значка приложения? Google оставил это право производителям мобильных телефонов. Разве некоторые производители мобильных телефонов не любят изучать округлые значки Apple? Нет проблем, поскольку дизайн значка приложения разделен на два уровня, производителям мобильных телефонов нужно только нанести слой маски поверх этих двух слоев. Эта маска может быть прямоугольником со скругленными углами, кругом, квадратом и т. Д., В зависимости от конкретного производителя мобильного телефона. В зависимости от обстоятельств вы можете мгновенно сделать все значки приложений на телефоне одинаковыми. Принципиальная схема выглядит следующим образом:
Придется ли мне адаптироваться?
Некоторые друзья могут подумать, что этот двухслойный дизайн значка приложения слишком громоздкий, может ли он быть неподходящим? Некоторые друзья могут также сказать, что их приложение не адаптировало значок приложения, и оно по-прежнему хорошо работает на телефонах Android 8.0.
Фактически, эта новая функция Google будет постепенно переходить к ней, а не навязывать ее всем разработчикам сразу. Если targetSdkVersion в вашем приложении ниже 26, то нет необходимости адаптировать значок приложения, и система Android 8.0 по-прежнему имеет обратную совместимость. Но если вы укажете targetSdkVersion равным 26 или выше, тогда система Android будет думать, что ваше приложение адаптировано к системе 8.0, что, конечно же, включает в себя адаптацию значка приложения.
Если вы укажете targetSdkVersion равным 26, но не адаптируете значок приложения в системе Android 8.0, какой эффект это будет иметь? Вот несколько отрицательных примеров:
Это снимок экрана телефона Google Pixel с операционной системой Android 8.0. Как видите, значки этих двух приложений очень странные, изначально они были выполнены в виде прямоугольника с закругленными углами, но снаружи расположен белый кружок. Почему так происходит? Это потому, что эти два приложения указали targetSdkVersion на значение выше 26, но они не адаптировали значок приложения в системе 8.0, а маска, установленная телефоном Pixel, является круговой, поэтому она автоматически устанавливается на внешнем слое значка приложения. Белый круг.
Видно, что приложения iQiyi и Ele.me не тестировались на совместимость с Pixel. Однако, учитывая, что они предоставляют услуги только на внутреннем рынке, они такжепростительный。
Создать новый проект
Рад сообщить, что в Android Studio 3.0 встроена функция адаптации значков системных приложений 8.0. Если вы установили Android Studio 3.0, поздравляю, у вас все получилось на 90%. Если вы все еще используете старую версию Android Studio, быстро перейдите и обновитесь, а затем прочтите эту статью.
Итак, теперь мы используем Android Studio 3.0 для создания нового проекта, назовем его IconTest.
Инструменты Rectangle и Rounded Rectangle
Инструмент Rectangle (Прямоугольник) (
Инструмент Rounded Rectangle (Скругленный прямоугольник) (
Рис. 4.66. Инструмент Rectangle в группе геометрических объектов
Рис. 4.67. Инструмент Rounded Rectangle в группе инструментов геометрических объектов
Во время рисования прямоугольника со скругленными углами возможно управление степенью кривизны:
Следует иметь в виду, что радиус скругления, используемый по умолчанию, устанавливается в поле Corner Radius (Радиус скругления) раздела General (Основные) диалогового окна Preferences (Установки) (рис. 4.68), которое вызывается командой Preferences (Установки) меню Edit (Правка).
Рис. 4.68. Поле Corner Radius раздела General диалогового окна Preferences
После создания прямоугольного объекта внутри него отображается центральная точка, совпадающая с геометрическим центром объекта. Эта точка служит для перемещения объекта по плоскости страницы или для выравнивания его с другими объектами. Удалить эту точку нельзя, но сделать ее невидимой можно.
Для этого необходимо с помощью команды Attributes (Атрибуты) меню Window (Окно) вывести на экран палитру Attributes (Атрибуты) и щелкнуть кнопку Don’t Show Center (He показывать центр). Для восстановления отображения центральной точки предназначена кнопка, находящаяся рядом, — Show Center (Показать центр) (рис. 4.69).
Рис. 4.69. Кнопки отображения центральной точки объекта в палитре Attributes
Drawable. Фигуры и градиенты
Shape и ShapeDrawable
Фигуры являются подмножеством Drawable-ресурсов.
Имя файла без расширения будет служить идентификатором (ID): R.drawable.filename в Java-коде и @[package:]drawable/filename в XML-файлах.
Элементы фигуры
rectangle (Прямоугольник)
Пример с градиентным прямоугольником в качестве разделителя
Создадим файл separator.xml:
В разметке приложения добавим код:
У прямоугольников можно скруглить углы при помощи тега corners
Можно закруглить углы по отдельности:
oval (Эллипс)
Другой вариант с пунктиром:
ring (Кольцо)
innerRadius Внутренний радиус innerRadiusRatio Отношение между внешним и внутренним радиусами. По умолчанию равно 3 thickness Толщина кольца (т.е. разница между внешним и внутренним радиусами) thicknessRatio Отношение ширины кольца к его толщине. По умолчанию равно 9
line (Горизонтальная линия)
Градиенты: gradient и GradientDrawable
Тег gradient (класс GradientDrawable) позволяет создавать сложные градиентные заливки. Каждый градиент описывает плавный переход между двумя или тремя цветами с помощью линейного/радиального алгоритма или же используя метод развертки.
Тег gradient внутри тега shape. Основные атрибуты: type, startColor (обязателен), endColor (обязателен) и middleColor (необязателен). Также иногда оказывается полезным атрибут centerColor.
Используя атрибут type, вы можете описать свой градиент:
linear
Также можно задействовать атрибуты centerX и centerY.
radial
Интересный эффект получается при использовании множества радиальных градиентов.
sweep
Рисует развёрточный градиент с помощью перехода между цветами startColor и endColor вдоль внешнего края фигуры (как правило, кольца).
Можно использовать атрибуты android:centerX и android:centerY.
Попробуйте также такой вариант.
А почему бы не повращать?
Примеры с shape
Закругляем уголки у компонентов
Создадим отдельный файл res/drawable/roundrect.xml и с его помощью скруглим уголки у LinearLayout, ImageView, TextView, EditText:
В разметке активности пишем следующее:
Овальный кабинет
В Белом доме есть Овальный кабинет. Если вам придётся писать приложение для администрации президента США, то все элементы нужно сделать овальными. Создадим файл res/drawable/oval.xml:
Заменим в предыдущем примере android:background=»@drawable/roundrect» на android:background=»@drawable/oval».