iOS WebView與TableView實現(xiàn)新聞詳情展示

最近有個需求困擾了好久殉农，終于實現(xiàn)了，記錄一下
后臺返回數(shù)據(jù)一個是conten內(nèi)容局荚，是html格式的超凳，后面還有一條條的新聞數(shù)據(jù)要展示愈污。這時候html格式是不知道高度的，必須動態(tài)的計算高度轮傍。
于是我用webView+tableView第一條cell上顯示webView暂雹，動態(tài)計算webView的高度。
看下代碼
首先先創(chuàng)建一個tableView和一個webView创夜，代碼如下

- (UITableView *)tableView{
    if (_tableView==nil) {
        _tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
        _tableView.delegate = self;
        _tableView.dataSource = self;
    }
    return _tableView;
}```

1.```
- (UIWebView *)webView{
    if (_webView == nil) {
        _webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 1)];
        _webView.delegate = self;
        _webView.scrollView.scrollEnabled=NO;
    }
    return _webView;
}

再來創(chuàng)建一下假數(shù)據(jù)以供測試效果之用,創(chuàng)建好之后進行解析便利添加到datas數(shù)組里面

NSString *html = @"<p>改善農(nóng)村人居環(huán)境杭跪，建設(shè)美麗宜居鄉(xiāng)村，是實施鄉(xiāng)村振興戰(zhàn)略的一項重要任務(wù)驰吓，事關(guān)全面建成小康社會涧尿，事關(guān)廣大農(nóng)民根本福祉，事關(guān)農(nóng)村社會文明和諧檬贰。近年來姑廉，各地區(qū)各部門認真貫徹黨中央、國務(wù)院決策部署偎蘸，把改善農(nóng)村人居環(huán)境作為社會主義新農(nóng)村建設(shè)的重要內(nèi)容庄蹋，大力推進農(nóng)村基礎(chǔ)設(shè)施建設(shè)和城鄉(xiāng)基本公共服務(wù)均等化，農(nóng)村人居環(huán)境建設(shè)取得顯著成效迷雪。同時，我國農(nóng)村人居環(huán)境狀況很不平衡虫蝶，臟亂差問題在一些地區(qū)還比較突出章咧，與全面建成小康社會要求和農(nóng)民群眾期盼還有較大差距，仍然是經(jīng)濟社會發(fā)展的突出短板能真。為加快推進農(nóng)村人居環(huán)境整治赁严，進一步提升農(nóng)村人居環(huán)境水平，制定本方案</p>";
    NSDictionary *json = @{@"content":html,@"datas":@[@{@"name":@"河北省"},@{@"name":@"河南省"},@{@"name":@"湖南省"},@{@"name":@"湖北省"},@{@"name":@"江蘇省"},@{@"name":@"東北省"},@{@"name":@"山西省"}]};
    NSArray *datas = [json objectForKey:@"datas"];
    for (NSDictionary *dic in datas) {
        [self.datas addObject:dic];
    }
顯示在webView上顯示出來這時候回會進入webView代理方法里面
[_webView loadHTMLString:html baseURL:nil];

進入webView代理方法之后的處理

- (void)webViewDidFinishLoad:(UIWebView *)webView{
   //獲取webView的內(nèi)容高度
 CGFloat htmlHeight = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"] floatValue];
 //重新給webView定義高度
    self.webView.frame = CGRectMake(self.webView.frame.origin.x,self.webView.frame.origin.y, self.webView.frame.size.width, htmlHeight);
 //這時候刷新tableView粉铐，把tableView放在View展示出來
    [self.tableView reloadData];
    [self.view addSubview:_tableView];
}

tableView代理中的代碼如下

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return  self.datas.count+1;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.row == 0) {
        static NSString *iden = @"cell";
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:iden];
        if (!cell) {
            cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:iden];
        }
        [cell addSubview:_webView];
        return cell;
    }else{
        static NSString *iden = @"cell";
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:iden];
        if (!cell) {
            cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:iden];
        }
        cell.textLabel.text = [self.datas[indexPath.row-1] objectForKey:@"name"];
        return cell;
    }
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.row==0) {
        return _webView.frame.size.height;
    }else{
        return 100;
    }
}

讓我們看下效果是什么樣的

64DB447E-7165-4D54-BC48-F8DF3B659D08.png

!!!!這個效果webView右邊有空出的白條疼约，正常的事居中才對呀，那我們要對數(shù)據(jù)進行處理蝙泼，該如何處理呢程剥，看下代碼吧

0B5C6350-20C6-483C-830F-B9B36542EC0A.png

需要在這個地方加入如下代碼

NSMutableString *content = [NSMutableString string];
    [content appendString:html];
    [content appendFormat:@"<link rel=\"stylesheet\" href=\"%@\">",[[NSBundle mainBundle] URLForResource:@"Style.css" withExtension:nil]];

那么這里Style.css是哪來的，是我們自己創(chuàng)建的

252BA3DD-7BAF-4FF8-A9FD-86533367592F.png

里面的代碼內(nèi)容是什么呢

CBE1CFD9-EA05-41E7-A414-BEEFED18AA87.png

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {   display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
body {
    -webkit-text-size-adjust: 100%;
    font-size: 15px;
    letter-spacing: 0.6px;
    color: #444;
    overflow-y: scroll;
    overflow-x: hidden;
    background:white;
    margin-top:10;
}
p {
    font-size: 16px;
    line-height: 1.3em;
    padding: 0px 10px;
    margin-bottom: 1.0em;
    word-wrap: break-word;
    word-break: break-all;
    color: black;
    text-indent: 2em;
    text-align: justify;
}

把代碼拷貝進去汤踏，我們看小效果如何织鲸，果然居中了

5F5BE006-6EA9-4106-AFC9-055503BB92FA.png