Understanding CompositeImage

[bgowland]

Using a bit cut from the skin.xml in the Recordings skin...

Code:

<CompositeImage name="ListViewNormalItem" size="500,30">
        <DrawRoundedRect loc="3,3" size="494,24" radius="5" borderWidth="0" borderColor="Black" fillColor="Transparent"/>                
        <DrawText text="@title" loc="5,4" size="390,25" textStyle="ListViewItems" align="Left"/>
        <DrawText text="@lastRecordingDate" loc="5,4" size="495,25" textStyle="ListViewItems" align="Right"/>
</CompositeImage>

Looking at size following "ListViewNormalItem", it suggests the total item size is 500 x 30. The DrawRoundedRect location is (3,3) so, if this is relative to the top left corner of the item, it makes sense that the size of it should be (500-6) x (30 - 6) for the sake of symmetry and that the SkinHelper.getNamedImage method handles this offset. So far so good if I've got that right.

The problem is the text labels. Their location attributes both show (5,4). If this is relative to either the ListViewNormalItem OR to the RoundedRect, why don't they overwrite each other? If it's relative to each other (possibly then relative to the origin of the Item OR the RoundedRect) then their locations would be either (5,4) and (10,8) or (8,7) and (13,11) respectively. In either case, how can they both have a height of 25 without going beyond the bounds of either the RoundedRect (height 24) or the Item itself?

I've played with different settings in the XML file but I'm not always sure exactly what I'm seeing.

Yours sincerely,
Confused of Ashford :confused:

[Fatman_do]

Using a bit cut from the skin.xml in the Recordings skin...

Code:

<CompositeImage name="ListViewNormalItem" size="500,30">
        <DrawRoundedRect loc="3,3" size="494,24" radius="5" borderWidth="0" borderColor="Black" fillColor="Transparent"/>                
        <DrawText text="@title" loc="5,4" size="390,25" textStyle="ListViewItems" align="Left"/>
        <DrawText text="@lastRecordingDate" loc="5,4" size="495,25" textStyle="ListViewItems" align="Right"/>
</CompositeImage>

Looking at size following "ListViewNormalItem", it suggests the total item size is 500 x 30. The DrawRoundedRect location is (3,3) so, if this is relative to the top left corner of the item, it makes sense that the size of it should be (500-6) x (30 - 6) for the sake of symmetry and that the SkinHelper.getNamedImage method handles this offset. So far so good if I've got that right.

The problem is the text labels. Their location attributes both show (5,4). If this is relative to either the ListViewNormalItem OR to the RoundedRect, why don't they overwrite each other? If it's relative to each other (possibly then relative to the origin of the Item OR the RoundedRect) then their locations would be either (5,4) and (10,8) or (8,7) and (13,11) respectively. In either case, how can they both have a height of 25 without going beyond the bounds of either the RoundedRect (height 24) or the Item itself?

I've played with different settings in the XML file but I'm not always sure exactly what I'm seeing.

Yours sincerely,
Confused of Ashford :confused:

They are from the upper left corner of the Composite Image size definition.

If you look at the second text line, you will see it is Right justified so the text will not overlap unless the strings are both long enough.

Any member of the composite image that is beyond the defined size gets "clipped" off.

(Or so I think I have found out by skinning myself.)

Leo212 created a skineditor tool that is great for seeing positional relationship of composite images.

[sub]

They're relative to the top left of the "ListViewNormalItem" image (which is 0,0).

The individual elements are drawn in the order they're listed. RoundedRect, then @title string on top of that, then @lastRecordingDate string on top of that.

Of the two strings here, they could potentially overlap, but one is left aligned and one is right aligned, so an overlap is unlikely.

[sub]

What he said...

[Fatman_do]

Twice I have been correct when I beat sub to the punch!

I am on a roll!

(Blows the myth he is a supercomputer that processes every post the microsecond they are posted.)

[bgowland]

Thanks guys. I've just spotted the alignment (I should've had Word Wrap enabled in Notepad). It probably wasn't the best example to pick. :o

My main confusion was with the relative starting points and, just as importantly, the drawing order. I think I got it now.

Cheers,
Brian