Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-15286] iOS7: Improved support for translucency on more UI elements

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionInvalid
Resolution Date2013-10-23T16:43:01.000+0000
Affected Version/sn/a
Fix Version/s2013 Sprint 22, 2013 Sprint 22 API
ComponentsiOS
Labelsios7, ipass1, translucency
ReporterMatthew Delmarter
AssigneeVishal Duggal
Created2013-09-18T17:02:44.000+0000
Updated2018-08-06T17:37:06.000+0000

Description

In iOS7 translucency is key to indicating hierarchy on the UI to the user. However in Titanium SDK 3.1.3 so far I have only seen evidence of translucency supported on the TabBar, Toolbar, and Window Navigation bar. This is not thorough enough to work with Apple's guidelines. For example if you look at Safari in iOS7 you will see that popover windows with TableViews in them are still fully translucent (see attached screenshot for example). But in Ti the TableView is not translucent. Best practice we should also be able to layer Views or Windows and have them appear on top of content, with the content underneath showing through. This is not currently possible as far as I am aware. This ticket is to get translucency supported on Views, Windows, Tables and other elements.

Attachments

FileDateSize
iOS Simulator Screen shot Oct 23, 2013 9.41.39 AM.png2013-10-23T16:42:33.000+000059511
Screen Shot 2013-09-19 at 5.01.41 AM.png2013-09-18T17:02:45.000+0000162784

Comments

  1. nicolomonili 2013-10-08

    no one has yet worked on a solution?
  2. Ingo Muschenetz 2013-10-08

    [~nicolomonili] Not yet. It is currently still planned for 3.2.0, which has several more weeks before code freeze. You are welcome to submit a pull request if you'd like to try your hand.
  3. nicolomonili 2013-10-08

  4. Ingo Muschenetz 2013-10-08

    [~nicolomonili] How is TC-3072 different than TIMOB-15286?
  5. nicolomonili 2013-10-08

    in fact talking about the same topic, but my ticket has been open 7 days ago, while I only noticed this ticket today
  6. Ingo Muschenetz 2013-10-08

    Okay. I will then mark yours as a duplicate.
  7. nicolomonili 2013-10-18

    In the "fix's versions" has been added the 3.2.0SDK currently version 3.2.0 allows to extend the translucent properties to other objects?
  8. Ingo Muschenetz 2013-10-18

    It won't be available in 3.2.0 until the ticket is actually marked "resolved."
  9. Vishal Duggal 2013-10-23

    Screen shot of a semi transparent popover on iOS7 attached
  10. Vishal Duggal 2013-10-23

    Translucency is a property that is supported by a few UI elements and as specified we have exposed it for the aforementioned elements. The screenshot attached is an example of a popover with a semi transparent background. That is possible to do in Titanium. See attached code and screenshot for a sample
        function genColor()
        {
            var num = Math.round(Math.random()*1000000).toString();
            var length = num.length;
            if (length < 6)
            {
                while (length < 6) {
                    num = num + '0';
                    length++;
                }
            }
            Ti.API.info(num);
            return ('#'+num)
        }
        
        function genRandowmViews(win) {
            var i=0;
            for (i=0;i<16;i++) {
                var v = Ti.UI.createView({
                    width:'25%',
                    height:'25%',
                    backgroundColor:genColor()
                })
                v.add(Ti.UI.createLabel({
                    color:'white',
                    text:'VIEW '+i
                }));
                win.add(v);
            }
        }
        
        
        var win = Ti.UI.createWindow({
            layout:'horizontal',
            title:'Popover'
        });
        
        function genContentView()
        {
            var sectionFruit = Ti.UI.createTableViewSection({ headerTitle: 'The Fruits' });
            sectionFruit.add(Ti.UI.createTableViewRow({ title: 'Apple' , backgroundColor: 'transparent'}));
            sectionFruit.add(Ti.UI.createTableViewRow({ title: 'Banana' , backgroundColor: 'transparent'}));
            sectionFruit.add(Ti.UI.createTableViewRow({ title: 'Fig' , backgroundColor: 'transparent'}));
            sectionFruit.add(Ti.UI.createTableViewRow({ title: 'Orange' , backgroundColor: 'transparent'}));
            sectionFruit.add(Ti.UI.createTableViewRow({ title: 'Pear' , backgroundColor: 'transparent'}));
        
            var sectionVeg = Ti.UI.createTableViewSection({ headerTitle: 'The Vegetables' });
            sectionVeg.add(Ti.UI.createTableViewRow({ title: 'Carrot' , backgroundColor: 'transparent'}));
            sectionVeg.add(Ti.UI.createTableViewRow({ title: 'Potato' , backgroundColor: 'transparent'}));
            sectionVeg.add(Ti.UI.createTableViewRow({ title: 'Beans' , backgroundColor: 'transparent'}));
            sectionVeg.add(Ti.UI.createTableViewRow({ title: 'Squash' , backgroundColor: 'transparent'}));
            sectionVeg.add(Ti.UI.createTableViewRow({ title: 'Broccoli' , backgroundColor: 'transparent'}));
        
            var bb1 = Titanium.UI.iOS.createTabbedBar({
                labels:['Fruits','Vegetables'],
                backgroundColor:'#336699',
                top:10,
                height:25,
                width:200,
                index:0
            });
        
            var tableView = Ti.UI.createTableView({
                backgroundColor: 'transparent',
                top:10,
                data: [sectionFruit]
            })
        
            var contentWin = Ti.UI.createWindow({
                backgroundColor:'transparent',
                title:'POPOVER',
                barColor:'white',
                translucent:'false',
                titleAttributes:{color:'blue'},
                layout:'vertical'
            })
            contentWin.add(bb1);
            contentWin.add(tableView);
        
            bb1.addEventListener('click',function(e){
                if(e.index == 1) {
                    tableView.data = [sectionVeg];
                } else {
                    tableView.data = [sectionFruit];
                }
            })
            var navWin = Ti.UI.iOS.createNavigationWindow({
                window:contentWin,
                backgroundColor:'#33ffffff'
            })
            return navWin;
        }
        
        win.addEventListener('click',function(e){
            var popover = Ti.UI.iPad.createPopover({
                width:400,
                height:400,
                contentView:genContentView()
            })
            popover.show({view:e.source});
        });
        
        genRandowmViews(win);
        
        win.open();
        
  11. Matthew Delmarter 2013-10-23

    Doesn't work for me. Building it in 3.1.3 GA using Ti Studio 3.1.4 RC and Xcode 5.0.1 the Popover shows, but it has absolutely nothing in it, not even a title showing. I would have attached a screenshot, but cannot because the ticket is resolved.
  12. nicolomonili 2013-10-23

    maybe the ticket has been resolved because this feature will be added in the 3.2.0 SDK, so hopefully it will be
  13. Vishal Duggal 2013-10-24

    [~mdelmarter] The contentView property of the popover is a new feature added to 3.2.0 so you could customize the navigation controller [TIMOB-15402]. This is not available in 3.1.X branch. You can modify the sample by adding the tabbedbar and tableview to the popover instead and use this with 3.1.3 GA, though you will not be able to customize the navigation controller.
  14. nicolomonili 2013-12-05

    in this release : http://docs.appcelerator.com/titanium/release-notes/?version=3.2.0.B#ios7_1 has been added this new feature "blur" ?
  15. nicolomonili 2013-12-17

    nothing ??
  16. Ingo Muschenetz 2013-12-17

    Hi [~nicolomonili], I believe the issue is that it's not clear what you are asking. Can you let us knw specifically what you are requesting? Ideally, a sample set of test code that doesn't work as you expect?
  17. nicolomonili 2013-12-17

  18. Ingo Muschenetz 2013-12-17

    Re-reviewing the comments, it seems that there is no native API for creating a blur: http://whoisryannystrom.com/2013/09/17/Live-blur-in-iOS7/ We'd be unlikely to add this functionality based on a workaround to the SDK. Is there an officially support way of producing this effect?
  19. nicolomonili 2014-01-21

    Ingo Muschenetz , who should answer this question ??? ... its just a shame that a platform like Titanium does not offer this feature if you could reproduce this (https://github.com/alexdrone/ios-realtimeblur) effect would be perfect
  20. Eric Merriman 2018-08-06

    Closing as invalid. If incorrect, please reopen.

JSON Source