Быстрая анимация, похожая на линейную диаграмму

Question

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

Другими словами, большие пальцы линии должны быть интерактивными, чтобы пользователь мог перемещать их вверх и вниз, что приведет к перемещению «веревок» между каждой парой. Проблема в том, что я не могу понять, что это за структура в swift, чтобы я мог создать это представление. Пока что я думаю о том, чтобы создать отдельные ползунки и соединить их посредством рисования, линий между ними, но я думаю, что должно быть какое-то лучшее решение. Любая помощь, идея, совет или подсказка приветствуется. Заранее спасибо.

Answer 1

Часть 1. Обучение использованию «drawRect» в UIView

Создание собственного представления, то есть подкласса UIView. Чтобы нарисовать девять угловых отрезков (и, конечно, сетку позади), вам нужно освоить основную графику. К счастью, на этой самой топике много QA c:

Как нарисовать линию самым простым способом в swift

Часть 2. Custom слои в UIView

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

{ ссылка }
{ ссылка }

(обратите внимание, что для небольших текстовых меток, Я, вероятно, просто добавил бы много UILabels программно, о которых вам также нужно будет узнать.)

Часть 3. Использование UISlider

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

Удобный совет: просто используйте горизонтальный вид стека, чтобы удержать их все - вы можете расположить их как you wi sh.

Часть 4. Использование жестов

Beyond UISlider. Красные кнопки, скорее всего, будут пользовательские UIViews . И, самое простое, вы бы использовали UIPanGestureRecognizer, чтобы обнаружить движение пальца.

Опять вы можете найти много QA в этой области изучения, например Переместить UIView в родительском представлении, используя pangesture

Если вы овладеете этими четырьмя общими полями, вы сможете достичь рассматриваемого вида, удачи!