如何在iPad上实现QQLive HD界面

QQLive HD是QQ专门为iPad开发一款多媒体客户端，用户可以通过该客户端观看电影/电视剧等节目。在WIFI的条件下观看的效果还是不错的。值得称赞的是其主界面用一种写实的风格呈现给用户，给人耳目一新的感觉。

对于我们技术人员来说，看到这样的创意真的是非常羡慕，没办法，谁让人家公司大，有专门的CDC负责这些创意呢！

总的来说QQLive HD 的主界面分成几个部分

1. 电视屏幕窗口

 

           实现方法：使用UIPageControl和UIScrollView实现。

//添加一个PageControl控件，显示热点图片 m_pPageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(340, 378, 200, 50)]; if(m_pPageControl == nil) { return; } [m_pPageControl setNumberOfPages:5]; [m_pPageControl addTarget:self action:@selector(PageTurnResponse:) forControlEvents:UIControlEventValueChanged]; [self.view addSubview:m_pPageControl]; [m_pPageControl release]; //添加一个ScrollView，用于显示图片 m_pImageScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(307, 63, 543, 330)]; if(m_pImageScrollView == nil) { return; } [m_pImageScrollView setShowsHorizontalScrollIndicator:FALSE]; [m_pImageScrollView setBackgroundColor:[UIColor clearColor]]; m_pImageScrollView.delegate = self; [self.view addSubview:m_pImageScrollView]; [m_pImageScrollView release]; //向ScrollView添加图片控件 for(int i = 0; i<5 ; i++) { UIImageView *pImageView = [[UIImageView alloc] initWithFrame:CGRectMake(i*543, 0, 543, 330)]; if(pImageView != nil) { [pImageView setBackgroundColor:[UIColor colorWithRed:(i+1)*0.1 green:(i+1)*0.1 blue:(i+1)*0.1 alpha:1.0]]; [m_pImageScrollView addSubview:pImageView]; [pImageView release]; } } m_pPageControl.currentPage = 0; [m_pImageScrollView setContentSize:CGSizeMake(5*543, 330)];  

2. 电影/电视/连续剧/综艺操作按钮

    实现方法：使用UIButton实现

//添加电影/电视/电视剧/综艺按钮 UIButton *pMovieButton = [[UIButton alloc] initWithFrame:CGRectMake(100, 560, 247, 176)]; if(pMovieButton == nil) { return; } [pMovieButton setImage:[UIImage imageNamed:@"moive.png"] forState:UIControlStateNormal]; [pMovieButton setImage:[UIImage imageNamed:@"moive.png"] forState:UIControlStateHighlighted]; [pMovieButton addTarget:self action:@selector(MoiveResponse) forControlEvents:UIControlEventTouchDown]; [self.view addSubview:pMovieButton]; [pMovieButton release]; //电视剧按钮放图层的最下面 UIButton *pClassButton = [[UIButton alloc] initWithFrame:CGRectMake(474, 505, 245, 195)]; if(pClassButton == nil) { return; } [pClassButton setImage:[UIImage imageNamed:@"class.png"] forState:UIControlStateNormal]; [pClassButton setImage:[UIImage imageNamed:@"class.png"] forState:UIControlStateHighlighted]; [pClassButton addTarget:self action:@selector(ClassResponse) forControlEvents:UIControlEventTouchDown]; [self.view addSubview:pClassButton]; [pClassButton release]; UIButton *pTVButton = [[UIButton alloc] initWithFrame:CGRectMake(350, 514, 164, 114)]; if(pTVButton == nil) { return; } [pTVButton setImage:[UIImage imageNamed:@"tv.png"] forState:UIControlStateNormal]; [pTVButton setImage:[UIImage imageNamed:@"tv.png"] forState:UIControlStateHighlighted]; [pTVButton addTarget:self action:@selector(TVResponse) forControlEvents:UIControlEventTouchDown]; [self.view addSubview:pTVButton]; [pTVButton release]; UIButton *pEntainmentButton = [[UIButton alloc] initWithFrame:CGRectMake(629, 560, 336, 187)]; if(pEntainmentButton == nil) { return; } [pEntainmentButton setImage:[UIImage imageNamed:@"entainment.png"] forState:UIControlStateNormal]; [pEntainmentButton setImage:[UIImage imageNamed:@"entainment.png"] forState:UIControlStateHighlighted]; [pEntainmentButton addTarget:self action:@selector(EntainmentResponse) forControlEvents:UIControlEventTouchDown]; [self.view addSubview:pEntainmentButton]; [pEntainmentButton release]; 

3.历史记录按钮

  实现方法：使用单独的UIView检测手势操纵，使用UIImageView实现晃动的动画

//添加一个历史记录晃动按钮视图 UIImageView *pHistoryView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 56, 67)]; if(pHistoryView == nil) { return; } NSArray *pImageArray = [NSArray arrayWithObjects:[UIImage imageNamed:@"frame3.png"],[UIImage imageNamed:@"frame1.png"],[UIImage imageNamed:@"frame2.png"], nil]; if(pImageArray == nil) { return; } [pHistoryView setAnimationDuration:2]; [pHistoryView setAnimationRepeatCount:0]; [pHistoryView setAnimationImages:pImageArray]; [pHistoryView startAnimating]; [self addSubview:pHistoryView]; [pHistoryView release]; 

4.其他的节目就没什么好解释的，就是一些UITableView加一些背景实现。其实我觉得节目列表的呈现方式不大好，不够写实。如果能够真实模拟一些碟片的实体店，和整体的风格也许更符合。

 

实现后的图片

      

 

 

源码下载: QQLive_HD

 

Any question: ppnext@163.com