以编程方式创建可滚动的下拉菜单（iOS/Swift）

Question

当点击“颜色”navigation bar button 时，应该会出现一个包含 15 种颜色的下拉菜单。下拉菜单将占据屏幕高度和宽度的一半。用户可以向下滚动下拉菜单以查看所有颜色。但是，我现在拥有的代码，单击导航栏按钮时没有任何反应。尽管出于测试目的，当我将滚动视图的背景颜色设置为更明显的颜色时，我看到滚动视图占据了屏幕宽度和高度的一半。当我在colorButtonTapped() 末尾添加view.addSubview(colorView) 时，我看到下拉显示占据了屏幕宽度的一半和屏幕的所有高度。

AppDelegate:
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)

        window?.rootViewController = UINavigationController(rootViewController: ViewController())
        window?.makeKeyAndVisible()
        return true
    }

---

import UIKit

class ViewController: UIViewController, UIScrollViewDelegate {
    var colorView: UIView!
    var scrollView: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()

        colorView = UIView()
        scrollView = UIScrollView()

        let colorButton = UIBarButtonItem(title: "Colors", style: .plain, target: self, action: #selector(colorButtonTapped))
        colorButton.setTitleTextAttributes([NSFontAttributeName: UIFont.systemFont(ofSize: 14.0), NSForegroundColorAttributeName: UIColor.black], for: UIControlState())
        navigationController?.navigationBar.topItem?.rightBarButtonItem = colorButton
    }

    func colorButtonTapped() {
        let colorOptions = ["Blue", "Black", "Red", "Green", "Yellow", "Purple", "Orange", "Pink", "Magenta", "Lavender", "Beige", "Tan", "Burgundy", "Eggshell", "Brown"]
        let buttonHeight: CGFloat = UIScreen.main.bounds.height / 15

        colorView.layer.cornerRadius = 8
        colorView.clipsToBounds = true

        //create options button
        for (index, title) in colorOptions.enumerated() {
            let button = UIButton(type: .custom)
            button.backgroundColor = .red

            button.frame = CGRect(x: 0, y: buttonHeight * CGFloat(index), width: colorView.frame.width, height: buttonHeight)
            button.setTitle(title, for: .normal)
            colorView.addSubview(button)
        }

        scrollView.delegate = self
        scrollView.contentSize = CGSize(width: UIScreen.main.bounds.width / 2.0, height: UIScreen.main.bounds.height / 2.0)
        scrollView.addSubview(colorView)
        view.addSubview(scrollView)
    }

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        let y = (navigationController?.navigationBar.frame.height)! + UIApplication.shared.statusBarFrame.height
    scrollView.frame = CGRect(x: UIScreen.main.bounds.width / 2.0, y: y, width: UIScreen.main.bounds.width / 2.0, height: UIScreen.main.bounds.height / 2.0)
    colorView.frame = CGRect(x: UIScreen.main.bounds.width / 2.0, y: y, width: UIScreen.main.bounds.width / 2.0, height: UIScreen.main.bounds.height)
    }
}

Answer 1

每次调用viewWillLayoutSubviews 时都没有必要更新scrollView 和colorView 的帧。按下按钮即可创建。

下面的代码会将colorView 的x 和y 的框架设置在scrollView 的右边缘，因此它不可见。两者都应该是 0 以将其定位到左边缘。

 colorView.frame = CGRect(x: UIScreen.main.bounds.width / 2.0, y: y, width: UIScreen.main.bounds.width / 2.0, height: UIScreen.main.bounds.height)

最后一个是colorView 的isUserInteractionEnabled 属性。默认情况下它是启用的，因此它会从scrollView 吞下手势识别器。将其设置为false 和enjoy。

为了在未来克服类似的问题，我建议阅读更多关于view debugging的信息。

import UIKit

class ViewController: UIViewController, UIScrollViewDelegate {

    var colorView: UIView!
    var scrollView: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()

        colorView = UIView()
        scrollView = UIScrollView()

        let colorButton = UIBarButtonItem(title: "Colors", style: .plain, target: self, action: #selector(colorButtonTapped))
        colorButton.setTitleTextAttributes([NSFontAttributeName: UIFont.systemFont(ofSize: 14.0), NSForegroundColorAttributeName: UIColor.black], for: UIControlState())
        navigationController?.navigationBar.topItem?.rightBarButtonItem = colorButton
    }

    func colorButtonTapped() {

        let colorOptions = ["Blue", "Black", "Red", "Green", "Yellow", "Purple", "Orange", "Pink", "Magenta", "Lavender", "Beige", "Tan", "Burgundy", "Eggshell", "Brown"]

        let y = (navigationController?.navigationBar.frame.height)! + UIApplication.shared.statusBarFrame.height
        scrollView.frame = CGRect(x: UIScreen.main.bounds.width / 2.0, y: y, width: UIScreen.main.bounds.width / 2.0, height: UIScreen.main.bounds.height / 2.0)
        scrollView.delegate = self
        scrollView.isScrollEnabled = true

        let buttonHeight: CGFloat = UIScreen.main.bounds.height / 15
        let contentHeight: CGFloat = CGFloat(colorOptions.count) * buttonHeight
        colorView.frame = CGRect(x: 0, y: 0, width: scrollView.frame.width, height: contentHeight)
        colorView.layer.cornerRadius = 8
        colorView.clipsToBounds = true
        colorView.isUserInteractionEnabled = false

        scrollView.contentSize = CGSize(width: UIScreen.main.bounds.width / 2.0, height: contentHeight)

        for (index, title) in colorOptions.enumerated() {
            let button = UIButton(type: .custom)
            button.backgroundColor = .red
            button.frame = CGRect(x: 0, y: buttonHeight * CGFloat(index), width: UIScreen.main.bounds.width / 2.0, height: buttonHeight)
            button.setTitle(title, for: .normal)
            colorView.addSubview(button)
        }

        scrollView.addSubview(colorView)
        view.addSubview(scrollView)
    }
}