Projektowanie systemu komentarzy z gwintami dla iOS

Question

Buduję aplikację, która pasuje do zbudowanej przeze mnie aplikacji internetowej z systemem komentarzy z gwintem.

Zastanawiam się co jest najlepszym podejściem do budowy tego drzewiastego widoku będzie. Czy istnieje stosunkowo łatwy sposób na zbudowanie kontroli stylu akordeonu?

Bardzo lubię jak Alien Niebieski aplikacja robi to, a UI & UX jest bardzo gładka:

• Czy ktoś ma jakiś pomysł, w jaki sposób są one zbudowane?
• Czy dodanie niestandardowych UIViews jako subviews byłoby najlepszą metodą? Jeśli tak, to jak zaimplementować funkcję stylu "zwijania"?

Answer 1

Proponuję utworzyć podklasę UIView, aby zawierał każdy komentarz. Powinien mieć przycisk przełączający, aby rozwinąć/zwinąć. Na przełączniku open ustawiam rozmiar ramki na rozmiar zawartości (plus dowolne dopełnienie). Zawierałby on szereg pod-komentarzy, dla każdego dodawalibyśmy podklasy UIView do siebie w czasie rozwinięcia (i usuwali po zwinięciu), który początkowo byłby zwinięty (i tak po prostu wyglądał jak przycisk przełączający). Zwijanie jest tylko odwrotne, usuń subviews, ustaw ramkę na wysokość przycisku przełączającego (plus dopełnienie).

Ponieważ każdy widok komentarza zna jego rozmiar, możesz umieścić całość w UIScrollView z wielkością treści ustawiona na sumę rozmiarów widoków komentarzy umożliwiających przewijanie niezależnie od natury rozwiniętej/zakontraktowanej.

Częściowa realizacja tego pomysłu:

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 (Przykład użycia)

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

Answer 2

Wygląda na to Apple ma przykładowy kod dla upadających UITableViewCells:

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

Answer 3

Jest też GCRetractableSectionController

Answer 4

Czy coś takiego nie tylko WebView z niestandardowe budowy strony HTML wyświetlania komentarzy?