Flex: как сделать скины для прогрессбаров? - PullRequest
1 голос
/ 29 сентября 2010

Я хочу установить собственную обложку на моем прогрессбаре, но она работает не так, как я хочу.У моей кожи есть 3 разных цвета (зеленый, желтый, красный), и зеленый должен показывать, пока он не достигнет примерно 50%, тогда я хочу, чтобы желтый появился после зеленого и красный на 90% после зеленого и желтого.Поэтому при 100% все они должны отображаться.

Проблема в том, что ProgressBar устанавливает только ширину моей кожи, поэтому все цвета отображаются постоянно.Но если я использую IndeterminateSkin, но не устанавливаю Indeterminate в true, это не происходит.

Как я могу создать скин, который не просто меняет ширину?Я просто использую MovieClip для скина.

1 Ответ

1 голос
/ 29 сентября 2010

Я делал это в прошлом, используя программные скины. Вам нужно создать свои собственные версии ProgressBarSkin и ProgressBarMaskSkin и опционально ProgressBarTrackSkin. В вашем ProgressBarSkin вы можете переопределить метод updateDisplayList следующим образом:

    override protected function updateDisplayList(w:Number, h:Number):void {
        super.updateDisplayList(w, h);
        graphics.clear();

        var fullWidth:int = w;
        if (parent != null && (parent as UIComponent).mask != null)
            fullWidth = (parent as UIComponent).mask.width;

        var matrix:Matrix = new Matrix();
        matrix.createGradientBox(fullWidth, h);
        var colors:Array = [0xd00000, 0xf0d000, 0x00ff00];

        this.graphics.lineStyle();
        this.graphics.beginGradientFill(GradientType.LINEAR, colors, [1,1,1], [0,128,255], matrix); 
        this.graphics.drawRoundRect(2, 2, w - 4, h - 4, h - 4); 
    }

И в вашем ProgressBarMaskSkin сделайте это:

    override protected function updateDisplayList(w:Number, h:Number):void {
        super.updateDisplayList(w, h);
        graphics.clear();

        this.drawRoundRect(2, 2, w - 4, h - 4, (h - 4) / 2, 0xffffff, 1); 
    }

Затем вы присваиваете свои классы скинов своей шкале прогресса, и все готово. Надеюсь, это поможет.

...