You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

iOS平台UIPickerView自定义求助:字体、间距等样式调整

Customizing UIPickerView Style on iOS

Hey there! Let's tackle those UIPickerView styling hurdles together. You can fully customize the font, text size, stroke color, and row spacing by using UIPickerViewDelegate methods that let you return custom views instead of plain text. Here's a tailored solution for your code:

1. Customize Font, Size, and Text Stroke Color

Instead of relying on titleForRow, use viewForRow to create a custom UILabel—this gives you full control over attributed text properties like stroke.

2. Adjust Row Spacing (Row Height)

Use the rowHeightForComponent delegate method to set a custom height for each row, which adds the vertical spacing you want between picker options.

Modified Full Code

import UIKit

class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {
    var picker_arr: [String]!
    var com1_arr: [String]!
    var com2_arr: [String]!
    @IBOutlet weak var picker: UIPickerView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        picker_arr = ["12:45", "13:00", "13:15", "13:30"] // Sample values
        picker.dataSource = self
        picker.delegate = self // Ensure these are set if not done via Interface Builder
    }
    
    // MARK: - UIPickerView DataSource
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1 // Adjust based on your component count needs
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return picker_arr.count
    }
    
    // MARK: - UIPickerView Delegate (Custom Styling)
    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        // Reuse existing label if available, else create a new one
        let label = view as? UILabel ?? UILabel()
        
        // Set base font and alignment
        label.font = UIFont.systemFont(ofSize: 18, weight: .medium) // Tweak font size/type here
        label.textAlignment = .center
        label.textColor = UIColor.black // Set your desired text fill color
        
        // Add stroke to the text
        let text = picker_arr[row]
        let attributedText = NSMutableAttributedString(string: text)
        let strokeAttributes: [NSAttributedString.Key: Any] = [
            .strokeColor: UIColor.blue, // Your preferred stroke color
            .strokeWidth: -2.0 // Negative value keeps text filled while adding outer stroke
        ]
        attributedText.addAttributes(strokeAttributes, range: NSRange(location: 0, length: text.count))
        
        label.attributedText = attributedText
        return label
    }
    
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
        return 50 // Adjust this value to control spacing between rows
    }
}

Quick Tips:

  • Font Customization: Swap out the UIFont initializer to use a custom font (e.g., UIFont(name: "ArialRoundedMTBold", size: 20)).
  • Stroke Adjustments: Change strokeWidth to a positive number if you want hollow text with a stroke, or tweak the strokeColor to match your app's theme.
  • Row Spacing: Increase the rowHeightForComponent return value for more vertical space between options, or decrease it for tighter spacing.

内容的提问来源于stack exchange,提问作者Liya

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.27 03:31:04