键盘上的UIView类似于iMessage App [英] UIView atop the Keyboard similar to iMessage App
问题描述
目前我正在尝试基本实现和完全复制Apples iMessage App。
currently I'm attempting to basically implement and exact copy of Apples iMessage App.
这意味着我需要一个停靠在屏幕底部的UITextView，当它成为firstResponder时向上移动。 - 实际上这很简单。有很多方法可以做到这一点，如果收到通知，最常见的两个当然是向上或向下动画视图。另一种是通过 inputAccessoryView 来完成。可悲的是，有一些功能，另一个没有。它们似乎是互斥的。
That means I need a UITextView that is docked at the bottom of the screen, and moves up when it becomes firstResponder. - That's pretty easy actually. There's a bazillion ways to do that and two of the most common are of course animating the view upwards or downwards if a notification was received. The other is to do it via the inputAccessoryView. Sadly some of the features the one has, the other doesn't. And they seem to be mutually exclusive.
最大的问题是轮换。
我已经深入研究了至少七个不同的github项目，所有这些项目重新实现了我正在努力实现的相同功能/行为，但实际上所有这些项目都失败了。
I've digged through roughly at least seven different github projects, all of them re-implementing the same functionality/behavior, that I'm trying to achieve, but literally all of them failing miserably.
HPGrowingTextView，官方Facebook / FacebookMessenger /（可能是WhatsApp）应用程序使用的，是一大块垃圾代码。拿你的iDevice，打开Facebook应用程序，进行聊天，弹出键盘并旋转你的设备。如果你注意，你会注意到输入条略微跳跃，并在键盘的框架和它自己的框架之间留下一些空白。然后在显示键盘时查看iMessage中的Apples实现。这是完美的。
HPGrowingTextView for instance, which the official Facebook/FacebookMessenger/(and possibly WhatsApp) Apps makes use of, is one big piece of junk-code. Take your iDevice, open the Facebook App, go the the Chat, pop the keyboard and rotate your device. If you pay attention you'll notice the input-bar jumping slightly and leaving some blank space between the keyboard's frame and its own. Then take a look at Apples implementation in iMessage when the keyboard is shown. It's perfect.
除此之外，HPGrowingTextView库使用的contentOffset和EdgeInset-hacking给了我噩梦。
Other than that the contentOffset and EdgeInset-hacking that the HPGrowingTextView library makes use of gives me nightmares.
所以我想自己做，从头开始。
So I wanted to do it myself and start from scratch.
现在我有一个非常光滑，优雅和无法实现的不断增长的UITextView ，但缺少一部分。
Right now I've got a very slick, elegant and hack-less implementation of a growing UITextView, but one part is missing.
优雅轮换。
当我只是在willRotateToInterfaceOrientation：duration：方法中将帧调整到各自的新位置，一切都完美地工作但是我有与HPGrowingTextView（请参阅Facebook App）相同的问题。旋转发生时，输入视图和键盘之间有一点点空间。
When I simply adjust the frames to their respective new positions in the willRotateToInterfaceOrientation:duration: method, everything ends up working perfectly BUT I have the same problem that HPGrowingTextView(see Facebook App) has. A litte bit of space between the inputview and the keyboard while the rotation takes place.
我发现当将设备旋转到横向时，当前显示的纵向键盘不会变形而是消失（发送'willHide'通知）并重新出现横向版本（发送'willShow'通知）。转换是一个非常微妙的淡入淡出，可能还有一些调整大小。
I found out that when rotating the device to landscape, the portrait keyboard which is currently shown does not "morph" but rather disappears (sends the 'willHide' notification) and a landscape version reappears (sending the 'willShow' notification). The transition is a very subtle fade and possibly some resizing.
我使用inputAccessoryView重新实现了我的项目，看看当时发生了什么，我感到非常惊喜。 inputAccessoryView与键盘完美同步旋转。这两者之间没有空格/差距。
I re-implemented my project using the inputAccessoryView to see what happens then and I was pleasantly surprised. The inputAccessoryView rotates in perfect sync with the keyboard. There's no space/gap between the two.
遗憾的是，我还没有想出如何让inputAccessoryView停靠在屏幕底部并且 NOT 在键盘旁边消失/移出...
Sadly I have yet to come up with an idea how to have the inputAccessoryView dock to the bottom of the screen and NOT disappear/move out of it alongside the keyboard...
我不想要的是像......这样的黑客解决方案框架略微位于toInterfaceOrientation的CoordinateSystem中，然后在调用didRotateFrom ...时将其移回。
What I don't want are hack-y solutions like,..."lowering the frame slightly in the toInterfaceOrientation's CoordinateSystem and then moving it back up when the didRotateFrom... was called."
我知道其他一个已设法实现此功能的应用程序行为，它是Kik Messenger。
I know of one other app that has managed to implement such behavior and it's the "Kik Messenger".
有没有人有想法，建议或链接，我还没有看到这个主题？
Does anyone have an idea, advice or a link that I haven't seen yet covering that topic?
非常感谢！
注意：一旦这个问题得到解决，我将为所有人开源项目，因为几乎每个实现我能够找到过去几天的过程，是一团糟。
Note: Once this problem is solved I will open source the project for everyone to profit because almost every implementation I was able to find over the course of the past few days, is a mess.
推荐答案
我在solv上取得了成功以一种非常优雅的方式解决问题（我认为......）。
I have been successful at solving the problem in quite an elegant manner (I think,...).
代码将在下周在Github上发布并链接到这个答案中。
The code will be released on Github next week and linked to in this answer.
-
如何完成：我通过选择inputAccessoryView方式完成了旋转工作。
How it's done: I made the rotation work by choosing the inputAccessoryView-way of doing it.
命名法：
- 'MessageInputView'是包含我的'GrowingUITextView'的UIView（它还包含一个发送按钮和背景图片）。
- 'ChatView'是属于ChatViewController的视图，它显示所有的Chatbubbles并且我的'MessageInputView'停靠在底部。
- 'keyboardAccessoryView'是一个空的UIView大小：CGRect（0,0,0,0）。
- 'MessageInputView' is a UIView containing my 'GrowingUITextView' (it also contains a "Send" Button and the background image).
- 'ChatView' is the view that belongs to the ChatViewController that displays all the Chatbubbles and has my 'MessageInputView' docked at the bottom.
- 'keyboardAccessoryView' is an empty UIView sized: CGRect(0,0,0,0).
我需要弄清楚如何拥有当键盘被解除时， MessageInputView 会粘在屏幕上。那是棘手的部分。我通过创建另一个视图（ keyboardAccessoryView ）并让我的 GrowingUITextView 将其用作inputAccessoryView来完成此操作。我保留了 keyboardAccessoryView ，因为我稍后需要引用它。
I needed to figure out how to have the MessageInputView stick around on the screen when the keyboard was dismissed. That was the tricky part. I did this by creating another view (keyboardAccessoryView) and had my GrowingUITextView use it as its inputAccessoryView. I retained the keyboardAccessoryView because I'd need the reference to it later on.
然后我想起了我在其他方面所做的一些事情尝试（每当键盘通知到达时，在屏幕周围设置 MessageInputView 的框架动画）。
Then I remembered some of the stuff I did in my other attempt (animating the MessageInputView's frames around the screen whenever a keyboard notification arrived).
我添加了 MessageInputView 作为我的 ChatView 的子视图（位于最底层）。每当激活它并且通过键盘通知调用willShow：方法时，我手动将 MessageInputView 的帧设置为其指定位置的顶部。当动画完成并执行完成块后，我从 ChatView 中删除子视图，并将其添加到 keyboardAccessoryView 。这会导致另一个通知被触发，因为每次更改inputAccessoryView的帧/边界时都会重新加载键盘！你需要注意这一点并妥善处理它！
I added my MessageInputView as a subview to my ChatView (at the very bottom). Whenever it is activated and the willShow: methods is called by a keyboard notification, I manually animate the MessageInputView's frame to it's designated position up top. When the animation finishes and the completion block executes I remove the subview from the ChatView and add it to the keyboardAccessoryView. This causes another notification to be fired off because the keyboard is re-loaded EVERY time the inputAccessoryView's frame/bounds are changed!. You need to be aware of that and handle it appropriately!
当键盘即将被解雇时，我将 MessageInputView 的帧转换为我的 ChatView 的坐标系并将其添加为子视图。因此它将从我的 keyboardAccessoryView 中删除。然后我将 keyboardAccessoryView 的帧重新调整回CGRect（0,0,0,0），否则UIViewAnimationDuration将不匹配！然后我允许键盘被解雇，我的 MessageInputView 从上面跟着它，最终停靠在屏幕的底部。
When the keyboard is about to dismissed, I convert my MessageInputView's frame to my ChatView's coordinate system and add it as a subview. Thus it is removed from my keyboardAccessoryView. I then resize the keyboardAccessoryView's frame back to CGRect(0,0,0,0) because otherwise the UIViewAnimationDuration will not match! Then I allow the keyboard to be dismissed and I have my MessageInputView follow it from above and eventually dock at the bottom of the screen.
这个虽然收益很少，但还是做了很多工作。
This is quite a lot of work for very little gain though.
-
小心。
PS：如果有人想出一个更简单的方法（完全），请告诉我。
PS: If someone figures out an easier way to do it (perfectly) let me know.
这篇关于键盘上的UIView类似于iMessage App的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
