Мобильная разработка
14.8K subscribers
567 photos
237 videos
2.58K links
Актуальное по мобильной разработке — Android, iOS, кроссплатформа

Разместить рекламу: @tproger_sales_bot
Правила общения: https://tprg.ru/rules
Другие каналы: @tproger_channels
Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/oVBP
Download Telegram
Примеры анимаций на Jetpack Compose

На GitHub появился интересный репозиторий, где реализованы две анимации на Jetpack Compose:

— стек карточек;
— кнопка со свайпом.

Как это работает: https://github.com/antonshilov/ComposeAnimations

#android #compose #ui
👍22🔥10👏1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированная нижняя панель навигации для Android-приложения

Элементы выполнены в виде «пузырьков». Легко кастомизируется.

Как использовать: https://github.com/akshay2211/BubbleTabBar

#android #ui #библиотеки
30🤔2👍1💩1
Как реализовать тень от кнопки в Android-приложении?

Самый стандартный способ — использовать elevation (для управления величиной размытия и цветом тени) и Outline (для управления формой тени и её смещением).

Помимо данного варианта, существует ещё множество способов создания тени. Подробнее о них — в статье.

#android #ui
👍20
This media is not supported in your browser
VIEW IN TELEGRAM
Реализация двусторонних переворачивающихся карточек на Jetpack Compose

Библиотека Flippable имеет множество параметров, которые можно кастомизировать.

Как использовать: https://github.com/wajahatkarim3/Flippable

#android #ui
👍19🤩2
Вышла Lottie 5.0 — библиотека для добавления анимаций в Android-приложение

Анимированные изображения удобно реализовывать в After Effects. А библиотека Lottie позволяет конвертировать анимацию в нативную на мобильных устройствах.

В версии 5.0 для Android разработчики библиотеки существенно улучшили стабильность библиотеки, добавили поддержку закруглённых углов для прямоугольников (rectangle) и фигур (shape), отказались от View.setLayerType() и не только. Подробнее об изменениях вы можете узнать из статьи.

Если вы никогда не пользовались библиотекой Lottie, то попробуйте анимировать котика по гайду.

#android #ui
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированная нижняя панель навигации для iOS-приложения

Помните, на днях мы рассказывали про похожую панель для Android? Существует её версия на iOS, но от другого автора. А функциональность та же: кастомизируемые элементы навигации в виде «пузырьков».

Как использовать: https://github.com/Cuberto/bubble-icon-tabbar

#ios #ui #библиотеки
👍11
This media is not supported in your browser
VIEW IN TELEGRAM
Скетчбук в Android-приложении

Библиотека Sketchbook для Jetpack Compose предоставляет необходимые инструменты для рисования на холсте: выбор цвета, палитру, а также различные компоненты и функции.

Как использовать: https://github.com/getStream/sketchbook-compose

#android #ui
👍12
Раскладываем по полочкам Material You

В 2021 году вместе с Android 12 Google представила третью версию дизайн-системы Material — Material You, которая привнесла в дизайн Android-приложений много нового, в том числе:
— обновление цветовой палитры Material,
— динамические цвета,
— обновление UI-компонентов.

В статье даётся обзор нововведений Material You:

https://habr.com/ru/company/surfstudio/blog/653115/

#android #ui
👍11😁1
Интерактивные анимации в SwiftUI

Хоть по части анимаций фреймворк SwiftUI не так гибок, как UIKit, он существенно уменьшает работу над созданием анимаций.

Если хотите познакомиться с созданием анимаций на SwiftUI, рекомендуем статью, где объясняется процесс создания кастомного компонента .sheet():

https://swiftcraft.io/blog/a-closer-look-at-interactive-animations-in-swiftui

#ios #swiftui #ui
👍7
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированная кнопка загрузки на SwiftUI

В основной части кнопки реализован эффект волны, а по краям — плавное изменение цвета кольца. Как вам?

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

#ios #swiftui #ui
🔥43👍102👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Кастомизируемая панель вкладок для SwiftUI

Библиотека AxisTabView позволяет создать панель вкладок с различными стилями. С её помощью вы можете настроить размер панели и элементов, а также кастомизировать их форму.

Как использовать (пример iOS-приложения внутри): https://github.com/jasudev/AxisTabView

#ios #swiftui #библиотеки #ui
👍12🤯1
This media is not supported in your browser
VIEW IN TELEGRAM
Создание кастомного индикатора загрузки в UIKit

В гайде объясняется, как реализовать собственный спиннер с помощью двух классов фреймворка СoreAnimations — CAShapeLayer и CAReplicatorLayer:

https://habr.com/ru/post/658083/

#ios #ui
👍13🔥32👎2💩2😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Многопользовательская игра для рисования на Compose

В игре Stream Draw один игрок должен нарисовать изображение, а другой — отгадать, какое слово загадано. Под капотом: Jetpack Compose, корутины и Flow.

Изучить проект: https://github.com/getStream/stream-draw-android

#android #compose #ui
🔥23👍51
This media is not supported in your browser
VIEW IN TELEGRAM
Создание анимированного селектора на Jetpack Compose

Делимся пошаговым гайдом по созданию кастомного селектора в Android-приложении, в котором изменяются:
— фон с анимацией в соответствии с выбранным параметром;
— углы фона вместе с выбранной позицией;
— цвет текста на выбранной позиции.

Подробнее: https://fvilarino.medium.com/creating-an-animated-selector-in-jetpack-compose-669066dfc01b

#android #compose #ui
🔥11👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Пружинная анимация в SwiftUI

Держите подборку интересных примеров, как можно реализовать пружинную анимацию различных типов — .spring(), .interactiveSpring(), .interpolatingSpring(...) и их вариациями:

https://medium.com/@amosgyamfi/learning-swiftui-spring-animations-the-basics-and-beyond-4fb032212487

#ios #swiftui #ui
🔥26👍9
Гибкость интерфейса с Backend-Driven UI

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

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

#ui
👍7
​​UI Sources — изучаем инсайты дизайна мобильных приложений

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

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

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

#ux #ui #ios #android #дизайн
5❤‍🔥2
​​Когда закончится эра безграмотных мобильных интерфейсов? Воспоминания о курсе эргономики

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

Почему так происходит и что с этим можно сделать — в статье: https://habr.com/ru/articles/783640/

#ux #ui #дизайн
🥱7👍3🤔31
​​Наконец-то действительно нормальный UI для Android!

Исходники: https://github.com/nassendelft/compose-win9x-theme

#android #ux #ui #дизайн
👍52😁28🔥10😱1