By

文章目录
  1. 1. 效果图
  2. 2. 创建tableView
  3. 3. 实现代理方法
  4. 4. 自定义titleView
  5. 5. 监听偏移量

github地址: https://github.com/corderguo/ChangeNavTitleImage
本文地址: http://coderperson.com/2016/04/12/iOS-ChangeNavImg/
欢迎转载，请注明出处，谢谢。

效果图

创建tableView

1
2
3
4
5
6
7
8
9
10
// 我是以懒加载的形式创建
private lazy var tableView: UITableView = {
        let tableView = UITableView(frame: self.view.bounds)
        tableView.dataSource = self
        tableView.delegate   = self
        return tableView
    }()
// 以extension的形式遵循代理 并在其中实现代理方法
extension ViewController : UITableViewDataSource,UITableViewDelegate {
}

注意:

  • 协议的写法，不需要写<>
  • 刚遵循完协议的时候会报错，不用担心，那是因为还没实现代理方法
  • Swift中的懒加载和OC中的懒加载区别还是挺大的

这里要注意，我是在viewDidLoad方法中注册cell的

1
tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: ID)

实现代理方法

1
2
3
4
5
6
7
8
9
10
11
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
    {
        return 30
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
    {
        let cell = tableView.dequeueReusableCellWithIdentifier(ID, forIndexPath: indexPath)
        cell.textLabel?.text = "骚客--\(indexPath.row):http://coderperson.com"
        return cell
    }

到此为止我们的基本界面搭建完成了，下面就是关键部分了。

自定义titleView

1
2
3
4
5
6
7
8
9
10
11
// 首先定义imageView的属性，用来操控图片的大小改变
var imageV : UIImageView?
// 创建
let titleV : UIView = UIView()
navigationItem.titleView = titleV
imageV = UIImageView(frame: CGRectMake(0, 0, 70, 70))
imageV?.image = UIImage(named: "100.jpg")
imageV?.layer.cornerRadius = 35
imageV?.layer.masksToBounds = true
imageV?.center = CGPointMake(titleV.center.x, 0)
titleV.addSubview(imageV!)

这里不要自己单独向navigationBar上添加子控件，只需要修改titleView即可

监听偏移量

这里通过监听偏移量，实现的大小缩放动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
func scrollViewDidScroll(scrollView: UIScrollView) {
        
        // 偏移量，相对于contentView，你也可以不加scrollView.contentInset.top，即相对scrollView，然后适当调整即可
        let offsetY = scrollView.contentOffset.y + scrollView.contentInset.top
        var scale:CGFloat = 1.0
        if offsetY < 0  // 下拉
        {
            scale = min(1.5, 1.0 - offsetY / 300.0) // 300值可以自己调整
        } else if offsetY > 0
        {
            // 为了防止缩小过度，给一个最小值为0.45，其中0.45 = 31.5 / 70.0，表示
            // 头像最小是31.5像素
            scale = max(0.45, 1 - offsetY / 300);
        }
        // 保证缩放后y的坐标不会改变
        imageV?.transform = CGAffineTransformMakeScale(scale, scale)
        var frame = imageV?.frame
        frame?.origin.y = -(imageV?.layer.cornerRadius)! / 2.0
        imageV?.frame = frame!
        
        // 导航栏颜色渐变
        changeNavColor(offsetY)
        
    }

单独抽出来的颜色渐变的方法

1
2
3
4
5
6
7
8
9
10
11
12
private func changeNavColor(offsetY:CGFloat) {
       
       if offsetY >= 0
       {
           self.navigationController?.navigationBar.alpha = 1.0
       }
       else if offsetY < 0
       {
           self.navigationController?.navigationBar.alpha = 1.0 - -offsetY / 300.0
       }
       
   }

到此为止你已经可以看到自己想要的效果了。

Done！

我们都是热爱移动开发的程序猿，加入我们，共同提高：

文章目录
  1. 1. 效果图
  2. 2. 创建tableView
  3. 3. 实现代理方法
  4. 4. 自定义titleView
  5. 5. 监听偏移量