Skip to content

API Updates to allow for more customization #24

Open
@AndrewBarba

Description

@AndrewBarba

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions