iOS 页面滑动与标题切换颜色渐变的联动效果实例

2020-01-18 22:14:59王冬梅

话不多说,直接上图,要实现类似如下效果。

ios,导航栏滑动渐变,标题栏渐变

这个效果非常常见,这里着重讲讲核心代码

封装顶部的PageTitleView

封装构造函数

封装构造函数,让别人在创建对象时,就传入其实需要显示的内容 frame:创建对象时确定了

    frame就可以直接设置子控件的位置和尺寸 isScrollEnable:是否可以滚动。某些地方该控件是可以滚动的。 titles:显示的所有标题

// MARK:- 构造函数
init(frame: CGRect, isScrollEnable : Bool, titles : [String]) {
selfisScrollEnable = isScrollEnable
selftitles = titles
superinit(frame: frame)
}

设置UI界面

设置UI界面

     添加UIScrollView,如果标题过多,则可以滚动 初始化所有的Label,用于显示标题。并且给label添加监听手势 添加顶部线和滑块的View

实现相对来说比较简单,这里代码从略

封装底部的PageCotentView

封装构造函数

封装构造函数,让别人在创建对象时,就传入其实需要显示的内容

    所有用于显示在UICollectionView的Cell的所有控制器 控制器的父控制器

// MARK:- 构造函数
init(frame: CGRect, childVcs : [UIViewController], parentViewController : UIViewController) {
selfchildVcs = childVcs
selfparentViewController = parentViewController

superinit(frame: frame)
}

设置UI界面内容

设置UI界面

    将所有的子控制器添加到父控制器中 添加UICollectionView,用于展示内容

// MARK:- 懒加载属性
private lazy var collectionView : UICollectionView = {
// 1.创建布局
let layout = UICollectionViewFlowLayout()
layout.itemSize = self.bounds.size
layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = 0
layout.scrollDirection = .Horizontal
// 2.创建collectionView
let collectionView = UICollectionView(frame: self.bounds, collectionViewLayout: layout)
collectionView.showsHorizontalScrollIndicator = false
collectionView.pagingEnabled = true
collectionView.bounces = false
collectionView.scrollsToTop = false
collectionView.dataSource = self
collectionView.delegate = self
collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: kContentCellID)
return collectionView
}()
private func setupUI() {
// 1.添加所有的控制器
for childVc in childVcs {
parentViewController?.addChildViewController(childVc)
}
// 2.添加collectionView
addSubview(collectionView)
}

实现UICollectionView的数据源方法

    在返回Cell的方法中,先将cell的contentView中的子控件都移除,防止循环引用 取出indexPath.item对应的控制器,将控制器的View添加到Cell的contentView中