Cocostudio(1) 容器層的使用- ScrollView ListView PageView

轉：http://www.cocos2d-x.org/docs/manual/framework/native/gui/container/zhGUI

容器層的使用-UIScrollView 滾動視圖

除了布局容器，我們常用的還有滾動層容器，它可以擴大我們的顯示控件，當內容元素很多時，尤為有用。可以設置為兩個方向，橫向或者是豎向。

    UIScrollView* scrollView = UIScrollView::create();
    scrollView->setTouchEnabled(true);
    scrollView->setSize(Size(280, 150));        
    Size backgroundSize = background->getContentSize();
    scrollView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2 +
                           (backgroundSize.width - scrollView->getSize().width) / 2,
                           (widgetSize.height - backgroundSize.height) / 2 +
                           (backgroundSize.height - scrollView->getSize().height) / 2));

    m_pUiLayer->addWidget(scrollView);

    UIImageView* imageView = UIImageView::create();
    imageView->loadTexture("cocosgui/ccicon.png");

    float innerWidth = scrollView->getSize().width;
    float innerHeight = scrollView->getSize().height + imageView->getSize().height;

    scrollView->setInnerContainerSize(Size(innerWidth, innerHeight));    

    imageView->setPosition(Point(innerWidth / 2, imageView->getSize().height / 2));
    scrollView->addChild(imageView);

    // 為 scrollview 添加其它控件，省略

請看如圖效果，這里創建了一個 ScrollView 控件，並且添加了一些內部元素，以完成布局，控件內容超出顯示區域，我們可以通過上下拖動，來顯示上下未未顯示的不分。

注意： imageView 設置的位置在 scrollview 之外，可以通過 scrollview 的 setInnerContainerSize 方法設置包含內容的區域大小，在拖動的過程中，邊界檢查。

如果是設置橫向的拖動效果，我們只需要設置 InnerContainerSize 的 寬度大於控件的大小，高度相同，就能實現橫向的拖動效果。

 

容器層的使用-UIListView

UIListView, UIListViewEx(2.2.1)

ListView 繼承自 ScrollView，所以 ScrollView 里面有的功能，特性，在 ListView 中也都能體現出來。那么 ListView 相比較 ScrollView 多了些什么呢？還是先從使用方法上開始：

    UIListView* lv = UIListView::create();
    UIButton* model = UIButton::create();
    model->loadTextures("cocosgui/animationbuttonnormal.png", "cocosgui/animationbuttonpressed.png", "");
    lv->setItemModel(model);

    for (int i=0; i<20; i++)
    {
        lv->pushBackDefaultItem();
    }
    lv->setItemsMargin(10);
    lv->setGravity(LISTVIEW_GRAVITY_CENTER_HORIZONTAL);
    lv->setSize(Size(100, 100));
    lv->setBackGroundColorType(LAYOUT_COLOR_SOLID);
    lv->setBackGroundColor(Color3B::GREEN);
    lv->setPosition(Point(100, 100));
    m_pUiLayer->addWidget(lv);

如圖，但不能很好的看到效果，這里是類似 ScrollView 的實現，可以實現拖動，並且有二十個按鈕在這其中。先說說普通的屬性，通過ItemsMargin 設置每個元素的間距， 通過 Gravity 設置布局方案，這里是橫向劇中顯示。

lv->setItemModel(model) 為 ListView 設置了默認的項 (Default Item)，然后通過一個 for 循環，添加了 20 次此默認的項，注意這 20 次並不是說， model 被添加了 20 次，二十在每次添加的時候都對 model 做了一個 克隆，它們擁有相同的屬性，但卻不是同一個對象。

除了使用 pushBackDefaultItem() 為 ListView 添加項之外，我們還可以通過以下方法添加：

方法	說明
pushBackDefaultItem()	添加一個默認項
insertDefaultItem(int index)	插入一個默認項，有序的
pushBackCustomItem(UIWidget* item)	添加一個新項
insertCustomItem(UIWidget* item, int index)	插入一個新項

以上是提供的一些添加項的方法，除了以上還有一些刪除的方法，獲取的方法，以便我們能夠靈活的操作其中的每個元素：

removeItem(int index)	移除一個項
removeLastItem()	移除最后一個項
getItem(unsigned int index)	根據索引獲取一個項
getItems()	獲取所有項，返回 Array 集合
getIndex(UIWidget *item)	獲取一個項的索引

 

容器層的使用- UIPageView

除了可以滾動顯示的 ScrollView ， 根據項來顯示列表的控件之外，還有可以根據 頁 來顯示 PageView。 PageVew 可以讓我們整頁整頁的顯示內容，並且可以做自動對齊，什么是自動對齊，就像你的書翻頁，只翻了一半，它回自動幫你翻過去一樣。

    UIPageView* pageView = UIPageView::create();
    pageView->setTouchEnabled(true);
    pageView->setSize(Size(240, 130));
    Size backgroundSize = background->getContentSize();
    pageView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2 +
                              (backgroundSize.width - pageView->getSize().width) / 2,
                              (widgetSize.height - backgroundSize.height) / 2 +
                              (backgroundSize.height - pageView->getSize().height) / 2));

    for (int i = 0; i < 3; ++i)
    {
        UILayout* layout = UILayout::create();
        layout->setSize(Size(240, 130));

        UIImageView* imageView = UIImageView::create();
        imageView->setTouchEnabled(true);
        imageView->setScale9Enabled(true);
        imageView->loadTexture("cocosgui/scrollviewbg.png");
        imageView->setSize(Size(240, 130));
        imageView->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));
        layout->addChild(imageView);

        UILabel* label = UILabel::create();
        label->setText(CCString::createWithFormat("page %d", (i + 1))->getCString());
        label->setFontName(font_UIPageViewTest);
        label->setFontSize(30);
        label->setColor(Color3B(192, 192, 192));
        label->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));
        layout->addChild(label);

        pageView->addPage(layout);
    }
    pageView->addEventListenerPageView(this, pagevieweventselector(UIPageViewTest::pageViewEvent));

    m_pUiLayer->addWidget(pageView);

如圖顯示，創建了一個 PageView 對象 pageView，設置大小為 "Size(240, 130)"，這也就是它的顯示區域大小了。我們使用一個 for 循環，添加了三個同樣的元素 UILayout ，每個 UILayout 的大小也都是 Size(240, 130)，所以 PageView 一次正好能夠顯示一個項的內容，也就是 "頁"。至於每個頁的 UILayout 里面裝着什么，那就是根據自己的需要而定了。然后使用 pageView->addPage(layout) 添加一個頁，需要注意的是，這里所添加的必須是 UILayout 類型對象或者其派生類對象。

PageView 雖然實現了滑動，滾動的效果，但它並不是繼承自 ScrollView 的，而是直接繼承自 UILayout 的，那怎么實現滾動的呢，它集成並且實現了 UIScrollInterface 類型，這賦予了它可以滾動的屬性。ScrollView 也是同樣。

各個控件組成了豐富的 GUI 界面，而容器層則是其骨架，通過它的布局，來達到我們想要的效果。從 Panel 到 ScrollView ，Listview 和 PageView ，根據實際的需要靈活的組織可以讓我們的界面顯示的更為友好。