實現一個簡單的滾動條

bones 沒有自帶一個滾動條，主要是考慮到滾動條的樣式非常多變，可以看下qq系列的滾動條
QQ新聞裏的滾動條，如下

異於通常的windows風格滾動條
QQ電腦管家

典型的移動平臺風格
再看下QQ聊天框的

類似於windows風格但垂直滾動條兩邊多了一個直接到頂部和底部的響應區域
由於滾動條如此多變想提供一個內置的並且美工設計都能認可的滾動條非常困難，相比與內置，能讓用戶容易寫出一個自己需要的滾動條才應該是條正確的道路。
bones當前的版本已經可以通過scroller的接口讓用戶寫出一個滾動條來，在這裏就演示下如何實現一個滾動條 並用它來配合scroller滾動標籤。
由於手頭沒有滾動條圖片資源 我用了2個色塊來替代，你也可以通過bones.shader創建漸變色來讓滾動條更好看一點，效果圖如下：


滾動條的編寫同樣使用了擴展標籤scrollbar，具體如何使用擴展標籤前文已經講了，這裏不再講解。
先分析下滾動條的結構：
1：滾動條最少應該有一個滑動槽和一個滑塊
2：鼠標在滑塊上按下並移動時滑塊要跟着鼠標滑動
在這裏我以能繪製出矩形色塊的shape標籤來代表滑動槽和滑塊，其中滑塊是滑動槽的子標籤如下：

    <!--底色-->
    <shape>
      <!--滑塊區域-->
      <shape>
        <event name ="onMouseDown" phase ="target" module ="scrollbar" func ="onSliderMouseDown"></event>
        <event name ="onMouseUp" phase ="target" module ="scrollbar" func ="onSliderMouseUp"></event>
        <event name ="onMouseMove" phase ="target" module ="scrollbar" func ="onSliderMouseMove"></event>
        <event name ="onMouseLeave" phase ="target" module ="scrollbar" func ="onSliderMouseLeave"></event>
      </shape>
      <notify name ="onCreate" module ="scrollbar" func ="onCreate"></notify>
      <notify name ="onSizeChanged" module ="scrollbar" func ="onSizeChanged"></notify>
    </shape>

通常滾動條有水平和垂直滾動2種 因此提供了setStyle來設置具體類型

--設置水平還是垂直
local function setStyle(self, horiz)
    self.horiz_ = horiz
end

知道滾動條類型後，還需要根據滾動範圍來計算滑塊的大小，看下垂直滾動條如何計算

local function updateSliderV(self)
    -- view + min + max = bar.height
    local w, h = self:getSize()
    local view = self.view_
    local min = self.min_
    local max = self.max_
    local cur = self.cur_
    local total = view + min + max
    local scale_slider = view / total
    local slider_h = view / total * h
    local slider_t = (cur - min) / (max - min) * (h - slider_h)
    self.slider_:setSize(w, slider_h)
    self.slider_:setLoc(0, slider_t)
end

接下來 需要在點擊到滑塊時， 滑塊跟鼠標移動並且通知scroller當前的滾動值

--self是滑塊
function mod.onSliderMouseMove(self, e)   
    if self.click_ then
        local x, y = e:getRootLoc()
        local ydelta = y - self.last_y_
        local xdelta = x - self.last_x_
        local parent = self.parent_        
        local w, h = self:getSize()
        local cur = 0
        local horiz = parent.horiz_
        if horiz then
            cur = xdelta / w * (parent.max_ - parent.min_) + parent.cur_
        else
            cur = ydelta / h * (parent.max_ - parent.min_) + parent.cur_ 
        end
        parent.slave_:setScrollPos(cur, horiz)
    end

    self.last_x_, self.last_y_ = e:getRootLoc()
end

在這裏self 指的代表滑塊的標籤 父則是代表滑動槽，具體的可以看onCreate函數，slave則是scroller標籤 這個由外界初始化時調用setSlave時設置的

    --關聯scroller 和滾動條
    local vbar = self:getChildAt(2)
    local hbar = self:getChildAt(3)
    self.scroller_.vbar_ = vbar
    self.scroller_.hbar_ = hbar
    vbar:setSlave(self.scroller_)
    vbar:setStyle(false)
    hbar:setSlave(self.scroller_)
    hbar:setStyle(true)

    --設置scroller大小 即視口
    self.scroller_:setSize(w / 2, h / 2)
    self.scroller_:setLoc(w + 10, 10)
    --設置滾動條的位置 
    local bar_const = 12
    vbar:setLoc(w + 10 + w / 2, 10)
    vbar:setSize(bar_const, h / 2)
    --滾動條的位置可以是任意的 垂直滾動條是緊貼 水平滾動條可以離遠點
    local delta = 20
    hbar:setLoc(w + 10, 10 + h /2 + delta )
    hbar:setSize(w / 2, bar_const)

    --需要滾動顯示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_:setScrollInfo(w, true)
    --響應滾動要用到image標籤 緩存一下
    self.scroller_.image_ = self.scroller_:getChildAt(0)

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