Posted at

Swift UIPickerViewで選択した箇所の背景色など、UIを変更する(ピッカーのカスタム)

More than 3 years have passed since last update.

本投稿のgistはこちら

https://gist.github.com/manchan/b2b1323ea85763760ef5


Pickerの各行のラベルをカスタム

選択状態となった際に、viewForRowデリゲートメソッドにて、背景用のラベルの背景色を変更する。

下記はあくまでサンプルなので、UILabelのサブクラス作成ですっきりさせた方がよい。

//

// ViewController.swift
// pickerTest
//
// Created by matz on 2015/08/13.
// Copyright (c) 2015年 matz. All rights reserved.
//

import UIKit

final class ViewController: UIViewController,
UIPickerViewDataSource,UIPickerViewDelegate
{

@IBOutlet weak var picker: UIPickerView!
private var preSelectedLb:UILabel!
private let prefectures: NSArray =
["北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"
]

override func viewDidLoad() {
super.viewDidLoad()
picker.delegate = self
picker.dataSource = self
// 初期選択させるのであれば
// self.preSelectedLb = picker.viewForRow(0, forComponent: 0) as! UILabel
}

// 列数
func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
return 1
}

// 行数
func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return prefectures.count
}

// pickerに表示するUIViewを返す
func pickerView(pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusingView view: UIView!) -> UIView {

let pickerLabel = UILabel()
let titleData = prefectures[row] as! String
let myTitle = NSAttributedString(string: titleData, attributes: [NSFontAttributeName:UIFont(name: "HiraKakuProN-W3", size: 20.0)!,NSForegroundColorAttributeName:UIColor.grayColor()])

// fontサイズ、テキスト
pickerLabel.attributedText = myTitle
// 中央寄せ ※これを指定しないとセンターにならない
pickerLabel.textAlignment = NSTextAlignment.Center
pickerLabel.frame = CGRectMake(0, 0, 200, 30)
// ラベルを角丸に
pickerLabel.layer.masksToBounds = true
pickerLabel.layer.cornerRadius = 5.0

// 既存ラベル、選択状態のラベルが存在している
if let lb = pickerView.viewForRow(row, forComponent: component) as? UILabel,
let selected = self.preSelectedLb {
// 設定
self.preSelectedLb = lb
self.preSelectedLb.backgroundColor = UIColor.orangeColor()
self.preSelectedLb.textColor = UIColor.whiteColor()
}

return pickerLabel
}

// pickerに表示する値を返す ※viewForRowがあればこちらは単純にタイトルを返すだけなので不要
// func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String! {
// return prefectures[row] as! String
// }

// pickerが選択された際に呼ばれる
func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
println("row: \(row)")
println("value: \(prefectures[row])")

// 選択状態のラベルを代入
self.preSelectedLb = pickerView.viewForRow(row, forComponent: component) as! UILabel
// ピッカーのリロードでviewForRowが呼ばれる
pickerView.reloadComponent(component)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}


参考

How to Change Color selected Picked value from pickerview?

http://stackoverflow.com/questions/7595220/how-to-change-color-selected-picked-value-from-pickerview

UIPickerView Selected Row Label Color

http://stackoverflow.com/questions/16477598/uipickerview-selected-row-label-color?lq=1