Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-27460] iOS: tintColor not working for TabbedBar/ButtonBar on iOS 13

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2019-12-10T15:38:41.000+0000
Affected Version/sRelease 8.2.0
Fix Version/sRelease 9.0.0
ComponentsiOS
LabelsengSchedule, regression
Reporternicolomonili
AssigneeVijay Singh
Created2019-10-10T09:55:21.000+0000
Updated2019-12-10T15:38:41.000+0000

Description

With iOS 13 the styling of the UISegmentedControl significantly changed. Previously the color of the selected element and the border color could simply be set with tintColor. Now this requires a combination of backgroundColor / selectedSegmentTintColor / setTitleTextAttributes and manual settings for borders using the underlying layer. See also https://stackoverflow.com/a/56874473/1168989 *Steps to reproduce the behavior* 
const win = Ti.UI.createWindow({
	backgroundColor: 'black'
});
var test = Ti.UI.createTabbedBar({
	labels: [ '1', '2', '3', 'AUTO' ],
	tintColor: 'white'
});
win.add(test);
win.open();
*Actual behavior* The controls has no border and unselected elements are barely visible. !Schermata 2019-10-10 alle 11.21.28.png|thumbnail! *Expected behavior* The control has a border and unselected element are colored according to tintColor. !Schermata 2019-10-10 alle 11.21.24.png|thumbnail!

Attachments

FileDateSize
Schermata 2019-10-10 alle 11.21.24.png2019-10-10T10:01:36.000+000018445
Schermata 2019-10-10 alle 11.21.28.png2019-10-10T10:01:20.000+000017635

Comments

  1. nicolomonili 2019-11-08

    There are updates?
  2. Vijay Singh 2019-11-13

    PR - https://github.com/appcelerator/titanium_mobile/pull/11329 1. I think we should not change the default behavior of native UiSegmentControl for iOS 13. In iOS 12 it comes with border but in iOS 13 it do not have border. 2. I have modified the tintColor implementation to set the normal text color (tintColor), selected text color(inverse of tintColor), and selectedButtonColor (tintColor). In most of the cases this will work fine for iOS 13. 3. To add more customization on TabbedBar I have exposed new APIs- textColor, selectedTextColor, selectedButtonColor [~nicolomonili] [~topener] If you guys agree, I'll add documentation for new APIs Test Case 1 (tinColor) - 
       const win = Ti.UI.createWindow({
   	backgroundColor: 'black'
   });
   var test = Ti.UI.createTabbedBar({
   	labels: [ '1', '2', '3', 'AUTO' ],
   	tintColor: 'red',
   	backgroundColor: 'yellow'
   });
   win.add(test);
   win.open();
    Test Case 2 (new properties) - 
       const win = Ti.UI.createWindow({
   	backgroundColor: 'black'
   });
   var test = Ti.UI.createTabbedBar({
   	labels: [ '1', '2', '3', 'AUTO' ],
   	backgroundColor: 'white',
   	textColor: 'red',
   	selectedTextColor: 'green',
   	selectedButtonColor: 'red',
   });
   win.add(test);
   win.open();
  3. Rene Pot 2019-11-14

    Sounds good to me! We should not mimic things that don't exist anymore, and giving more options is even better!
  4. nicolomonili 2019-11-14

    Ok !
  5. Samir Mohammed 2019-11-27

    FR Passed, Waiting on Jenkins build.
  6. Lokesh Choudhary 2019-12-03

    PR Merged.
  7. nicolomonili 2019-12-06

    This fix could be added in a possible 8.3.x ?
  8. Samir Mohammed 2019-12-06

    Fix verified in SDK version 9.0.0.v20191204090836 Test and other information an be found at: https://github.com/appcelerator/titanium_mobile/pull/11329
  9. Sohail Saddique 2019-12-10

    Fix verified on version: 9.0.0.v20191209135132 Ticket closed.

JSON Source