2016. 3. 9. 19:31

[FeathersUI] PageIndicator 사용 시 페이지수가 많은 경우.

FeathersUI의 PageIndicator를 사용할때 페이지수가 많을 경우 가로로 무작정 늘어나서 화면을 벗어나버린다.


이 경우에는 ScrollContainer 안에 PageIndicator를 넣고 스크롤을 이동시키도록 하면 문제를 해결할 수 있다.


사용되는 크기는 적당히.


설정--------------------------


var pageLayout:HorizontalLayout = new HorizontalLayout();
pageLayout.horizontalAlign = HorizontalLayout.HORIZONTAL_ALIGN_CENTER;

var pageContainer:ScrollContainer = new ScrollContainer();
pageContainer.width = 333;
pageContainer.height = 67;
pageContainer.layout = pageLayout;
addChild(pageContainer);

var friendListPage:PageIndicator = new PageIndicator();
friendListPage.pageCount = friendList.horizontalPageCount;
friendListPage.horizontalAlign = PageIndicator.HORIZONTAL_ALIGN_CENTER;
friendListPage.interactionMode = PageIndicator.INTERACTION_MODE_PRECISE;
friendListPage.normalSymbolFactory = function():DisplayObject
{
return new Image(......);
};
friendListPage.selectedSymbolFactory = function():DisplayObject
{
return new Image(......);
};
pageContainer.addChild(friendListPage);

처리--------------------------

#아래부분은 Event.CHANGE 일떄 호출되도록 하고.

#각각의 수치는 ScrollContainer의 크기와 출력되는 Symbol의 크기와 관련이 있으니 적당히 조절해야 함

private function onFriendListChange(e:Event):void
{
    var list:PageIndicator = PageIndicator(e.currentTarget);
    view.friendList.scrollToPageIndex(list.selectedIndex, 0);
    view.friendList.selectedIndex = -1;

    view.pageContainer.validate();
    if(list.selectedIndex < 5)
        view.pageContainer.scrollToPosition(0, 0, 0.5);
    else if(list.selectedIndex >= list.pageCount - 5)
        view.pageContainer.scrollToPosition((list.pageCount - 9) * 37, 0, 0.5);
    else
        view.pageContainer.scrollToPosition((list.selectedIndex - 4) * 37, 0, 0.5);
}