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

When the "Colors" navigation bar button is clicked, a drop-down menu of 15 colors should appear. The drop-down will take up half of the screen's height and width. The user can scroll down the drop-down to view all the colors. However, the code I have right now, nothing happens when the navigation bar button is clicked. Although for testing purposes, when I set the background color of the scroll view to something more visible, I see that the scroll view is taking up half the screen's width and height. And when I add view.addSubview(colorView) at the end of colorButtonTapped() I see the drop-down display is taking up half of the screen's width and all of the screen's height.

单击“颜色”导航栏按钮时，将显示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)
    }
}

1 个解决方案

#1

There is no point to update the frames of scrollView and colorView every time viewWillLayoutSubviews is called. It is enough to create upon pressing the button.

每次调用viewWillLayoutSubviews时都没有必要更新scrollView和colorView的帧。按下按钮就足够了。

The code below would set the frame of colorView's x and y exactly to the right edge of scrollView, therefore it is not visible. Both should be 0 to position it to the left edge.

下面的代码将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)

The last is the colorView's isUserInteractionEnabled property. By default it is enabled, therefore it swallows the gesture recogniser from scrollView. Set it to false, and enjoy.

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

To overcome on problems like this in the future, i would recommend to read more about 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)
    }
}

#1