JXWeChatFloatView
1.0.0
Плавающий шарик с высокой имитацией статьи WeChat
В последней версии WeChat 6.6.7 была добавлена новая функция плавающего шарика для статей. Пока вы читаете статью, друг внезапно отправляет срочное сообщение, и вам нужно немедленно ответить. Или, может быть, вы проходите мимо закусочной и вам нужно временно открыть оплату WeChat или временно прервать чтение. Раньше я мог только выйти со страницы сведений о статье, а после завершения работы я мог найти исходные статьи рядом друг с другом. Для активных пользователей WeChat, таких как мы, каждый раз, когда мы сталкиваемся с такой ситуацией, очень больно. Поэтому, когда эта функция была запущена, ее сразу же обновили до последней версии. Эта функция напоминает встречу с близким другом, и ее очень легко использовать. Вы можете почувствовать это через анимацию ниже.
На самом деле, концепция плавающих шаров существует уже давно. Например, шар для мониторинга трафика 360 Assistant, собственный AssistiveTouch на iPhone (этот милый маленький белый шарик) и т. д.
Если вам нравится адрес Github, нажмите на него ❤️
После этого у меня чешутся руки, и я не могу не хотеть подражать этому. Если ваше приложение сможет интегрировать эту функцию, я думаю, оно мгновенно поднимет ваше приложение на новый уровень. Хорошо, давайте поочередно разберем основные технические моменты статьи о плавающем шаре в WeChat:
Когда мы используем жест края экрана, чтобы открыть вид, в правом нижнем углу появится подсказка с закругленным углом, которая перемещается по мере выполнения жеста. Как узнать прогресс UIScreenEdgePanGestureRecognizer ? Поскольку interactivePopGestureRecognizer , поставляемый с системой, инкапсулирован, мы не можем перехватить его действие, чтобы получить информацию о ходе выполнения жеста внутри. Поэтому нам нужно найти другой путь.
self . interactivePopGestureRecognizer ? . delegate = self
func gestureRecognizer ( _ gestureRecognizer : UIGestureRecognizer , shouldRecognizeSimultaneouslyWith otherGestureRecognizer : UIGestureRecognizer ) -> Bool {
return true
}UIScreenEdgePanGestureRecognizer в UINavigationController, чтобы отслеживать ход выполнения жеста. let gesture = UIScreenEdgePanGestureRecognizer ( target : self , action : #selector ( handleNavigationTransition ( gesture : ) ) )
gesture . edges = . left
self . view . addGestureRecognizer ( gesture ) Таким образом, есть два UIScreenEdgePanGestureRecognizer , которые могут реагировать одновременно. Тот, который поставляется с системой, по-прежнему поддерживает исходную логику, а новый, который мы добавили, используется для получения информации о ходе выполнения жеста нажатия. гармонии и получать удовольствие. Этот мой метод также используется в этой статье для iOS: интеграция страниц профиля основных приложений (таких как Jianshu, Weibo и т. д.) за одну минуту.
Поскольку плавающий шарик можно подвесить на любой странице, его необходимо разместить в новом UIWindow. Например, когда появляется системная клавиатура, она размещается в UIRemoteKeyboardWindow . Тогда жизненный цикл этого окна не зависит от конкретной страницы, поэтому для его реализации лучше использовать синглтон. Этот фрагмент кода относительно разбросан. Вы можете понять это, посмотрев непосредственно на исходный код.
override func point ( inside point : CGPoint , with event : UIEvent ? ) -> Bool {
let roundEntryViewPoint = self . convert ( point , to : roundEntryView )
if roundEntryView . point ( inside : roundEntryViewPoint , with : event ) == true {
return true
}
let collectViewPoint = self . convert ( point , to : collectView )
if collectView . point ( inside : collectViewPoint , with : event ) == true {
return true
}
return false
}UIBezierPath , а затем для определения используйте метод contains(point) CGPath . func updateBGLayerPath ( isSmall : Bool ) {
var ratio : CGFloat = 1
if !isSmall {
ratio = 1.3
}
let path = UIBezierPath ( )
path . move ( to : CGPoint ( x : viewSize . width , y : ( 1 - ratio ) * viewSize . height ) )
path . addLine ( to : CGPoint ( x : viewSize . width , y : viewSize . height ) )
path . addLine ( to : CGPoint ( x : ( 1 - ratio ) * viewSize . width , y : viewSize . height ) )
path . addArc ( withCenter : CGPoint ( x : viewSize . width , y : viewSize . height ) , radius : viewSize . width*ratio , startAngle : CGFloat ( Double . pi ) , endAngle : CGFloat ( Double . pi*3 / 2 ) , clockwise : true )
path . close ( )
bgLayer . path = path . cgPath
}
override func point ( inside point : CGPoint , with event : UIEvent ? ) -> Bool {
return bgLayer . path! . contains ( point )
}Студенты, которые мало что знают по этой теме, могут обратиться к этой статье. Статья, посвященная использованию доставки событий, цепочки ответов, hitTest и pointInside.
Вы можете видеть, что статья, открывающаяся при нажатии на плавающий шарик, реализована посредством пользовательской анимации перехода, начиная с положения плавающего шарика. Существует множество статей, объясняющих, как настроить анимацию перехода, но я рекомендую вам прочитать эту статью, чтобы быстро интегрировать пользовательские эффекты перехода + полный драйвер жестов с помощью нескольких строк кода.
Плавающий шар WeChat использует относительно много технических моментов, а код относительно разбросан. Если ваше приложение хочет интегрировать эту функцию, вам необходимо тщательно упаковать код. Я считаю, что то, как сформулировать требование, важнее, чем то, как его реализовать. В процессе имитации я обнаружил, что существует множество детальных логик, которые взаимосвязаны друг с другом, и, наконец, представлена используемая вами функция плавающего шара. Говорят, что программисты и продакт-менеджеры влюблены друг в друга. Вот хочу поставить большой палец вверх продакт-менеджеру этой функции?
Если в коде возникнут какие-либо проблемы или у вас возникнут вопросы, вы можете оставить мне отзыв, и я разберусь с этим как можно скорее. Если вам нравится адрес Github, нажмите на него ❤️
