Table - CURD
Unity로 Table을 만들고 데이터를 생성하고, 읽고, 쓰고, 삭제하는 예제입니다.
Unity를 2D로 생성합니다.
1. Unity Hub > Project 생성 > 2D
2. Unity 실행
Unity 기본 개발 설정을 만저줍니다.
1. Project > Assets > Scenes > SampleScene의 이름을 TableScene으로 변경
2. Hierarchy > ... > Create > Canvas
3. Inspector > Canvas > Render Mode -> Screen space - Camera 선택
4. Inspector > Canvas > Render Mode > Render Camera > Select Camera (텍스트 필드 옆 동그란 아이콘)
5. Select Camera 창 > Scene 탭 > Main Camera 선택
6. Inspector > Canvas > Render Mode -> World Space 선택
Table을 그려줄 Scroll View를 생성합니다.
1. Hierarchy > ... > Canvas > Create > UI > Scroll View
2. Hierarchy > ... > Canvas > Scroll View > Scrollbar Horizontal -> Delete (삭제)
3. Hierarchy > ... > Canvas > Scroll View 선택
4. Inspector > Rect Transform > Pos X, Pos Y, Pos Z -> (9.3, -10, 0)
5. Inspector > Rect Transform > Width, Height -> (690, 800)
6. Inspector > Image > Color > Alpha -> 0
7. Hierarchy > ... > Main Camera 선택
8. Inspector > Camera > Background -> FFFFFF (white 선택)
9. Hierarchy > ... > Canvas > Scroll View > Viewpoint > Content 선택
10. Inspector > Add Component > Layout > Content Size Fitter 선택
11. Inspector > Content Size Fitter > Vertical Fit -> Preferred Size
12. Inspector > Add Component > Layout > Vertical Layout Group 선택
Table의 가로 Cell을 생성합니다.
1. Hierarchy > ... > Canvas > Scroll View > Viewpoint > Content > Create > Create Empty
2. 생성된 GameObject의 이름을 item으로 변경
3. Inspector > Rect Tansform > Width, Height -> (673, 80)
4. Inspector > Add Component > Layout > Horizontal Layout Group
5. Hierarchy > ... > Canvas > Scroll View > Viewpoint > Content > Item > Create > Text
6. 생성된 Text의 이름을 No로 변경
7. Inspector > Rect Transform > Width, Height -> (100, 80)
8. Inspector > Text -> "NO"
9. Inspector > Text > Character > Font Size -> 32
10. Inspector > Text > Paragraph > Alignment -> Center, Middle
11. Text인 No를 Copy & Paste
12. 새로 생성된 Text의 이름을 Name으로 변경
13. Inspector > Text -> "NAME"
14. Inspector > Rect Transform > Width, Height -> (140, 80)
15. Hierarchy > ... > Canvas > Scroll View > Viewpoint > Content > Item 선택
16. Inspector > Horizontal Layout Group > Child Force Expand > Width -> Uncheck
17. Hierarchy > ... > Canvas > Scroll View > Viewpoint > Content 선택
18. Inspector > Vertical Layout Group > Child Force Expand > Height -> Uncheck
19. Hierarchy > ... > Canvas > Scroll View > Viewpoint > Content > Item > Name을 Copy & Paste
20. 새로 생성된 Text의 이름을 Address로 변경
21. Inspector > Text -> "ADDRESS"
22. Inspector > Rect Transform > Width, Height -> (220, 80)
23. Hierarchy > ... > Canvas > Scroll View > Viewpoint > Content > Item > Address을 Copy & Paste
24. 새로 생성된 Text의 이름을 Ops로 변경
25. Inspector > Text -> "OPS."
26. Inspector > Rect Transform > Width, Height -> (210, 80)
Table의 Head를 만듭니다.
1. Hierarchy > ... > Canvas > Scroll View > Viewpoint > Content > Item을 fold (접음)
2. 접은 Item을 Copy & Paste
3. 새로 생성된 Itme의 이름을 Head로 변경
4. Head를 Hierarchy > ... > Canvas 바로 밑으로 이동
5. Inspector > Rect Transform > Pos Y -> -80
6. Inspector > Add Component > Search Image > Image 추가
7. Inspector > Image > Color -> 6A73CE
8. Hierarchy > ... Canvas > Head > No, Name, Address, Ops를 모두 선택
9. Inspector > Text > Color > FFFFFF (white)
10. Inspector > Text > Character > Font Style -> Bold
Cell의 Ops에 edit, del 버튼을 만듭니다.
1. Hierarchy > ... > Canvas > Scroll View > Viewpoint > Content > Item > Ops 선택
2. Inspector > Text > Option Image > Remove Component
3. Hierarchy > ... > Canvas > Scroll View > Viewpoint > Content > Item > Ops > Create > UI > Button
4. 새로 생성된 Button의 이름을 Update로 변경
5. Inspector > Rect Transform > Width, Height -> (80, 60)
6. Hierarchy > ... > Canvas > Scroll View > Viewpoint > Content > Item > Ops > Update > Text
7. Inspector > Text -> "edit"
8. Inspector > Text Character > Font Size -> 30
9. Hierarchy > ... > Canvas > Scroll View > Viewpoint > Content > Item > Ops > Update를 fold (접음)
10. 접은 Update를 Copy & Paste
11. 새로 생성된 Update의 이름을 Delete로 변경
12. Inspector > Rect Transform > Pos X -> 46
13. Hierarchy > ... > Canvas > Scroll View > Viewpoint > Content > Item > Ops > Delete > Text
14. Inspector > Text -> "del"
Cell을 이동합니다.
1. Hierarchy > ... > Canvas > Scroll View > Viewpoint > Content > Item을 fold (접음)
2. 접은 Item을 Hierarchy > ... > Canvas > Head 밑으로 이동
3. Inspector > Rect Transform > Pos Y -> 60 (화면 밖으로 이동한다.)
데이터 입력 폼을 만듭니다.
1. Hierarchy > ... > Canvas > Create > UI > Image
2. Inspector > Rect Transform > Pos X, Pos Y, Pos Z -> (0, 0, 0)
3. Inspector > Rect Transform > Width, Height -> (668, 1069) (화면을 다 덥는다.)
4. Inspector > Image > Color -> 000000 (black)
5. Inspector > Image > Color > Alpha -> 150
6. Hierarchy > ... > Canvas > Image의 이름을 FormCreate로 변경
7. Hierarchy > ... > Canvas > FormCreate > Create > UI > Image
8. 새로 생성된 Image의 이름을 Bg로 변경
9. Inspector > Rect Transform > Pos X, Pos Y, Pos Z -> (0, 60, 0)
10. Inspector > Rect Transform > Width, Height -> (530, 360)
11. Hierarchy > ... > Canvas > FormCreate > Create > UI > InputField
12. 새로 생성된 InputField의 이름을 InputName으로 변경
13. Inspector > Rect Transform > Pos X, Pos Y, Pos Z -> (0, 120, 0)
14. Inspector > Rect Transform > Width, Height -> (420, 60)
15. Hierarchy > ... > Canvas > FormCreate > InputName > Placeholder
16. Inspector > Text -> "Enter Name ..."
17. Inspector > Text > Character > Font Size -> 32
18. Inspector > Text > Paragraph > Alignment -> Left, Middle
19. Hierarchy > ... > Canvas > FormCreate > InputName > Text
20. Inspector > Text > Character > Font Size -> 32
21. Inspector > Text > Paragraph > Alignment -> Left, Middle
22. Hierarchy > ... > Canvas > FormCreate > InputName을 fold (접음)
23. InputName을 Copy & Paste
24. 새로 생성된 InputName의 이름을 InputAddress로 변경
25. Inspector > Rect Transform > Pos X, Pos Y, Pos Z -> (0, 50, 0)
26. Hierarchy > ... > Canvas > FormCreate > InputAddress > Placeholder
27. Inspector > Text -> "Enter Address ..."
28. Hierarchy > ... > Canvas > FormCreate > Create > UI > Button
29. 새로 생성된 Button의 이름을 Save로 변경
30. Inspector > Rect Transform > Pos X, Pos Y, Pos Z -> (-110, -50, 0)
31. Inspector > Rect Transform > Width, Height -> (180, 60)
32. Hierarchy > ... > Canvas > FormCreate > Save > Text
33. Inspector > Text -> "Save"
34. Inspector > Text > Character > Font Size -> 32
35. Hierarchy > ... > Canvas > FormCreate > Save를 Copy & Paste
36. 새로 생성된 Save 버튼의 이름을 Cancle로 변경
37. Inspector > Rect Transform > Pos X, Pos Y, Pos Z -> (110, -50, 0)
38. Inspector > Rect Transform > Width, Height -> (180, 60)
39. Hierarchy > ... > Canvas > FormCreate > Cancle > Text
40. Inspector > Text -> "Cancle"
41. Hierarchy > ... > Canvas > FormCreate를 fold (접음)
42. Inspector > FormCreate -> Uncheck (Layer Invisible)
Add 버튼을 만듭니다.
1. Hierarchy > ... > Canvas > Create > Button
2. 새로 생성된 Button의 이름을 Add로 변경
3. Inspector > Rect Transform > Pos X, Pos Y, Pos Z -> (0, -470, 0)
4. Inspector > Rect Transform > Width, Height -> (600, 80)
5. Hierarchy > ... > Canvas > Add > Text
6. Inspector > Text -> "Add Data"
7. Inspector > Text > Font Size -> 36
8. Hierarchy > ... > Canvas > Add 선택
9. Inspector > Button > On Click() > +
10. On Click() > Non (Object) 창에 Hierarchy > ... > Canvas > FormCreate를 D&D
11. On Click() > No Function > GameObject > SetActive 선택
12. On Click() > GameObject.SetAction 밑의 Check Box -> Check
13. Hierarchy > ... > Canvas > FormCreate > Save와 Cancle을 선택
14. Inspector > Button > On Click() > +
15. On Click() > Non (Object) 창에 Hierarchy > ... > Canvas > FormCreate를 D&D
16. On Click() > No Function > GameObject > SetActive 선택
17. On Click() > GameObject.SetAction 밑의 Check Box -> Uncheck
18. Hierarchy > ... > Canvas > Add를 D&D으로 Scroll View 밑으로 이동 (Layer 순서 변경)
C# Script를 작성하고 GameObject를 연결합니다.
1. Project > Assets > Scenes > Create > C# Script
2. C# Script 파일명을 crud로 변경
3. crud.cs를 더블클릭으로 Visual Studio로 열기
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class crud : MonoBehaviour
{
public GameObject itemParent, item, form_create;
// Start is called before the first frame update
void Start()
{
}
public void Read()
{
int count = PlayerPrefs.GetInt("count");
for (int i=0; i<itemParent.transform.childCount; i++)
{
Destroy(itemParent.transform.GetChild(i).gameObject);
}
int number = 0;
for(int i=0; i<=count; i++)
{
number++;
string id = PlayerPrefs.GetString("id[" + i + "]");
string name = PlayerPrefs.GetString("name[" + i + "]");
string address = PlayerPrefs.GetString("address[" + i + "]");
if (id != "")
{
GameObject tmp_item = Instantiate(item, itemParent.transform);
tmp_item.name = i.ToString ();
tmp_item.transform.GetChild(0).GetComponent<Text>().text = number.ToString();
tmp_item.transform.GetChild(1).GetComponent<Text>().text = name;
tmp_item.transform.GetChild(2).GetComponent<Text>().text = address;
} else
{
number--;
}
}
}
public void Create()
{
int count = PlayerPrefs.GetInt("count");
count++;
PlayerPrefs.SetString("id[" + count + "]", count.ToString());
PlayerPrefs.SetString("name[" + count + "]", form_create.transform.GetChild(1).GetComponent<InputField>().text);
PlayerPrefs.SetString("address[" + count + "]", form_create.transform.GetChild(2).GetComponent<InputField>().text);
PlayerPrefs.SetInt("count", count);
form_create.transform.GetChild(1).GetComponent<InputField>().text = "";
form_create.transform.GetChild(2).GetComponent<InputField>().text = "";
Read();
}
// Update is called once per frame
void Update()
{
}
}4. Hierarchy > ... > Canvas > Crate > Create Empty
5. 생성된 GameObject의 이름을 CurdManager로 변경
6. Project > Assets > Scenes > curd.cs 파일을 Inspector의 Add Component 영역에 D&D
7. Hierarchy > ... > Canvas > Scroll View > Viwepoint > Content를 Inspector > Crud > Item Parent 항목에 D&D
8. Hierarchy > ... > Canvas > item을 Inspector > Crud > Item 항목에 D&D
9. Hierarchy > ... > Canvas > FormCreate을 Inspector > Crud > Form_create 항목에 D&D
Start() 메써드에 Read()를 추가합니다.
1. curd.cs 파일을 열고 Start() 함수안에 Read() 추가
void Start()
{
Read();
}2. Unity로 돌어와서
3. Hierarchy > ... > Canvas > FormCreate > Save 선택
4. Inspector > Button > On Click() > +
5. On Click() > Non (Object) 창에 Hierarchy > ... > Canvas > CurdManager를 D&D
6. On Click() > No Function > curd > Create() 선택
7. Hierarchy > ... > Canvas > Scroll view
8. Inspector > Scroll rect > Horizontal > Uncheck
Delete() 함수를 추가하고 GameObject와 연결합니다.
1. curd.cs 파일을 열고 Delete() 함수 추가
public void Delete()
{
string id_perf = item.name;
PlayerPrefs.DeleteKey("id[" + id_perf + "]");
PlayerPrefs.DeleteKey("name[" + id_perf + "]");
PlayerPrefs.DeleteKey("address[" + id_perf + "]");
Read();
}2. Hierarchy > ... > Canvas > Item > Ops > Delete 선택
3. Inspector > Button > On Click() > +
4. On Click() > Non (Object) 창에 Hierarchy > ... > Canvas > CurdManager를 D&D
5. On Click() > No Function > curd > Delete() 선택
6. On Click() > None (Game Object) 창에 Hierarchy > ... > Canvas > Item을 D&D
데이터 수정 폼을 만들어줍니다.
1. Hierarchy > ... > Canvas > FormCreate을 Copy & Paste
2. 새로 생성된 FormCreate를 FormUpdate로 변경
3. Hierarchy > ... > Canvas > FormUpdate를 FormCreate 밑으로 위치 변경
4. Inspector > FormUpdate > Check (Layout visible)
5. Hierarchy > ... > Canvas > FormUpdate > Save의 이름을 Update로 변경
6. Hierarchy > ... > Canvas > FormUpdate > Update > Text
7. Inspector > Text -> "Update"
8. Hierarchy > ... > Canvas > FormUpdate 선택
9. Inspector > FormUpdate > Uncheck (Layout invisible)
데이터 수정 스크립트를 만들고 연결합니다.
1. curd.cs 파일을 열고
: public GameObject 변수인 form_edit 추가
: string id_edit; 추가
: Open_Form_Edit() 함수 추가
: update() 함수 추가 (함수 첫 글자가 소문자임, Void Update()와 다름.. 함수 이름 수정 필요)
public GameObject itemParent, item, form_create, form_edit;
string id_edit;
public void Open_Form_Edit(GameObject obj_edit)
{
form_edit.SetActive(true);
id_edit = PlayerPrefs.GetString("id[" + obj_edit.name + "]");
form_edit.transform.GetChild(1).GetComponent<InputField>().text = PlayerPrefs.GetString("name[" + obj_edit.name + "]");
form_edit.transform.GetChild(2).GetComponent<InputField>().text = PlayerPrefs.GetString("address[" + obj_edit.name + "]");
}
public void update()
{
PlayerPrefs.SetString("name[" + id_edit + "]", form_edit.transform.GetChild(1).GetComponent<InputField>().text);
PlayerPrefs.SetString("address[" + id_edit + "]", form_edit.transform.GetChild(2).GetComponent<InputField>().text);
Read();
}2. Unity로 돌아와서
3. Hierarchy > ... > Canvas > Item > Ops > Update 선택
4. Inspector > Button > On Click() > +
5. On Click() > Non (Object) 창에 Hierarchy > ... > Canvas > CurdManager를 D&D
6. On Click() > No Function > curd > Open_Form_Edit() 선택
7. On Click() > None (Game Object) 창에 Hierarchy > ... > Canvas > Item을 D&D
8. Hierarchy > ... > Canvas > FormUpdate > Update 선택
9. Inspector > Button > On Click() > crud.Create을 crud > Update()로 변경
10. Hierarchy > ... > Canvas > FormUpdate > Update와 Cancle을 함께 선택
11. Inspector > Button > On Click() > FormUpdate 항목에 Hierarchy > ... > Canvas > FormUpdate을 D&D
12. 6. On Click() > No Function > GameObject > SetActive 선택
13. Hierarchy > ... > Canvas > CurdManager 선택
14. Inspector > Crud > Form_edit에 Hierarchy > ... > Canvas > FormUpdate를 D&D
전체 C# 스크립트
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class crud : MonoBehaviour
{
public GameObject itemParent, item, form_create, form_edit;
// Start is called before the first frame update
void Start()
{
Read();
}
public void Read()
{
int count = PlayerPrefs.GetInt("count");
for (int i=0; i<itemParent.transform.childCount; i++)
{
Destroy(itemParent.transform.GetChild(i).gameObject);
}
int number = 0;
for(int i=0; i<=count; i++)
{
number++;
string id = PlayerPrefs.GetString("id[" + i + "]");
string name = PlayerPrefs.GetString("name[" + i + "]");
string address = PlayerPrefs.GetString("address[" + i + "]");
if (id != "")
{
GameObject tmp_item = Instantiate(item, itemParent.transform);
tmp_item.name = i.ToString ();
tmp_item.transform.GetChild(0).GetComponent<Text>().text = number.ToString();
tmp_item.transform.GetChild(1).GetComponent<Text>().text = name;
tmp_item.transform.GetChild(2).GetComponent<Text>().text = address;
} else
{
number--;
}
}
}
public void Create()
{
int count = PlayerPrefs.GetInt("count");
count++;
PlayerPrefs.SetString("id[" + count + "]", count.ToString());
PlayerPrefs.SetString("name[" + count + "]", form_create.transform.GetChild(1).GetComponent<InputField>().text);
PlayerPrefs.SetString("address[" + count + "]", form_create.transform.GetChild(2).GetComponent<InputField>().text);
PlayerPrefs.SetInt("count", count);
form_create.transform.GetChild(1).GetComponent<InputField>().text = "";
form_create.transform.GetChild(2).GetComponent<InputField>().text = "";
Read();
}
public void Delete(GameObject item)
{
string id_perf = item.name;
PlayerPrefs.DeleteKey("id[" + id_perf + "]");
PlayerPrefs.DeleteKey("name[" + id_perf + "]");
PlayerPrefs.DeleteKey("address[" + id_perf + "]");
Read();
}
string id_edit;
public void Open_Form_Edit(GameObject obj_edit)
{
form_edit.SetActive(true);
id_edit = PlayerPrefs.GetString("id[" + obj_edit.name + "]");
form_edit.transform.GetChild(1).GetComponent<InputField>().text = PlayerPrefs.GetString("name[" + obj_edit.name + "]");
form_edit.transform.GetChild(2).GetComponent<InputField>().text = PlayerPrefs.GetString("address[" + obj_edit.name + "]");
}
public void update()
{
PlayerPrefs.SetString("name[" + id_edit + "]", form_edit.transform.GetChild(1).GetComponent<InputField>().text);
PlayerPrefs.SetString("address[" + id_edit + "]", form_edit.transform.GetChild(2).GetComponent<InputField>().text);
Read();
}
// Update is called once per frame
void Update()
{
}
}