一般我們看到的下拉放大頂部視圖，很多是直接加載tableView或者collectionView上的，(這里以tableView舉例)只要一向下拉，視圖立馬就會(huì)產(chǎn)生放大效果。大致原理是先設(shè)置tableView的內(nèi)容偏移，假如向下偏移100，那么實(shí)際內(nèi)容就會(huì)從距離向下100的位置開(kāi)始展示，而圖片就放在偏移區(qū)，通過(guò)設(shè)置圖片的y值為-100就可以了。然后通過(guò)滾動(dòng)視圖的代理方法，更改frame。
而我想達(dá)到的是剛開(kāi)始下拉時(shí)并不產(chǎn)生放大效果，而是展示圖片的更多信息，當(dāng)達(dá)到理想的高度之后，再對(duì)圖片進(jìn)行縮放。例如支付寶的個(gè)人主頁(yè)那樣的效果，你可以根據(jù)后面的路徑看一下效果：路徑：支付寶->我的->個(gè)人中心->個(gè)人主頁(yè)
而一般的所使用的方法不管是上面說(shuō)的那樣，還是直接利用tableHeadView都達(dá)不到我想要的效果。
向下拉可以看到更多的信息，顯然，tableView的內(nèi)容不是同級(jí)的。因?yàn)槿绻峭?jí)的話(huà)，會(huì)跟著一起滾動(dòng)。。。
我找了好半天，才發(fā)現(xiàn)竟是放在tableView的背景視圖上最為合適。給大家分享一下，下面就開(kāi)始詳細(xì)的教程。
1. 先定義所需要的屬性
//下面這兩個(gè)宏定義一個(gè)是頂部視圖高度 一個(gè)是圖片容器原始的Rect 可以看出 一開(kāi)始想只顯示一半的圖片
#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ě)到方法里了，后面都有具體的實(shí)現(xiàn)
- (void)viewDidLoad {
[super viewDidLoad];
//初始化表格視圖
[self initTableView];
//初始化數(shù)據(jù)源
[self initDataSource];
//初始化圖片資源
[self initImageView];
}
初始化表格
注意：表格 視圖 的背景視圖 不管多大，只要設(shè)置了，都會(huì)充滿(mǎn)整個(gè)tableView 因此我只new了一個(gè)，并未有設(shè)置大小。以下是引用官方原話(huà)
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位置開(kāi)始，而不是頂滿(mǎn)整個(gè)tableView
self.tableView.contentInset = UIEdgeInsetsMake(kTopViewHeight, 0, 0, 0);
self.tableView.scrollIndicatorInsets = self.tableView.contentInset;
//直接new一個(gè)
UIView *backView = [UIView new];
self.tableView.backgroundView = backView;
backView.backgroundColor = [UIColor whiteColor];
self.backView = backView;
[self.view addSubview:self.tableView];
}
初始化數(shù)據(jù)源
這里造了個(gè)假數(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];
}
這里給大家一個(gè)圖片資源
3.實(shí)現(xiàn)代理方法
CGPoint point = scrollView.contentOffset;
//我這里是達(dá)到圖片容器尺寸開(kāi)始滾動(dòng)的，我設(shè)置的就是2倍高
if (point.y < -2.0 * kTopViewHeight) {
CGRect rect = self.imageView.frame;
rect.size.height = -point.y;
self.imageView.frame = rect;
}else{//如果不滿(mǎn)足，我這里做了一個(gè)判斷，如果沒(méi)回到原來(lái)的位置大小，仍然重置了frame。因此測(cè)試過(guò)程中，只寫(xiě)上面的代碼，圖片拉伸反彈回去不能正確顯示原來(lái)的內(nèi)容區(qū)域
if (!CGRectEqualToRect(self.imageView.frame, orignalRect)) {
self.imageView.frame = orignalRect;
}
}
}```
###4.總結(jié)
1.將圖片放在tableView 的背景視圖上
2.圖片的顯示模式按比例填充
3.實(shí)現(xiàn)滾動(dòng)視圖的代理方法，改變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;
}
