Делаем красивый switch в sketchware pro

В статье речь пойдет о создании кастомного switch при помощи сторонней библиотеки StickySwitch в Sketchware pro

Параметры

лицензия: MIT

api level: 15+

язык: kotlin

ссылка на страницу github: ссылка

ссылка на репозиторий: com.github.GwonHyeok:StickySwitch:0.0.16

Пример: пример custom Switch

Скачать библиотеку: Kotlin JVM

Описание

Эта библиотека - красивый виджет переключения с липкой анимацией. При помощи данной библиотеки можно изменить стандартный виджет switch: красивая анимация переключения, изменить цвет тумблера, его фона, иконка на тумблере, скорость анимации и т.д. Так как библиотека практически полностью написана на Kotlin для работы с ней на java нам понадобится подключить к проекту еще одну библиотеку - Kotlin JVM. Достаточно просто подключить ее к своему проекту через "менеджера локальных библиотек".

Использование библиотеки

Для начала подключаем библиотеки к проекту. Добавляем виджет switch. При помощи xml инъекций( пункт inject) добавляем необходимые нам параметры  к виджету. Так же определить эти параметры можно в java коде , используя блок asd.

скрин. Конвертируем виджет

app:ss_animationDuration="600"//продолжительность анимации

app:ss_iconPadding="18dp"//размер иконки на фоне

app:ss_iconSize="30dp"//размер активной иконки

app:ss_leftIcon="@drawable/ic_highlight_remove_white"//левая иконка

app:ss_leftText="Оригинал"//подпись под левой иконкой

app:ss_rightIcon="@drawable/ic_check_circle_white"//правая иконка

app:ss_rightText="Мод"//подпись под правой иконкой

app:ss_selectedTextSize="12sp"//размер подписи в активном положении

app:ss_sliderBackgroundColor="#263238"//фоновый цвет переключателя

app:ss_textColor="#FFFFFF"//цвет текста

app:ss_textSize="10sp"//размер текста в неактивном положении

app:ss_animationType="line"//тип анимации

Далее нам нужно переопределить наш виджет(меню convert). Во вкладке "события" необходимо импортировать библиотеку. В событии import добавим блок import , пропишем в нем строку io.ghyeok.stickyswitch.widget.StickySwitch . Собственно все готово. Далее пройдемся по функционалу подробнее.

скрин. конвертируем виджет

скрин. импортируем библиотеку

скрин. прописываем импорт

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

Положение

stickySwitch.setDirection(StickySwitch.Direction.LEFT);//Переключить тумблер в левое положение

stickySwitch.setDirection(StickySwitch.Direction.RIGHT, false);//переключить тумблер в правое положение без анимации

stickySwitch.setDirection(StickySwitch.Direction.RIGHT, false, false);//переключить тумблер в правое положение без вызова selectedChangeListener

stickySwitch.getDirection(); //получить текущую позицию (StickySwitch.Direction.LEFT)

Текст

stickySwitch.getText()//получить текст подписи активного положения переключателя

stickySwitch.getText(StickySwitch.Direction.LEFT) // получить текст определенной подписи (Get leftText)

stickySwitch.setLeftText("Left");//установить текст левой подписи

stickySwitch.setRightText("Right");//установить текст правой подписи

stickySwitch.setTypeFace(Typeface.DEFAULT_BOLD);//тип шрифта

stickySwitch.setTextVisibility(StickySwitch.TextVisibility.VISIBLE); //показывать текст

stickySwitch.setTextVisibility(StickySwitch.TextVisibility.INVISIBLE); // скрыть текст

stickySwitch.setTextVisibility(StickySwitch.TextVisibility.GONE); // отсутствует текст

Иконка

stickySwitch.setLeftIcon(R.mipmap.ic_launcher);//установить левую иконку из drawableRes

Drawable drawable = getDrawable(R.mipmap.ic_launcher);//установить левую иконку из drawable

stickySwitch.setLeftIcon(drawable);

Цвет

// обратите внимание что формат цвета должен быть -  (0xAARRGGBB)

stickySwitch.setSliderBackgroundColor(0xFF181821);//фон тумблера

stickySwitch.setSwitchColor(0xFF2371FA);//цвет переключателя

stickySwitch.setTextColor(0xFFFFFFFF);//цвет текста

Анимация

// скорость анимации до 1000ms (скорость по умолчанию - 600ms)

stickySwitch.setAnimationDuration(1000);//установить скорость воспроизведения анимации

stickySwitch.setAnimationType(StickySwitch.AnimationType.CURVED);//изменить тип анимации - curved (по умолчанию - line)