人机交互技术实验报告

人机交互技术课程实验报告姓名 王烁 学号 201308003104 专业 软件工程 班级 软件1301 指导教师及职称 万李(讲师) 开课学期 2016 至 2017 学年 上 学期上课时间 2016 年 9月 30日 湖南科技学院教务处编印实验题目“北美榜”电影类APP的设计与实现1 实验目的：（1）熟悉项目环境的搭建，为每一个模块创建子控制器。（2）创建storyboard文件，在其中定义所有的控制器，能使用xib绘制子视图。（3）评分星星的实现思路分析。（4）新闻列表数据的处理，加载Json数据，创建新闻Model。2 软硬件环境：软件环境：操作系统 MAC OSX，开发平台 XCode 7.1硬件环境：苹果一体机3 实验内容简述：（1）封装实现评分星星视图。（2）实现下拉新闻列表，头条图片放大。（3）KVO实现大图、小图海报同步滑动。 （4）总结创建单元格对象的三种方式。4实现过程一、封装实现评分星星视图创建starView类starView.h文件内容：#import interface starView : UIView UIView *_yellowView; /金色星星 UIView *_grayView; /灰色星星/自动生成一个带下划线 _ 的，并且以属性名命名的实例变量/属性名：name，自动生成 _nameproperty(nonatomic,assign)CGFloat rating; /评分endstarView.m文件内容：#import starView.h#import UIViewExt.himplementation starView/通过代码创建对象会调用这个方法- (id)initWithFrame:(CGRect)frame self = super initWithFrame:frame; if (self) self _createView; return self;/通过xib创建对象会调用这个方法- (void)awakeFromNib self _createView;/创建子视图- (void)_createView UIImage *grayImg = UIImage imageNamed:gray2x.png; UIImage *yellowImg = UIImage imageNamed:yellow2x.png; /1.创建灰色星星 _grayView = UIView alloc initWithFrame:CGRectMake(0, 0, grayImg.size.width*5, grayImg.size.height); /视图转颜色，将视图作为背景 _grayView.backgroundColor = UIColor colorWithPatternImage:grayImg; self addSubview:_grayView; /2.创建金色星星 _yellowView = UIView alloc initWithFrame:CGRectMake(0, 0, yellowImg.size.width*5, yellowImg.size.height); /视图转颜色，将视图作为背景 _yellowView.backgroundColor = UIColor colorWithPatternImage:yellowImg; self addSubview:_yellowView; /先显示一个绿色背景，最后再把背景去掉 /self.backgroundColor = UIColor greenColor; self.backgroundColor = UIColor clearColor; /修改当前视图frame里面的宽度，不使用外面传进来的宽度 /3.设置当前视图的宽度为5个星星的高度/宽度 CGFloat star5Width = self.frame.size.height * 5; CGRect frame = self.frame; frame.size.width = star5Width; self.frame = frame; /*上述3行代码可以简化成如下代码，因为引入了类目文件UIViewExt.h self.width = star5Width; */ /原始：20 /当前视图的高度：40 /放大的比例：= 40 / 20 CGFloat scale = self.frame.size.height / yellowImg.size.height; /4.放大星星 CGAffineTransform t = CGAffineTransformMakeScale(scale, scale); _grayView.transform = t; _yellowView.transform = t; CGRect f1 = _grayView.frame; CGRect f2 = _yellowView.frame; f1.origin = CGPointZero; f2.origin = CGPointZero; _grayView.frame = f1; _yellowView.frame = f2; /*上述6行代码可以简化成如下代码，因为引入了类目文件UIViewExt.h _grayView.origin = CGPointZero; _yellowView.origin = CGPointZero; */- (void)setRating:(CGFloat)rating _rating = rating; /1.计算分数的百分比 CGFloat s = rating / 10.0; CGFloat width = s * self.frame.size.width; /如果能够封装一个方法能直接赋值就好了 _yellowView.width = width;end二、实现下拉新闻列表，头条图片放大在NewsViewController类中的协议方法中实现 #pragma mark - UIScrollView delegate- (void)scrollViewDidScroll:(UIScrollView *)scrollView /1.获取y轴的位移 CGFloat offsetY = scrollView.contentOffset.y; /先判断是向上滑动还是向下滑动 if (offsetY 0) /向上滑动 _imgView.top = -offsetY*0.5; /改_titleLabel的y坐标 else /1.计算图片增大之后的高度 /ABS 取绝对值 CGFloat height = ABS(offsetY) + ImageHeight; /原宽度/原高度 = 放大宽度(?)/放大高度 /2.计算图片增大之后的宽度 CGFloat width = kScreenWidth / ImageHeight *height; /3.图片的x坐标向左偏移:增加宽度的一半 CGRect frame = CGRectMake(-(width-kScreenWidth)/2, 0, width, height); _imgView.frame = frame; _titleLabel.bottom = _imgView.bottom; 三、KVO实现大图、小图海报同步滑动在PosterView类中，主要实现方法如下：#pragma mark - KVO 观察者方法- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object /被观察对象 change:(NSDictionary *)change /属性值 context:(void *)context if (keyPath isEqualToString:currentItem) /取得变化之后的属性值 NSNumber *newValue =change objectForKey:new;/取新值 NSInteger item = newValue integerValue; NSIndexPath *indexPath = NSIndexPath indexPathForItem:item inSection:0; /1.被观察的对象是大图 if (object = _posterCollectionView& _indexCollectionView.currentItem != item) /会触发KVO，导致递归循环 _indexCollectionView.currentItem = item; /可以将一个单元格滚动到中间 _indexCollectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES; /2.被观察的对象是小图 else if(object = _indexCollectionView & _posterCollectionView.currentItem != item) /会触发KVO _posterCollectionView.currentItem = item; _posterCollectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES; /3.修改电影标题 Movie *movie = self.data item; _footerLabel.text = movie.title; /复写这个方法，这个方法一调用，说明有数据传进来- (void)setData:(NSArray *)data if (_data != data) _data release; _data = data retain; _posterCollectionView setData:data; _indexCollectionView setData:data; /显示第一个电影标题 if (data.count 0) Movie *movie = data objectAtIndex:0; _footerLabel.text = movie.title; 四、创建单元格对象的三种方式(1)第一种：加载xib* - (void)registerNib:forCellReuseIdentifier: 使用此方法为xib中的单元格注册* -(id)dequeueReusableCellWithIdentifier:forIndexPath: 此方法会通过加载xib创建单元格对象(2)第二种：alloc init 创建单元格对象* - (void)registerClass:forCellReuseIdentifier: 使用此方法为单元格类注册* -(id)dequeueReusableCellWithIdentifier:forIndexPath: 此方法会通过alloc init 创建单元格对象(3)第三种：加载storybord中的原型单元格加载storybord中的原型单元格不需要注册单元格，直接使用以下方法加载storybord中的原型单元格创建