在ios中實現文繞圖文字效果

來源:互聯網
上載者:User

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]];

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.