IOS中有时候需要实现文字环绕图片的效果,用一般的控件很难实现,因为根本就没有支持该属性的控件,折衷的做法就是用UIWebView,在其加载html语言,实现文字的环绕效果。
实现要求:在webView上实现文字环绕图片,点击图片可实现图片放大。
关于点击图片放大有两种方法:1.用javascript脚本实现,可笔者已经3年不做web开发了,这种方式可能需要较长时间。2.在webView中添加一个占位图(必须是透明的),在
web.scrollView上相应位置,添加UIImageView,并实现点击效果。
以下时部分代码:
newsTitle=@"标题";
newsTime=[NSString stringWithFormat:@"%@ %@",@"2012-08-09",@"网易"];
NSString *file1 = [[NSBundle mainBundle] pathForResource:@"占位图" ofType:@"png"];//设置占位图片
NSString *file2 = [[NSBundle mainBundle] pathForResource:@"透明" ofType:@"png"];//设置占位图片
NSString *imgstr=[NSString stringWithFormat:@"<img src='file://%@' style=\"FLOAT: right; MARGIN-TOP: 10px; MARGIN-RIGHT: 10px\" alt=\"\">",nil,nil];//红色的就是占位图的属性设置:居右,距离上边 10px,距离右边10px
web.backgroundColor = [UIColor clearColor];
web.opaque = NO;
//这行能在模拟器下明下加快 loadHTMLString 后显示的速度,其实在真机上没有下句也感觉不到加载过程
web.dataDetectorTypes = UIDataDetectorTypeNone;
if (!news) {
news=@"要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字";
}
NSString *webviewText = [NSString stringWithFormat:@"<style>body{margin:10;align:center;background-color:lightgray;font-color:black;font:17px/20px Custom-Font-Name}</style><h2 align=\"center\">%@</h2><h5 style='text-align:center;'>%@</h5><hr></br>%@<font>%@</font>",newsTitle,newsTime,imgstr,news];//红色部分将文字图片连接在一起
[web loadHTMLString:webviewText baseURL:nil]; //在 WebView 中显示本地的字符串
//在于占位图同样的添加图片
UIView *firstView=[self addImageViewWithFrame:CGRectMake(203, 125, 100, 97) andPic:pic1];
[firstView setTag:9];
[web.scrollView addSubview:firstView];
[web.scrollView addSubview:[self addImageViewWithFrame:CGRectMake(203, 226, 100, 97) andPic:pic2]];