ios - 以编程方式创建可滚动的下拉菜单 (iOS/Swift)

Question

单击“颜色”导航栏按钮 时，应出现一个包含 15 种颜色的下拉菜单。下拉菜单将占据屏幕高度和宽度的一半。用户可以向下滚动下拉菜单以查看所有颜色。但是，我现在拥有的代码在单击导航栏按钮时没有任何反应。虽然出于测试目的，当我将 ScrollView 的背景颜色设置为更明显的颜色时，我看到 ScrollView 占据了屏幕宽度和高度的一半。当我在 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

没有必要更新 scrollView 的帧和 colorView每次viewWillLayoutSubviews叫做。按下按钮即可创建。

下面的代码将设置 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属性(property)。默认情况下它是启用的，因此它吞下了来自 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)
    }
}