人机交互技术实验报告
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;