2011-10-11 11 views
11

के लिए एक थ्रेडेड टिप्पणी प्रणाली डिज़ाइन करना मैं एक वेब ऐप के साथ जाने के लिए एक ऐप बना रहा हूं, जिसमें एक थ्रेडेड टिप्पणी प्रणाली है।आईओएस

मुझे आश्चर्य है कि इस थ्रेडेड व्यू को बनाने का सबसे अच्छा तरीका क्या होगा। एक accordion शैली नियंत्रण बनाने के लिए एक अपेक्षाकृत आसान तरीका है?

मैं वास्तव में कैसे विदेशी ब्लू एप्लिकेशन यह करता है, और यूआई & UX बहुत चिकनी है:

enter image description here

  • किसी को भी इन कैसे बनाया जाता है किसी भी विचार है?
  • सबव्यू के रूप में जोड़े गए कस्टम यूआईवीव्स को सर्वश्रेष्ठ दृष्टिकोण बनाना होगा? यदि हां, तो आप 'पतन' शैली कार्यक्षमता को कैसे कार्यान्वित करेंगे?

उत्तर

8

मैं प्रत्येक टिप्पणी को शामिल करने के लिए एक UIView सबक्लास बनाने का सुझाव देना चाहता हूं। इसमें विस्तार/पतन करने के लिए एक टॉगल बटन होना चाहिए। खुले टॉगलिंग पर मैं फ्रेम आकार को सामग्री के आकार (प्लस किसी भी पैडिंग) पर सेट कर दूंगा। इसमें उप-टिप्पणियों की एक सरणी होगी, प्रत्येक के लिए आप UIView सबक्लास को विस्तारित समय पर स्वयं जोड़ देंगे (और ढहने के दौरान हटाएं) जो प्रारंभ में ध्वस्त हो जाएगा (और इसलिए टॉगल बटन के रूप में दिखाई देगा)। Collapsing सिर्फ विपरीत है, सबव्यूव को हटाएं, फ्रेम को टॉगल बटन (प्लस पैडिंग) की हाइट होने के लिए सेट करें

जैसा कि प्रत्येक टिप्पणी दृश्य इसके आकार को जानता है, आप पूरी चीज़ को 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; 
} 
+0

वाह, धन्यवाद मैट। यह भी खूब रही। मैंने देखा कि जब मैंने नमूना परियोजना में यह सब फेंक दिया, तो केवल पहली मुख्य टिप्पणी दिखाई गई। उपखंडों के लिए संकेतक पर क्लिक करने से कुछ भी नहीं होता है। कोई विचार क्यों? – barfoon

+0

बच्चे की टिप्पणियों के लिए 'विस्तार' विधि कभी नहीं निकाल दी जाती है, मुझे संदेह है कि विचारों के निर्माण के साथ इसका कुछ संबंध है – barfoon

-1

है यह सिर्फ नहीं कस्टम निर्मित HTML पृष्ठ टिप्पणियाँ प्रदर्शित साथ वेब दृश्य की तरह कुछ?