NavgationBar隨着滑動顏色漸變效果的實現

上一篇博客說要仿寫半糖，框架已經搭好了http://www.cnblogs.com/bcblogs/p/5227522.html，今天來寫第一個界面

首先看了下第一個界面，可以用tableView來實現，當tableView滑動時，navgationbar的顏色從透明開始慢慢變到粉紅色

應該是tableView繼承的scrollView,可以在scrollView的代理里面得到tableView滑動的距離，根據距離來改變透明度，so easy

HomeViewController里的代碼

import UIKit

class HomeViewController: UIViewController {

    private var tableView:UITableView!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        bulidTableView()
        settingNav()
    }
    
    private func settingNav(){
        //開始時將navigationBar的透明度設置為0
        self.navigationController?.navigationBar.alpha = 0
    }
    private func bulidTableView(){
        self.automaticallyAdjustsScrollViewInsets = false
        tableView = UITableView(frame: CGRectMake(0, 0, ScreenWidth, ScreenHeight-49), style:.Plain)
        tableView.delegate = self
        tableView.dataSource = self
        view.addSubview(tableView)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
}

extension HomeViewController:UITableViewDataSource,UITableViewDelegate,UIScrollViewDelegate{
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style:.Default, reuseIdentifier:"cell")
        cell.textLabel?.text = "測試"
        return cell
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 20
    }
    
    func scrollViewDidScroll(scrollView: UIScrollView) {
        let y = scrollView.contentOffset.y
        
        if(y <= 0){
            //往上滑動，透明度為0
            self.navigationController?.navigationBar.alpha = 0.0
        }else{
            //滑動到距離為100的時候才顯示完全
            if y/100 >= 1{
                return
            }
            print(y/100)
            self.navigationController?.navigationBar.alpha = (y)/100
        }
    }
}

運行效果如圖

好吧，一開始想的簡單了（是我想太多），開始的時候設置navgationbar的透明度不起作用，試着在viewwillappear里寫，也沒有用

只有在滑動一次之后才有作用，上網找了好久，也不明白這是怎么回事（知道的小伙伴可以評論里告訴我啊），后來還是用了比較蠢得方法

畫一張圖片....，代碼如下，extension文件夾下，多加個UIColor的擴展

import UIKit

class HomeViewController: UIViewController {

    private var tableView:UITableView!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        bulidTableView()
        settingNav()
    }
    
    private func settingNav(){
        //開始時將navigationBar的透明度設置為0
        self.navigationController?.navigationBar.alpha = 0
        
        self.navigationController?.navigationBar.setBackgroundImage(self.imageWitBgColor(UIColor.colorWithCustom(228, g: 57, b: 65, alpha: 0)), forBarMetrics:.Default)
        self.navigationController?.navigationBar.shadowImage = self.imageWitBgColor(UIColor.colorWithCustom(228, g: 57, b: 65, alpha: 0))
        
    }
    
    private func bulidTableView(){
        self.automaticallyAdjustsScrollViewInsets = false
        tableView = UITableView(frame: CGRectMake(0, 0, ScreenWidth, ScreenHeight-49), style:.Plain)
        tableView.delegate = self
        tableView.dataSource = self
        view.addSubview(tableView)
    }
    private func imageWitBgColor(color:UIColor) -> UIImage{
        let rect = CGRectMake(0, 0, 1, 1)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()
        CGContextSetFillColorWithColor(context,color.CGColor)
        CGContextFillRect(context,rect)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
}

extension HomeViewController:UITableViewDataSource,UITableViewDelegate,UIScrollViewDelegate{
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style:.Default, reuseIdentifier:"cell")
        cell.textLabel?.text = "測試"
        return cell
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 20
    }
    
    func scrollViewDidScroll(scrollView: UIScrollView) {
        let y = scrollView.contentOffset.y
        
        if(y <= 0){
            //往上滑動，透明度為0
            self.navigationController?.navigationBar.setBackgroundImage(self.imageWitBgColor(UIColor.colorWithCustom(228, g: 57, b: 65, alpha: 0)), forBarMetrics:.Default)
        }else{
            //滑動到距離為100的時候才顯示完全
            if y/100 >= 1{
                return
            }
            print(y/100)
            self.navigationController?.navigationBar.setBackgroundImage(self.imageWitBgColor(UIColor.colorWithCustom(228, g: 57, b: 65, alpha:y/100)), forBarMetrics:.Default)
        }
    }
}

運行效果

是吧，成功了，但是看到后面，導航欄的顏色太深了，這不符合我這完美主義者啊，所以還是用以前的navgationbar的alpha方法，只是在剛開始時將nav的背景圖片設置成透明

順便將畫圖片的方法寫進UIImage的擴展

import UIKit

class HomeViewController: UIViewController {

    private var tableView:UITableView!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        bulidTableView()
        settingNav()
    }
    
    private func settingNav(){
        //開始時將navigationBar的透明度設置為0
        self.navigationController?.navigationBar.setBackgroundImage(UIImage.imageWitBgColor(UIColor.colorWithCustom(228, g: 57, b: 65, alpha:0)), forBarMetrics:.Default)
        self.navigationController?.navigationBar.shadowImage = UIImage.imageWitBgColor(UIColor.colorWithCustom(228, g: 57, b: 65, alpha:0))
    }
    
    private func bulidTableView(){
        self.automaticallyAdjustsScrollViewInsets = false
        tableView = UITableView(frame: CGRectMake(0, 0, ScreenWidth, ScreenHeight-49), style:.Plain)
        tableView.delegate = self
        tableView.dataSource = self
        view.addSubview(tableView)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
}

extension HomeViewController:UITableViewDataSource,UITableViewDelegate,UIScrollViewDelegate{
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style:.Default, reuseIdentifier:"cell")
        cell.textLabel?.text = "測試"
        return cell
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 20
    }
    
    func scrollViewDidScroll(scrollView: UIScrollView) {
        let y = scrollView.contentOffset.y
        self.navigationController?.navigationBar.setBackgroundImage(nil, forBarMetrics:.Default)
        self.navigationController?.navigationBar.shadowImage = nil
        
        if(y <= 0){
            //往上滑動，透明度為0
            self.navigationController?.navigationBar.alpha = 0
        }else{
            //滑動到距離為100的時候才顯示完全
            if y/100 >= 1{
                return
            }
            self.navigationController?.navigationBar.alpha = y/100

        }
    }
}

運行效果

perfect，成功，感覺寫的好慢，不知道猴年馬月才能寫完了....，寫的慢的原因是我寫出了自己的想法和寫界面的過程，要是直接寫正確的代碼估計會很快

，下一篇估計講的是網絡請求，數據解析和cocoapods吧..