IOS開發---菜鳥學習之路--(十)-實現新聞詳細信息瀏覽頁面


前面已經將了上下拉刷新

實現了上下拉刷新后我們的第一級界面就做好,接下來我們就需要實現 新聞詳細信息瀏覽了

我個人認為一般實現新聞詳細頁面的方法有兩種(主要是數據源的不同導致了方法的不同)

第一種是本身新聞就是一個鏈接地址,同時是已經處理好的適應手機瀏覽的網頁

對於這種類型的數據源,我們直接在頁面中放一個WebView控件,然后將URL傳遞過去就好了

另一種則是普通的包含標題、時間、內容、圖片等數據結構的新聞內容(我們要實現的也是這種新聞,因為實現了這種之后, 我們就可以實現任何自定義的詳細信息的頁面了。)

首先我們需要新建一個UIViewController 取名叫做SingleNewsInfoViewController吧

具體的創建步驟我就不做截圖描述了,到這個地步沒必要再講這些了

直接開始正題吧

首先我們先在XIB文件中添加一個UIScroolView 然后在UIScroolView中添加    兩個UILabel 控件和一個UITextView控件

結構如下圖所示

然后是配置.H文件

不多說。直接上代碼比較直觀

#import <UIKit/UIKit.h>

@interface SingleNewsInfoViewController : UIViewController{
    NSString *mynewid;
    UILabel *titlelabel;
    UILabel *timelabel;
    NSArray *images;
    UITextView *contenttextview;
    UIScrollView *mainscrollview;
    BOOL haveimage;

}
@property(nonatomic,retain) IBOutlet UILabel *titlelabel;
@property(nonatomic,retain) IBOutlet UILabel *timelabel;
@property(nonatomic,retain) IBOutlet UITextView *contenttextview;
@property(nonatomic,retain)IBOutlet UIScrollView *mainscrollview;
@property(nonatomic,retain) NSString *mynewid;
@property(nonatomic,retain) NSArray *images;
@property(nonatomic) BOOL haveimage;

@end

然后在.m文件中聲明好各個屬性后 將對應的XIB文件中的控件與代碼中的變量 建立關聯

這邊需要解釋解釋一下幾個屬性的用處

mynewid的話是由上一級頁面 傳遞過來的新聞ID,我們可以通過該ID從后台獲取新聞的詳細參數

images的話是用來存儲后來獲取過來的圖片集合。

建立好管理后我們再接着修改.M文件

.m文件的話還需要添加兩個頭文件

#import "GetWebInfo.h"

#import "Base64AndImageHelp.h"

GetWebInfo的話相信大家都已經知道是什么用的了。如果不知道的話請看前幾張,

而Base64AndImageHelp類的話是我自定義的義個類,用來實現將base64的數據轉化為Image格式的數據用的(這個會在之后的章節進行介紹)

對於.M文件的話我們只需要修改他的viewDidLoad方法就可以了

具體代碼如下

代碼相對而言沒有什么特別難的地方

唯一有問題的可能就是Base64AndImageHelp部分,不過這部分 大家只要知道他是將后台傳遞過來的base64的string 圖片數據轉換成image數據就可以了

- (void)viewDidLoad
{
    GetWebInfo *getwebinfo=[GetWebInfo alloc];
    NSString *myparameters=[[NSString alloc] initWithString:[NSString stringWithFormat:@"Method=getSingleNewsbyId&new_id=%@",mynewid]];
    getwebinfo.parameters=myparameters;
    NSString *webReturnMessage=[getwebinfo dogetWebInfo];
    NSData* jsonData=[webReturnMessage dataUsingEncoding:NSUTF8StringEncoding];
    NSArray *keys =   [NSJSONSerialization
                       JSONObjectWithData:jsonData
                       options:NSJSONReadingMutableContainers
                       error:nil];
    //  NSLog(@"%@",keys);
    timelabel.text=[[keys objectAtIndex:0]valueForKey:@"time"];
    titlelabel.text=[[keys objectAtIndex:0 ]valueForKey:@"title"];
    contenttextview.text=[[keys objectAtIndex:0 ]valueForKey:@"contents"];
      NSInteger i=0;
    if(haveimage)
    {
        images=[[[keys objectAtIndex:0 ]valueForKey:@"images"] componentsSeparatedByString:@","];
        for (NSString *singleimage in images) {
            NSData *newimage=[Base64AndImageHelp mydataWithBase64EncodedString:singleimage];
            UIImage *newjiaban=[[UIImage alloc] initWithData:newimage];
            UIImageView *imageView = [[UIImageView alloc] init];
            [self.mainscrollview addSubview:imageView];
            imageView.frame = CGRectMake(20 ,170*i+100,280,150);//left ,top ,width ,height
            imageView.image=newjiaban;
            i++;
        }
    }
    contenttextview.frame=CGRectMake(20 ,170*i+100,280,310);
    mainscrollview.contentSize=CGSizeMake(280, 390+170*i);
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
}

到了這一步我們已經基本完成了新聞詳細信息的瀏覽了。

最后我們還需要返回到NEWSViewController中 實現UITableView的行點擊事件didSelectRowAtIndexPath,

實現點擊了新聞標題后,跳轉到新聞詳細信息頁面的效果。

首先需要在NEWSViewController添加SingleNewsInfoViewController的引用。

然后實現didSelectRowAtIndexPath方法,具體代碼如下。

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    SingleNewsInfoViewController *singlenewsinfoViewController= [[SingleNewsInfoViewController alloc]initWithNibName:@"SingleNewsInfoViewController" bundle:nil];
    NSString *myid=[[NSString alloc] initWithFormat:@"%@",[[[_list objectAtIndex:[indexPath section]] objectAtIndex:[indexPath row]] valueForKey:@"ID"]];
    singlenewsinfoViewController.mynewid=myid;
      NSString *haveImage=[[NSString alloc] initWithString:[[[_list objectAtIndex:[indexPath section]] objectAtIndex:[indexPath row]] valueForKey:@"images"]];
    if([haveImage isEqual:@"False"])
    {
        singlenewsinfoViewController.haveimage=NO;
    }
    else
    {
        singlenewsinfoViewController.haveimage=YES;
    }
    singlenewsinfoViewController.title=@"新聞詳情";
        singlenewsinfoViewController.hidesBottomBarWhenPushed=YES;
    [self.navigationController pushViewController:singlenewsinfoViewController animated:YES];
}

OK這樣就完成了我們的新聞詳細信息瀏覽的效果

不過這樣實現了以后還會有點小BUG ,我會在下一章中進行講解如何解決該BUG的。

最后再附上兩張圖片大家也可以自己動手試下,看看BUG在哪里。

      

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM