iOS開發日記21-7.0之後的圖文混排，ios21-7.0

最後更新：2015-09-21 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

今天博主有一個圖文混排的需求,遇到了一些困痛點,在此和大家分享,希望能夠共同進步.

iOS7.0以前,圖文混排主要有兩種方法:1.WebView+js 2.coreText

iOS7.0之後,蘋果提供了新的封裝,讓圖文混排更加的簡便,也就是第三種方法:3.TextKit

今天就和大家詳細的分享一下這三種圖文混排的方法

1.webview+js的方法其實很簡單,下面貼出代碼,各位自行研究

去除webView滾動時，上下的白邊。

- (void)clearWebViewBackground:(UIWebView *)webView{    UIWebView *web = webView;    for (id v in web.subviews) {        if ([v isKindOfClass:[UIScrollView class]]) {            [v setBounces:NO];        }    }}

設定代理

// 設定代理    self.myWebView.delegate=self;

添加載入webview的視圖

#pragma mark 載入WebView-(void) loadMyWebView{  NSString *title=@"韓寒《後會無期》奇葩的吸金3秘籍";    NSString *linkStr=[NSString stringWithFormat:@"<a href='%@'>我的部落格</a> <a href='%@'>原文</a>",@"http://blog.csdn.net/wildcatlele",@"http://jincuodao.baijia.baidu.com/article/26059"];    NSString *p1=@"韓寒《後會無期》的吸金能力很讓我驚訝！8月12日影片票房已成功衝破6億大關。而且排片量仍保持10 以上，以日收千萬的速度穩步向七億進軍。";    NSString *p2=@"要知道，《後會無期》不是主流類型片，是一個文藝片。不像《小時代》，是一個商業主流的偶像電影。";  NSString *image1=[NSString stringWithFormat:@"<img src='%@'  height='280' width='300' />",@"http://nvren.so/uploads/allimg/c140801/140DR4554L40-YB9.jpg"];  NSString *image2=[NSString stringWithFormat:@"<img src='%@'  height='280' width='300' />",@"http://f.hiphotos.baidu.com/news/w%3D638/sign=78315beeb1fb43161a1f797918a44642/2934349b033b5bb58cb61bdb35d3d539b600bcb5.jpg"];    NSString *p3=@"太奇葩了！有人說，這是中國電影市場的紅利，是粉絲電影的成功。但是，有一部投資3000萬的粉絲電影《我就是我》，有明星，製作也不錯，基本上是慘敗。";    NSString *p4=@"《後會無期》賣的不是好故事，是優越感。特別是針對80、90後的人群，你有沒有發現，看《後會無期》比看《小時代3》有明顯的優越感。故事雖然一般，但是很多人看完後，會在微博、上曬照片。所以說，對一個族群靠的不是廣度，而是深度。<br>\  \  很兇殘，值得大家借鑒。韓寒《後會無期》還有什麼秘密武器，歡迎《後會無期》團隊或相關方爆料，直接留言即可，有料的可以送黎萬強親筆簽名的《參與感》一書。";    //初始化和html字串  NSString *htmlURlStr=[NSString stringWithFormat:@"<body style='<h2>%@</h2><p>%@</p> <p>%@ </p>%@ <br><p> %@</p> <p>%@</p>%@<p>%@</p></body>",title,linkStr,p1,image1,p2,p3,image2,p4];    [self.myWebView loadHTMLString:htmlURlStr baseURL:nil];}

實現代理方法，（處理連接點擊事件）

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{  NSString *urlStr=request.URL.absoluteString;    NSLog(@"url: %@",urlStr);    //為空白，第一次載入本頁面  if ([urlStr isEqualToString:@"about:blank"]) {    return YES;  }    //設定點擊後的視圖控制器  LvesOriginalController *originalC=[[LvesOriginalController alloc] init];  originalC.originUrl=urlStr; //佈建要求串連  //跳轉到點擊後的控制器並載入webview  [self.navigationController pushViewController:originalC animated:YES];    return  NO;}//設定底部滾動不彈回- (void)webViewDidFinishLoad:(UIWebView *)webView{  NSInteger height = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight;"] intValue];  NSString* javascript = [NSString stringWithFormat:@"window.scrollBy(0, %d);", height];  [webView stringByEvaluatingJavaScriptFromString:javascript];}

2.coreText是圖文混排的底層,如果你想自己編寫文本布局引擎,可以使用coreText

- (void)drawRect:(CGRect)rect {

// Drawing code

[super drawRect:rect];

//1.得到當前繪製畫布的上下文，用於後續將內容繪製在畫布上

CGContextRef context=UIGraphicsGetCurrentContext();

//2.將座標繫上下翻轉。對於底層的繪製引擎來說，螢幕的左下角是（0, 0）座標。而對於上層的 UIKit 來說，左上方是 (0, 0) 座標。所以我們為了之後的座標系描述按 UIKit 來做，所以先在這裡做一個座標系的上下翻轉操作。翻轉之後，底層和上層的 (0, 0) 座標就是重合的了。

CGContextSetTextMatrix(context, CGAffineTransformIdentity);

CGContextTranslateCTM(context, 0, self.bounds.size.height);

CGContextScaleCTM(context, 1.0, -1.0);

//3.

CGMutablePathRef path=CGPathCreateMutable();

CGPathAddRect(path, NULL, self.bounds);

//4.建立繪製的地區，CoreText 本身支援各種文字排版的地區，我們這裡簡單地將 UIView 的整個介面作為排版的地區

NSAttributedString *attString=[[NSAttributedString alloc]initWithString:@"Hello World! "];

CTFramesetterRef framestter=CTFramesetterCreateWithAttributedString((CFAttributedStringRef)attString);

CTFrameRef frameOfCT=CTFramesetterCreateFrame(framestter, CFRangeMake(0, [attString length]), path, NULL);

//5.

CTFrameDraw(frameOfCT, context);

//6.

CFRelease(frameOfCT);

CFRelease(path);

CFRelease(framestter);

}

http://www.cocoachina.com/industry/20140521/8504.html

http://www.tuicool.com/articles/jEBrq2B

3.TextKit是coreText的封裝,蘋果提供了新的API,讓我們能夠更簡便的進行文本布局

//建立一個富文本

NSMutableAttributedString *sttriAS=[[NSMutableAttributedString alloc]initWithString:@"哈哈哈1234567890"];

//修改富文本中不同文字的樣式

[sttriAS addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, 3)];

[sttriAS addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:20] range:NSMakeRange(0, 3)];

//設定數字為紅色

[sttriAS addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(3, 10)];

[sttriAS addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:30] range:NSMakeRange(3, 10)];

//添加圖片

NSTextAttachment *attch=[[NSTextAttachment alloc]init];

attch.bounds=CGRectMake(0, 0, 32, 32);

attch.image=[UIImage imageNamed:@"8"];

//建立帶有圖片的富文本

NSAttributedString *string=[NSAttributedString attributedStringWithAttachment:attch];

[sttriAS appendAttributedString:string];

//顯示

self.asdfhLabel.attributedText=sttriAS;

self.asdhagTextView.attributedText=sttriAS;

http://www.cocoachina.com/industry/20131126/7417.html

http://www.cocoachina.com/ios/20131028/7250.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More