373 lines
14 KiB
C#
373 lines
14 KiB
C#
|
#nullable enable
|
||
|
|
using System;
|
||
|
|
using System.Collections.Generic;
|
||
|
|
using Cysharp.Threading.Tasks;
|
||
|
|
using UnityEngine;
|
||
|
|
using UnityEngine.UIElements;
|
||
|
|
using UVC.UIToolkit;
|
||
|
|
|
||
|
|
/// <summary>
|
||
|
|
/// UTKStyleGuideSample의 List 카테고리 Initialize 메서드들
|
||
|
|
/// </summary>
|
||
|
|
public partial class UTKStyleGuideSample
|
||
|
|
{
|
||
|
|
#region Label Initializers
|
||
|
|
|
||
|
|
private void InitializeLabelSample(VisualElement root)
|
||
|
|
{
|
||
|
|
// Material Icon + Text
|
||
|
|
var materialIconRow = root.Q<VisualElement>("material-icon-row");
|
||
|
|
if (materialIconRow != null)
|
||
|
|
{
|
||
|
|
materialIconRow.Add(new UTKLabel("Settings", UTKMaterialIcons.Settings));
|
||
|
|
materialIconRow.Add(new UTKLabel("Home", UTKMaterialIcons.Home));
|
||
|
|
materialIconRow.Add(new UTKLabel("Search", UTKMaterialIcons.Search));
|
||
|
|
materialIconRow.Add(new UTKLabel("Edit", UTKMaterialIcons.Edit));
|
||
|
|
}
|
||
|
|
|
||
|
|
// Icon Right
|
||
|
|
var iconRightRow = root.Q<VisualElement>("icon-right-row");
|
||
|
|
if (iconRightRow != null)
|
||
|
|
{
|
||
|
|
iconRightRow.Add(new UTKLabel("Next", UTKMaterialIcons.ArrowForward, UTKLabel.IconPosition.Right));
|
||
|
|
iconRightRow.Add(new UTKLabel("Download", UTKMaterialIcons.Download, UTKLabel.IconPosition.Right));
|
||
|
|
iconRightRow.Add(new UTKLabel("External", UTKMaterialIcons.OpenInNew, UTKLabel.IconPosition.Right));
|
||
|
|
}
|
||
|
|
|
||
|
|
// Image Icon + Text
|
||
|
|
var imageIconRow = root.Q<VisualElement>("image-icon-row");
|
||
|
|
if (imageIconRow != null)
|
||
|
|
{
|
||
|
|
imageIconRow.Add(new UTKLabel("Close", UTKImageIcons.BtnClose16, isImageIcon: true));
|
||
|
|
imageIconRow.Add(new UTKLabel("Settings", UTKImageIcons.IconSetting22, isImageIcon: true));
|
||
|
|
}
|
||
|
|
|
||
|
|
// Material Icon Only
|
||
|
|
var materialIconOnlyRow = root.Q<VisualElement>("material-icon-only-row");
|
||
|
|
if (materialIconOnlyRow != null)
|
||
|
|
{
|
||
|
|
materialIconOnlyRow.Add(new UTKLabel(UTKMaterialIcons.Home, 24));
|
||
|
|
materialIconOnlyRow.Add(new UTKLabel(UTKMaterialIcons.Settings, 24));
|
||
|
|
materialIconOnlyRow.Add(new UTKLabel(UTKMaterialIcons.Search, 24));
|
||
|
|
materialIconOnlyRow.Add(new UTKLabel(UTKMaterialIcons.Edit, 24));
|
||
|
|
materialIconOnlyRow.Add(new UTKLabel(UTKMaterialIcons.Delete, 24));
|
||
|
|
}
|
||
|
|
|
||
|
|
SetCodeSamples(root,
|
||
|
|
csharpCode: @"// 기본 라벨
|
||
|
|
var label = new UTKLabel();
|
||
|
|
label.Text = ""안녕하세요"";
|
||
|
|
label.Size = UTKLabel.LabelSize.Body1;
|
||
|
|
label.Variant = UTKLabel.LabelVariant.Primary;
|
||
|
|
|
||
|
|
// 제목 스타일
|
||
|
|
var title = new UTKLabel();
|
||
|
|
title.Text = ""제목"";
|
||
|
|
title.Size = UTKLabel.LabelSize.Heading1;
|
||
|
|
title.IsBold = true;
|
||
|
|
|
||
|
|
// Material Icon과 텍스트 함께 사용
|
||
|
|
var iconLabel = new UTKLabel(""설정"", UTKMaterialIcons.Settings);
|
||
|
|
|
||
|
|
// Material Icon만 사용
|
||
|
|
var iconOnly = new UTKLabel(UTKMaterialIcons.Home);",
|
||
|
|
uxmlCode: @"<!-- 기본 라벨 -->
|
||
|
|
<utk:UTKLabel text=""일반 텍스트"" />
|
||
|
|
|
||
|
|
<!-- 제목 -->
|
||
|
|
<utk:UTKLabel text=""제목"" size=""H1"" is-bold=""true"" />
|
||
|
|
|
||
|
|
<!-- 보조 텍스트 -->
|
||
|
|
<utk:UTKLabel text=""설명"" size=""Caption"" variant=""Secondary"" />
|
||
|
|
|
||
|
|
<!-- Material Icon과 텍스트 -->
|
||
|
|
<utk:UTKLabel text=""설정"" material-icon=""settings"" />
|
||
|
|
|
||
|
|
<!-- 아이콘 오른쪽 배치 -->
|
||
|
|
<utk:UTKLabel text=""다음"" material-icon=""arrow_forward"" icon-placement=""Right"" />");
|
||
|
|
}
|
||
|
|
|
||
|
|
#endregion
|
||
|
|
|
||
|
|
#region List Initializers
|
||
|
|
|
||
|
|
private void InitializeListViewSample(VisualElement root)
|
||
|
|
{
|
||
|
|
var listView = root.Q<UTKListView>("listview-sample");
|
||
|
|
if (listView != null)
|
||
|
|
{
|
||
|
|
var items = new List<string>();
|
||
|
|
for (int i = 1; i <= 20; i++)
|
||
|
|
items.Add($"Item {i}");
|
||
|
|
|
||
|
|
listView.makeItem = () => new Label();
|
||
|
|
listView.bindItem = (element, index) => ((Label)element).text = items[index];
|
||
|
|
listView.itemsSource = items;
|
||
|
|
listView.fixedItemHeight = 24;
|
||
|
|
}
|
||
|
|
|
||
|
|
SetCodeSamples(root,
|
||
|
|
csharpCode: @"// 기본 사용법
|
||
|
|
var listView = new UTKListView();
|
||
|
|
|
||
|
|
// 데이터 소스 설정
|
||
|
|
var items = new List<string>();
|
||
|
|
for (int i = 1; i <= 20; i++)
|
||
|
|
items.Add($""Item {i}"");
|
||
|
|
|
||
|
|
// makeItem: 각 아이템을 표시할 UI 요소 생성
|
||
|
|
listView.makeItem = () => new Label();
|
||
|
|
|
||
|
|
// bindItem: 데이터를 UI 요소에 바인딩
|
||
|
|
listView.bindItem = (element, index) => ((Label)element).text = items[index];
|
||
|
|
|
||
|
|
// 데이터 소스 설정
|
||
|
|
listView.itemsSource = items;
|
||
|
|
|
||
|
|
// 고정 높이 설정 (가상화를 위해 권장)
|
||
|
|
listView.fixedItemHeight = 24;
|
||
|
|
|
||
|
|
// 선택 이벤트
|
||
|
|
listView.selectionChanged += (items) =>
|
||
|
|
{
|
||
|
|
foreach (var item in items)
|
||
|
|
Debug.Log($""Selected: {item}"");
|
||
|
|
};",
|
||
|
|
uxmlCode: @"<!-- 네임스페이스 선언 -->
|
||
|
|
<ui:UXML xmlns:utk=""UVC.UIToolkit"">
|
||
|
|
|
||
|
|
<!-- 기본 사용 -->
|
||
|
|
<utk:UTKListView name=""listview-sample"" />
|
||
|
|
|
||
|
|
<!-- 스타일 적용 -->
|
||
|
|
<utk:UTKListView class=""custom-listview"" style=""height: 300px;"" />
|
||
|
|
|
||
|
|
</ui:UXML>");
|
||
|
|
}
|
||
|
|
|
||
|
|
private void InitializeTreeViewSample(VisualElement root)
|
||
|
|
{
|
||
|
|
var treeView = root.Q<UTKTreeView>("treeview-sample");
|
||
|
|
if (treeView != null)
|
||
|
|
{
|
||
|
|
var treeItems = new List<TreeViewItemData<string>>
|
||
|
|
{
|
||
|
|
new(1, "Parent 1", new List<TreeViewItemData<string>>
|
||
|
|
{
|
||
|
|
new(2, "Child 1-1"),
|
||
|
|
new(3, "Child 1-2"),
|
||
|
|
}),
|
||
|
|
new(4, "Parent 2", new List<TreeViewItemData<string>>
|
||
|
|
{
|
||
|
|
new(5, "Child 2-1"),
|
||
|
|
new(6, "Child 2-2", new List<TreeViewItemData<string>>
|
||
|
|
{
|
||
|
|
new(7, "Grandchild 2-2-1"),
|
||
|
|
new(8, "Grandchild 2-2-2"),
|
||
|
|
}),
|
||
|
|
}),
|
||
|
|
new(9, "Parent 3"),
|
||
|
|
};
|
||
|
|
|
||
|
|
treeView.SetRootItems(treeItems);
|
||
|
|
treeView.Rebuild();
|
||
|
|
}
|
||
|
|
|
||
|
|
SetCodeSamples(root,
|
||
|
|
csharpCode: @"// 기본 사용법
|
||
|
|
var treeView = new UTKTreeView();
|
||
|
|
|
||
|
|
// 계층적 데이터 생성
|
||
|
|
var treeItems = new List<TreeViewItemData<string>>
|
||
|
|
{
|
||
|
|
new(1, ""Parent 1"", new List<TreeViewItemData<string>>
|
||
|
|
{
|
||
|
|
new(2, ""Child 1-1""),
|
||
|
|
new(3, ""Child 1-2""),
|
||
|
|
}),
|
||
|
|
new(4, ""Parent 2"", new List<TreeViewItemData<string>>
|
||
|
|
{
|
||
|
|
new(5, ""Child 2-1""),
|
||
|
|
new(6, ""Child 2-2"", new List<TreeViewItemData<string>>
|
||
|
|
{
|
||
|
|
new(7, ""Grandchild 2-2-1""),
|
||
|
|
new(8, ""Grandchild 2-2-2""),
|
||
|
|
}),
|
||
|
|
}),
|
||
|
|
new(9, ""Parent 3""),
|
||
|
|
};
|
||
|
|
|
||
|
|
// 트리 데이터 설정
|
||
|
|
treeView.SetRootItems(treeItems);
|
||
|
|
treeView.Rebuild();
|
||
|
|
|
||
|
|
// 선택 이벤트
|
||
|
|
treeView.selectionChanged += (items) =>
|
||
|
|
{
|
||
|
|
foreach (var item in items)
|
||
|
|
Debug.Log($""Selected: {item}"");
|
||
|
|
};",
|
||
|
|
uxmlCode: @"<!-- 네임스페이스 선언 -->
|
||
|
|
<ui:UXML xmlns:utk=""UVC.UIToolkit"">
|
||
|
|
|
||
|
|
<!-- 기본 사용 -->
|
||
|
|
<utk:UTKTreeView name=""treeview-sample"" />
|
||
|
|
|
||
|
|
<!-- 스타일 적용 -->
|
||
|
|
<utk:UTKTreeView class=""custom-treeview"" style=""height: 300px;"" />
|
||
|
|
|
||
|
|
</ui:UXML>");
|
||
|
|
}
|
||
|
|
|
||
|
|
private class SampleListItem
|
||
|
|
{
|
||
|
|
public int Id { get; set; }
|
||
|
|
public string Name { get; set; } = "";
|
||
|
|
public string Status { get; set; } = "";
|
||
|
|
public int Progress { get; set; }
|
||
|
|
}
|
||
|
|
|
||
|
|
private void InitializeMultiColumnListViewSample(VisualElement root)
|
||
|
|
{
|
||
|
|
var listView = root.Q<UTKMultiColumnListView>("multicolumn-listview-sample");
|
||
|
|
if (listView != null)
|
||
|
|
{
|
||
|
|
listView.columns.Add(new Column { name = "id", title = "ID", width = 50 });
|
||
|
|
listView.columns.Add(new Column { name = "name", title = "Name", width = 150, stretchable = true });
|
||
|
|
listView.columns.Add(new Column { name = "status", title = "Status", width = 100 });
|
||
|
|
listView.columns.Add(new Column { name = "progress", title = "Progress", width = 80 });
|
||
|
|
|
||
|
|
var items = new List<SampleListItem>
|
||
|
|
{
|
||
|
|
new() { Id = 1, Name = "Task Alpha", Status = "Active", Progress = 75 },
|
||
|
|
new() { Id = 2, Name = "Task Beta", Status = "Pending", Progress = 30 },
|
||
|
|
new() { Id = 3, Name = "Task Gamma", Status = "Completed", Progress = 100 },
|
||
|
|
new() { Id = 4, Name = "Task Delta", Status = "Active", Progress = 50 },
|
||
|
|
new() { Id = 5, Name = "Task Epsilon", Status = "Cancelled", Progress = 0 },
|
||
|
|
};
|
||
|
|
|
||
|
|
listView.itemsSource = items;
|
||
|
|
listView.fixedItemHeight = 24;
|
||
|
|
|
||
|
|
listView.columns["id"].makeCell = () => new Label();
|
||
|
|
listView.columns["id"].bindCell = (e, i) => ((Label)e).text = items[i].Id.ToString();
|
||
|
|
listView.columns["name"].makeCell = () => new Label();
|
||
|
|
listView.columns["name"].bindCell = (e, i) => ((Label)e).text = items[i].Name;
|
||
|
|
listView.columns["status"].makeCell = () => new Label();
|
||
|
|
listView.columns["status"].bindCell = (e, i) => ((Label)e).text = items[i].Status;
|
||
|
|
listView.columns["progress"].makeCell = () => new Label();
|
||
|
|
listView.columns["progress"].bindCell = (e, i) => ((Label)e).text = $"{items[i].Progress}%";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
private class SampleTreeItem
|
||
|
|
{
|
||
|
|
public int Id { get; set; }
|
||
|
|
public string Name { get; set; } = "";
|
||
|
|
public string Type { get; set; } = "";
|
||
|
|
public string Size { get; set; } = "";
|
||
|
|
}
|
||
|
|
|
||
|
|
private void InitializeMultiColumnTreeViewSample(VisualElement root)
|
||
|
|
{
|
||
|
|
var treeView = root.Q<UTKMultiColumnTreeView>("multicolumn-treeview-sample");
|
||
|
|
if (treeView != null)
|
||
|
|
{
|
||
|
|
treeView.columns.Add(new Column { name = "name", title = "Name", width = 200, stretchable = true });
|
||
|
|
treeView.columns.Add(new Column { name = "type", title = "Type", width = 100 });
|
||
|
|
treeView.columns.Add(new Column { name = "size", title = "Size", width = 80 });
|
||
|
|
|
||
|
|
var rootItems = new List<TreeViewItemData<SampleTreeItem>>
|
||
|
|
{
|
||
|
|
new(1, new SampleTreeItem { Id = 1, Name = "Documents", Type = "Folder", Size = "2.5 GB" },
|
||
|
|
new List<TreeViewItemData<SampleTreeItem>>
|
||
|
|
{
|
||
|
|
new(11, new SampleTreeItem { Id = 11, Name = "Reports", Type = "Folder", Size = "500 MB" },
|
||
|
|
new List<TreeViewItemData<SampleTreeItem>>
|
||
|
|
{
|
||
|
|
new(111, new SampleTreeItem { Id = 111, Name = "Q1_Report.pdf", Type = "PDF", Size = "2.3 MB" }),
|
||
|
|
new(112, new SampleTreeItem { Id = 112, Name = "Q2_Report.pdf", Type = "PDF", Size = "1.8 MB" }),
|
||
|
|
}),
|
||
|
|
new(12, new SampleTreeItem { Id = 12, Name = "Images", Type = "Folder", Size = "1.2 GB" }),
|
||
|
|
}),
|
||
|
|
new(2, new SampleTreeItem { Id = 2, Name = "Projects", Type = "Folder", Size = "5.0 GB" },
|
||
|
|
new List<TreeViewItemData<SampleTreeItem>>
|
||
|
|
{
|
||
|
|
new(21, new SampleTreeItem { Id = 21, Name = "ProjectA", Type = "Folder", Size = "2.0 GB" }),
|
||
|
|
new(22, new SampleTreeItem { Id = 22, Name = "ProjectB", Type = "Folder", Size = "3.0 GB" }),
|
||
|
|
}),
|
||
|
|
new(3, new SampleTreeItem { Id = 3, Name = "Config.json", Type = "JSON", Size = "4 KB" }),
|
||
|
|
};
|
||
|
|
|
||
|
|
treeView.SetRootItems(rootItems);
|
||
|
|
treeView.fixedItemHeight = 22;
|
||
|
|
|
||
|
|
treeView.columns["name"].makeCell = () => new Label();
|
||
|
|
treeView.columns["name"].bindCell = (e, i) =>
|
||
|
|
{
|
||
|
|
var item = treeView.GetItemDataForIndex<SampleTreeItem>(i);
|
||
|
|
((Label)e).text = item.Name;
|
||
|
|
};
|
||
|
|
treeView.columns["type"].makeCell = () => new Label();
|
||
|
|
treeView.columns["type"].bindCell = (e, i) =>
|
||
|
|
{
|
||
|
|
var item = treeView.GetItemDataForIndex<SampleTreeItem>(i);
|
||
|
|
((Label)e).text = item.Type;
|
||
|
|
};
|
||
|
|
treeView.columns["size"].makeCell = () => new Label();
|
||
|
|
treeView.columns["size"].bindCell = (e, i) =>
|
||
|
|
{
|
||
|
|
var item = treeView.GetItemDataForIndex<SampleTreeItem>(i);
|
||
|
|
((Label)e).text = item.Size;
|
||
|
|
};
|
||
|
|
|
||
|
|
treeView.ExpandAll();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
private void InitializeScrollViewSample(VisualElement root)
|
||
|
|
{
|
||
|
|
// Horizontal scroll
|
||
|
|
var horizontalContainer = root.Q<VisualElement>("horizontal-scroll-container");
|
||
|
|
if (horizontalContainer != null)
|
||
|
|
{
|
||
|
|
var horizontalScroll = new UTKScrollView();
|
||
|
|
horizontalScroll.mode = ScrollViewMode.Horizontal;
|
||
|
|
horizontalScroll.style.height = 150;
|
||
|
|
horizontalScroll.style.width = 200;
|
||
|
|
|
||
|
|
var horizontalContent = new VisualElement();
|
||
|
|
horizontalContent.style.flexDirection = FlexDirection.Row;
|
||
|
|
for (int i = 1; i <= 15; i++)
|
||
|
|
{
|
||
|
|
var item = new Label($"H-Item {i}");
|
||
|
|
item.style.minWidth = 80;
|
||
|
|
item.style.marginRight = 8;
|
||
|
|
horizontalContent.Add(item);
|
||
|
|
}
|
||
|
|
horizontalScroll.Add(horizontalContent);
|
||
|
|
horizontalContainer.Add(horizontalScroll);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Both scroll
|
||
|
|
var bothContainer = root.Q<VisualElement>("both-scroll-container");
|
||
|
|
if (bothContainer != null)
|
||
|
|
{
|
||
|
|
var bothScroll = new UTKScrollView();
|
||
|
|
bothScroll.mode = ScrollViewMode.VerticalAndHorizontal;
|
||
|
|
bothScroll.style.height = 150;
|
||
|
|
bothScroll.style.width = 200;
|
||
|
|
|
||
|
|
for (int i = 1; i <= 10; i++)
|
||
|
|
{
|
||
|
|
var item = new Label($"This is a very long scrollable item number {i} that requires horizontal scrolling");
|
||
|
|
item.style.whiteSpace = WhiteSpace.NoWrap;
|
||
|
|
bothScroll.Add(item);
|
||
|
|
}
|
||
|
|
bothContainer.Add(bothScroll);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#endregion
|
||
|
|
}
|