实现微信朋友圈动态列表
前言
項目中需要實現類似朋友圈動態的列表,需要用到圖文混排,正好可以使用ibireme大神的開源控件YYText實現這種效果,在這里記錄一下使用過程中遇到的問題,參考文章iOS 保持界面流暢的技巧。
布局
列表中的主要布局如下圖所示,預先將每個cell的高度計算出來,并且將高度緩存下來,不重復計算高度。ibireme實現的微博列表Demo寫的已經很清晰了,這里主要寫下自己在使用時,遇到的一些問題。
1.TableView刷新時出現閃動問題
TableView在刷新的時候,YYLabel會出現閃動,解決方法是將異步繪制關閉displaysAsynchronously = NO;,參考https://github.com/ibireme/YYKit/issues/64。
2.動態Label默認最多顯示六行
計算文本的行數,YYTextContainer有最大行數maximumNumberOfRows屬性,根據這個屬性可以設置文本最大行數。
YYTextContainer *container = [YYTextContainer new];container.size = CGSizeMake(kWBCellContentWidth, HUGE);container.linePositionModifier = modifier;//計算文本的行數,判斷顯示6行,還是顯示完全YYTextLayout *tmpTextLayout = [YYTextLayout layoutWithContainer:container text:text];NSUInteger rowCount = tmpTextLayout.rowCount; 復制代碼當行數大于6行時,顯示展開按鈕,點擊展開按鈕顯示全部文本,顯示收起按鈕,將當前最大行數設置為6行。
//判斷是否隱藏展開按鈕if (rowCount > 6) {_isShowExpendButton = YES;//判斷展開或者收起狀態if (_isExpend == NO) {container.maximumNumberOfRows = 6;_expendButtonTitle = @"全文";}else{_expendButtonTitle = @"收起";}}else{_isShowExpendButton = NO;} 復制代碼3.匹配字符串
將動態字符串中的[呵呵] ,[可愛]等字符串替換為表情圖片。將電話號碼,網址等進行高亮顯示,并且為其設置userInfo,用于后面響應用戶點擊事件。將這些方法放在了NSString+Emotion類中,方便調用。關于正則表達式怎么匹配,可以查看這篇文章從零開始學習正則表達式。
// 匹配 [表情]NSArray<NSTextCheckingResult *> *emoticonResults = [[EmoticonHelper regexEmoticon] matchesInString:text.string options:kNilOptions range:text.yy_rangeOfAll];NSUInteger emoClipLength = 0;for (NSTextCheckingResult *emo in emoticonResults) {if (emo.range.location == NSNotFound && emo.range.length <= 1) continue;NSRange range = emo.range;range.location -= emoClipLength;if ([text yy_attribute:YYTextHighlightAttributeName atIndex:range.location]) continue;if ([text yy_attribute:YYTextAttachmentAttributeName atIndex:range.location]) continue;NSString *emoString = [text.string substringWithRange:range];NSString *imagePath = [EmoticonHelper emoticonDic][emoString];UIImage *image = [EmoticonHelper imageWithPath:imagePath];if (!image) continue;NSAttributedString *emoText = [NSAttributedString yy_attachmentStringWithEmojiImage:image fontSize:font.pointSize];[text replaceCharactersInRange:range withAttributedString:emoText];//emoText的length都是1emoClipLength += range.length - 1;} 復制代碼響應手機號和網址的點擊事件,獲取高亮狀態字符串的userInfo,然后進行相應的操作。
/// 點擊了 Label 的鏈接 - (void)cell:(TwitterCell *)cell didClickInLabel:(YYLabel *)label textRange:(NSRange)textRange{NSAttributedString *text = label.textLayout.text;if (textRange.location >= text.length) return;YYTextHighlight *highlight = [text yy_attribute:YYTextHighlightAttributeName atIndex:textRange.location];NSDictionary *info = highlight.userInfo;if (info.count == 0) return;if (info[kWBLinkURLName]) {[[UIApplication sharedApplication] openURL:[NSURL URLWithString:info[kWBLinkURLName]]];}else if (info[KWBLinkPhone]){NSMutableString *str2=[[NSMutableString alloc] initWithFormat:@"tel:%@",info[KWBLinkPhone]];UIWebView * callWebview = [[UIWebView alloc] init];[callWebview loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:str2]]];[self.view addSubview:callWebview];} } 復制代碼4.評論列表點擊可以拷貝
評論視圖是用UITableView實現的,可以使用TableView的系統方法,實現長按cell,彈出copy菜單,然后進行復制[UIPasteboard generalPasteboard].string = model.comment。
- (BOOL)tableView:(UITableView *)tableView shouldShowMenuForRowAtIndexPath:(NSIndexPath *)indexPath {return YES; }- (BOOL)tableView:(UITableView *)tableView canPerformAction:(SEL)action forRowAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender {if (action == @selector(copy:)) {return YES;}return NO; }- (void)tableView:(UITableView *)tableView performAction:(SEL)action forRowAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender {if (action == @selector(copy:)) {TweetCommentModel *model;if (self.commentArray.count > 0) {model = self.commentArray[indexPath.row];}[UIPasteboard generalPasteboard].string = model.comment;} } 復制代碼YYKit中微博Demo的表情鍵盤,自己也照著作者的代碼敲了一篇,學到了很多。
最后代碼可以到動態列表,表情鍵盤下載。
總結
以上是生活随笔為你收集整理的实现微信朋友圈动态列表的全部內容,希望文章能夠幫你解決所遇到的問題。