Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-27305] iOS: Implement Ti.View.borderRadius multiple values for custom edge radii

GitHub Issuen/a
TypeImprovement
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2020-08-06T12:19:18.000+0000
Affected Version/sn/a
Fix Version/sRelease 9.1.0
ComponentsiOS
Labelsn/a
ReporterHans Knöchel
AssigneeVijay Singh
Created2019-08-03T22:49:27.000+0000
Updated2020-08-26T10:29:08.000+0000

Description

A developer should be able to configure custom border radii, e.g. bottom-left, bottom-right, top-left and top-right. The size of the radius can and should be reused from the existing border-radius property. Example: 
var win = Ti.UI.createWindow({
    backgroundColor: '#333'
});

var view = Ti.UI.createView({
    backgroundColor: '#fff',
    height: 350,
    bottom: 0,
    borderRadius: '20 20dp 20px 12px',
});

win.add(view);
win.open();
!Bildschirmfoto 2019-08-04 um 00.51.50.png|thumbnail!

Attachments

FileDateSize
Bildschirmfoto 2019-08-04 um 00.51.50.png2019-08-03T22:52:20.000+0000518661
chart.js2020-07-25T00:24:06.000+00005747
Dummy.zip2020-07-24T19:03:10.000+00005713308

Comments

  1. Michael Gangolf 2019-08-04

    if doing it for Android API >=21 (Lollipop) it should be relatively easy: https://github.com/appcelerator/titanium_mobile/blob/1a2343d1500a47ea5adabe8a52fcc077dd4b5169/android/titanium/src/java/org/appcelerator/titanium/view/TiBorderWrapperView.java#L79 and use radius as an array like this: https://stackoverflow.com/a/56238564/5193915 Passing the borderRadiusEdges as a parameter in https://github.com/appcelerator/titanium_mobile/blob/5852910f76d9c40418b77e81d5aefd727b60cd8a/android/titanium/src/java/org/appcelerator/titanium/view/TiUIView.java#L1467 or make a custom method so it can be changed later on again. I'll give it a try
  2. Hans Knöchel 2019-08-04

    Nice! I think API 21 is totally fine
  3. Michael Gangolf 2019-08-04

    Looking good already :) !http://migaweb.de/Screenshot_20190804-131420.png!
  4. Hans Knöchel 2019-08-04

    Pulls: - iOS: https://github.com/appcelerator/titanium_mobile/pull/11113 - Android: https://github.com/appcelerator/titanium_mobile/pull/11114
  5. Hans Knöchel 2019-08-04

    [~michael] Would you mind checking if this can also be applied to CardView? The borders are usually smoother and play better with shadows / elevation. *EDIT*: It seems to be possible using setBackgroundResource as described [here](https://stackoverflow.com/a/54744063/5537752), but then an XML resource is required. Meeeh...
  6. Brenton House 2020-03-06

    Adding comments here from duplicate ticket: After changes, this should be able to be possible: view.borderRadius = 15; view.borderRadius = "15"; view.borderRadius = "0 15"; view.borderRadius = "0 15 0 15";
  7. Hans Knöchel 2020-03-11

    Please not. That doesn't look JS'ish and is especially horrible to manage when you're populating the corner values dynamically. Best would be to pass it via classic dictionary styles like done with padding, contentInsets, separatorInsets etc. pp. Also, the ticket went completely stale although completely contributed and finished by the community. Very sad, guys.
  8. Brenton House 2020-06-07

    [~amukherjee] - Is there any way we can get this assigned to someone and prioritized? This is a big missing feature and we have a PR from community.
  9. Gary Mathews 2020-06-08

    Maybe reword into borderRadiusCorner instead of edge?
  10. Michael Gangolf 2020-06-08

    or borderRadiusCorners because you have to set an array?
  11. Abir Mukherjee 2020-06-09

    [~bhouse], thanks for the comment. Yes, we have a couple of engineers reviewing this now.
  12. Vijay Singh 2020-06-11

    PR - https://github.com/appcelerator/titanium_mobile/pull/11801 Test Case - 
        var win = Ti.UI.createWindow({
        backgroundColor: 'white'
    });
     
    var view = Ti.UI.createView({
        backgroundColor: 'red',
        height: 350,
        width: 350,
        bottom: 40,
        borderRadius: ['20', '40', 60, '80'],
       //borderRadius: "20 40 60 80",
       //borderRadius: [20, 40],
       //borderRadius: 40,
    });
     
    win.add(view);
    win.open();
  13. Samir Mohammed 2020-07-06

    FR Passed, waiting on Jenkins build.
  14. Christopher Williams 2020-07-07

    merged to master for 9.1.0 target
  15. Marian Kucharcik 2020-07-24

    Hi guys, I installed Ti.SDK 9.1.0.v20200723064106 today to test it and found a bug - I have views(bar chart) which each bar has borderRadius: [ '8', '0', '8', "0" ], so top left and bottom right corners are rounded. Problem is, that height of the each bar is dynamically generated(based on value from API) and animated and if height is small(let's say 60% of parent), both corners are rounded. But if height is bigger, bottom right corner loose its shape(see attached screenshot, all bars are generated in for loop with same code and there are differences in corner radius). Can you pls look at it and fix it? Tested on iPhone 11 Pro simulator, iOS13.6 Thank you Can't add screenshot here, so it's in PR on github: [link to screenshot](https://github.com/appcelerator/titanium_mobile/pull/11801#issuecomment-663650011)
  16. Vijay Singh 2020-07-24

    [~max87] Can you provide a simple test case to reproduce the issue? It'll help us debug faster. Thanks!
  17. Marian Kucharcik 2020-07-24

    Working on it(standalone app which generates chart similar to screenshot's)... @Vijay Singh here it is: [standalone app which generates chart ](https://github.com/appcelerator/titanium_mobile/pull/11801#issuecomment-663678070) Thank you
  18. Brenton House 2020-07-24

    I also attached the file containing the test project to this ticket.
  19. Vijay Singh 2020-07-25

    [~max87] There is problem in height calculation in your code. "barValueMaster.top + barValueMaster.height + barValueLabel.height <= 125 (barValueLabelMasterView.height): " Set barValueMaster.top = 1 instead 5 . It will fix your issue. Find updated chart.js in attachment. Let me know if you face any other issue. Thanks!
  20. Marian Kucharcik 2020-07-25

    Thank you @Vijay Singh, my mistake, I apologise. I changed barValueMaster.top and it's working fine.
  21. Vijay Singh 2020-07-27

    No Problem. Happy to help!
  22. Sohail Saddique 2020-08-06

    Fix verified in build 9.1.0.v20200804082025. Ticket closed.
  23. Sebastian Klaus 2020-08-26

JSON Source