人机交互技术实验报告

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