티스토리 뷰

웹에서 아이폰스러운 Carousel 구현하기


페이지 컨트롤(UIPageControl; Carousel; 일명 회전목마 컨트롤)은 아이폰이나 안드로이드폰을 쓰면 가장 먼저 접하게되는 UI 컨트롤이다. 일명 홈 스크린이라고 불리는 화면에서 가로 또는 세로로 플리킹(flicking)하면 이전/다음 페이지로 이동하는 그 컨트롤이다. 아이폰의 경우에는 화면 하단에 하얗고 까만 작은 동그라미가 있고, 안드로이드는 화면 상단 좌우에(폰에 따라 조금씩다르다) 작은 동그라미가 있어서, 총 몇 페이지 중에서 몇 번째 페이지를 보고 있는 지를 알려준다.

이 글에서 설명하는 방법을 안드로이드용 푸딩얼굴인식 앱을 만들면서 활용했는데, 데모 동영상에서 35초와 1분 10초 근처에 나오는 화면이 이 컨트롤을 활용한 것이다.

백문이불여일견! 코드를 살펴보자!
$(document).ready(function() {
var iscroll = new iScroll('wrapper', {
snap: 'li',
momentum: false,
hScrollbar: false,
vScrollbar: false,
onScrollEnd: function() {
$('#indicator li').each(function(i, node) {
if(i === iscroll.currPageX) {
$(node).addClass('active');
} else {
$(node).removeClass('active');
}
});
}
});
iscroll.scrollToPage(0);
});

#wrapper {
width:200px;/*=page_width*/
height:200px;/*=page_height*/
margin:0;
padding:0;
overflow:none;
background-color:#fff;
}

#scroller {
position:relative;
top:0;
left:0;
width:600px;/*=number_of_page*page_width*/
height:200px;
float:left;
}

#scroller ul {
list-style:none;
position:relative;
display:block;
margin:0;
padding:0;
top:0;
left:0;
width:100%;
height:100%;
}

#scroller li {
display:block;
float:left;
width:200px;
height:200px;
}
/* 나는 깜찍한 CSS로 아이폰스러운 페이지 인디케이터를 구현하였으나 공간이 부족하여 생략한다 -_-; */

 <div id="wrapper">
   <div id="scroller">
     <ul>
       <li><div>1st page!</div></li>
       <li><div>2nd page!</div></li>
       <li><div>3rd page!</div></li>
     </ul>
   </div>
 </div>
 <div id="indicator">
   <ul>
     <li><span>1</span></li>
     <li><span>2</span></li>
     <li><span>3</span></li>
   </ul>
 </div>


백문이불여일RUN! 결과를 확인하자!(위에서 생략했던 깜찍한 CSS도 포함되어 있음)
http://jsbin.com/epeci5


이 글에서는 iScroll 라이브러리를 활용하여 페이지 컨트롤을 구현하고, 덤으로 아이폰과 유사한 인디케이터 까지 구현해 보았다.

모바일 단말은 화면이 작기 때문에 이런 유형의 컨트롤(탭/Carousel/...)들이 꽤 다양하고, 또 유용하지만, 직접 만들자면 쉽지 않다. 그렇다고 이 컨트롤 하나 때문에 Sencha나 jQueryMobile 같은 덩치 큰 프레임웍을 사용하는 것이 부담스럽다면, iScroll 라이브러리는 한 번 쯤 살펴볼 가치가 있다.

참고자료:
http://cubiq.org/iscroll-4
https://github.com/blackdynamo/jQuery-Mobile-Carousel
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Carousel
http://www.winktoolkit.org/documentation/module/592/
http://developer.apple.com/library/ios/#documentation/uikit/reference/UIPageControl_Class/Reference/Reference.html
저작자 표시 동일 조건 변경 허락
신고
댓글
댓글쓰기 폼