保证你的滚动条样式不被拉伸

来源：互联网发布：unity3d 两个摄像机编辑：程序博客网时间：2024/06/05 15:14

这是一篇老文章，以前关注的人较少，现在发在自己博客中，做一个记录。

有很多人在项目中使用滚动条组件（对于使用flash CS工具进行开发或者纯AS项目中使用CS中提供的组件fl.controls.UIScrollBar或者使用Flex中所有容器类自带的滚动条）使会为它们设置样式/皮肤，但是会偶尔发现，我TMD给你设计的滚动条滑块本来是个好好的图片，但它滚动条会随着内容而自动进行滑块的缩放，导致我滑块皮肤被拉伸或缩放得失真了，这可肿么办才好？愁煞老夫也~

在百度上搜索无果，只能求助于Google大师，果不出所料，有不少老外也遇到此问题并给出了解决方案，那么就让我们一同来看看。

使用fl.controls.UIScrollBar

在纯AS项目或者使用CS工具进行开发时我们会用到fl.controls.UIScrollBar这个组件，但是此滚动条组件会根据滚动内容的多少进行滚动条缩放，以致皮肤失真。那么此组件进行滑块缩放的代码被放置在一个叫做updateThumb的protected方法中，所以我们可以重载此方法来做到回避滑块缩放的工作。首先，确保你已导入fl.controls包，之后，新建一个类继承于fl.controls.UIScrollBar，这里我们就叫它为UIScrollBar_thumb好了，我们在这个类里面进行updateThumb方法的重载工作，代码如下：

view source
print?
package tests
{
    importfl.controls.ScrollBar;
    importfl.controls.UIScrollBar;
      
    publicclassUIScrollBar_thumb extendsfl.controls.UIScrollBar
    {
        /** 指定的高度。若不设置或设置为0以下的数字，则滚动条自动计算大小并拉伸 */
        publicvarexplicitHeight:Number= 0;
          
        publicfunctionUIScrollBar_thumb() 
        {
              
        }
        override protectedfunctionupdateThumb():void 
        {
            if( explicitHeight > 0 )
            {
                varper:Number= maxScrollPosition - minScrollPosition + pageSize; 
                if(track.height< = explicitHeight || maxScrollPosition <= minScrollPosition || (per == 0 ||isNaN(per)))  
                {
                    thumb.height= explicitHeight; 
                    thumb.visible=false;
                } 
                else 
                {
                    thumb.height= explicitHeight; 
                    thumb.y = track.y+(track.height-thumb.height)*((scrollPosition-minScrollPosition)/(maxScrollPosition-minScrollPosition));
                    thumb.visible=enabled;
                }
            }
            else
            {
                super.updateThumb();
            }
        }
    }
}

这段代码参考自http://www.bigresource.com/FLASH-extend-UIScrollBar-to-set-thumb-to-not-scale-qT52NGnEPx.html，为什么要这样写我也不是很明了，毕竟我们看不到UIScrollBar的源码。这段代码大致意思就是在需要调整滑块高度的时候始终设置其高度为指定值即可保证滑块始终不会被拉伸以致失真。在使用的时候你只需要所有要用到UIScrollBar的地方改用上面这个UIScrollBar_thumb 类来代替即可，别忘了指定explicitHeight的值。

使用Flex3容器自带滚动条

在Flex3里面，默认情况下全部容器都是自带了滚动条的，而众所周知，Flex组件的外观更新工作都是在updateDisplayList方法中进行的，因此我们可以建立一个所要使用容器（如mx.controls.List）的子类并重载updateDisplayList方法，在重载的方法中把所有需要设置滚动条滑块高度的地方改掉即可，参考代码如下：

view source
print?
package com.ice.stonekey.commoncomponents {
      
    importmx.controls.List;
    importmx.core.mx_internal;
      
    use namespace mx_internal;
      
    /**
     * 让滚动条图标不被拉伸的List控件 
     * 
     */
    publicclassCustomList extendsList {
          
        /** 滑块指定高度 */
        publicvarvThumbExplicitHeight:Number= 120;
          
        override protectedfunctionupdateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            if(verticalScrollBar){
                verticalScrollBar.scrollThumb.minHeight = vThumbExplicitHeight;
                verticalScrollBar.setScrollProperties(0,verticalScrollBar.minScrollPosition,
                    verticalScrollBar.maxScrollPosition,0);
            }
            super.updateDisplayList(unscaledWidth, unscaledHeight); 
              
        }
  
    }
}

这段代码参考自哪里我一时找不到了，不过关键不在于此，而在于如何实现固定滑块为指定高度。在上面这段代码中我们发现，只需要两句代码即可把垂直滚动条的滑块定死为指定高度，第一句设置滑块最小高度为指定高度，第二句指定当前页面尺寸为0，那么此时滑块就会使用最小高度来作为其高度了。

以上实现办法都只是为了实现而写，一定不是什么好办法，但是在别无选择的情况下只能勉强接受了