《人机交互技术实验报告》由会员分享，可在线阅读，更多相关《人机交互技术实验报告（15页珍藏版）》请在金锄头文库上搜索。
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 in terface starView : UIViewUlView *_yellowView; / 金色星星UlView *_grayView;/ 灰色星星/自动生成一个带下划线 _的，并且以属性名命名的实例变量/属性名：name，自动生成 _nameproperty( non atomic,assig n)CGFIoat
3、 rati ng;/ 评分endstarView.m 文件容：#import starView.h#import UIViewExt.himpleme ntatio n starView/通过代码创建对象会调用这个方法-(id)i ni tWithFrame:(CGRect)frameself = super ini tWithFrame:frame;if (self) self _createView;return self;/通过xib创建对象会调用这个方法-(void)awakeFromNibself _createView;/创建子视图-(void)_createViewUllmage
4、 *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.backgro un dColor = UIColor colorWithPatternlmage:graylmg;self addSubvie
5、w:_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:_yellowView;/先显示一个绿色背景，最后再把背景去掉/self.backgro un dColor = UIColor gree
6、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行代码可以简化成如下代码，因为引入了类目文件UIViewExt.hself.width = star5Width;*/原始：20/当前视图的
7、高度：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.frame;CGRect f2 = _yellowView.frame;fl.origin = CGPoi ntZero;f2.origi
8、n = 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.计算分数的百分比CGFloat s = rati ng / 10.0;CGFloat width = s * self.frame.size.widt
9、h;/如果能够封装一个方法能直接赋值就好了_yellowView.width = width;end二、实现下拉新闻列表，头条图片放大在NewsViewController类中的协议方法中实现#pragma mark - UlScrollView delegate-(void)scrollViewDidScroll:(UIScrollView *)scrollView1.获取y轴的位移CGFloat offsetY = scrollView.co nte ntOffset.y;/先判断是向上滑动还是向下滑动if (offsetY 0) / 向上滑动_imgView.top = -offsetY
10、*0.5;/ 改_titleLabel 的 y 坐标else1.计算图片增大之后的高度/ABS取绝对值CGFloat height = ABS(offsetY) + ImageHeight;/原宽度/原高度=放大宽度(?)/放大高度/2.计算图片增大之后的宽度CGFloat width = kScree nWidth / ImageHeight *height;3.图片的x坐标向左偏移：增加宽度的一半CGRect frame = CGRectMake(-(width-kScree nWidth)/2, 0, width, height);m gView.frame = frame;_title
11、Label.bottom = _imgView.bottom;三、KVO实现大图、小图海报同步滑动在PosterView类中，主要实现方法如下：#pragma mark - KVO 观察者方法-(void)observeValueForKeyPath:(NSStri ng *)keyPathofObject:(id)object/ 被观察对象change:(NSDictionaryvNSString *,id *)change / 属性值 con text:(void *)c on textif (keyPath isEqualToStri ng:curre ntltem) /取得变化之后的属
12、性值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 = _posterCollect ionV iew&_in dexCollect ionV iew.curre ntltem != item) /会触发KVO,导致递归循环n dexCollect ionV iew.cu
13、rre ntltem = item;/可以将一个单元格滚动到中间_in dexCollect ionV iewscrollToltemAtl ndexPath:i ndexPathatScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES;2.被观察的对象是小图else if(object = _in dexCollect ionView &_posterCollectio nView.curre ntltem != item)/会触发KVO_posterCollect ionV iew.cu
14、rre ntltem = item;_posterCollect ionV iewscrollToItemAtI ndexPath:i ndexPathatScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES;3.修改电影标题Movie *movie = self.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;_footerLabel.text = movie.title;四、创建单元格对象的三种方式(1) 第一种：加载xib* -
