bones腳本篇 - 內置標籤scroller

scroller標籤是跟滾動相關的標籤,bones標籤默認是沒有滾動功能的,如果標籤需要滾動那麼只要放到scroller裏 就可以支持滾動了
下面演示下如何使用scroller
先看效果圖:
這裏寫圖片描述
在右邊的圖片上滾輪滾動可以顯示圖片未顯示的部分
這裏寫圖片描述

首先需要把image放到scroller下

      <!--垂直滾動顯示圖片-->
      <scroller>
        <image></image>
        <event name ="onWheel" phase ="capturing" module ="test" func ="onWheel"></event>
      </scroller>

image放到scroller下 再在lua中初始化就可以支持滾動了,這裏scroller響應滾輪事件是因爲 由於沒有滾動條的緣故所以需要用滾輪事件來演示效果,在早期的版本中scroller是自帶滾輪響應的,但經過考慮後還是去掉了這部分代碼 主要是考慮到scroller嵌套scroller的問題 如果自帶響應需要做一些過濾操作,比較麻煩。
lua中的初始化代碼:

function mod.onCreate(self)
    self.image_ = self:getChildAt(0)
    self.scroller_ = self:getChildAt(1)

    --設置image標籤顯示完整的圖片
    local pm_key = "lena"
    local pm = bones.resource.getPixmap(pm_key)
    local w, h = bones.pixmap.getSize(pm)
    print(w)
    self.image_:setSize(w, h)
    self.image_:setContent(pm_key)

    --設置scroller大小 即視口 演示 垂直滾動 水平方向可以和圖片一樣大
    self.scroller_:setSize(w, h / 2)
    self.scroller_:setLoc(w + 10, 10)
    --需要滾動顯示image標籤大小爲圖片大小
    local image = self.scroller_:getChildAt(0)
    image:setSize(w, h)
    image:setContent(pm_key)
    --scroller垂直方向的滾動範圍是0-h/2 設置成image的高 scroller會自動計算滾動範圍
    self.scroller_:setScrollInfo(h, false)
    self.scroller_.image_ = self.scroller_:getChildAt(0)
end

仔細看看代碼 會發現 雖然說是滾動image,但image實際上並未滾動,而是scroller以視口的模式顯示了image的一部分

接下來還要加上滾動事件的響應來演示效果

--滾輪事件監聽放到scroller上 
function mod.onWheel(self, e)
--處理滾輪事件 滾動scroller標籤
    local target = e:target()
    if target == self.image_ then
        --滾輪值通常是120的倍數
        local delta
        --計算滾動的像素 水平滾動
        if e:dx() ~= 0 then
            delta = -e:dx() / 120 * 10;
            self:setScrollPos(self:getScrollPos(true) + delta, true)
        end
        --垂直滾動
        if e:dy() ~= 0 then
            delta = -e:dy() / 120 * 10;
            self:setScrollPos(self:getScrollPos(false) + delta, false)
        end

    end
end

到此 就可以試試在右邊的圖片上滾動滾輪來看效果了。
到目前爲止lua中的方法名和參數都與C++接口保持一致,我覺得註釋應該還算詳細,比如scroller文檔在bones.h中BonesScroller接口裏,可以看下setScrollInfo和
setScrollPos再對應上面lua腳本,應該還是很容易明白代碼意思:

    /*!設置子控件可顯示的尺寸
    @param[in] total 子控件可顯示的尺寸
    @param[in] horizontal true則爲水平滾動屬性 false爲垂直滾動屬性
    @note scroller的size作爲視口的尺寸 total 與視口的差值即爲最大滾動範圍
    */
    virtual void setScrollInfo(BonesScalar total, bool horizontal) = 0;
    /*!設置當前滾動值
    @param[in] cur 當前滾動值
    @param[in] horizontal true則爲水平滾動屬性 false爲垂直滾動屬性
    */
    virtual void setScrollPos(BonesScalar cur, bool horizontal) = 0;

本篇完整代碼下載:
http://blog.csdn.net/dalixux/article/details/48830721

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章