타이타늄 모바일로 딤드(dimmed) 레이어(window) 만들기

딤드 레이어를 만들때 실수하기 가장 쉬운 부분

1. 부모 윈도우를 반투명하게 만들고,
2. 그 윈도우 위에 뷰를 하나 올리면 되지않을까 하는 생각이다.

코드로 만들어보면 대충 다음과 같다. **var win = Ti.UI.createWindow({ backgroundColor: "gray", opacity: 0.5 });

var view = Ti.UI.createView({ width: 200, height: 200, top: 50, left: (Ti.Platform.displayCaps.platformWidth- 200)/2, opacity:1 }); win.add(view); win.open();

하지만 위 코드는 부모의 투명도를 자식들이 그대로 물려받기 때문에 기대했던대로 동작하지 않는다. 즉, 배경만 투명하게 만들고 싶은데, 실제 컨텐츠 뷰도 반투명하게 되어 버린다. opacity:1 로 지정해도 마찬가지다.

그럼, 어떻게 해야할까? 여기에 꼼수가 있다. 바로 윈도우를 2개 띄우면 된다. 사실 웹에서 딤드레이어를 구현할때도 아래와 같이 Div태그를 중첩하지 않고, 병렬로 2개를 이용해 만든다.

웹에서 구현하는 방식

중심 레이어

위와 같은 방법으로 코드를 다시 작성해보면 다음과 같다. **var winBG = Ti.UI.createWindow({ backgroundColor : '#000', opacity : 0.60 });

var win = Ti.UI.createWindow({ width : 304, height : 284, top : 44, left : 8, borderRadius : 10 }); winBG.open(); win.open();