Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-16547] iOS: Add ability to set color and backgroundColor for Picker control

GitHub Issuen/a
TypeImprovement
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2016-02-10T18:05:46.000+0000
Affected Version/sRelease 5.1.2
Fix Version/sRelease 5.2.0
ComponentsTiAPI
LabelsbackgroundColor, color, ios, picker, qe-5.2.0
ReporterEd
AssigneeHans Knöchel
Created2014-03-02T19:39:55.000+0000
Updated2016-02-10T23:39:38.000+0000

Description

The backgroundColor of the Picker control on iOS is hardcoded to white: https://github.com/appcelerator/titanium_mobile/blob/master/iphone/Classes/TiUIPicker.m#L64 This becomes a problem when designing dark themed apps, that would need to reverse the colors of the picker (light colored text over dark background). Ideally, color and backgroundColor should be exposed through properties of the Ti Picker control.

Attachments

FileDateSize
Simulator Screen Shot 09.02.2016, 17.05.18.png2016-02-09T16:11:57.000+000056166
white_picker.jpg2014-03-02T19:39:55.000+000014644

Comments

  1. Ritu Agrawal 2014-03-04

    iOS Human Interface Guidelins does not provide much direction about the color or backgroundColor for the picker control except the following statement: - Uses dark text to display the current value in the middle of the view (https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/MobileHIG.pdf) Moving this feature request to engineering for further evaluation and prioritization.
  2. Hans Knöchel 2015-07-01

    iOS7+ supports the backgroundColor-property which has a default value of UIColor().clearColor. Titanium default is UIColor().whiteColor. Will resolve this asap!
  3. Hans Knöchel 2016-02-09

    **Please do not merge, yet** The following PR includes support for setting the backgroundColor property of the picker, the color of normal picker cells itself can be set inside their cells, a tinting for time- and datetime-pickers is now possible using the dateTimeColor property. PR (master): https://github.com/appcelerator/titanium_mobile/pull/7690 PR (5_2_X): https://github.com/appcelerator/titanium_mobile/pull/7698 Demo: 
       var win = Ti.UI.createWindow({
     backgroundColor : "#fff"
   });
   
   var picker = Ti.UI.createPicker({
       backgroundColor: "#000",
       dateTimeColor: "#fff",
       type: Ti.UI.PICKER_TYPE_DATE_AND_TIME
   });
   
   win.add(picker);
   win.open();
    Result: http://abload.de/img/simulatorscreenshot090rkkh.png
  4. Josh Longton 2016-02-10

    [~hansknoechel] Is this feature only for Ti.UI.PICKER_TYPE_DATE_AND_TIME or will it work with the custom pickers too
  5. Hans Knöchel 2016-02-10

    As mentioned above, iOS only allows to tint time- and datetime-pickers. Normal pickers can add a Ti.UI.Label with a custom color.
  6. Josh Longton 2016-02-10

JSON Source