人机交互技术实验报告

1、人机交互技术课程实验报告姓名王烁学号201308003104专业软件工程班级软件1301指导教师及职称 万（讲师）开课学期 2016 至 2017 学年 上 学期上课时间2016年9月30日科技学院教务处编印实验题目“北美榜”电影类APP的设计与实现1.实验目的：(1) 熟悉项目环境的搭建，为每一个模块创建子控制器。(2) 创建storyboard文件，在其中定义所有的控制器，能使用xib绘制子视图。(3) 评分星星的实现思路分析。(4) 新闻列表数据的处理，加载 Json数据，创建新闻Model。2.软硬件环境：软件环境：操作系统 MAC OSX,开发平台XCode 7.1硬件环境：苹果一体

2、机3.实验容简述:(1) 封装实现评分星星视图。(2) 实现下拉新闻列表，头条图片放大。(3) KVO实现大图、小图海报同步滑动(4) 总结创建单元格对象的三种方式。4 .实现过程一、圭寸装实现评分星星视图创建starView类starView.h 文件容：#import <UIKit/UIKit.h>in terface starView : UIViewUlView *_yellowView; / 金色星星UlView *_grayView;/ 灰色星星/自动生成一个带下划线 _的，并且以属性名命名的实例变量/属性名：name，自动生成 _nameproperty( non a

3、tomic,assig n)CGFIoat rati ng;/ 评分endstarView.m 文件容：#import "starView.h"#import "UIViewExt.h"impleme ntatio n starView/通过代码创建对象会调用这个方法-(id)i ni tWithFrame:(CGRect)frameself = super ini tWithFrame:frame;if (self) self _createView;return self;/通过xib创建对象会调用这个方法-(void)awakeFromNibsel

4、f _createView;/创建子视图-(void)_createViewUllmage *graylmg = Ullmage imageNamed:"gray2x.p ng"Ullmage *yellowlmg = Ullmage imageNamed:"yellow2x.p ng"1.创建灰色星星_grayView = UIView alloc ini tWithFrame:CGRectMake(O, 0,graylmg.size.width*5, graylmg.size.height);/视图转颜色，将视图作为背景_grayView.backg

5、ro un dColor = UIColor colorWithPatternlmage:graylmg;self addSubview:_grayView;2.创建金色星星_yellowView = UIView alloc ini tWithFrame:CGRectMake(0, 0,yellowlmg.size.width*5, yellowlmg.size.height);/视图转颜色，将视图作为背景_yellowView.backgro un dColor = UlColor colorWithPatter nl mage:yellowlmg; self addSubview:_ye

6、llowView;/先显示一个绿色背景，最后再把背景去掉/self.backgro un dColor = UIColor gree nColor;self.backgro un dColor = UIColor clearColor;/修改当前视图frame里面的宽度，不使用外面传进来的宽度3.设置当前视图的宽度为5个星星的高度/宽度CGFloat star5Width = self.frame.size.height * 5;CGRect frame = self.frame;frame.size.width = star5Width;self.frame = frame;/*上述3行代码

7、可以简化成如下代码，因为引入了类目文件UIViewExt.hself.width = star5Width;*/原始：20/当前视图的高度：40/放大的比例：=40 / 20CGFloat scale = self.frame.size.height / yellowlmg.size.height;/4.放大星星CGAffi neTra nsform t = CGAffin eTra nsformMakeScale(scale, scale);_grayView.tra nsform = t;_yellowView.tra nsform = t;CGRect fl = _grayView.fr

8、ame;CGRect f2 = _yellowView.frame;fl.origin = CGPoi ntZero;f2.origin = CGPoi ntZero;_grayView.frame = f1;_yellowView.frame = f2;UIViewExt.h/*上述6行代码可以简化成如下代码，因为引入了类目文件_grayView.origi n = CGPoi ntZero;_yellowView.orig in = CGPoi ntZero;*/-(void)setRati ng:(CGFIoat)rat in g_rati ng = rat ing;1.计算分数的百分比

9、CGFloat s = rati ng / 10.0;CGFloat width = s * self.frame.size.width;/如果能够封装一个方法能直接赋值就好了_yellowView.width = width;end二、实现下拉新闻列表，头条图片放大在NewsViewController类中的协议方法中实现#pragma mark - UlScrollView delegate-(void)scrollViewDidScroll:(UIScrollView *)scrollView1.获取y轴的位移CGFloat offsetY = scrollView.co nte ntO

10、ffset.y;/先判断是向上滑动还是向下滑动if (offsetY >0) / 向上滑动_imgView.top = -offsetY*0.5;/ 改_titleLabel 的 y 坐标else1.计算图片增大之后的高度/ABS取绝对值CGFloat height = ABS(offsetY) + ImageHeight;/原宽度/原高度=放大宽度(?)/放大高度/2.计算图片增大之后的宽度CGFloat width = kScree nWidth / ImageHeight *height;3.图片的x坐标向左偏移：增加宽度的一半CGRect frame = CGRectMake(-

11、(width-kScree nWidth)/2, 0, width, height);m gView.frame = frame;_titleLabel.bottom = _imgView.bottom;三、KVO实现大图、小图海报同步滑动在PosterView类中，主要实现方法如下：#pragma mark - KVO 观察者方法-(void)observeValueForKeyPath:(NSStri ng *)keyPathofObject:(id)object/ 被观察对象change:(NSDictionaryvNSString *,id> *)change / 属性值 con

12、 text:(void *)c on textif (keyPath isEqualToStri ng:"curre ntltem") /取得变化之后的属性值NSNumber *n ewValue =cha nge objectForKey:" new"/ 取新值NSInteger item = newValue integerValue;NSI ndexPath*in dexPath= NSI ndexPathin dexPathForltem:itemin Sectio n: 0;/1.被观察的对象是大图if (object = _posterCol

13、lect ionV iew&&_in dexCollect ionV iew.curre ntltem != item) /会触发KVO,导致递归循环n dexCollect ionV iew.curre ntltem = item;/可以将一个单元格滚动到中间_in dexCollect ionV iewscrollToltemAtl ndexPath:i ndexPathatScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES;2.被观察的对象是小图else if(obj

14、ect = _in dexCollect ionView &&_posterCollectio nView.curre ntltem != item)/会触发KVO_posterCollect ionV iew.curre ntltem = item;_posterCollect ionV iewscrollToItemAtI ndexPath:i ndexPathatScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES;3.修改电影标题Movie *movie = self

15、.data item;_footerLabel.text = movie.title;/复写这个方法，这个方法一调用，说明有数据传进来-(void)setData:(NSArray *)dataif (_data != data) _data release;_data = data retai n;_posterCollecti onV iew setData:data;_in dexCollecti onView setData:data;/显示第一个电影标题if (data.cou nt > 0) Movie *movie = data objectAt In dex:0;_foo

16、terLabel.text = movie.title;四、创建单元格对象的三种方式(1) 第一种：加载xib* - (void)registerNib:forCellReuseldentifier:使用此方法为 xib 中的单元格注册* -(id)dequeueReusableCellWithldentifier:forlndexPath:此方法会通过加载 xib 创 建单元格对象(2) 第二种：alloc init创建单元格对象* - (void)registerClass:forCellReuselde ntifier:使用此方法为单元格类注册* -(id)dequeueReusableCellWithldentifier:forlndexPath:此方法会通过 alloc init创建单元格对象第三种：加载storybord中的原型单元格加载storybord中的原型单元格不需要注册单元格，直接使用以下方法加载 storybor