WoWInterface

WoWInterface (https://www.wowinterface.com/forums/index.php)
-   Lua/XML Help (https://www.wowinterface.com/forums/forumdisplay.php?f=16)
-   -   Listiview: avoid text overlap (https://www.wowinterface.com/forums/showthread.php?t=59088)

Benalish 04-04-22 08:02 AM
Listiview: avoid text overlap
 
This is my project:

xml template:

Code:
<Frame name="GroupBox" toplevel="true" virtual="true">       
        <Backdrop bgFile="Interface\ChatFrame\ChatFrameBackground" edgeFile="Interface\Tooltips\UI-Tooltip-Border" tile="true">
                <BackgroundInsets>
                        <AbsInset left="3" right="3" top="5" bottom="3" />
                </BackgroundInsets>
                <TileSize>
                        <AbsValue val="16" />                       
                </TileSize>
                <EdgeSize>
                        <AbsValue val="16" />
                </EdgeSize>
                <Color r="0.1" g="0.1" b="0.1" a="0.5"/>
                <BorderColor r="0.4" g="0.4" b="0.4"/>
        </Backdrop>       
        <Layers>               
                <Layer level="OVERLAY">
                        <FontString parentKey="label" inherits="GameFontNormal" text="" justifyH="LEFT">
                                <Anchors>
                                        <Anchor point="TOPLEFT" relativeTo="$parent" relativePoint="TOPLEFT">
                                                <Offset>
                                                        <AbsDimension x="10" y="15"/>
                                                </Offset>
                                        </Anchor>                                       
                                </Anchors>
                        </FontString>
                </Layer>
        </Layers>       
</Frame>

<Frame name="listview_template" inherits="UnitScan_GroupBox" virtual="true">
        <Backdrop bgFile="Interface\ChatFrame\ChatFrameBackground" edgeFile="Interface\Tooltips\UI-Tooltip-Border" tile="true">
                <BackgroundInsets>
                        <AbsInset left="3" right="3" top="5" bottom="3" />
                </BackgroundInsets>
                <TileSize>
                        <AbsValue val="16" />
                </TileSize>
                <EdgeSize>
                        <AbsValue val="16" />
                </EdgeSize>
                <Color r="0.1" g="0.1" b="0.1" a="0.5"/>
                <BorderColor r="0.4" g="0.4" b="0.4"/>
        </Backdrop>
        <Frames>
                <ScrollFrame name="$parentScrollBar" parentKey="scroll" inherits="FauxScrollFrameTemplate" hidden="false">
                        <Anchors>
                                <Anchor point="TOPLEFT" x="0" y="-8"/>
                                <Anchor point="BOTTOMRIGHT" x="-30" y="8"/>
                        </Anchors>
                        <Scripts>
                                <OnVerticalScroll>
                                        FauxScrollFrame_OnVerticalScroll(self, offset, 16, ScrollUpdate);
                                </OnVerticalScroll>
                        </Scripts>
                </ScrollFrame>
        </Frames>
        <Scripts>
                <OnLoad>
                        self.data, self.buttons = {}, {}
                        self:Hide()                       
                </OnLoad>
                <OnShow>
                        self.selected = nil
                        listview_CreateList(self, self:GetHeight()/20) <-- ! Adapt to listview height, while GetHeight() doesn't works on OnLoad template script -->
                </OnShow>
        </Scripts>
</Frame>
lua

Lua Code:
  1. local main = CreateFrame("Frame", "main", UIParent)
  2. main:SetSize(300, 300)
  3. main:SetPoint("CENTER")
  4. main:SetFrameStrata("HIGH")
  5. local backdrop = {
  6.     bgFile = "Interface\\DialogFrame\\UI-DialogBox-Background",
  7.     edgeFile = "Interface\\Tooltips\\UI-Tooltip-Border",
  8.     tile = true,
  9.     tileSize = 8,
  10.     edgeSize = 16,
  11.     insets = {
  12.         left = 3,
  13.         right = 3,
  14.         top = 3,
  15.         bottom = 3
  16.     }
  17. }
  18. -- ••• listview
  19. main.lv = CreateFrame("Frame", "lv", main, "listview_template")
  20. main.lv:SetSize(193, 120)
  21. main.lv:SetPoint("CENTER")
  22. main.lv.label:SetText("Listview")
  23. -- ••• example of objects to be included in the listview
  24. local items = { "item n° 1", "item n° 2", "item n° 3", "item n° 4", "item n° 5", "item n° 6"  }
  25.  
  26. main:SetScript(
  27.         "OnShow",
  28.         function(self)
  29.             for p in pairs(items) do
  30.                 insertItem(self.lv, p)
  31.             end
  32.         end
  33.     )
  34. -- ••• function to create the listview buttons
  35. function listview_CreateList(self, total)
  36.  
  37.     self.data, self.buttons = {}, {}
  38.     self.selected = nil
  39.  
  40.     for i = 1, total do
  41.         local widget =
  42.             _G[self:GetName() .. "button" .. i] or CreateFrame("Button", self:GetName() .. "button" .. i, self)
  43.         widget:SetToplevel(true)
  44.         widget:EnableMouse(true)
  45.  
  46.         widget:SetHighlightTexture("Interface\\QuestFrame\\UI-QuestLogTitleHighlight")
  47.         local ht = widget:GetHighlightTexture()
  48.         ht:SetPoint("TOPLEFT", widget)
  49.         ht:SetVertexColor(0.510, 0.957, 1)
  50.  
  51.         widget:SetPushedTexture("Interface\\QuestFrame\\UI-QuestLogTitleHighlight")
  52.         local pt = widget:GetPushedTexture()
  53.         pt:SetVertexColor(0, 0.753, 1)
  54.         pt:SetPoint("TOPLEFT", widget)
  55.         pt:SetBlendMode("ADD")
  56.  
  57.         local text = widget:CreateFontString(nil, "ARTWORK", "GameFontHighlightSmall")
  58.         text:SetPoint("CENTER", widget)
  59.         widget.text = text
  60.  
  61.         table.insert(self.buttons, widget)
  62.  
  63.         if i == 1 then
  64.             widget:SetPoint("TOPLEFT", 4, -8)
  65.         else
  66.             widget:SetPoint("TOPLEFT", self.buttons[i - 1], "BOTTOMLEFT", 0, -1)
  67.         end
  68.         widget:RegisterForClicks("LeftButtonDown")
  69.         widget:SetScript(
  70.             "PreClick",
  71.             function(self)
  72.                 self:GetParent().selected = self.id
  73.             end
  74.         )
  75.         widget:SetScript(
  76.             "OnUpdate",
  77.             function(self, elapsed)
  78.                 if (self:GetParent().selected) and (self.id == self:GetParent().selected) then
  79.                     ht:Hide()
  80.                     self:SetButtonState("PUSHED", true)
  81.                 else
  82.                     ht:Show()
  83.                     self:SetButtonState("NORMAL", true)
  84.                 end
  85.             end
  86.         )
  87.     end
  88. end
  89. -- ••• function to insert items in the listview
  90. function insertItem(self, text, id)
  91.     if (id) then table.insert(self.data, id, text) else table.insert(self.data, text) end
  92.    ScrollUpdate(self.scroll)
  93. end
  94. -- ••• scrollbar update function
  95. function ScrollUpdate(self)
  96.     local buttons, data = self:GetParent().buttons, self:GetParent().data
  97.     local offset = (#data > #buttons) and FauxScrollFrame_GetOffset(self) or 0
  98.     for i = 1, #buttons do
  99.         local button = buttons[i]
  100.         local width = self:GetParent():GetWidth()-29
  101.         button:SetSize(width, 16)
  102.         local index = i + offset
  103.         if index > #data then
  104.             button:Hide()
  105.         else
  106.             button:Show()
  107.             button.id = index
  108.             button.text:SetText(data[index])
  109.         end
  110.     end
  111.     FauxScrollFrame_Update(self, #data, #buttons, 16)
  112.     self:Show()
  113.     local scrollbar = _G[self:GetName().."ScrollBar"]:GetName()
  114.     local thumb = _G[scrollbar.."ThumbTexture"]
  115.     thumb:Show()
  116.     if (#data <= #buttons) then thumb:Hide() end
  117. end

I would like to avoid button text overlap on button when the listview is showed. I tried two options: the first is to insert this code at listview_CreateList begin

Lua Code:
  1. local g = 1
  2. while _G[self:GetName() .. "button" .. g] do
  3.     _G[self:GetName() .. "button" .. g].text:SetText("\00") -- avoid text overlap
  4.     g = g + 1
  5. end

The second one is insert this code at listview_CreateList end
Lua Code:
  1. local function refresh() -- avoid text overlap
  2.     if not self:IsVisible() then
  3.         return
  4.     end
  5. end
  6.  
  7. self:SetScript("OnShow", refresh)
  8. refresh()

The second method implies that the listview is hidden by default.

Do you know better methods? General advice to improve this project?
If there is any part of the code you don't understand, please ask.

Fizzlemizz 04-04-22 09:29 AM
Every time it's shown you run listview_CreateList

Every time listview_CreateList is run, among other things, it creates a new fontstring on the buttons so you are getting overlay.

Maybe change your xml to only create the buttons, fontstrings etc. once, or do it OnLoad.
Code:
<OnShow>
        self.selected = nil
        if not self.buttons then
                listview_CreateList(self, self:GetHeight()/20)
        end
</OnShow>


All times are GMT -6. The time now is 01:34 PM.

vBulletin © 2024, Jelsoft Enterprises Ltd
© 2004 - 2022 MMOUI