Fork me on GitHub

iOS tutorial 11:照片横屏滑动

知识点: UICollectionView UIVisualEffectView UICollectionViewDataSource

  • 新建项目Carousel Effect
  • 在IB构建UI。Collection View 里的 Scroll Direction 设置成水平滚动。UIVisualEffectView是用来添加模糊效果的,也可以使用类似如下的代码构建:

    1
    2
    3
    4
    let blurEffect = UIBlurEffect(style: .dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = view.bounds
    backgroundImageView.addSubview(blurEffectView)
  • 创建数据类Interest

  • 创建UICollectionViewCell
  • 实现UICollectionViewDataSource的方法(有点类似UITableViewDataSource)。
    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
    class ViewController: UIViewController, UICollectionViewDataSource {

    @IBOutlet weak var backgroundImageView: UIImageView!
    @IBOutlet weak var collectionView: UICollectionView!

    var interests = Interest.createInterests()

    override func viewDidLoad() {
    super.viewDidLoad()

    collectionView.dataSource = self
    collectionView.dataSource = self
    }

    override var preferredStatusBarStyle : UIStatusBarStyle {
    return UIStatusBarStyle.lightContent
    }

    func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 1
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return interests.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let CellIdentifier = "InterestCell"
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CellIdentifier, for: indexPath) as! InterestCollectionViewCell

    cell.interest = self.interests[indexPath.item]

    return cell

    }

    }

详细代码: Carousel Effect

参考:30DaysofSwift

坚持原创技术分享,您的支持将鼓励我继续创作!
  • 本文标题: iOS tutorial 11:照片横屏滑动
  • 本文作者: AndyRon
  • 发布时间: 2017年08月19日 - 22:10
  • 最后更新: 2018年11月07日 - 19:50
  • 本文链接: http://andyron.com/2017/ios-tutorial-11.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!