Open-source Chinese IOS client learning-(13) use the uiwebview control Layout View

Learning from the open-source Chinese IOS client in the previous blog-(12) User Login
Loginview. in the XIB layout, we can see a uiwebview control, but it does not load a webpage, but displays some text information, including some URL links, click this link to go to the website, or click a text tag to achieve the same effect.

Let's take a look at another viewcontroller. There is a newdetail class under the news/TAB. When we look at the XIB class of this viewcontroller class, we see the webview control. Similarly, it is not used to load a webpage, it is used as the view layout. In the Open Source Chinese IOS client source code, webview controls are used as the layout engine, and singlepost and softwaredeatil under the tab directory of the project file are used.
And blogdetail. newdetail is used to load the details of a piece of information;

Then let's take a look at the content displayed on the webview layout interface. When you select a piece of information in the comprehensive homepage, you want to view the details of the consultation, and then view some Interface Effects:

Maybe we want to ask what to use the webview layout. The normal view can also be displayed. The display text can be satisfied with the ulabel uitextview display image and uiimageview, and then let's look down...

There are some special font colors. When you click them, some jump to another view, and some jump to a website to respond to user interaction; the following is an example of how to capture the title of a tnw or related article:

 

Some people may already know that these are all rich texts in IOS. Indeed, this is the use of web views to display rich texts. Can rich texts be used in common views? It is also acceptable. There are some third-party libraries such as rtlabel to support the use of rich text.
6. It also provides rich text support for uikit. It may be okay to display simple text labels, but it may be difficult to layout some complicated views, just like adding a hyperlink to a word in a piece of text, click two words to jump to a Web page. It is not difficult to use only two words, but what should I do if I use the same XIB interface layout for multiple pieces of information? We don't know which words need rich text with hyperlinks? At this time, webview has become the best solution. When we open a Web page, such as hao123 navigation, there are many text links on it. Click these words to jump to the corresponding official website, and webview can load HTML code, it is also very simple, but it is a little difficult in view;

Well don't talk nonsense, first look at webview how to load a piece of information content, first look at a piece of information, return XML format http://www.oschina.net/action/api/news_detail? Id = 40840. parse the data in the body node as HTML code, which is loaded by webview. Other headers have corresponding URLs, format the parsed title and URL into HTML code and add webview;

Check the viewdidload method first.

-(Void) viewdidload {[Super viewdidload]; self. tabbaritem. title = @ ""; self. tabbaritem. image = [uiimage imagenamed: @ "detail"]; // remove the background color of webview [Tool clearwebviewbackground: Self. webview]; self. singlenews = [[singlenews alloc] init]; self. navigationcontroller. title = @ ""; self. webview. delegate = self; [self. webview loadhtmlstring: @ "" baseurl: Nil]; If ([config instance]. isnetworkrunning) {MB Progresshud * HUD = [[mbprogresshud alloc] initwithview: Self. view]; [Tool showhud: @ "loading" andview: Self. view andhud: HUD]; nsstring * url = [nsstring stringwithformat: @ "% @? Id = % d ", Token, newsid]; [[afoscclient sharedclient] getpath: URL parameters: Nil success: ^ (afhttprequestoperation * operation, Id responseobject) {[Tool getoscnotice2: operation. responsestring]; [HUD hide: Yes]; self. singlenews = [Tool readstrnewsdetail: operation. responsestring]; If (self. singlenews = nil) {[Tool toastnotification: @ "loading failed" andview: Self. view andloading: No andisbottom: No]; return;} [self loaddata: Self. singlenews]; // if there is a network, cache it if ([config instance]. isnetworkrunning) {[Tool savecache: 1 andid: Self. singlenews. _ id andstring: operation. responsestring] ;}} failure: ^ (afhttprequestoperation * operation, nserror * error) {[HUD hide: Yes]; If ([config instance]. isnetworkrunning) {[Tool toastnotification: @ "error network not connected" andview: Self. view andloading: No andisbottom: No] ;}} else {nsstring * value = [Tool getcache: 1 andid: newsid]; If (value) {self. singlenews = [Tool readstrnewsdetail: value]; [self loaddata: Self. singlenews];} else {[Tool toastnotification: @ "the error network is not connected" andview: Self. view andloading: No andisbottom: No] ;}}

There are two main methods in viewdidload:

1. [toolclearwebviewbackground: Self. webview]; remove the background color of webview. When displaying data, it is not considered a webview but a common view;

2. [selfloaddata: Self. singlenews];
Format the processing string and convert it to HTML format. For example, you can set the background color, font color, and font size of the HTML. It is useless for HTML and can be understood a little,

-(Void) loaddata :( singlenews *) n {[self refreshfavorite: N]; // notification to modify the number of news comments ication_commentcount * notification = [[notification_commentcount alloc] initwithparameters: n. commentcount]; [[nsicationicationcenter defacenter center] postnotificationname: icationication_detailcommentcount object: Notification]; // news is mainly used for Weibo sharing [config instance]. jsonobject = [[jsonobject alloc] initwithparameters: N. title andurl: N. url]; // Control update nsstring * author_str = [nsstring stringwithformat: @ "<a href = 'HTTP: // my.oschina.net/u/mongod' >%@ </a> published on % @", n. authorid, N. author, N. pubdate]; nsstring * Software = @ ""; if ([n. softwarename iswartostring: @ ""] = No) {software = [nsstring stringwithformat: @ "<Div id = 'osschina _ soft' style = 'margin-top: 8px; color: # ff0000; font-size: 14px; font-weight: bold '> for more information: <a href = '% @' >%@ </a> detailed information </div> ", N. softwarelink, N. softwarename];} nsstring * html = [nsstring stringwithformat: @ "<body style = 'background-color: # ebebf3' >%@ <Div id = 'oss _ title' >%@ </div> <Div id = 'oss _ outline' >%@ </div> <HR /> <Div id = 'oschina _ body' >%@ </Div >%%%@ </body> ", html_style, N. title, author_str, N. body, software, [Tool generaterelativenewsstring: N. relativies], html_bottom]; nsstring * result = [Tool gethtmlstring: HTML]; [self. webview loadhtmlstring: Result baseurl: Nil];}

[Self loaddata: Self. singlenews] formatting HTML features

Two macro definitions
Html_style html_bottom

// Html header # define html_style @ "<style> # oschina_title {color: #000000; margin-bottom: 6px; font-weight: bold ;} # oschina_title IMG {vertical-align: middle; margin-Right: 6px ;}# oschina_title A {color: #0d6da8 ;}# oschina_outline {color: #707070; font-size: 12px ;}# oschina_outline A {color: #0d6da8 ;}# oschina_software {color: #808080; font-size: 12px }# oschina_body IMG {max-width: 300px ;} # oschina_body {font-size: 16px; max-width: 300px; line-Height: 24px ;}# oschina_body table {max-width: 300px ;} # oschina_body pre {font-size: 9pt; font-family: Courier New, Arial; Border: 1px solid # DDD; border-left: 5px solid # 6ce26c; Background: # f6f6f6; padding: 5px ;}</style> "# define html_bottom @" <Div style = 'margin-bottom: 60px '/>"

[Toolgeneraterelativenewsstring: N. relativies] HTML for processing the layout of related articles

+ (Nsstring *) generaterelativenewsstring :( nsarray *) array {If (array = nil | [array count] = 0) {return @"";} nsstring * middle = @ ""; for (relativenews * r in array) {middle = [nsstring stringwithformat: @ "% @ <a href = % @ style = 'text-Decoration: none '> % @ </a> <p/> ", middle, R. URL, R. title];} return [nsstring stringwithformat: @ "<HR/> related articles <Div style = 'font-size: 14px '> <p/>%@ </div> ", middle];}

[Self. webview loadhtmlstring: Result baseurl: Nil]; Is to format HTML into an nsstring object and add the path webview. A delegate method of webview must also be processed.

If yes is returned for the delegate method, the uiwebview request is allowed. However, if webview is used to display custom content in layout, no is returned; if we click on a text hyperlink or URL, it will send it to the delegate method and respond based on this URL;

# Pragma browser link processing-(bool) webview :( uiwebview *) webview shouldstartloadwithrequest :( nsurlrequest *) Request navigationtype :( uiwebviewnavigationtype) navigationtype {[Tool analysis: [request. URL absolutestring] andnavcontroller: Self. parentviewcontroller. navigationcontroller]; If ([request. URL. absolutestring isequaltostring: @ "about: blank"]) {return yes;} else {return no ;}}

[Tool analysis: [request. URL absolutestring] andnavcontroller: Self. parentviewcontroller. navigationcontroller]; responds to the URL in webview. If this URL is not limited to the intra-site link, safair will be called to load this URL. If it is intra-site information, it will jump to the Information view. For details, see analysis: l
Andnavcontroller: implementation method;

The IF () statement has a judgment. If the requested URL is blank, the webview will load the page. Otherwise, the URL request. url. absolutestring will not be loaded, indicating that the complete URL link is obtained.

This blog does not explain how to deploy webviews. It mainly involves the design of HTML tags, request data, parsing XML, and adding parsed data to HTML Tag nodes, load the display with webview;

The following example shows how to obtain static text data in HTML format ,:

Sample source code: http://duxinfeng.blog.51cto.com/ext/down_att.php? Aid = 39211 & code = 8162

 

 

 

Original blog welcome to repost share, please indicate the source of http://blog.csdn.net/duxinfeng2010