Powered by AOL Music

Relative Positioning

What is relative positioning?
  1. RelativePos.xml
  2. Relative Position 1: defining X&Y Coordinates
  3. Relative Position 2: Specify the Height and Width
  4. Relative Position 3: Negative X Coordinate
  5. Relative Position 4: Negative Y Coordinate
  6. Relative Position 5: Relatw and RelatH
  1. What is relative positioning?
A. Introduction

Modern Winamp skinning offers unparalleled flexibility in element placement. You're no longer restricted to specifying X&Y coordinates for an element. Instead, you can define the position of the element relative to your component. When the component resizes, the element will stretch or move with the component. This flexibility frees the skin designer from the hassel of retooling or redrawing the graphic assets over and over again to different size and width. Winamp will do that for you. =)

B. Add relativepos.xml to your SimpleTutorial

For this section, I have made another XML file called "relativepos.xml" that you need to include in your SimpleTutorial skin. Download the relativepos.xml here.(Please right-click on the link and choose 'Save As...' or 'Save Link Target As...')

Place this file in the same directory as your SimpleTutorial skin directory. For most people, the path is "C:\Program Files\Winamp\Skins\SimpleTutorial". Add this line to your Skin.xml in SimpleTutorial:

This is what your skin.xml should look like after the change:



  2. RelativePos.xml


Relativepos.xml uses elements from the SimpleTutorial skin. I am using the "blue-vis-layer.png" and "red-vis-layer.png" in the Player directory.



  3. Relative Position 1: defining X&Y Coordinates


A. register_autopopup="1"

Before we delve into the code, I want to go over one feature. Take a look at this tag: . When you add this tag to a groupdef, Winamp automatically wraps a container and layout around it and allow you to see the group in a separate window. This is particularly useful when you want to test the behavior of that group separate from everything else. To open that window, right click on the Main Player to bring up the menu. Go to the "Windows" submenu and you'll see the extra windows relativepos.xml has created. Open them up and try them out.



B. Defining X&Y Coordinates

Line 11-19 defines a group with a "blue-vis" layer at the coordinate of (20,30). This is probably what you've been doing all along. As you can see, that the blue-vis layer's location doesn't change if you resize the window. The position is fixed.

*Small size window


*Large size window; Blue-vis layer position did not change


I encourage you to play with this XML file. If you change the X&Y coordinates on line 14 to (-20, -30), your blue-vis layer will disappear. The reason is that the coordinate specified will be outside the context of your component window and therefore will not be rendered.

*Negative X&Y Coordinates: (-20, -30)
  4. Relative Position 2: Specify the Height and Width


In group 2, we're defining the height and width of the blus-vis layer that is larger than the image. When you do that, Winamp will stretch the image to that size. Likewise, if you specify height or width that is smaller than the image, Winamp will shrink the image to fit to that size.

*RPOS1 window: Height and Width not specified


*RPOS2 window: Height and Width defined
  5. Relative Position 3: RelatX & Negative X Coordinate


Line 30-39 defines a group with a "blue-vis" layer at the coordinate of (-120,30). Notice that we have an extra line on line 34: "relatx=1". By setting relatx to 1, you're telling Winamp to start the x-coordinate from the right edge of the window. Note that the X-Coordinate should be negative; otherwise the blue-vis layer will not show up.

This is a convenient feature if you want an element stick to a specific distance relative to the right edge of the window. Notice that when I resize the window, the blue-vis layer stays fixed distance relative to the right edge of the window.

*RPOS3 window with relatx=1


*RPOS3 window with relatx=1: window resized

*RPOS3 window with relatx=1: coordinate (20,30)
  6. Relative Position 4: RelatY & Negative Y Coordinate


Line 40-49 defines a group with a "blue-vis" layer at the coordinate of (20,-80). Notice theline on line 44: "relaty=1". By setting relaty to 1, you're telling Winamp to start the y-coordinate from the bottom edge of the window. Note that the Y-Coordinate should be negative; otherwise the blue-vis layer will not show up.

This is a convenient feature if you want an element stick to a specific distance relative to the bottom edge of the window. Notice that when I resize the window, the blue-vis layer stays fixed distance relative to the bottom edge of the window.

*RPOS4 window with relaty=1


*RPOS4 window with relaty=1: window resized


*RPOS4 window with relaty=1: coordinate (20,50)
  7. Relative Position 5: Relatw and RelatH


Line 50-72 demonstrate the use of relath and relatw. From the beginning of this section we know that by defining height and width different from the original image size, Winamp will automatically stretch or shrink the image to fit that size constraint. What is powerful (and awesome) about modern skins is that you can also tell Winamp to adjust the height and width of an element with respect to the right and bottom edge of the window. This is accomplished through "relath" and "relatw".

In our example, we defined a blue-vis group (lines 52-60) and a red-vis group that encompasses the blue-vis group (lines 63-72). The blue-vis group is defined with no preset x, y, h or w because we will define them on line 71.

The magic happens on line 71. With relath set to 1 and relatw set to 1, we're telling Winamp to stretch or shrink the blue-vis layer so that it is 50 pixels away from the right and bottom edge of the window. The blue-vis layer is stretched and the distance is maintained as I expanded the size of the window.

*RPOS5 window with relath=1 and relatw=1


*RPOS5 window with relath=1 and relatw=1; window resized; Blue-vis layer stretched