iOS开发-UITableView顶部图片下拉放大

jopen 9年前

关于顶部图片下拉放大,在用户展示的个人中心显示用户个人头像信息,设置UITableView的headerView实现,UITableView继承自UIScrollView,同样的设置UIScrollView的顶部图片也可以实现同样的效果,简单看一下实现的效果:

控制器中设置需要的属性变量:

@property  (strong,nonatomic)  UITableView  *tableView;  @property  (strong,nonatomic)  NSArray      *data;  @property   (strong,nonatomic) UIView       *tableHeaderView;  @property  (strong,nonatomic)  UIImageView  *imageView;

初始化属性:

-(UITableView *)tableView{      if (!_tableView) {          _tableView=[[UITableView alloc]initWithFrame:CGRectMake(0, 0,SCREENWIDTH, SCREENHEIGHT)];          _tableView.delegate=self;          _tableView.dataSource=self;          _tableView.showsVerticalScrollIndicator=NO;           _tableView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;          [_tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:CellIdetifier];      }      return _tableView;  }    -(UIView *)tableHeaderView{      if (!_tableHeaderView) {          _tableHeaderView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0,SCREENWIDTH, 100)];      }      return _tableHeaderView;  }    -(UIImageView *)imageView{      if (!_imageView) {          _imageView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, SCREENWIDTH, 100)];          _imageView.autoresizingMask=UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;          _imageView.clipsToBounds=YES;          _imageView.contentMode=UIViewContentModeScaleAspectFill;      }      return _imageView;  }

UITableViewDelegate实现:

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{      return 1;  }    -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{      return [self.data count];  }    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{      UITableViewCell  *cell=[tableView dequeueReusableCellWithIdentifier:CellIdetifier];      [cell.textLabel setText:self.data[indexPath.row]];      return cell;  }

ViewDidLoad中初始化imageView:

self.data=@[@"FlyElephant",@"博客园",@"UITableView图片放大",@"http://www.cnblogs.com/xiaofeixiang/"];      self.imageView.image=[UIImage imageNamed:@"Girl"];      self.imageView.contentMode=UIViewContentModeScaleAspectFill;      [self.tableHeaderView addSubview:self.imageView];      self.tableView.tableHeaderView=self.tableHeaderView;      [self.view addSubview:self.tableView];

在UITableViewView向下拉动的过程中,改变imageView的位置:

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{      CGPoint offset = scrollView.contentOffset;      if (offset.y < 0) {          CGRect rect =self.tableHeaderView.frame;          rect.origin.y = offset.y;          rect.size.height =CGRectGetHeight(rect)-offset.y;          self.imageView.frame = rect;          self.tableHeaderView.clipsToBounds=NO;      }  }

实现起来比较简单,希望对有需要的人有所帮助~

来自: http://www.cnblogs.com/xiaofeixiang/p/5129073.html