YouBike Api StoryBoard搭配程式

利用 StoryBoard的元件搭配程式UIKit 把畫面一點一滴招喚出來

製作客製化搜尋Button

        titleLabel.text = "站點資訊"
        titleLabel.textColor = UIColor(cgColor: #colorLiteral(red: 0.725, green: 0.796, blue: 0.286, alpha: 1).cgColor)
        titleLabel.font = titleLabel.font.withSize(24)
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
                
        view.addSubview(titleLabel)
                
        titleLabel.topAnchor.constraint(equalTo: view.topAnchor, constant: 120).isActive = true
        titleLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 25).isActive = true
        
        
        buttonLabel.text = "搜尋站點"
        buttonLabel.textColor = UIColor(cgColor: #colorLiteral(red: 0.725, green: 0.796, blue: 0.286, alpha: 1).cgColor)
        buttonLabel.translatesAutoresizingMaskIntoConstraints = false
        popUpButton.addSubview(buttonLabel)
                
        buttonLabel.centerYAnchor.constraint(equalTo: popUpButton.centerYAnchor).isActive = true
        buttonLabel.leadingAnchor.constraint(equalTo: popUpButton.leadingAnchor, constant: 5).isActive = true

        // Add the image view
        buttonImage.image = UIImage(systemName: "magnifyingglass")
        buttonImage.tintColor = UIColor(red: 0.725, green: 0.796, blue: 0.286, alpha: 1.0)
        buttonImage.contentMode = .scaleAspectFit
        buttonImage.translatesAutoresizingMaskIntoConstraints = false
        popUpButton.addSubview(buttonImage)
        buttonImage.centerYAnchor.constraint(equalTo: popUpButton.centerYAnchor).isActive = true
        buttonImage.trailingAnchor.constraint(equalTo: popUpButton.trailingAnchor, constant: -15).isActive = true
        
        
        popUpButton.tintColor = UIColor(red: 0.725, green: 0.796, blue: 0.286, alpha: 1.0)
        popUpButton.addTarget(self, action: #selector(toggleMenu), for: .touchUpInside)

        // Style the button
        popUpButton.backgroundColor = UIColor(red: 0xF6/255.0, green: 0xF6/255.0, blue: 0xF6/255.0, alpha: 1.0)
        popUpButton.layer.cornerRadius = 8.0
        popUpButton.setTitleColor(UIColor(cgColor: #colorLiteral(red: 0.725, green: 0.796, blue: 0.286, alpha: 1).cgColor), for: .normal)
        popUpButton.contentEdgeInsets = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
        
        // Add the button to your view
        view.addSubview(popUpButton)

做一個類似下拉選單的 TableView

        // Set up the menu table view
        menuTableView = UITableView()
        menuTableView.delegate = self
        menuTableView.dataSource = self
        menuTableView.isHidden = true
        menuTableView.layer.cornerRadius = 8.0
        menuTableView.register(UITableViewCell.self, forCellReuseIdentifier: "MenuCell")
        view.addSubview(menuTableView)

當點擊搜尋按鈕的時候，如果搜尋比對成功顯示新資料，如果沒有比對成功就顯示全部資料

    func handleOptionSelection(_ option: String) {
        print("Selected option: \(option)")
        // 更新标题文本
        buttonLabel.text = "\(option)"
        buttonImage.image = UIImage(systemName: "magnifyingglass")

        let matchedData = filteredData.filter { $0.sarea == option }
        if !matchedData.isEmpty {
            // 找到符合條件的資料
            youBikes = matchedData
        } else {
            // 沒有找到符合條件的資料，顯示全部資料
            youBikes = filteredData
        }
        DispatchQueue.main.async {
            self.countryTableView.reloadData()
        }
        
        self.view.layoutIfNeeded()
    }

成果：

GitHub:

GitHub - Eason9630/BatThree