019-談談iOS 圖文混排

一句話:畫path,用Textkit;或者Core Text留位置。

iOS開發中要實現圖文混排,簡單從API層面看,有兩種方法:
(1)用TextKit,設置一個path,然后文字會圍繞這個path來布局,值得一提的是,這個path可以不是規則的,可以畫成心形,蝴蝶型,只要你畫得出,任何path都可以。
(2)用CoreText,給要放圖片的位置先用一個文字或者其他特殊字符占位,我們
先來看看官方文檔怎么說:

CoreText文字布局官方解釋.png

這幾段話主要的意思是:
(1)在運行時,Core Text 中,通過attributedString創建出一個CTFramesetter,一個CTFramesetter會生成一個或者多個CTFrame,每個CTFrame代表這個一個段落。
(2)CTFramesetter會調用CTTypesetter,用來將我們設置好的attribute設置到字符上面,比如對齊,縮進,行間距等等。
(3)每個CTFrame對象中包含了這個段落的所有“行”對象,每個行對象就代表一行的字符,就是上圖中的CTLine對象。
(4)每個CTLine包含一個或多個CTRun,每個CTRun代表具有相同attributes(屬性)和direction(方向)的字符。
CTRun中有對應的屬性信息和frame信息,通過下面兩個API可以獲取到:

NSDictionary* attributes = (NSDictionary*)CTRunGetAttributes(run);
// 獲取run的寬度,并且將上行高度和下行高度保存在對應的&runAscent及 &runDescent中
CGFloat runWidth  = CTRunGetTypographicBounds(run, CFRangeMake(0,0), &runAscent, &runDescent, NULL);

另外值得一提的是,可以通過上行高度和下行高度,得到每行的精確高度,可以用來計算label的真實的高度,我能吐槽

boundingRectWithSize:options:context:

有計算誤差么?感興趣的同學可以試試,數量稍大的字符串用它計算試試就知道了。

知道了原理,我們就可以這樣想:

先用某個特殊字符(串)占位,獲取其CTRun的位置和尺寸,然后在對應的位置和尺寸上面放上圖片,不就是在文字中插入圖片了么?最簡單的圖文混排就出來了嘛。

下面先上核心代碼:(回頭再傳demo到git上,太忙了)
我自己定義的中間對象StringModel,用來保存一些中間值,統一傳值用。


StringModel.png

第一步創建CTFrameSetter:

+(void)createCTFrameSInStringModel:(StringModel *)stringModel
{
    
    stringModel.ctFrameSetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)stringModel.attributedString);
    
    CGSize size = CGSizeMake(stringModel.width, MAXFLOAT);
    //獲取最佳高度
    CGSize coreTextSize = CTFramesetterSuggestFrameSizeWithConstraints(stringModel.ctFrameSetter, CFRangeMake(0, stringModel.attributedString.length), nil, size, nil);
    stringModel.aspactHeight = coreTextSize.height;
    NSLog(@"------最佳高度------》%f",stringModel.aspactHeight);
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, CGRectMake(0, 0, stringModel.width, stringModel.aspactHeight));
    
    stringModel.ctFrame = CTFramesetterCreateFrame(stringModel.ctFrameSetter, CFRangeMake(0, 0), path, NULL);
    CFRelease(path);
    CFRelease(stringModel.ctFrameSetter);
}

第二步找出標志位字符串的位置,并記錄下來:

/**
 *  取得所有標記的位置和所占尺寸
 *
 */
+ (void)calculateFramesOfCTRunsInStringModel:(StringModel *)stringModel
{
    CTFrameRef ctFrame = stringModel.ctFrame;
    //獲取所有的lines
    CFArrayRef lines = CTFrameGetLines(ctFrame);
    CFIndex count = CFArrayGetCount(lines);
    CGPoint lineOrigins[count];
    CTFrameGetLineOrigins(ctFrame, CFRangeMake(0, 0), lineOrigins);
    CGFloat heightCount = 0;
    stringModel.totalNumberOfLines = (NSInteger)count;
    for (int i = 0; i < count; i++) {
        CTLineRef line = CFArrayGetValueAtIndex(lines, i);
        CGFloat lineAscent;
        CGFloat lineDescent;
        CGFloat lineLeading;
        CTLineGetTypographicBounds(line, &lineAscent, &lineDescent, &lineLeading);
        //獲取每個line中所有的runs
        CFArrayRef runs = CTLineGetGlyphRuns(line);
        CGFloat runHeight = 0;
        for (int j = 0; j < CFArrayGetCount(runs); j++) {//找到并計算出所有標志位run的frame
            CGFloat runAscent;
            CGFloat runDescent;
            CGPoint lineOrigin = lineOrigins[i];
            CTRunRef run = CFArrayGetValueAtIndex(runs, j);
            NSDictionary *attributes = (NSDictionary *)CTRunGetAttributes(run);
            CGRect runRect;
            runRect.size.width = CTRunGetTypographicBounds(run, CFRangeMake(0, 0), &runAscent, &runDescent, NULL);
            
            runRect = CGRectMake(lineOrigin.x + CTLineGetOffsetForStringIndex(line, CTRunGetStringRange(run).location, NULL), lineOrigin.y - runDescent, runRect.size.width,runAscent + runDescent);
            runHeight = runRect.size.height;
            stringModel.perlineHeight = runHeight;
            //runAscent + runDescent 就是每行行高
            
            NSString *flagName = [attributes objectForKey:stringModel.flag];
            if (flagName) {//如果有值,代表就是標志位run
                
                CGRect rect;
                id objW = stringModel.flagAtrribtuesDic[flagWidthKey];
                id objH = stringModel.flagAtrribtuesDic[flagHeightKey];
                if ([objH isKindOfClass:[NSNumber class]] && [objW isKindOfClass:[NSNumber class]]) {
                    NSNumber *width = (NSNumber *)objW;
                    NSNumber *height = (NSNumber *)objH;
                    rect.size = CGSizeMake(width.floatValue, height.floatValue);
                }
                else{
                    rect.size = CGSizeMake(kDefaultWidth, kDefaultHeight);
                }
                    rect.origin.x = runRect.origin.x + lineOrigin.x;
                    rect.origin.y = stringModel.aspactHeight - lineOrigin.y - rect.size.height; //坐標變換
                    NSValue *value = [NSValue valueWithCGRect:rect];
                    [stringModel.flagsFrameArray addObject:value];
            }
            
            CFRelease(run);
            CFRelease((__bridge CFDictionaryRef)attributes);
        }
        heightCount += runHeight;//不含行間距
    }
    
    stringModel.heightCount = heightCount;
    
}

// 待續。。。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,908評論 6 541
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,324評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,018評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,675評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,417評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,783評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,779評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,960評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,522評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,267評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,471評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,009評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,698評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,099評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,386評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,204評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,436評論 2 378

推薦閱讀更多精彩內容

  • 系列文章: CoreText實現圖文混排 CoreText實現圖文混排之點擊事件 CoreText實現圖文混排之文...
    老司機Wicky閱讀 40,252評論 221 432
  • 0. 基本知識準備 0.1 字形( Glyph)基本了解 基礎原點(Origin)首先是位于基線上處于基線最左側的...
    破弓閱讀 3,173評論 4 24
  • 最近在網上看了一些大牛的文章,自己也試著寫了一下,感覺圖文混排真的很強大。 廢話不多說,開始整 先上效果圖跟代碼,...
    AllureJM閱讀 1,008評論 0 1
  • blog.csdn.net CoreText實現圖文混排 - 博客頻道 CoreText實現圖文混排 也好久沒來寫...
    K_Gopher閱讀 613評論 0 0
  • 蘋果文檔 https://developer.apple.com/documentation/coretext C...
    陽明AGI閱讀 432評論 0 4