Search code examples
objective-cswiftmacoscocoaappkit

What's the easiest way to implement floating buttons UI view for OS X

I want to implement an UI view like the emoji selection view for Slack

enter image description here

As far as I can tell, Slack's client is actually a web browser, so that would probably be something like

   <ul>
       <li style="float: left"><a href="#">:taco</a></li>
       ....
   </ul>

As if it's in HTML. However, I want to do it with Cocoa UIview for OS X, I wonder is there any standard UI views I can use to achieve the same purpose with minimum effort? How it should work is to flow the buttons to the next row if there is no more space at the right hand side.

I looked something like NSTableView, but there seems no floating for the item cell (maybe I need to implement it by myself?). I also checked NSStackView, when the width exceeds parent view, it's not flowing to the second row. Anyway, just like to know before I jump in too fast for a custom UI view.

Solution

  • I think I found the answer

    Thanks to @Astoria, I think NSCollectionView is the right one to use, and the only problem is which layout to use. After googling around, I think

    NSCollectionViewFlowLayout is the right one to use, it's a port from UICollectionViewFlowLayout (iOS), the document can be found here

    There is a talk at WWDC about it:

    https://developer.apple.com/videos/play/wwdc2015-225/