Проектирование потоковой системы комментариев для iOS

Я создаю приложение, чтобы пойти рядом с созданным мной веб-приложением, в котором есть потоковая система комментариев.

Мне интересно, какой лучший подход к построению этого потокового представления будет. Существует ли относительно простой способ создания стиля управления аккордеон?

Мне очень нравится, как это делает приложение Alien Blue, а UI и UX очень гладкие:

Кто-нибудь знает, как они построены?
Будет ли добавление пользовательских UIViews в качестве подзаголовков лучшим подходом? Если да, то как бы вы реализовали функциональность стиля "свернуть"?

Ответ 1

Я бы предложил создать подкласс UIView, чтобы содержать каждый комментарий. Он должен иметь кнопку переключения, чтобы развернуть/свернуть. При переключении в открытый я установил размер кадра в размере содержимого (плюс любое дополнение). Он будет содержать массив суб-комментариев, для каждого из которых вы добавите подклассы UIView к себе в разное время (и удалите при свертывании), который изначально будет свернут (и поэтому просто появится как кнопка переключения). Свертывание - это просто обратное, удалите subviews, установите фрейм как высоту кнопки переключения (плюс дополнение)

Поскольку каждый комментарий комментария знает свой размер, вы можете поместить все это в UIScrollView с размером содержимого, равным сумме размеров просмотров комментариев, позволяющих прокручивать независимо от расширенного/сжатого характера.

Частичная реализация для этой идеи:

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(пример использования)

- (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;
}

Ответ 2

Похоже, у Apple есть пример кода для свертывания UITableViewCells:

http://developer.apple.com/library/ios/#samplecode/TableViewUpdates/Introduction/Intro.html

Ответ 3

Там также GCRetractableSectionController

Ответ 4

Что-то вроде этого не просто веб-просмотр с настраиваемой HTML-страницей, отображающей комментарии?