Swift - 让UIPickerView里的选项文字自动换行（多行显示）

2018-05-30 发布：hangge 阅读：3185

1，问题描述

我们知道默认情况下，选择框（UIPickerView）里每个选项只能显示一行文字。当内容过多的时候就会显示不全（以省略号结尾）。

如果我们需要让用户能看全每个选项的文字内容，最好的办法就是让内容能多行显示。

2，实现方法

（1）通过 pickerView的 viewForRow 这个代理方法，我们可以使用自定义的 view 作为选项视图。

（2）这里我们直接使用 UILabel 作为选项视图，同时将 label 的 numberOfLines 属性设置为需要显示的行数即可。（这里要注意的是 pickerView 的行高，确保行高能容纳下需要显示的行数。否则 numberOfLines 设置的再大也没用。）

（3）当然也可以将 numberOfLines 设置为 0，表示限制行数，这样文字需要显示几行就显示几行。（当然仍然不能超过行高）

3，演示样例

（1）效果图

（2）样例代码

import UIKit

class ViewController:UIViewController, UIPickerViewDelegate, UIPickerViewDataSource{
    
    var pickerView:UIPickerView!
    
    //选择框数据
    var mulan = ["唧唧复唧唧，木兰当户织, 不闻机杼声，唯闻女叹息。",
                 "问女何所思，问女何所忆, 女亦无所思，女亦无所忆。",
                 "昨夜见军帖，可汗大点兵, 军书十二卷，卷卷有爷名。",
                 "阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。",
                 "东市买骏马，西市买鞍鞯，南市买辔头，北市买长鞭。",
                 "旦辞爷娘去，暮宿黄河边，不闻爷娘唤女声，但闻黄河流水鸣溅溅。",
                 "旦辞黄河去，暮至黑山头，不闻爷娘唤女声，但闻燕山胡骑鸣啾啾。",
    ]

    override func viewDidLoad() {
        super.viewDidLoad()
        //关闭导航栏半透明效果
        self.navigationController?.navigationBar.isTranslucent = false
        
        pickerView = UIPickerView()
        //将dataSource设置成自己
        pickerView.dataSource = self
        //将delegate设置成自己
        pickerView.delegate = self
        //设置选择框的默认值
        pickerView.selectRow(1,inComponent:0,animated:true)
        pickerView.selectRow(2,inComponent:1,animated:true)
        self.view.addSubview(pickerView)
    }
    //设置选择框的列数为3列,继承于UIPickerViewDataSource协议
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 2
    }
    
    //设置选择框的行数为9行，继承于UIPickerViewDataSource协议
    func pickerView(_ pickerView: UIPickerView,
                    numberOfRowsInComponent component: Int) -> Int {
        return mulan.count
    }
    
    //设置列宽
    func pickerView(_ pickerView: UIPickerView, widthForComponent component: Int)
        -> CGFloat {
        if(0 == component){
            return 100
        }else{
            return pickerView.frame.width - 120
        }
    }
    
    //设置行高
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int)
        -> CGFloat {
            return 50
    }
    
    //自定义选项视图
    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int,
                    forComponent component: Int, reusing view: UIView?) -> UIView {
        var pickerLabel = view as? UILabel
        if pickerLabel == nil {
            pickerLabel = UILabel()
            pickerLabel?.font = UIFont.systemFont(ofSize: 16)
            
        }
        pickerLabel?.numberOfLines = 0 //不限制行数
        if component == 0 {
          pickerLabel?.text = "数据\(row)"
          pickerLabel?.textAlignment = .center
        } else {
          pickerLabel?.text = mulan[row]
          pickerLabel?.textAlignment = .left
        }
        return pickerLabel!
    }
}