Giter VIP home page Giter VIP logo

messageviewcontroller's Introduction

Installation

Just add MessageViewController to your Podfile and install. Done!

pod 'MessageViewController'

Setup

You must subclass MessageViewController.

import MessageViewController

class ViewController: MessageViewController {
  // ...
}

Finish setup using a UIScrollView. Remember this can also be a UITableView or UICollectionView.

func viewDidLoad() {
  super.viewDidLoad()
  setup(scrollView: scrollView)
}

Customizations

You can customize any part of the UI that you want!

// Border between the text view and the scroll view
borderColor = .lightGray

// Change the appearance of the text view and its content
messageView.inset = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
messageView.textView.placeholderText = "New message..."
messageView.textView.placeholderTextColor = .lightGray
messageView.font = .systemFont(ofSize: 17)

// Setup the button using text or an icon
messageView.set(buttonTitle: "Send", for: .normal)
messageView.addButton(target: self, action: #selector(onButton))
messageView.buttonTint = .blue

// Set custom attributes for an autocompleted string
let tintColor = .blue
messageAutocompleteController.autocompleteTextAttributes = ["@": [.font: UIFont.preferredFont(forTextStyle: .body), .foregroundColor: tintColor, .backgroundColor: tintColor.withAlphaComponent(0.1)]]

Autocomplete

The base view controller uses a MessageAutocompleteController control to handle text autocompletion.

This control uses a plain UITableView to display its autocomplete. Add a dataSource and delegate to display and handle interactions.

let tableView = messageAutocompleteController.tableView
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
tableView.dataSource = self
tableView.delegate = self

Then register for autocomplete prefixes you want to respond to and set a delegate to handle when a prefix is found.

messageAutocompleteController.register(prefix: "@")
messageAutocompleteController.delegate = self

Your delegate needs to implement just one method.

func didFind(controller: MessageAutocompleteController, prefix: String, word: String) {
  // filter your data
  controller.show(true)
}

Note: You can perform asyncronous autocomplete searches. Just be sure to call messageAutocompleteController.show() when finished.

Acknowledgements

messageviewcontroller's People

Contributors

basthomas avatar benasher44 avatar fogh avatar jasonaibrahim avatar julienkode avatar lenkaiser avatar mohsinalimat avatar nathantannar4 avatar rizwankce avatar rnystrom avatar sd10 avatar viktorasl avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

messageviewcontroller's Issues

support for iOS 9

I've locally changed settings to support iOS 9 and it works perfectly.
Would you do that to officially support iOS 9?

Improve autocomplete view accessibility

Each cell in the table ought to be given the button trait.

When you type an @, should the focus be moved, or an announcement posted to indicate suggestions are available?

If you select the first suggestion, then swipe left, focus moves to element located underneath the autocomplete view, which feels funky.

After activating one of the auto complete suggestions, focus should move back to the text view - currently it focuses on whatever was underneath it.

How to remove the animation

I am using this MessageViewController, with IGListKit, and I notice something when the viewController appears there is some kind of animation. is this just me ??

Add @mention highlighting support to autocomplete

Hey!

First off thanks for the GitHawk app, I use it all the time! I liked your implementation of autocomplete, as I to did something similar for an InputAccessoryView that made its way into MessageKit.

I notice that in the GitHawk app @mention is highlighted with colors but not in the UITextView for the MessageViewController. Is this something you are already working towards? If not I would be happy to make a PR to support this feature! 😊

Autocomplete feature only

Hi Ryan,

Love the functionality of the autocomplete! I'm looking for a way to apply the autocomplete feature to a UITextView without all the other goodies.

Example, add a UITextView to a storyboard ViewController and apply the autocomplete feature alone, by adding a custom class to the UITextView or however you suggest. Do you have any examples of this or point me in the right direction?

Thanks for the help!

Rationale?

Hey, this looks interesting - I'm curious what (if anything) was missing from the heavy-inspiration-source of SlackTextViewController that caused you to create this library? Why would one use MessageViewController instead?

messageView.font seems to not be working?

I keep trying to set the font on my messageView just like in the examples

messageView.font = .systemFont(ofSize: 15)
or
messageView.font = .systemFont(ofSize: 20)
or whatever

and it always seems to start going back to [I think] size 17 font.

Screenshot below shows size 20 font for the first word then for some reason gets smaller and stays like that.

Realize I'm using a custom keyboard: Tried it with both default iOS keyboard and Gboard.

img_5202

Buttons don't align vertically with textInputView

Using latest master branch

The button(s) of the messageView have their own arbitrary vertical alignment. Is there any way to make them match the messageView.textViewInset you set?

Looks like you can only set the right/left insets of buttons using messageView.setButton(inset: CGFloat, position: MessageView.ButtonPosition)

Could it be laying out on its own margins because of sizeToFit()?

internal func buttonLayoutDidChange(button: UIButton) {
        button.sizeToFit()
        setNeedsLayout()
}

img_5416

img_5413

How to integrate MessageViewController with MessageKit or JSQMessageViewController

This library is really nice, but I'm wondering how to integrate it with others libraries to create a chat

MessageKit has it's own Controller to inherit and MessageViewController too, what is the best pratique to mix theses libraries ?

I've try to make a parent controller with MessageViewController and use JSQMessageViewController as a child (I know this library is deprecated)

I've try to make the configuration of MessageViewController in both viewdidload but it crash because of UI constraint

Thank you so much for your help

Add a changelog

With this being a library now, we should really think about keeping a changelog. #12 can then warn you to update the changelog if app files have been touched.

Weird issue when started typing

First character becomes white color, next character become black color.
Then when delete all text, typing color becomes normal again.
Could you please support?

Release 0.3

Now that we have updated the library to Swift 4.2, we should push a new version to CocoaPods.

How to change textColor or TextView. Scroll issue when started typing.

I have integrated MessageViewController for Chat in my application. I am facing 2 issues right now:

  1. I am not able to change textcolor of the textview. I have dark and normal mode and I need to change the textColor based on mode I select.
  2. When I start typing into the textview, the tableview in which I am currently displaying the chat messages, scrolls up a little.

Please reply me ASAP as we need to go in production and I have already move here from SlackTextViewController.

Only available for iOS 11.2?

I'm trying to run this pod on iOS 9.* and 10.*. But it's giving me errors.
On pod install terminal showing me following errors:

  1. Unable to find a specification for MessageViewController
  2. Automatically assigning platform ios with version 11.2 on target Examples because no platform was specified. Please specify a platform for this target in your Podfile. See https://guides.cocoapods.org/syntax/podfile.html#platform.

Would love to integrate in project though. Looking forward for response.

What are the long term plans for this project?

As a heavy user of SlackTextViewController, I came here immediately after reading about your project in iOS Dev Weekly. The goal is ambitious: "A SlackTextViewController replacement written in Swift for the iPhone X." Sounds fantastic, but the reality isn't up to the hype quite yet 😄

I'm not trying to be an ass; what you have so far looks great. Could you maybe update the home page or comment on this issue to give some more details on what you hope to accomplish? The version number is pretty low so I imagine it is a work in progress. Do you see this as a total replacement for STVC and the majority of its features or is it more narrowly focused? Is more of the messaging-related functionality in GitHawk going to be migrated into MessageViewController? Do you have a roadmap in mind for things like input buttons / toolbar, typing indicator, Edit mode, gestures, animations? Are you looking for contributors or do you intend to get closer to a 1.0 release before you open it up more?

-Eli

Insets not respecting tabBarController height

Repost of #70

Is there any way to make MessageViewController respect the tabBar (if you have one?)

The only way I found for it to adjust for the tab bar is with
tabBarController?.tabBar.isHidden = true

However if you use something like (animatable)
tabBarController?.tabBar.frame.origin = CGPoint(x: 0, y: frameHeight - tabBarHeight)

The messageView will still show the extra 49pts of tabbarheight

As shown in the below photo, when I used
tabBarController?.tabBar.frame.origin = CGPoint(x: 0, y: frameHeight - tabBarHeight)

The message view is

135pt (34pt safe area + 49pt tab bar + [52pt messageView.textInputView])
when it should be
86pt (34pt safe area + [52pt messageView.textInputView])

To make it work temporarily I edited MessageViewController (which I know I shouldn't!)

internal var safeAreaAdditionalHeight: CGFloat {
        switch keyboardState {
            //EDITED
        case .hiding, .resigned: return view.util_safeAreaInsets.bottom - (49) //EDITED TO ACCOUNT FOR TABBAR
        case .showing, .visible: return 0
        }
    }

img_6de3d86531b8-1

API Updates to allow for more customization

First of all, I'm really enjoying the library so far, awesome work. I'm shipping this in production in the next couple weeks and wanted to provide some feedback based on my experience. Below is the finished screen and the code I needed to write to make it happen:

simulator screen shot - iphone 8 - 2018-02-13 at 20 18 40

        // Change the appearance of the text view and its content
        messageView.inset = UIEdgeInsets(top: 20, left: 16, bottom: 20, right: 16)
        messageView.font = UIFont(barstool: .regular, size: 14)
        messageView.textView.placeholderText = "Type comment..."
        messageView.textView.placeholderTextColor = .lightGray
        messageView.textView.tintColor = .barstoolBrightBlue

        // Setup the button using text or an icon
        messageView.set(buttonTitle: "Send".uppercased(), for: .normal)
        messageView.addButton(target: self, action: #selector(handleSendButtonTapped))
        messageView.buttonTint = .barstoolBrightBlue

        for view in messageView.subviews {
            guard let button = view as? UIButton else { continue }
            button.titleLabel?.font = UIFont(barstool: .branding, size: 14)
            button.contentHorizontalAlignment = .right
        }

        let containerView = UIView()
        containerView.backgroundColor = UIColor(red: 0.945, green: 0.945, blue: 0.945, alpha: 1)
        containerView.borderColor = .separator
        containerView.borderWidth = 1
        containerView.cornerRadius = 2

        messageView.insertSubview(containerView, at: 0)
        containerView.snp.makeConstraints { $0.edges.equalToSuperview().inset(8) }

You'll notice a few hacks in there to make this work:

  1. I needed to traverse the view hierarchy to set a custom font on the button as well as customize the labels position
  2. I needed to add a fake view to give that appearance that it sits in a capsule (but the resizing still works great!)
  3. I originally had this screen setup with a stack view pinned to the edges, video player as first view in stackview, tableview as second view in stackview. that quickly broke because the library defaults to setting the tableview's frame directly
  4. Because of the tableview issue, I am setting custom insets and scroll indicator insets to make this view work properly
  5. I apply a transform to the tableview and the cell's content views (.init(scaleX: 1, y: -1)) to get the reverse style scrolling like you would see in a messages app, problem is when keyboard comes up it does not properly move content up so I had to re-listen for the keyboard event (your keyboard methods are internal) in order to make this work

Hope some of this feedback helps, keep up the great work!

Improve text view accessibility to read entire contents

The text view is behaving oddly when using VoiceOver. Tapping it to focus it, it only reads the line of text that you tapped, rather than the entire text view content. Comparing that to Messages, when you tap in the the text view, it reads the entire contents. Note that when you don't tap in the text view but rather swipe between elements, it properly highlights the entire text view and reads it all.

Default styles?

The default styles are really stock

  • No insets
  • Initial UITextView font
  • No placeholder
  • Placeholder color is black

Would anyone want some basic stock styles? Maybe just a nicer first-run experience for those that don't want to fiddle w/ too many customizations.

Inconsistent text view font

The latest release, 0.2.0, is causing the font to change in the text view as I type. Also introducing the left button has caused some really strange layout issues. For example, if I set showsLeftButton to false, the insets are rendered completely off center.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.