딤드 레이어를 만들때 실수하기 가장 쉬운 부분
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개를 이용해 만든다.
웹에서 구현하는 방식
<body>
<div class=”lay_content”>중심 레이어</div>
<div class=”dimmed”></div>
</body>
위와 같은 방법으로 코드를 다시 작성해보면 다음과 같다.
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();