Question

I am building an app to go alongside a web app I’ve built, which features a threaded comment system.

I’m wondering what the best approach to building this threaded view would be. Is there a relatively easy way to build an accordion style control?

I really like how the Alien Blue app does it, and the UI & UX is very smooth:

• Does anyone have any idea how these are built?
• Would making custom UIViews added as subviews be the best approach? If so, how would you implement ‘collapse’ style functionality?

Answer 1

I’d suggest creating a UIView subclass to contain each comment. It should have a toggle button to expand / collapse. On toggling open i’d set the frame size to the size of the content (plus any padding). It would contain an array of sub-comments, for each one you’d add the UIView subclasses to itself at expand time (And remove when collapsing) which would initially be collapsed (and so just appear as the toggle button). Collapsing is just the reverse, remove the subviews, set the frame to be the hight of the toggle button (plus padding)

As each comment view knows its size, you can put the whole thing in a UIScrollView with content-size set to the sum of the comment views sizes allowing scrolling regardless of expanded / contracted nature.

A partial implementation for this idea:

Comment.h

#import <Foundation/Foundation.h>

@interface Comment : NSObject {
    NSMutableArray* subComments;
    NSString* comment;
}

@property (nonatomic, retain) NSMutableArray* subComments;
@property (nonatomic, retain) NSString* comment;

@end

Comment.m

#import "Comment.h"

@implementation Comment 
@synthesize comment, subComments;

-(id)init
{
    self = [super init];
    if (self)
    {
        subComments = [[NSMutableArray alloc] init];
    }
    return self;
}

@end

CommentView.h

#import <UIKit/UIKit.h>

@interface CommentView : UIView {
    UIButton* toggle;
    NSMutableArray* subComments;
    NSString* commentText;
    UITextView* comment;
    BOOL expanded;
}
@property (strong, nonatomic) NSMutableArray* subComments;
@property (strong, nonatomic) NSString* commentText;


- (void) expand;
- (void) collapse;
- (void) toggleState;

@end

CommentView.m

#import "CommentView.h"


@implementation CommentView
@synthesize subComments,commentText;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    [self setBackgroundColor:[UIColor whiteColor]];
    expanded = NO;
    toggle = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
    [toggle setTitle:@"Toggle" forState:UIControlStateNormal];
    [toggle addTarget:self action:@selector(toggleState) forControlEvents:UIControlEventTouchUpInside];
    CGRect curentFrame = self.frame;
    curentFrame.size.height = toggle.frame.size.height + 10;
    [self setFrame:curentFrame];

    curentFrame = toggle.frame;
    curentFrame.origin.y = 5;
    curentFrame.origin.x = 5;
    [toggle setFrame:curentFrame];
    [self addSubview:toggle];
    [self collapse];

    return self;
}

- (void) toggleState
{
    if (expanded)
    {
        [self collapse];
    }
    else
    {
        [self expand];
    }
}

- (void) expand
{
    comment = [[UITextView alloc] init];
    [comment setEditable:NO];
    [comment setText:commentText];
    [self addSubview:comment];
    CGRect curentFrame = comment.frame;
    curentFrame.size.height = comment.contentSize.height;
    curentFrame.origin.x = toggle.frame.size.width + toggle.frame.origin.x + 10;
    curentFrame.size.width = self.frame.size.width - curentFrame.origin.x;
    curentFrame.origin.y = toggle.frame.size.height + toggle.frame.origin.y + 10;
    [comment setFrame:curentFrame];

    curentFrame = self.frame;
    curentFrame.size.height += comment.frame.size.height + 10;
    [self setFrame:curentFrame];
    float height = comment.frame.origin.y + comment.frame.size.height;
    for (NSObject* o in subComments)
    {
        CommentView* subComment = [[CommentView alloc] initWithFrame:CGRectMake(comment.frame.origin.x,height,0,self.frame.size.width)];
        [self addSubview:subComment];
        height += subComment.frame.size.height;
        curentFrame = self.frame;
        curentFrame.size.height += subComment.frame.size.height;
        [self setFrame:curentFrame];
        [self bringSubviewToFront:subComment];
    }
    expanded = YES;
}

- (void) collapse
{
    for (UIView* v in [self subviews])
    {
        [v removeFromSuperview];
    }

    CGRect curentFrame = self.frame;
    curentFrame.size.height = toggle.frame.size.height + 10;
    [self setFrame:curentFrame];

    curentFrame = toggle.frame;
    curentFrame.origin.y = 5;
    curentFrame.origin.x = 5;
    [toggle setFrame:curentFrame];
    [self addSubview:toggle];

    expanded = NO;

}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
}
*/

@end

ViewContoller.m (Example usage)

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    CommentView* mainCommentView = [[CommentView alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];

    Comment* mainComment = [[Comment alloc] init];
    [mainComment setComment: @"Lorem Ipsum 1"];

    Comment* sub1 = [[Comment alloc] init];
    [sub1 setComment: @"Lorem Ipsum 1-1"];
    Comment* sub11 = [[Comment alloc] init];
    [sub11 setComment: @"Lorem Ipsum 1-1-1"];
    [[sub1 subComments] addObject:sub11];

    Comment* sub2 = [[Comment alloc] init];
    [sub2 setComment: @"Lorem Ipsum 1-2"];
    Comment* sub12 = [[Comment alloc] init];
    [sub12 setComment: @"Lorem Ipsum 1-2-1"];
    [[sub2 subComments] addObject:sub12];

    [[mainComment subComments] addObject:sub1];
    [[mainComment subComments] addObject:sub2];

    [mainCommentView setCommentText:[mainComment comment]];
    [mainCommentView setSubComments:[mainComment subComments]];

    self.view = mainCommentView;
}