How to implement a comment page with news like Facebook or Instagram

Both Instagram and Facebook allow their users to comment on the news. In the comments scene, they basically have a UITableView with all comments and a "footer" where the user can enter comments and post them. So the "footer" is a UIView or UIToolBar with a UITextField / UITextView and a UIButton. A truly simple material from the outside. Well I tried to implement it and the keyboard doesn't work. I need a keyboard to not hide the "footer". Especially in iOS 8, the keyboard has a suggestion toolbar that the user can select or show. All of these interactions make it difficult to keep the "footer" right above the keyboard as the user is entering text. Every time I think I'm nailing a solution,I find many mistakes.

  • In one implementation, I'm using keyboard notification to listen when the keyboard is up or down (based in part on iPhone Keyboard Covers UITextField). The problem with this implementation is that there is a lag of about 1 to 2 seconds when the keyboard appears, and for the "footer" it is at the top of the keyboard at the bottom of the screen. The second problem is the user dragging the suggestion toolbar to show or hide it while typing, which causes my "footer" to move in unpredictable ways: this means I need some static variables to carefully track cumulative interactions with suggestions panel just to fix this bug. Also notice that I put quotes around the "footer". This is because I do not mean the UITableView footer. But rather, the view I create under the table view isas suggestedUITableView, make a footer at the bottom of the screen?

  • Another implementation I tried was to use a "footer" and a ToolBar keyboard. When the user clicks on the UITextField of the footer, it will cause the keyboard to be displayed with a replica of the footer as inputAccessoryView. It basically fools the user visually into thinking of the same footer that rises smoothly from the keyboard. But I'm actually using two composite views: the "footer" and the keyboard toolbar. The first problem I run into with this is that I cannot make the toolbar textbox the first software. This actually worked in ios-7. But since I have upgraded to iOS-8, it doesn't work. Therefore, if I dofooterTextField.inputAccessoryView=keyboardToolBar

    and then in the textfield delegate method to check if(textField==footerTextField){[tooBarTextField becomeFirstResponder];}

    , iOS-8 just ignores the whole thing, or worse, discards the keyboard and toolbar entirely, so that the keyboard never actually appears when I click on footerTextField, since showing and dismissing happen so fast. This is how it worked again in iOS-7, but it doesn't work in iOS-8.

  • the third approach was to make the parent TPKeyboardAvoidingScrollView such that I had a parent and child UITableView and a "footer". Here, when TPKeyboardAvoiding worked for me in other scenes of the application, for some reason it doesn't work here. I am assuming that I am using UITableView as one of the UIScrollView's children.

  • the fourth approach was to make my "footer" the actual section footer of the UITableView; because I want it to float at the bottom. The problem with section footers is that they don't stick to the base, which when visually moving the table gives visually erratic user behavior.

Ok, so I said a lot. So finally, has anyone implemented a scene similar to the Facebooks / Instagrams NewsFeed comments scene? If yes, please help me?

To recap: Facebook / Instagram text input field grows with text; sticks to the top of the keyboard, whether the keyboard tip toolbar is shown or hidden; when the keyboard is gone.


source to share

1 answer


seems to fit all your requirements and is very well written.



All Articles