feat(ios): add support for modern button configuration #14252
Conversation
|
very nice 👍 Quick question about the setup: At the moment you would need to duplicate stuff like const btn = Ti.UI.createButton({
title: 'Sign In',
subtitle: 'with Google',
style: 'bordered',
// color: 'red',
// backgroundColor: 'green',
// padding: { left: 40, right: 40, top: 5, bottom: 5 },
image: Ti.UI.createView({ width: 20, height: 20, backgroundColor: 'blue', borderRadius: 10 }).toImage(),
imagePlacement: 'leading',
imagePadding: 10,
titlePadding: 5
});and add a |
|
They are inside an own scope for now, so we can get feedback independently from the normal button properties. Even if props like "title" sound the same, they are handled differently internally. If this effort works and is well adopted, they will be merged with the root properties in the near future. |
|
@m1ga Quick update on this: I've added some more properties and it's been tested by the community in parallel. The plan is to move all remaining properties one by one to the new proxy and then merge it with the existing APIs - ideally, I'll also rewrite the class to Swift at that point. What do you think about these backgroundImage, backgroundSelectedImage properties? I feel like they're from a time (iOS 5/6) where background images used to be a thing, but since iOS 7+ / flat design, no one should use it anymore. If those can be fully deprecated, we could integrate the more modern APIs sooner. |
People can still use a normal View with a backgroundImage and a label inside if they want to create such a button. But I think if you just want to use a normal UI Button it should just be the default iOS/Android button with colors. |
|
Another excellent addition to Ti! — This definitely provides a lot of flexibility in one easy to use Below are some quick notes regarding usage from my experience:
|
|
Thanks Jason! As for your feedbacks: The backgroundColor for glass will work when used outside of the config, because it's then applied to the parent internal view, which then sits behind the glass button. As for the icon color of the buttons: This also seem to be expected, as the internal APIs call the |
|
Hello @hansemannn , I tried it and I found a bug. Ti.UI.iOS.createButtonConfiguration works as expected on simulator, but according to my testing on device(iP15Pro, ios26) it shows error: And also docs - buttonConfiguration is accessible only from Ti.UI.Button docs via configuration property, it's missing from left menu. |
|
Thanks - will check that. For "And also docs - buttonConfiguration is accessible only from Ti.UI.Button docs via configuration property, it's missing from left menu." => I don't know what you mean there, can you re-iterate on that? |
|
I should appear here in the menu: 
|
|
Of course - there should be documentation for button's configuration properties here on left menu: https://titaniumsdk.com/api/titanium/ui/ios.html |
|
I'm afraid the error is something on your config (e.g. wrong SDK selected), as it works fine here (production app, tested on device). Please check your setup to confirm, thx |
|
For the docs, tidev/titanium-docs@2fbcc78 addresses that. |
I wrote DMs with Michael, we have same SDK version, fresh new app and example code and for device is not working, same code for simulator is working as expected.... I have no other problem besides this... |
|
I have a iPhone 13 Mini at the moment with iOS26 installed and also have the crash on the device: code is from the first post: const window = Ti.UI.createWindow({
title: "Window 1",
backgroundColor: "#fff",
});
const btn = Ti.UI.createButton({
configuration: Ti.UI.iOS.createButtonConfiguration({
title: 'Sign In',
subtitle: 'with Google',
style: 'bordered',
// color: 'red',
backgroundColor: 'green',
backgroundSelectedColor: 'blue',
// padding: { left: 40, right: 40, top: 5, bottom: 5 },
image: Ti.UI.createView({ width: 20, height: 20, backgroundColor: 'blue', borderRadius: 10 }).toImage(),
imagePlacement: 'leading',
imagePadding: 10,
titlePadding: 5,
textAlign: 'right',
font: {
fontSize: 20,
fontWeight: 'bold'
}
})
});
window.add(btn);
window.open();I saw that there is an update to use an object as a parameter. Will check that later |
|
Can you attach the build folder (zipped) please? It seems like it's compiled out for you. And does it work if you set it after creation of the button, e.g. btn.configuration = Ti.UI.iOS.createButtonConfiguration({ ... }); |
|
no, will also crash with Build folder: https://migaweb.de/build.zip |
|
botton? |
|
sorry, typo. was typing it instead of copy & pasting it. The error is the one from above |
|
Okay - found the issue. The pre-compile statement is under the web-view statement, causing it to be dependent on it (has nothing to do with the API itself. Workaround for 13.0.0.GA: Add a |
4 participants
This pull request refactors and modernizes the button configuration system in the Titanium iOS module. It removes the deprecated
SystemButtonStyleProxyand introduces a new, more flexibleButtonConfigurationProxythat leverages the latest UIKit features. The changes include updates to the API, implementation of the new proxy, and project file adjustments.Migration from SystemButtonStyle to ButtonConfiguration:
Removed all references to the deprecated
TiUIiOSSystemButtonStyleProxyfrom the codebase and project files, including its header and implementation files. (TiUIiOSProxy.h,TiUIiOSProxy.m,TiUIiOSSystemButtonStyleProxy.h,TiUIiOSSystemButtonStyleProxy.m,Titanium.xcodeproj) [1] [2] [3] [4] [5] [6] [7] [8]Added the new
TiUIiOSButtonConfigurationProxyclass, which supports modern UIKit button configurations (e.g., plain, tinted, filled, glass, etc.), and exposes properties for customizing button appearance and behavior. (TiUIiOSButtonConfigurationProxy.h,TiUIiOSButtonConfigurationProxy.m) [1] [2] [3] [4] [5]API and Usage Updates:
Updated
TiUIiOSProxyto add acreateButtonConfiguration:factory method and included the new proxy in its imports and memory management. (TiUIiOSProxy.h,TiUIiOSProxy.m) (F1e356e5L52R52, [1] [2]Modified
TiUIButtonto support the new button configuration via asetConfiguration_:method, enabling assignment of aUIButtonConfigurationobject to a button. (TiUIButton.m) [1] [2]Project Structure Adjustments:
Titanium.xcodeproj) [1] [2] [3] [4]These changes modernize button customization for iOS in Titanium, making it easier to use the latest UIKit features and maintain code going forward.
Example code:
|
| 
|