Thread Tools Display Modes
04-04-22, 08:02 AM   #1
Benalish
A Flamescale Wyrmkin
 
Benalish's Avatar
Join Date: Dec 2012
Posts: 122
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.
  Reply With Quote
04-04-22, 09:29 AM   #2
Fizzlemizz
I did that?
 
Fizzlemizz's Avatar
Premium Member
AddOn Author - Click to view addons
Join Date: Dec 2011
Posts: 1,871
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>
__________________
Fizzlemizz
Maintainer of Discord Unit Frames and Discord Art.
Author of FauxMazzle, FauxMazzleHUD and Move Pad Plus.

Last edited by Fizzlemizz : 04-04-22 at 09:52 AM.
  Reply With Quote

WoWInterface » Developer Discussions » Lua/XML Help » Listiview: avoid text overlap

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off