人机交互技术实验报告Word下载.docx
《人机交互技术实验报告Word下载.docx》由会员分享,可在线阅读,更多相关《人机交互技术实验报告Word下载.docx(9页珍藏版)》请在冰豆网上搜索。
苹果一体机
3.实验容简述:
(1)封装实现评分星星视图。
(2)实现下拉新闻列表,头条图片放大。
(3)KVO实现大图、小图海报同步滑动。
(4)总结创建单元格对象的三种方式。
4.实现过程
一、封装实现评分星星视图
创建starView类
starView.h文件容:
#import<
UIKit/UIKit.h>
@interfacestarView:
UIView{
UIView*_yellowView;
//金色星星
UIView*_grayView;
//灰色星星
}
//自动生成一个带下划线_的,并且以属性名命名的实例变量
//属性名:
name,自动生成_name
@property(nonatomic,assign)CGFloatrating;
//评分
@end
starView.m文件容:
#import"
starView.h"
UIViewExt.h"
@implementationstarView
//通过代码创建对象会调用这个方法
-(id)initWithFrame:
(CGRect)frame{
self=[superinitWithFrame:
frame];
if(self){
[self_createView];
}
returnself;
//通过xib创建对象会调用这个方法
-(void)awakeFromNib{
//创建子视图
-(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];
_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;
二、实现下拉新闻列表,头条图片放大
在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<
NSString*,id>
*)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:
//3.修改电影标题
Movie*movie=self.data[item];
_footerLabel.text=movie.title;
//复写这个方法,这个方法一调用,说明有数据传进来
-(void)setData:
(NSArray*)data{
if(_data!
=data){
[_datarelease];
_data=[dataretain];
[_posterCollectionViewsetData:
data];
[_indexCollectionViewsetData:
//显示第一个电影标题
if(data.count>
0){
Movie*movie=[dataobjectAtIndex:
_footerLabel.