SwiftUI довольно новый и приятный в работе. Это полностью изменило наше мышление, когда мы пришли из UIKit, AppKit. Однако овладеть им, помогая нам создавать настраиваемые элементы управления проще, чем раньше. Мы собираемся построить круговой текст, и я покажу вам, как это легко сделать.
Это то, что мы имеем, когда закончили.
Запустите свой Xcode и создайте новый проект SwiftUI.
Создайте новый файл SwiftUI и назовите его CircularText.
Первыми двумя атрибутами для нашего контроля, конечно же, являются String и Radius для нашего круга.
Добавьте 2 атрибута с именем:
Чтобы сделать текст в виде круга, мы разбиваем строку на массив символов, каждый символ будет иметь свой собственный элемент управления Text, затем мы собираемся повернуть текст, чтобы он соответствовал кругу.
Определите свойство компьютера для разделения строки на массив символов:
Использование enumrated для дальнейшего использования.
Чтобы вычислить угол, используя для последующего вращения, нам понадобятся 2 вещи: периметр круга и ширина каждого символа.
Позже мы будем использовать его как radius.perimeter.
С шириной каждого символа немного сложнее. Нам нужно поместить его в какой-то элемент управления и каким-то образом получить размер этого элемента управления. Текст - лучший кандидат для этого случая.
Вставить текст и разделитель в Vstack, у нас есть настраиваемый элемент управления высотой с родительский вид и текст в верхней части элемента управления, это позволяет нам легко выполнять поворот позже, потому что нам просто нужно вращение в центре управления
Теперь у нас есть список текста, и теперь нужно получить значение ширины. SwiftUI позволяет нам получать размер из элемента управления с помощью GeometryReader, и мы отправляем его наружу с помощью PreferenceKey.
Мы собираемся разместить настраиваемый Sizeable View в качестве фона текста, поскольку Sizeable View на самом деле является цветом, он будет заполнять родительский элемент (который является фоном текста), поэтому мы получили точный размер текста.
Чтобы сохранить эти размеры, позвольте добавить Словарь, чтобы сохранить его, ключом будет позиция Charater. Добавьте словарь с именем textSizes.
Обновите наш VStack, чтобы сохранить размеры при изменении предпочтений.
У нас есть периметр и с каждым символом, теперь вычисляем угол каждого символа по его положению.
Эта функция просто вычисляет, сколько процентов размера по сравнению с периметром круга, а затем вычисляет угол по этому проценту.
У нас есть угол, теперь делаем поворот и видим результат:
Похоже, проблема с пробелом между персонажами. Это потому, что его достаточно для горизонтального текста, когда мы делаем круг, угол поворота сближает их. К счастью, встроенный модификатор кернинга позволяет легко его настроить.
Если вы хотите сделать его центром, просто попросите угол последнего символа разделить на 2, а затем поверните его против часовой стрелки.
Мы сделали, надеемся, что вам понравится и получайте удовольствие от SwiftUI.
