iOS中 圖文混排/自定義圖文混排

指示根視圖:(準備幾張圖片,把label加載在window上)

CustomLable *label =? [[CustomLable alloc]initWithFrame:CGRectMake(0, 60, self.window.bounds.size.width, self.window.bounds.size.height)];

label.backgroundColor = [UIColor greenColor];

[self.window addSubview:label];

引進框架:

#import

建一個類,繼承自UILabel

返回圖片的高:

// 返回圖片的高

CGFloat runDelegateGetAscentCallback(void *refcon) {

NSString *imageName = (__bridge NSString *)refcon;

return [UIImage imageNamed:imageName].size.height;

}

返回圖片的寬:

// 返回圖片的寬

CGFloat runDelegateGetWidthCallback(void *refcon) {

//? ? NSString *imageName = (__bridge NSString *)refcon;

// 讓繪制圖片的寬度為屏幕的寬, 使文本中只要遇到圖片就換行(配合上面的換行模式)

// 如果不想換行可以直接返回圖片的寬

return [UIScreen mainScreen].bounds.size.width;

}

CGFloat runDelegateGetDescentCallback(void *refcon){

return 0;

}

開始繪制及相關計算:

#import "CustomLable.h"

#import

@implementation CustomLable

- (void)drawRect:(CGRect)rect

{

[super drawRect:rect];

// 創(chuàng)建繪制區(qū)域

CGMutablePathRef path = CGPathCreateMutable();

CGPathAddRect(path, nil, CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height));

// 獲取當前用于繪制畫布的上下文, 用于后續(xù)將內(nèi)容繪制到畫布上

CGContextRef context = UIGraphicsGetCurrentContext();

// 翻轉(zhuǎn)坐標系

// 參數(shù)1:文本寬度占Label的比例(0 ~ 1)

// 參數(shù)2:水平方向文字逐漸往下(參數(shù) > 0, 往上: 參數(shù) < 0)偏移,如果是正數(shù),逐漸向上偏移

// 參數(shù)3:在豎直方向上,從下往上每行文字逐漸往右(參數(shù) > 0, 往左: 參數(shù) < 0)偏移

// 參數(shù)4:文本首行的縱坐標占Label的比例(-1 ~ 0)

// 參數(shù)5:文本整體往右(參數(shù) > 0, 往左: 參數(shù) < 0)偏移量

// 參數(shù)6:文本整體在縱坐標方向的偏移量,參數(shù) > label的高度, 往下偏移, 參數(shù) < label的高度, 往上偏移

CGContextConcatCTM(context, CGAffineTransformMake(1, 0, 0, -1, 0, self.bounds.size.height));

// 準備文本

NSMutableAttributedString *attrString = [[NSMutableAttributedString alloc]initWithString:@"iOS程序在啟動時會創(chuàng)建一個主線程易迹,而在一個線程只能執(zhí)行一件事情砌们,如果在主線程執(zhí)行某些耗時操作,例如加載網(wǎng)絡圖片旷赖,下載資源文件等會阻塞主線程(導致界面卡死,無法交互)更卒,所以就需要使用多線程技術來避免這類情況等孵。iOS中有三種多線程技術 NSThread,NSOperation蹂空,GCD俯萌,這三種技術是隨著IOS發(fā)展引入的果录,抽象層次由低到高,使用也越來越簡單咐熙。"];

// 改變字體大小

[attrString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:24] range:NSMakeRange(0, 5)];

// 改變字體顏色

[attrString addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(0, 5)];

// 換行模式 (當Label的寬度不夠顯示內(nèi)容或圖片的時候就自動換行) (默認狀態(tài)下如果不夠顯示圖片, 不會自動換行, 部分圖片就會看不見)

CTParagraphStyleSetting lineBreakMode;

CTLineBreakMode lineBreak = kCTLineBreakByCharWrapping;

lineBreakMode.spec = kCTParagraphStyleSpecifierLineBreakMode;

lineBreakMode.value = &lineBreak;

lineBreakMode.valueSize = sizeof(CTLineBreakMode);

CTParagraphStyleSetting setting[] = {lineBreakMode};

CTParagraphStyleRef style = CTParagraphStyleCreate(setting, 1);

NSMutableDictionary *attributes = [NSMutableDictionary dictionaryWithObject:(__bridge id)style forKey:(id)kCTParagraphStyleAttributeName];

[attrString addAttributes:attributes range:NSMakeRange(0, attrString.length)];

// 設置CTRunDelegateCallbacks 獲取圖片大小

CTRunDelegateCallbacks imageCallbacks;

imageCallbacks.version = kCTRunDelegateVersion1;

// 獲取圖片的高 (可自由設置返回的高)

imageCallbacks.getAscent = runDelegateGetAscentCallback;

// 設置圖片下一行文字距離圖片的距離

imageCallbacks.getDescent = runDelegateGetDescentCallback;

// 獲取圖片的寬 (可自由設置返回寬度)

imageCallbacks.getWidth = runDelegateGetWidthCallback;

// 空格用于給圖片留個位置

NSMutableAttributedString *imageAttributedString = [[NSMutableAttributedString alloc]initWithString:@" "];

// 根據(jù)圖片占用尺寸的大小給圖片留位置顯示

CTRunDelegateRef runDelegate = CTRunDelegateCreate(&imageCallbacks, (__bridge void *)(@"Untitled.png"));

[imageAttributedString addAttribute:(NSString *)kCTRunDelegateAttributeName value:(__bridge id)runDelegate range:NSMakeRange(0, 1)];

// 將圖片顯示在指定位置

NSString *imageKey = @"imageName";

[imageAttributedString addAttribute:imageKey value:@"Untitled.png" range:NSMakeRange(0, 1)];

// 設置插入圖片的位置

[attrString insertAttributedString:imageAttributedString atIndex:38];

//根據(jù)NSMutableAttributedString生成frame

CTFrameRef frame = CTFramesetterCreateFrame(CTFramesetterCreateWithAttributedString((CFAttributedStringRef)attrString), CFRangeMake(0, attrString.length), path, nil);

// 開始繪制

CTFrameDraw(frame, context);

CFArrayRef lines = CTFrameGetLines(frame);

CGPoint lineOrigins[CFArrayGetCount(lines)];

CTFrameGetLineOrigins(frame, CFRangeMake(0, 0), lineOrigins);

for (int i = 0; i < CFArrayGetCount(lines); i++) {

CTLineRef line = CFArrayGetValueAtIndex(lines, i);

CFArrayRef runs = CTLineGetGlyphRuns(line);

for (int j = 0; j < CFArrayGetCount(runs); j++) {

CGFloat runAscent;

CGFloat runDescent;

CGPoint lineOrigin = lineOrigins[i];

CTRunRef run = CFArrayGetValueAtIndex(runs, j);

NSDictionary *mAttrinbutes = (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);

NSString *imageName = [mAttrinbutes objectForKey:imageKey];

// 圖片的渲染邏輯

if (imageName) {

UIImage *image = [UIImage imageNamed:imageName];

CGRect imageDrawRect;

imageDrawRect.size = image.size;

/*

* 這才是放置圖片的真正坐標

*/

// 設置圖片的在X坐標的位置

// imageDrawRect.origin.x = runRect.origin.x + lineOrigin.x;

// 將圖片放在Label的中間

imageDrawRect.origin.x = (self.bounds.size.width - image.size.width) / 2;

// 設置圖片在y坐標的位置

imageDrawRect.origin.y = lineOrigin.y;

// 繪制圖片

CGContextDrawImage(context, imageDrawRect, image.CGImage);

}

}

}

}

最終效果:


下圖為今年部分iOS開發(fā)的視頻教程弱恒,因為不定時更新中故不做多的截圖,如果有iOS開發(fā)上的問題不懂或者需要視頻教程可以看我的個人簡介棋恼。

不定時更新中返弹。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市蘸泻,隨后出現(xiàn)的幾起案子琉苇,更是在濱河造成了極大的恐慌,老刑警劉巖悦施,帶你破解...
    沈念sama閱讀 221,820評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異去团,居然都是意外死亡抡诞,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評論 3 399
  • 文/潘曉璐 我一進店門土陪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來昼汗,“玉大人,你說我怎么就攤上這事鬼雀∏曛希” “怎么了?”我有些...
    開封第一講書人閱讀 168,324評論 0 360
  • 文/不壞的土叔 我叫張陵源哩,是天一觀的道長鞋吉。 經(jīng)常有香客問我,道長励烦,這世上最難降的妖魔是什么谓着? 我笑而不...
    開封第一講書人閱讀 59,714評論 1 297
  • 正文 為了忘掉前任,我火速辦了婚禮坛掠,結(jié)果婚禮上赊锚,老公的妹妹穿的比我還像新娘。我一直安慰自己屉栓,他們只是感情好舷蒲,可當我...
    茶點故事閱讀 68,724評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著友多,像睡著了一般牲平。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上夷陋,一...
    開封第一講書人閱讀 52,328評論 1 310
  • 那天欠拾,我揣著相機與錄音胰锌,去河邊找鬼。 笑死藐窄,一個胖子當著我的面吹牛资昧,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播荆忍,決...
    沈念sama閱讀 40,897評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼格带,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了刹枉?” 一聲冷哼從身側(cè)響起叽唱,我...
    開封第一講書人閱讀 39,804評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎微宝,沒想到半個月后棺亭,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,345評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡蟋软,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,431評論 3 340
  • 正文 我和宋清朗相戀三年镶摘,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片岳守。...
    茶點故事閱讀 40,561評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡凄敢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出湿痢,到底是詐尸還是另有隱情涝缝,我是刑警寧澤,帶...
    沈念sama閱讀 36,238評論 5 350
  • 正文 年R本政府宣布譬重,位于F島的核電站拒逮,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏害幅。R本人自食惡果不足惜消恍,卻給世界環(huán)境...
    茶點故事閱讀 41,928評論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望以现。 院中可真熱鬧狠怨,春花似錦、人聲如沸邑遏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽记盒。三九已至憎蛤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背俩檬。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評論 1 272
  • 我被黑心中介騙來泰國打工萎胰, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人棚辽。 一個月前我還...
    沈念sama閱讀 48,983評論 3 376
  • 正文 我出身青樓技竟,卻偏偏與公主長得像,于是被迫代替她去往敵國和親屈藐。 傳聞我的和親對象是個殘疾皇子榔组,可洞房花燭夜當晚...
    茶點故事閱讀 45,573評論 2 359

推薦閱讀更多精彩內(nèi)容