今天博主有一個圖文混排的需求,遇到了一些困難點,在此和大家分享,希望能夠共同進步.
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.h 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
http://www.tuicool.com/articles/zeM7zeR
新聞熱點
疑難解答
