一般我們看到的下拉放大頂部視圖，很多是直接加載tableView或者collectionView上的，(這里以tableView舉例)只要一向下拉，視圖立馬就會產(chǎn)生放大效果。大致原理是先設(shè)置tableView的內(nèi)容偏移，假如向下偏移100，那么實際內(nèi)容就會從距離向下100的位置開始展示，而圖片就放在偏移區(qū)，通過設(shè)置圖片的y值為-100就可以了。然后通過滾動視圖的代理方法，更改frame。
而我想達到的是剛開始下拉時并不產(chǎn)生放大效果，而是展示圖片的更多信息，當達到理想的高度之后，再對圖片進行縮放。例如支付寶的個人主頁那樣的效果，你可以根據(jù)后面的路徑看一下效果：路徑：支付寶->我的->個人中心->個人主頁
而一般的所使用的方法不管是上面說的那樣，還是直接利用tableHeadView都達不到我想要的效果。
向下拉可以看到更多的信息，顯然，tableView的內(nèi)容不是同級的。因為如果是同級的話，會跟著一起滾動。。。
我找了好半天，才發(fā)現(xiàn)竟是放在tableView的背景視圖上最為合適。給大家分享一下，下面就開始詳細的教程。
1. 先定義所需要的屬性
//下面這兩個宏定義一個是頂部視圖高度 一個是圖片容器原始的Rect 可以看出 一開始想只顯示一半的圖片
#define kTopViewHeight 100.0
#define orignalRect CGRectMake(0, 0, self.tableView.frame.size.width, 2 * kTopViewHeight)
@interface ViewController ()<UITableViewDataSource,UITableViewDelegate,UIScrollViewDelegate>
@property (nonatomic, strong)UITableView *tableView;//表格
@property (nonatomic, strong)NSArray *dataSource;//數(shù)據(jù)源
@property (nonatomic, strong)UIImageView *imageView;//圖片
@property (nonatomic, strong)UIView *backView;//背景視圖
@end
2.初始化相關(guān)內(nèi)容
這里我寫到方法里了，后面都有具體的實現(xiàn)
- (void)viewDidLoad {
[super viewDidLoad];
//初始化表格視圖
[self initTableView];
//初始化數(shù)據(jù)源
[self initDataSource];
//初始化圖片資源
[self initImageView];
}
初始化表格
注意：表格 視圖 的背景視圖 不管多大，只要設(shè)置了，都會充滿整個tableView 因此我只new了一個，并未有設(shè)置大小。以下是引用官方原話
the background view will be automatically resized to track the size of the table view. this will be placed as a subview of the table view behind all cells and headers/footers. default may be non-nil for some devices.
-(void)initTableView{
self.tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
self.tableView.backgroundColor = [UIColor clearColor];
self.tableView.dataSource = self;
self.tableView.delegate = self;
self.tableView.tableFooterView = [UIView new];
//這一步還是要有的，內(nèi)容從kTopViewHeight位置開始，而不是頂滿整個tableView
self.tableView.contentInset = UIEdgeInsetsMake(kTopViewHeight, 0, 0, 0);
self.tableView.scrollIndicatorInsets = self.tableView.contentInset;
//直接new一個
UIView *backView = [UIView new];
self.tableView.backgroundView = backView;
backView.backgroundColor = [UIColor whiteColor];
self.backView = backView;
[self.view addSubview:self.tableView];
}
初始化數(shù)據(jù)源
這里造了個假數(shù)據(jù)
-(void)initDataSource{
self.dataSource = @[@{@"name1":@"name1vlaue"},
@{@"name2":@"name2vlaue"},
@{@"name3":@"name3vlaue"},
@{@"name4":@"name4vlaue"},
@{@"name5":@"name5vlaue"},
@{@"name6":@"name6vlaue"},
@{@"name7":@"name7vlaue"},
@{@"name8":@"name8vlaue"}];
}
初始化圖片資源
-(void)initImageView{
self.imageView = [[UIImageView alloc]initWithFrame:orignalRect];
self.imageView.image = [UIImage imageNamed:@"timg.jpeg"];
self.imageView.contentMode = UIViewContentModeScaleAspectFill;
[self.backView addSubview:self.imageView];
}
這里給大家一個圖片資源
3.實現(xiàn)代理方法
CGPoint point = scrollView.contentOffset;
//我這里是達到圖片容器尺寸開始滾動的，我設(shè)置的就是2倍高
if (point.y < -2.0 * kTopViewHeight) {
CGRect rect = self.imageView.frame;
rect.size.height = -point.y;
self.imageView.frame = rect;
}else{//如果不滿足，我這里做了一個判斷，如果沒回到原來的位置大小，仍然重置了frame。因此測試過程中，只寫上面的代碼，圖片拉伸反彈回去不能正確顯示原來的內(nèi)容區(qū)域
if (!CGRectEqualToRect(self.imageView.frame, orignalRect)) {
self.imageView.frame = orignalRect;
}
}
}```
###4.總結(jié)
1.將圖片放在tableView 的背景視圖上
2.圖片的顯示模式按比例填充
3.實現(xiàn)滾動視圖的代理方法，改變frame
****
其他非主要代碼，表格的代理方法
(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return self.dataSource.count;
}(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
if (!cell) {
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:@"cell"];
}
NSDictionary *dict = self.dataSource[indexPath.row];
cell.textLabel.text = dict.allKeys.firstObject;
cell.detailTextLabel.text = dict.allValues.firstObject;
return cell;
}
