很多app的在有關(guān)于用戶信息的頁面中，都會有頭部下拉放大的效果，類似QQ空間一樣。還有想微信的聊天列表中，左滑會出現(xiàn)刪除的按鈕。今天呢和大家分享一下如何去實現(xiàn)這些小功能。
首先，我們先創(chuàng)建一個tableview
#define RGBACOLOR(r,g,b,a) [UIColor colorWithRed:(r)/255.0f green:(g)/255.0f blue:(b)/255.0f alpha:(a)]
#define ScreenWidth [UIScreen mainScreen].bounds.size.width
#define ScreenHeight [UIScreen mainScreen].bounds.size.height
@interface ViewController ()<UITableViewDelegate, UITableViewDataSource>
@property(nonatomic, strong)UITableView *tableView;
@property(nonatomic, strong)NSMutableArray *dataSourceArray;
@property(nonatomic, strong)UIImageView *headerBackView;
@property(nonatomic, strong)UIImageView *photoImageView;
@property(nonatomic, strong)UILabel *userNameLabel;
@property(nonatomic, strong)UILabel *introduceLabel;
@property(nonatomic, strong)UIView *tableViewHeaderView;
@property(nonatomic, assign)NSInteger imageHeight;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
self.navigationController.navigationBar.hidden = YES;
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
_dataSourceArray = [NSMutableArray arrayWithObjects:@"誰念西風(fēng)獨自涼,蕭蕭黃葉閉疏窗,沉思往事立殘陽",@"被酒莫驚春睡重,賭書消得潑茶香,當(dāng)時只道是尋常",@"等閑變卻故人心,卻道故人心易變",@"誰念西風(fēng)獨自涼,蕭蕭黃葉閉疏窗,沉思往事立殘陽",@"被酒莫驚春睡重,賭書消得潑茶香,當(dāng)時只道是尋常",@"等閑變卻故人心,卻道故人心易變",nil];
}
-(void)loadView{
[super loadView];
_imageHeight = 160;//背景圖片的高度
_tableView = [[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStylePlain];
_tableView.dataSource = self;
_tableView.delegate = self;
[self.view addSubview:_tableView];
[self createTableViewHeaderView];
}
下拉放大效果
下拉放大效果，主要是將背景圖放在TableView的頭視圖上，通過下拉的距離從而去改變背景圖的frame
創(chuàng)建頭視圖
-(void)createTableViewHeaderView{
_tableViewHeaderView = [[UIView alloc] initWithFrame:(CGRectMake(0, 0, ScreenWidth, _imageHeight))];
_headerBackView = [[UIImageView alloc] init];
// 背景圖
_headerBackView.frame = CGRectMake(0, 0, ScreenWidth, _imageHeight);
_headerBackView.image = [UIImage imageNamed:@"bj1@2x.jpg"];
[_tableViewHeaderView addSubview:_headerBackView];
_photoImageView = [[UIImageView alloc] initWithFrame:CGRectMake((ScreenWidth - 62)/2, 15 , 62 , 62 )];
[self.tableViewHeaderView addSubview:self.photoImageView];
_photoImageView.layer.cornerRadius = 31 ;
_photoImageView.layer.masksToBounds = YES;
_photoImageView.image = [UIImage imageNamed:@"2.jpg"];
_userNameLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, _photoImageView.frame.origin.y + _photoImageView.frame.size.height + 8 , ScreenWidth, 20 )];
_userNameLabel.font = [UIFont fontWithName:@"iconfont" size:16 ];
_userNameLabel.text = @"納蘭性德";
_userNameLabel.textAlignment = 1;
_userNameLabel.font = [UIFont systemFontOfSize:16 ];
_userNameLabel.textColor = [UIColor whiteColor];
[_tableViewHeaderView addSubview:self.userNameLabel];
_introduceLabel = [[UILabel alloc] initWithFrame:CGRectMake((ScreenWidth - 229 )/2, _userNameLabel.frame.origin.y + _userNameLabel.frame.size.height + 10 , 229 , 16 )];
_introduceLabel.alpha = .7;
_introduceLabel.text = @"人生若只如初見，何事秋風(fēng)悲畫扇";
_introduceLabel.textAlignment = 1;
_introduceLabel.font = [UIFont systemFontOfSize:12 ];
_introduceLabel.textColor = _userNameLabel.textColor;
[_tableViewHeaderView addSubview:self.introduceLabel];
self.tableView.tableHeaderView = _tableViewHeaderView;
}
接下來，就是實現(xiàn)下拉放大功能了，在- (void)scrollViewDidScroll:(UIScrollView *)scrollView方法里做相應(yīng)的操作
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat width = self.view.frame.size.width; // 圖片寬度
CGFloat yOffset = scrollView.contentOffset.y; // 偏移的y值
if (yOffset < 0) {
CGFloat totalOffset = _imageHeight + ABS(yOffset);
CGFloat f = totalOffset / _imageHeight;
self.headerBackView.frame = CGRectMake(- (width * f - width) / 2, yOffset, width * f, totalOffset); //拉伸后的圖片的frame應(yīng)該是同比例縮放。
}
}
這樣就達(dá)到了我們想要的下拉放大效果
滑動UITableViewCell顯示多個按鈕
這個主要通過UITableViewRowAction這個類去實現(xiàn)
-(void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath這個方法里面的代碼只在iOS8.0以前版本有作用，也可以不實現(xiàn)。
-(void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
editingStyle = UITableViewCellEditingStyleDelete;//此處的EditingStyle可等于任意UITableViewCellEditingStyle，該行代碼只在iOS8.0以前版本有作用，也可以不實現(xiàn)。
}
設(shè)置相應(yīng)的按鈕。通過UITableViewRowAction來實現(xiàn)對應(yīng)的按鈕及按鈕的響應(yīng)事件，按鈕的排列順序可以通過更換按鈕的響應(yīng)事件在數(shù)組中的位置來調(diào)整
-(NSArray *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath
{
//設(shè)置刪除按鈕
UITableViewRowAction *deleteRowAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDestructive title:@"刪除"handler:^(UITableViewRowAction *action,NSIndexPath *indexPath) {
// 更新數(shù)據(jù)
[self.dataSourceArray removeObjectAtIndex:indexPath.row];
// 更新UI
[self.tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
}];
//設(shè)置收藏按鈕
UITableViewRowAction *collectRowAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"收藏"handler:^(UITableViewRowAction *action,NSIndexPath *indexPath) {
collectRowAction.backgroundColor = [UIColor greenColor];
//實現(xiàn)收藏功能
NSLog(@"收藏成功");
}];
//設(shè)置置頂按鈕
UITableViewRowAction *topRowAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"置頂" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) {
[self.dataSourceArray exchangeObjectAtIndex:indexPath.row withObjectAtIndex:0];
NSIndexPath *firstIndexPath = [NSIndexPath indexPathForRow:0 inSection:indexPath.section];
[tableView moveRowAtIndexPath:indexPath toIndexPath:firstIndexPath];
[_tableView reloadData];
}];
// 設(shè)置按鈕的背景顏色
topRowAction.backgroundColor = [UIColor blueColor];
collectRowAction.backgroundColor = [UIColor grayColor];
return @[deleteRowAction,collectRowAction,topRowAction];//可以通過調(diào)整數(shù)組的順序而改變按鈕的排序
}
這樣滑動顯示按鈕的效果就實現(xiàn)了。不過UITableViewRowAction這個類只有在iOS8以后才能用
界面如下：
界面圖
GIF動圖如下：
下拉放大與滑動顯示.gif
