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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容