swift 实现导航栏随tableView滑动颜色渐变、头部图片往上移动效果和往下放大效果

最新推荐文章于 2022-01-06 11:11:05 发布

原创

最新推荐文章于 2022-01-06 11:11:05 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ios #swift #ui #导航栏 #放大移动效果

需求：实现导航栏随tableView滑动颜色渐变、头部图片往上移动效果和往下放大效果

最终效果如下：

准备工作：先用storyboard创建一个视图控制器(UIViewController)，加入视图（TableView），并添加约束

1、用imageView作头部背景图片，并保存初始frame

 //图片
        self.bgView = UIImageView.init(frame: CGRect.init(x: 0, y: 0, width: Screen_Width, height: Screen_Width*0.751))
        self.bgView.image = UIImage.init(named: "11")
        self.view.addSubview(self.bgView)
        self.view.sendSubviewToBack(self.bgView)
        
        self.originalFrame = self.bgView.frame

2、创建tableView的透明头部，目的是显露出头部的背景图片

//头部
        let headerView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: Screen_Width, height: 160))
        headerView.backgroundColor = UIColor.clear
        self.tableVIew.tableHeaderView = headerView

3、顶部的导航栏可以使用系统的，也可以使用自定义的导航栏

1）使用系统导航栏：需要在storyboard或者代码设置导航栏属性

（1）将导航栏设置为透明并去掉下方黑线

//系统导航栏，利用push跳转，但是有个问题是状态栏的颜色未渐变
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        self.navigationController?.navigationBar.setBackgroundImage(UIImage.init(), for: .default)