人机交互技术实验报告.docx
《人机交互技术实验报告.docx》由会员分享，可在线阅读，更多相关《人机交互技术实验报告.docx（9页珍藏版）》请在冰豆网上搜索。
人机交互技术实验报告
《人机交互技术》课程实验报告
姓名王烁
学号201308003104
专业软件工程班级软件1301
指导教师及职称万（讲师）
开课学期2016至2017学年上学期
上课时间2016年9月30日
科技学院教务处编印
实验题目
“北美榜”电影类APP的设计与实现
1．实验目的：
（1）熟悉项目环境的搭建，为每一个模块创建子控制器。
（2）创建storyboard文件，在其中定义所有的控制器，能使用xib绘制子视图。
（3）评分星星的实现思路分析。
（4）新闻列表数据的处理，加载Json数据，创建新闻Model。
2．软硬件环境：
软件环境：
操作系统MACOSX，开发平台XCode7.1
硬件环境：
苹果一体机
3．实验容简述：
（1）封装实现评分星星视图。
（2）实现下拉新闻列表，头条图片放大。
（3）KVO实现大图、小图海报同步滑动。
（4）总结创建单元格对象的三种方式。
4．实现过程
一、封装实现评分星星视图
创建starView类
starView.h文件容：
#import
@interfacestarView:
UIView{
UIView*_yellowView;//金色星星
UIView*_grayView;//灰色星星
}
//自动生成一个带下划线_的，并且以属性名命名的实例变量
//属性名：
name，自动生成_name
@property（nonatomic,assign）CGFloatrating;//评分
@end
starView.m文件容：
#import"starView.h"
#import"UIViewExt.h"
@implementationstarView
//通过代码创建对象会调用这个方法
-（id）initWithFrame:
（CGRect）frame{
self=[superinitWithFrame:
frame];
if（self）{
[self_createView];
}
returnself;
}
//通过xib创建对象会调用这个方法
-（void）awakeFromNib{
[self_createView];
}
//创建子视图
-（void）_createView{
UIImage*grayImg=[UIImageimageNamed:
@"gray@2x.png"];
UIImage*yellowImg=[UIImageimageNamed:
@"yellow@2x.png"];
//1.创建灰色星星
_grayView=[[UIViewalloc]initWithFrame:
CGRectMake（0,0,grayImg.size.width*5,grayImg.size.height）];
//视图转颜色，将视图作为背景
_grayView.backgroundColor=[UIColorcolorWithPatternImage:
grayImg];
[selfaddSubview:
_grayView];
//2.创建金色星星
_yellowView=[[UIViewalloc]initWithFrame:
CGRectMake（0,0,yellowImg.size.width*5,yellowImg.size.height）];
//视图转颜色，将视图作为背景
_yellowView.backgroundColor=[UIColorcolorWithPatternImage:
yellowImg];
[selfaddSubview:
_yellowView];
//先显示一个绿色背景，最后再把背景去掉
//self.backgroundColor=[UIColorgreenColor];
self.backgroundColor=[UIColorclearColor];
//修改当前视图frame里面的宽度，不使用外面传进来的宽度
//3.设置当前视图的宽度为5个星星的高度/宽度
CGFloatstar5Width=self.frame.size.height*5;
CGRectframe=self.frame;
frame.size.width=star5Width;
self.frame=frame;
/*上述3行代码可以简化成如下代码，因为引入了类目文件UIViewExt.h
self.width=star5Width;
*/
//原始：
20
//当前视图的高度：
40
//放大的比例：
=40/20
CGFloatscale=self.frame.size.height/yellowImg.size.height;
//4.放大星星
CGAffineTransformt=CGAffineTransformMakeScale（scale,scale）;
_grayView.transform=t;
_yellowView.transform=t;
CGRectf1=_grayView.frame;
CGRectf2=_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.计算分数的百分比
CGFloats=rating/10.0;
CGFloatwidth=s*self.frame.size.width;
//如果能够封装一个方法能直接赋值就好了
_yellowView.width=width;
}
@end
二、实现下拉新闻列表，头条图片放大
在NewsViewController类中的协议方法中实现
#pragmamark-UIScrollViewdelegate
-（void）scrollViewDidScroll:
（UIScrollView*）scrollView{
//1.获取y轴的位移
CGFloatoffsetY=scrollView.contentOffset.y;
//先判断是向上滑动还是向下滑动
if（offsetY>0）{//向上滑动
_imgView.top=-offsetY*0.5;
//改_titleLabel的y坐标
}else{
//1.计算图片增大之后的高度
//ABS取绝对值
CGFloatheight=ABS（offsetY）+ImageHeight;
//原宽度/原高度=放大宽度（?
）/放大高度
//2.计算图片增大之后的宽度
CGFloatwidth=kScreenWidth/ImageHeight*height;
//3.图片的x坐标向左偏移:
增加宽度的一半
CGRectframe=CGRectMake（-（width-kScreenWidth）/2,0,width,height）;
_imgView.frame=frame;
}
_titleLabel.bottom=_imgView.bottom;
}
三、KVO实现大图、小图海报同步滑动
在PosterView类中，主要实现方法如下：
#pragmamark-KVO观察者方法
-（void）observeValueForKeyPath:
（NSString*）keyPath
ofObject:
（id）object//被观察对象
change:
（NSDictionary*）change//属性值
context:
（void*）context{
if（[keyPathisEqualToString:
@"currentItem"]）{
//取得变化之后的属性值
NSNumber*newValue=[changeobjectForKey:
@"new"];//取新值
NSIntegeritem=[newValueintegerValue];
NSIndexPath*indexPath=[NSIndexPathindexPathForItem:
iteminSection:
0];
//1.被观察的对象是大图
if（object==_posterCollectionView&&
_indexCollectionView.currentItem!
=item）{
//会触发KVO，导致递归循环
_indexCollectionView.currentItem=item;
//可以将一个单元格滚动到中间
[_indexCollectionViewscrollToItemAtIndexPath:
indexPathatScrollPosition:
UICollectionViewScrollPositionCenteredHorizontallyanimated:
YES];
}
//2.被观察的对象是小图
elseif（object==_indexCollectionView&&
_posterCollectionView.currentItem!
=item）{
//会触发KVO
_posterCollectionView.currentItem=item;
[_posterCollectionViewscrollToItemAtIndexPath:
indexPathatScrollPosition:
UICollectionViewScrollPositionCenteredHorizontallyanimated:
YES];
}
//3.修改电影标题
Movie*movie=self.data[item];
_footerLabel.text=movie.title;
}
}
//复写这个方法，这个方法一调用，说明有数据传进来
-（void）setData:
（NSArray*）data{
if（_data!
=data）{
[_datarelease];
_data=[dataretain];
[_posterCollectionViewsetData:
data];
[_indexCollectionViewsetData:
data];
//显示第一个电影标题
if（data.count>0）{
Movie*movie=[dataobjectAtIndex:
0];
_footerLabel.
升级会员 