【Roblox】ScrollingFrame UIListLayout使用時のAutomaticCanvasSize

はじめに

今回はScrollingFrameのAutomaticCanvasSizeで起きた問題についてまとめました。

Robloxバージョン：0.638.1.6380615

参考にした記事・サイト

https://create.roblox.com/docs/reference/engine/classes/ScrollingFrame

https://create.roblox.com/docs/ui/layout-and-appearance

ScrollingFrameとは

ScrollingFrameとはUIでスクロールを可能とするGuiObjectです。

子オブジェクトにGuiObjectを配置することで、子オブジェクトをスクロール内のアイテムにすることができます。

エクスプローラー内の配置

下記レイアウトを使用してリスト形式やグリッド形式に並び替えることも可能です。

参考：https://create.roblox.com/docs/ui/layout-and-appearance

UIListLayoutの配置

リスト上に並んだScrollingFrame

このように、ScrollingFrameの子にGuiObjectがある場合に、ScrollWindowのサイズを自動で調整してくれる機能が「AutomaticCanvasSize」です。

ScrollingFrameのプロパティで設定できます。

これを設定しないと子要素を追加した際に見切れてしまう場合があります。

自分が直面した問題

AutomaticCanvasSizeをオンにしているのに、最後の方のアイテムが見切れるという問題が発生しました。

100まで生成したのに96以降が見切れる…

これはUIListLayoutのPadding機能を使用していたため起きた問題でした。

UIPaddingやUIListLayout、UIGridLayoutのCellPaddingのような要素と要素の間にスペースを作る系の機能がAutomaticCanvasSizeでは反映されないことが原因でした。

対応

UIListLayoutやUIPaddingのAbsoluteContentSizeから計算しPadding込みのサイズを設定しました。

▼ UIListLayoutのみ使用の場合

local GUI = script.Parent
local ScrollingFrame = GUI:WaitForChild("ScrollingFrame")
local UIListLayout = ScrollingFrame:WaitForChild("UIListLayout")
local TextLabel = script:WaitForChild("TextLabel")

-- サイズ調整オン
ScrollingFrame.AutomaticCanvasSize = Enum.AutomaticSize.Y

-- 要素間に隙間を作る
UIListLayout.Padding = UDim.new(0, 10)

-- 要素を100生成
for i = 1, 100 do
	local clone = TextLabel:Clone()
	clone.LayoutOrder = i
	clone.Text = "Label " .. i
	clone.Parent = ScrollingFrame
end

-- UIListLayoutのサイズに合わせる
ScrollingFrame.CanvasSize = UDim2.new(0, 0, 0, UIListLayout.AbsoluteContentSize.Y)

▼ UIGridLayoutのみ使用の場合

local GUI = script.Parent
local ScrollingFrame = GUI:WaitForChild("ScrollingFrame")
local UIGridLayout = ScrollingFrame:WaitForChild("UIGridLayout")
local TextLabel = script:WaitForChild("TextLabel")

-- サイズ調整オン
ScrollingFrame.AutomaticCanvasSize = Enum.AutomaticSize.Y

-- 要素間に隙間を作る
UIGridLayout.CellPadding = UDim2.fromOffset(5, 5)

-- 要素を100生成
for i = 1, 100 do
	local clone = TextLabel:Clone()
	clone.LayoutOrder = i
	clone.Text = "No."..i
	clone.Parent = ScrollingFrame
end

-- UIListLayoutのサイズに合わせる
ScrollingFrame.CanvasSize = UDim2.fromOffset(UIGridLayout.AbsoluteContentSize.X, UIGridLayout.AbsoluteContentSize.Y)

▼ 両方最下部まで表示された

UIListLayout	UIGridLayout

AbsoluteContentSizeはUILayoutのオブジェクトの親が実際に使用しているオフセット基準のサイズです。

今回の場合はScrollingFrameが実際に使用しているサイズを取得できます。

つまり、生成したTextのサイズ ＋ Paddingで使用しているサイズを取得できるということです。

今回はそのままオフセットで値を挿入していますが、実際の画面サイズを持ってくることで

スケール基準に変換することができます。

まとめ

• ScrollingFrameのAutomaticCanvasSizeはUILauoutなどのPaddingまで反映されない。

• Paddingを含めたサイズ調整をする場合は、UILayoutのAbsoluteContentSizeを使用する。

ScrollingFrameとUILayoutを使用する場合の参考になれば幸いです！！