0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

AppStoreみたいなスクロールをUIKit+AutoLayoutで

Posted at

供養です。ライブラリ使ってまふ。
kuyou.gif

import UIKit
import SnapKit
import Then

class AppStoreLikeScrollViewController: BaseViewController {
    // MARK: - view
    
    private let titleLabel = UILabel().then { (v) in
        v.translatesAutoresizingMaskIntoConstraints = false
        v.font = .preferredFont(forTextStyle: .largeTitle)
        v.text = "タイトル"
        v.textColor = .darkText
    }
    
    private func scrollTest() -> UIView {
        let stack = UIStackView().then { (v) in
            v.translatesAutoresizingMaskIntoConstraints = false
            v.distribution = .equalSpacing
            v.spacing = 8
        }
        let scroll = UIScrollView().then { (v) in
            v.translatesAutoresizingMaskIntoConstraints = false
            v.clipsToBounds = false
            v.isPagingEnabled = true
            
            v.addSubview(stack)
            stack.snp.makeConstraints { (make) in
                make.edges.equalToSuperview()
                make.height.equalToSuperview()
            }
            
            for _ in 0..<10 {
                let cell = UIView().then { (v) in
                    v.translatesAutoresizingMaskIntoConstraints = false
                    v.backgroundColor = .gray
                    v.cornerRadius = 10
                }
                
                stack.addArrangedSubview(cell)
                cell.snp.makeConstraints { (make) in
                    make.width.equalTo(v).offset(-8)
                }
            }
        }
        return UIView().then { (v) in
            v.translatesAutoresizingMaskIntoConstraints = false
            
            v.addSubview(scroll)
            scroll.snp.makeConstraints { (make) in
                make.height.equalTo(200)
                make.left.equalToSuperview()
                make.right.equalToSuperview().offset(8)
                make.top.bottom.equalToSuperview()
            }
        }
    }
    
    private func mainStack() -> UIStackView {
        let scrollTest = self.scrollTest()
        return UIStackView().then { (v) in
            v.translatesAutoresizingMaskIntoConstraints = false
            v.axis = .vertical
            v.spacing = 16
            
            v.addArrangedSubview(titleLabel)
            v.addArrangedSubview(scrollTest)
        }
    }
    
    private func scroll() -> UIScrollView {
        let mainStack = self.mainStack()
        
        return UIScrollView().then { (v) in
            v.translatesAutoresizingMaskIntoConstraints = false
            
            v.addSubview(mainStack)
            
            mainStack.snp.makeConstraints { (make) in
                make.edges.equalToSuperview().inset(UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16))
                make.width.equalToSuperview().offset(-32)
            }
        }
    }
    
    private func setupLayout() {
        if #available(iOS 13.0, *) {
            view.backgroundColor = .systemBackground
        } else {
            view.backgroundColor = .white
        }
        
        let scroll = self.scroll()
        
        view.addSubview(scroll)
        
        scroll.snp.makeConstraints { (make) in
            make.edges.equalTo(view.safeAreaLayoutGuide)
        }
    }
    
    // MARK: - variables
    
    override func loadView() {
        super.loadView()
        
        setupLayout()
    }
}
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?