1. 程式人生 > >iOS個人頁面圖片下拉放大效果

iOS個人頁面圖片下拉放大效果

    在研究蘋果原生 UIImageView 控制元件的時候,知道有一個屬性叫 contentMode那這個屬性是幹嘛的呢?和下拉拖動圖放大有什麼關係呢?我們先來看一下效果圖再說:


以上效果核心的設定只有一句self.headerView.contentMode = UIViewContentModeScaleAspectFill;就是將 UIImageView 的圖片展示模式進行更改,其實就是更換列舉.

typedef NS_ENUM(NSInteger, UIViewContentMode) {
    UIViewContentModeScaleToFill,
    UIViewContentModeScaleAspectFit,      
    UIViewContentModeScaleAspectFill,     
    UIViewContentModeRedraw,              
    UIViewContentModeCenter,              
    UIViewContentModeTop,
    UIViewContentModeBottom,
    UIViewContentModeLeft,
    UIViewContentModeRight,
    UIViewContentModeTopLeft,
    UIViewContentModeTopRight,
    UIViewContentModeBottomLeft,
    UIViewContentModeBottomRight,
};
我們可以看到,對於 UIImageView 而言,預設的圖片展示模式是 UIViewContentModeScaleToFill (縮放填充) ,而我們所換的 UIViewContentModeScaleAspectFill 填充方式則是始終根據UIImageView的最長邊為基準來等比例縮放展示圖片的.當下拉改動 UIImageView 的高度長度逐漸超過寬度時,圖片就又以 UIImageView 的寬度為基準來展示圖片,對應的圖片(提供的圖片必須是寬度大於高度)的寬度由於等比例縮放顯示不全,同時圖片也會以中心點為準整體放大.下面展示核心程式碼:

#import "HWMineVC.h"

@interface HWMineVC () <UITableViewDelegate,UITableViewDataSource>

/**
 *  個人頁面圖片
 */
@property (nonatomic, strong) UIImageView * headerView;

/**
 *  設定檢視
 */
@property (nonatomic, strong) UITableView * settingView;

@end

@implementation HWMineVC

+ (instancetype)mineVC {
    
    return [[self alloc] init];
}

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor whiteColor];
    
    [self initailHeaderView];
    [self initailSettingView];
    
}

- (void)initailHeaderView {
    
    self.headerView = [[UIImageView alloc] init];
    self.headerView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 250);
    self.headerView.contentMode = UIViewContentModeScaleAspectFill;
    self.headerView.image = [UIImage imageNamed:@"header"];
    [self.view addSubview:self.headerView];
}

- (void)initailSettingView {
    
    self.settingView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStyleGrouped];
    self.settingView.backgroundColor = [UIColor clearColor];
    self.settingView.delegate = self;
    self.settingView.dataSource = self;
    self.settingView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0);
    [self.settingView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cellID"];
    [self.view addSubview:self.settingView];
}

#pragma mark - < UITableViewDatasource >
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    
    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    UITableViewCell * settingCell = [tableView dequeueReusableCellWithIdentifier:@"cellID" forIndexPath:indexPath];
    settingCell.textLabel.text = @"測試ing";
    return settingCell;
}

#pragma mark - < UITableViewDelegate >
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    CGRect newFrame = self.headerView.frame;
    CGFloat settingViewOffsetY = 50 - scrollView.contentOffset.y;
    newFrame.size.height = settingViewOffsetY;
    
    if (settingViewOffsetY < 50) {
        newFrame.size.height = 50;
    }
    self.headerView.frame = newFrame;
}

@end