Swift3.0 顶部图片下拉放大

许多App都有这种在 “个人中心” 页面顶部图片下拉放大的效果,体验效果不错!
做出这种效果出来没有什么难度,这里介绍下我弄得方法。

我自己的实现方法就是在 UITableView 顶部上方添加加上一张图片(注意:我没有使用 tableHeaderView ,使用 tableHeaderView 的方法我暂时实现不了,不好控制),在图片上加上一个小头像、昵称和个性签名,然后就通过 ScrollView 代理来实现顶部图片的下拉放大。

全部代码直接奉上:

TestViewController.swift
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
// TestViewController.swift
// Mo
// Created by moxiaohao on 2016/10/25.
// Copyright © 2016年 moxiaohao. All rights reserved.
//
import UIKit
class TestViewController: UIViewController, UIGestureRecognizerDelegate, UITableViewDelegate, UITableViewDataSource {
private let topImageHeight: CGFloat = 200
private var topImage: UIImageView?
private var myAvatar: UIImageView?
private var myNickName: UILabel?
private var myBio: UILabel?
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
self.automaticallyAdjustsScrollViewInsets = false
createTableView()
}
func createTableView() {
//头像
let avatar = UIImageView(frame: CGRect(x: self.view.frame.width / 2 - 40, y: 75, width: 80, height: 80))
avatar.image = UIImage(named: "me")
avatar.contentMode = .scaleAspectFill
avatar.layer.cornerRadius = avatar.frame.width / 2.0
avatar.layer.borderColor = UIColor.white.cgColor
avatar.layer.borderWidth = 1.5
avatar.clipsToBounds = true
myAvatar = avatar
//昵称
let nickName = UILabel(frame: CGRect(x: self.view.frame.width / 2 - 40, y: 157, width: 80, height: 21))
nickName.text = "FOUR"
nickName.textColor = UIColor.white
nickName.textAlignment = .center
nickName.font = UIFont.systemFont(ofSize: 14.0)
myNickName = nickName
//个性签名
let bio = UILabel(frame: CGRect(x: self.view.frame.width / 2 - 144, y: 175, width: 288, height: 21))
bio.text = "有一天,带你去旅行哦!有一天,带你去旅行哦!有一天,带你去旅行哦!"
bio.textColor = UIColor.white
bio.textAlignment = .center
bio.font = UIFont.systemFont(ofSize: 12.0)
myBio = bio
//顶部图片
let topImg = UIImageView(frame: CGRect(x: 0, y: -topImageHeight, width: view.bounds.width, height: topImageHeight))
topImg.image = UIImage(named: "secret")
topImg.contentMode = .scaleAspectFill
topImg.clipsToBounds = true
topImage = topImg
topImage?.addSubview(myAvatar!)
topImage?.addSubview(myNickName!)
topImage?.addSubview(myBio!)
//tableView
let tableView = UITableView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height),style: .grouped)
tableView.delegate = self
tableView.dataSource = self
view.addSubview(tableView)
tableView.contentInset = UIEdgeInsetsMake(topImageHeight, 0, 0, 0)
tableView.addSubview(topImage!)
}
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 4
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 10
}
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
return 2
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cellID = "cellID"
var cell = tableView.dequeueReusableCell(withIdentifier: cellID)
if cell == nil {
cell = UITableViewCell(style: .default, reuseIdentifier: cellID)
}
cell!.textLabel!.text = "cell\(indexPath.row)"
return cell!
}
//ScrollView代理,以实现下拉图片放大
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let offY = scrollView.contentOffset.y
if offY < -topImageHeight {
topImage?.frame.origin.y = offY
topImage?.frame.size.height = -offY
myAvatar?.frame.origin.y = -offY - topImageHeight + 75
myNickName?.frame.origin.y = -offY - topImageHeight + 157
myBio?.frame.origin.y = -offY - topImageHeight + 175
}
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}

来看看实现的效果图:
图片下拉放大

分享到 评论