Skip to main content

iOS Creating a list of tags



I'm currently trying to implement a feature in my app that shows tags for a post. I want it to work very similar to that of tags here on StackOverflow, in that they have a colored background.





Another example, are the Inline Labels here .





I'm just not quite sure on how to get it implemented. My first guess would to create an array of UILabels... Any suggestions?


Comments

  1. You probably need to write two classes.

    The first (let's call it HorizontalLayoutView) will extend UIView. It will serve as the container view to hold all of the tags. It would override the layoutSubviews method to arrange the subviews by setting their frames. Create one instance of this and add it as a subview to your existing view.

    The other (let's call that TagView) will also extend UIView, or perhaps UILabel. Instances of this class will represent each tag. Create one instance for each tag and add it as a subview to your horizontalLayoutView instance. In the initWithFrame: method, you would customize the tag to look the way you want. You can also override the drawRect: method to further customize its look.

    If you are adding the tags dynamically after the view is already displayed, you may need to call setNeedsLayout on the horizontalLayoutView instance to get it to adjust properly.

    Hope this will get you started in the right direction.

    ReplyDelete
  2. Figure out what you want the tags to look like. If you can achieve that appearance with existing components like labels or tokens, then great, problem solved. If not, creating your own UIView subclass that draws a background and bit of text is pretty simple -- you wouldn't need to write much more code than a custom -drawRect: method, and even that should be easy. For example, if you wanted something that looks like the Twitter-ish inline labels, you could start with a resizable image and then draw your text on top.

    Don't be afraid to create your own view classes... it's fun!

    ReplyDelete

Post a Comment

Popular posts from this blog

Why is this Javascript much *slower* than its jQuery equivalent?

I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...