iOS NSAttributedString 圖文混排 UILabel 可折疊 展開

RZColorful

NSAttributedString 富文本方法 (圖文混排、多樣式文本)
UILabel 可折疊 展開 可點擊文本

Installation

pod 'RZColorful'

Author

rztime, rztime@vip.qq.com

swift版本RZColorfulSwift

UITextView實現(xiàn)的富文本編輯器RZRichTextView

  • NSAttributedString 的多樣化設置(文字字體、顏色、陰影、段落樣式、url、下劃線，以及圖文混排等等)
  • 添加UITextField、UITextView、UILabel的attributedText的富文本設置。
  • 擴展：添加一個刷新界面時保持文本框焦點的方法 demo查看
  • 富文本方法內(nèi)容可單獨抽出來,在下邊這個文件夾中
#import "NSAttributedString+RZColorful.h"

關于RZColorful

  • 支持UILabel、UITextView、UITextField的attributedText的設置。
  • 支持獲取NSAttributedString中的圖片
  • 支持 HTML 與 NSAttributedString互換（支持圖片）
  • 包含的屬性快捷設置：
    • 段落樣式
    • 陰影
    • 文本字體、顏色
    • 文本所在區(qū)域?qū)谋尘邦伾?/li>
    • 連體字
    • 字間距
    • 刪除線、下劃線，及其線條顏色
    • 描邊，及其顏色
    • 斜體字
    • 拉伸
    • 上下標
    • 書寫方向（從左到右，從右到左）
    • 通過html源碼加載富文本
    • 通過url添加圖片到富文本

How to use

  • 請在需要使用的地方加上
#import "RZColorful.h"
  • 主要的功能：

    • RZColorfulConferrer

      • text -- 添加文本
      • htmlText -- 添加html源碼
      • image -- 添加圖片
      • imageByUrl -- 添加圖片（通過圖片的URL添加）
      • paragraphStyle -- 全局的段落樣式
      • shadow -- 全局的陰影樣式

    • RZColorfulAttribute -- 設置文本的所有的屬性

    • RZImageAttachment -- 設置圖片的所有的屬性

講解

  • RZColorfulConferrer 中 paragraphStyle 和 shadow 屬于全局的設置，在block中任何位置都可設置
  • 文字和圖片都可設置paragraphStyle 和 shadow，對齊方式是paragraphStyle 的alignment，設置后，當前行文字圖片的全局樣式將被此覆蓋，即全局樣式無效，不影響其他行。

基本的簡單使用方法

    [cell.textLabel rz_colorfulConfer:^(RZColorfulConferrer * _Nonnull confer) {
        confer.paragraphStyle.paragraphSpacing(15); // 設置段落之間的行距

        confer.text(@"日常用處:(圖片+標題+描述)\n").font(rzFont(17)).textColor([UIColor redColor]);

        confer.appendImage([UIImage imageNamed:@"test.jpg"]).bounds(CGRectMake(0, -2, 15, 15)); // 圖片
        confer.text(@" 姓        名: ").font(rzFont(15)).textColor(RGBA(151, 151, 151, 11));
        confer.text(@"rztime").font(rzFont(15)).textColor(RGBA(51, 51, 51, 1));

        confer.text(@"\n");
        confer.appendImage([UIImage imageNamed:@"test.jpg"]).bounds(CGRectMake(0, -2, 15, 15));
        confer.text(@" 時        間: ").font(rzFont(15)).textColor(RGBA(151, 151, 151, 11));
        confer.text([NSString stringWithFormat:@"%@", [NSDate new]]).font(rzFont(15)).textColor(RGBA(51, 51, 51, 1));

        confer.text(@"\n");
        confer.appendImage([UIImage imageNamed:@"test.jpg"]).bounds(CGRectMake(0, -2, 15, 15));
        confer.text(@" 當次消費: ").font(rzFont(15)).textColor(RGBA(151, 151, 151, 11));
        confer.text(@"￥").font(rzFont(15)).textColor(RGBA(51, 51, 51, 1));
        confer.text(@"100").font(rzFont(15)).textColor(RGBA(251, 51, 51, 1));
        confer.text(@"元").font(rzFont(15)).textColor(RGBA(51, 51, 51, 1));
    }];

段落樣式、陰影（局部與全局統(tǒng)一的區(qū)別）

如果設置有局部樣式，則全局樣式無效

    [cell.textLabel rz_colorfulConfer:^(RZColorfulConferrer * _Nonnull confer) {
        confer.paragraphStyle.lineSpacing(5).paragraphSpacingBefore(5).alignment(NSTextAlignmentCenter); // 段落全局樣式
        confer.shadow.color(RGBA(255, 0, 0, 0.3)).offset(CGSizeMake(1, 1));   // 陰影全局
        
        // 此部分顯示全局樣式的風格 （紅色陰影，居中對齊，段落行距等）
        confer.appendImage([UIImage imageNamed:@"test.jpg"]).bounds(CGRectMake(0, -2, 15, 15));
        confer.text(@" 姓名: ").font(rzFont(15)).textColor(RGBA(151, 151, 151, 11));
        confer.text(@"rztime").font(rzFont(15)).textColor(RGBA(51, 51, 51, 1));
        
        confer.text(@"\n");
        confer.appendImage([UIImage imageNamed:@"test.jpg"]).bounds(CGRectMake(0, -2, 15, 15));
        confer.text(@" 時間: ").font(rzFont(15)).textColor(RGBA(151, 151, 151, 11));
        confer.text([NSString stringWithFormat:@"%@", [NSDate new]]).font(rzFont(15)).textColor(RGBA(51, 51, 51, 1));
        
        // 此部分顯示全局樣式的風格 （居中對齊，段落行距等）  陰影將被局部覆蓋（灰色）
        confer.text(@"\n地址: ").font(rzFont(15)).textColor(RGBA(151, 151, 151, 11)).paragraphStyle.paragraphSpacingBefore(20).and.shadow.color(GRAY(151)).offset(CGSizeMake(3, 3));;
        confer.text(@"成都-軟件園").font(rzFont(15)).textColor(RGBA(51, 51, 51, 1)).shadow.color(GRAY(151)).offset(CGSizeMake(3, 3));
        
        // 此部分段落樣式被局部覆蓋  陰影顯示全局的
        confer.text(@"\n愛好: ").font(rzFont(15)).textColor(RGBA(151, 151, 151, 11)).paragraphStyle.paragraphSpacingBefore(20);
        confer.text(@"游山、").font(rzFont(15)).textColor(RGBA(151, 51, 51, 1));
        confer.text(@"玩水、").font(rzFont(10)).textColor(RGBA(51, 151, 51, 1));
        confer.text(@"聽歌、").font(rzFont(18)).textColor(RGBA(51, 51, 151, 1));
        confer.text(@"美食、").font(rzFont(17)).textColor(RGBA(51, 151, 51, 1));
        confer.text(@"看電影、").font(rzFont(16)).textColor(RGBA(151, 51, 51, 1));
        confer.text(@"擼代碼、").font(rzFont(15)).textColor(RGBA(51, 151, 51, 1));
        confer.text(@"等等\n\n").font(rzFont(15)).textColor(RGBA(251, 51, 51, 1));
    }];

通過url加載圖片

    [cell.textLabel rz_colorfulConfer:^(RZColorfulConferrer * _Nonnull confer) {
        confer.appendImageByUrl(@"http://pic28.photophoto.cn/20130830/0005018667531249_b.jpg").bounds(CGRectMake(0, 0, 200, 0)).paragraphStyle.alignment(NSTextAlignmentLeft); // 寬或高為0時，即自動寬/高按照圖片比例來
    }];

通過html源碼加載文本

    NSString *resourcePath = [[NSBundle mainBundle] resourcePath];
    NSString *filePath =[resourcePath stringByAppendingPathComponent:@"test.html"];
    NSString *htmlstring=[[NSString alloc] initWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[cell.textLabel rz_colorfulConfer:^(RZColorfulConferrer * _Nonnull confer) {
    confer.htmlText(htmlstring);
}];

給UILabel添加富文本可點擊功能 給文本添加tapActionByLable屬性

[_label rz_colorfulConfer:^(RZColorfulConferrer * _Nonnull confer) {
    confer.text(@"可點擊的：").font([UIFont systemFontOfSize:17]).textColor(UIColor.blackColor);
    confer.text(@"文本").font([UIFont systemFontOfSize:17]).textColor(UIColor.redColor).tapActionByLable(@"1");
}];
[_label rz_tapAction:^(UILabel * _Nonnull label, NSString * _Nonnull tapActionId, NSRange range) {
    NSLog(@"%@", tapActionId); // print: 1
}];

給UILabel添加超行之后的折疊、展開功能

UILabel

/// 設置富文本（超過行數(shù)后，自動追加“展開” “收起”）
/// @param attr 原文
/// @param line 最大顯示行數(shù)
/// @param width 最大顯示寬度，這個寬度用于計算文本行
/// @param fold 當前是否折疊
/// @param allText 超過了行數(shù)之后，折疊狀態(tài)顯示的文本 如”展開“  需要給文本設置NSTapActionByLabel屬性  (tapActionByLable)
/// @param foldText 超過行數(shù)之后，全部展開狀態(tài)顯示的文本  如”收起“  需要給文本設置NSTapActionByLabel屬性 (tapActionByLable)
- (void)rz_setAttributedString:(NSAttributedString * _Nullable)attr maxLine:(NSInteger)line maxWidth:(CGFloat)width isFold:(BOOL)fold showAllText:(NSAttributedString *_Nullable)allText showFoldText:(NSAttributedString *_Nullable)foldText;

備注：

  • 多種屬性使用名請參考對應的文件。
  • UILabel、UITextFile是同樣的使用方法。
  • 在UILabel、UITextFiled上url點擊方法無效。
  • 在UITextView中若要設置文本和圖片的點擊事件（即對文本和圖片設置附帶URL的屬性），請先設置其editable = NO, 并實現(xiàn)代理。
    • 設置了URL屬性的文本，內(nèi)部自帶藍色和下劃線，若要去掉，可設置 textView.linkTextAttributes = @{}; 
// 實現(xiàn)下列方法 （二選一、或都可以實現(xiàn)，當都返回YES時，可能會打開safari瀏覽器）
textView.rzDidTapTextView = ^BOOL(id  _Nullable tapObj) {
    NSString *url = tapObj;
    if ([tapObj isKindOfClass:[NSURL class]]) {
        url = [(NSURL *)tapObj absoluteString];
    }
    url = url.rz_decodedString;
            
    NSLog(@"rzDidTapTextView：tapObj:%@  \n如果url中包含了有中文,URL將會進行編碼，所以請rz_decodedString解碼之后查看:%@", tapObj, url);
    return NO;
};

- (BOOL)textView:(UITextView *)textView shouldInteractWithURL:(NSURL *)URL inRange:(NSRange)characterRange interaction:(UITextItemInteraction)interaction {
    NSLog(@"URL:%@", URL);
    // return NO;則不跳轉(zhuǎn)，這里可以做一些基本判斷在執(zhí)行是否跳轉(zhuǎn)瀏覽器打開url
    return YES; 
}

注意

  • 盡管我已經(jīng)在代碼中已經(jīng)處理過（弱）引用問題，但是在實際運用寫入text時，還是請盡量檢查避免循環(huán)引用

最后

  • 在使用過程中，如果您發(fā)現(xiàn)有什么問題，歡迎向我反饋，謝謝
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容