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

Question

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

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 的右边缘code>，因此它不可见。两者都应为 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)
    }
}