[TIMOB-1555] iOS: Expose shadow properties on the CALayer

GitHub Issue	n/a
Type	New Feature
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2014-03-03T20:21:39.000+0000
Affected Version/s	n/a
Fix Version/s	2014 Sprint 05, 2014 Sprint 05 API, Release 3.3.0
Components	iOS
Labels	dev-investigate, feature, imageview, ios, ipad, iphone, kitchensink, qe-closed-3.3.0, qe-testadded, shadow, triage, view, window
Reporter	Ralf Pfeiffer
Assignee	Vishal Duggal
Created	2011-04-15T02:55:57.000+0000
Updated	2014-04-25T07:27:39.000+0000

Description

These views should have a shadow property.

Comments

James K 2011-04-15

This would be extremely useful. It also seems relatively straightforward to implement: http://stackoverflow.com/questions/805872/how-do-i-draw-a-shadow-un...
majman 2011-04-15

+1 for Drop Shadows!

Sindre Sorhus 2011-10-30

It should also support setting blur and opacity. Example:

   var view = Ti.UI.createView({
   	shadow: {
   		color: '#000',
   		offset: {
   			x: 0,
   			y: 1
   		},
   		opacity: 0.4,
   		blur: 2
   	}
   });

Javier Rayon 2012-01-17

+1 for this. The part of obj-c requires import QuartzCore framework to expose the layer property on any UIView. If QuartzCore is added, is as easy as {noformat} self.layer.masksToBounds = NO; self.layer.shadowOffset = CGSizeMake(5, 5); self.layer.shadowRadius = 5; self.layer.shadowOpacity = 0.3; {noformat}
Javier Rayon 2012-01-17

Here is my workaround: http://developer.appcelerator.com/question/130784/trick-drop-real-shadows-in-titanium-ios

Martin Guillon 2012-09-19

i implemented it in my branch. Here is an example code that

   var win = Ti.UI.createWindow({ backgroundColor: '#fff' });
   win.add(Ti.UI.createView({
   	top:10,
       width:80,
       height:80,
       shadowColor:'#000000',
       shadowOffset:{x:0,y:0},
       shadowRadius:6,
       borderRadius:20,
       borderWidth:2,
       borderColor:'green',
       backgroundGradient:{
           type:'linear',
           colors:[{color:'#d4d4d4',position:0.0},{color:'#c4c4c4',position:0.50},{color:'#b4b4b4',position:1.0}]
       }
   }));
   
   win.add(Ti.UI.createView({
   	top:10,
       width:80,
       height:80,
       shadowColor:'#000000',
       shadowOffset:{x:0,y:0},
       shadowRadius:6,
       borderRadius:20,
       borderWidth:2,
       backgroundColor:'blue',
       borderColor:'green'
   }));
   
   win.add(Ti.UI.createView({
   	top:10,
       width:80,
       height:80,
       shadowColor:'#ddff0000',
       shadowOffset:{x:0,y:0},
       shadowRadius:6,
       borderRadius:20,
       borderWidth:2,
       borderColor:'green',
       backgroundImage:'/images/bg.png'
   }));
   
   win.add(Ti.UI.createView({
   	top:10,
       width:80,
       height:80,
       shadowColor:'#ddff0000',
       shadowOffset:{x:0,y:0},
       shadowRadius:6,
       borderRadius:20,
       borderWidth:2,
       borderColor:'green',
       backgroundRepeat:true,
       backgroundImage:'/images/atlanta.jpg'
   }));
   win.open();

pull request coming

Martin Guillon 2012-09-19

pull request https://github.com/appcelerator/titanium_mobile/pull/2996
Jan Helleman 2012-10-20

Is it possible to get this working for windows as well? For example [ViewDeck](https://github.com/Inferis/ViewDeck) uses shadows on windows. Or should that be a new ticket?
Paul Hamilton 2014-02-21

Noticed the update Just was trying to use drop shadows last week and noticed there was no way to do it with dynamically sized views based on content. +1 for drop shadows, can't come soon enough for me.
Vishal Duggal 2014-02-23

Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/5367 Test case added in KS BaseUI->Views->Shadows & Clipping https://github.com/appcelerator-developer-relations/KitchenSink/pull/142
Paul Hamilton 2014-03-03

How do we use this is if we grab the latest CI build? Any similar functionality for Android?
Priya Agarwal 2014-04-25

Verified with test environment: Appc-Studio:3.3.0.201404211130 sdk:3.3.0.v20140424130915 acs:1.0.14 alloy:1.4.0-dev npm:1.3.2 titanium:3.3.0-dev titanium-code-processor:1.1.1-beta1 xCODE:5.1.1 Device:Iphone5(7.1) Shadow properties working fine in view. Clipping work fine with parent and child View.

JSON Source