iOS开发日记21-7.0之后的图文混排

今天博主有一个图文混排的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步.

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

 

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

posted @ 2015-09-21 10:43  Mr.林的博客  阅读(418)  评论(0编辑  收藏  举报