Scroll View

게임을 만들다 갑자기 필요해진 중요한 기능이다.

 

내가 설정한 텍스트 박스는 크기 제한이 있는데 텍스트는 그보다 많아 공간을 넘어갈때

그렇다고 글씨크기를 줄이자니 너무 작아지고, 냅두자니 공간이 잘리거나 부자연스러워질때

필요한 스크롤뷰 사용법을 이번글에서 익혀보도록 하겠다

 

1. ScrollView 생성

1. Unity 에디터에서 Hierarchy 창에서 우클릭 후, UI > Scroll View를 선택하여 ScrollView를 생성합니다.
2. 이로써 ScrollView 오브젝트가 생성되고, 기본적으로 Viewport, Content 등의 자식 오브젝트가 자동으로 생성됩니다.

2. TextMeshPro - Text (UI) 컴포넌트 추가

1. Content 오브젝트를 선택합니다. 이 오브젝트는 ScrollView에서 스크롤할 텍스트가 담길 곳입니다.
2. Content 오브젝트 내에 TextMeshPro - Text (UI) 컴포넌트를 추가해야 합니다.
   • Content 오브젝트를 선택하고, Inspector 창에서 Add Component 버튼을 클릭한 후, **TextMeshPro - Text (UI)**를 검색하여 추가합니다.

3. Content Layout 설정

1. Content 오브젝트에 Vertical Layout Group 컴포넌트를 추가합니다. 이 컴포넌트는 자식 오브젝트가 수직으로 정렬되도록 도와줍니다.
   • Content 오브젝트를 선택하고, Inspector 창에서 Add Component 버튼을 클릭한 후, Vertical Layout Group을 추가합니다.
2. Vertical Layout Group에서 Child Force Expand를 활성화하여 텍스트가 Content 영역을 꽉 채우도록 합니다.
   • Width나 Height 값이 적절히 설정되었는지 확인합니다.

4. Content Size Fitter 추가

1. Content 오브젝트에 Content Size Fitter 컴포넌트를 추가합니다. 이 컴포넌트는 Content의 크기를 텍스트에 맞게 자동으로 조정해 줍니다.
   • Content 오브젝트를 선택하고, Inspector 창에서 Add Component 버튼을 클릭한 후, Content Size Fitter를 추가합니다.
2. Content Size Fitter의 Vertical Fit을 Preferred Size로 설정합니다. 이렇게 하면 텍스트의 양에 따라 Content의 높이가 자동으로 늘어납니다.

5. TextMeshPro 설정

1. TextMeshPro - Text (UI) 오브젝트를 선택하고, 텍스트의 내용을 입력합니다.
   • TextMeshPro 컴포넌트에서 텍스트 내용을 입력하거나, Text 필드에 원하는 텍스트를 입력하세요.
   • Auto Size를 활성화하면 텍스트의 크기가 내용에 맞게 조정됩니다.
2. **TextMeshPro - Text (UI)**의 RectTransform 크기를 적절히 조정하여 텍스트가 너무 작거나 크지 않도록 합니다.

6. Scroll Rect 설정

1. ScrollView 오브젝트를 선택한 후, Inspector 창에서 Scroll Rect 컴포넌트를 찾습니다.
2. Scroll Rect의 Content 필드에 Content 오브젝트를 드래그하여 할당합니다.
3. Horizontal과 Vertical 옵션을 설정하여, 텍스트가 세로로 스크롤되도록 설정할 수 있습니다. 세로로 스크롤하고 싶다면 Vertical만 활성화하면 됩니다.

7. 스크롤바 (선택 사항)

1. Scrollbar를 추가하려면, ScrollView의 Viewport 아래에 Scrollbar를 추가하고, **Scrollbar (Vertical)**을 선택하여 세로 스크롤바를 설정합니다.
2. Scroll Rect의 Scrollbar 필드에 Scrollbar를 드래그하여 연결합니다.

8. 최종 확인

1. 게임 뷰에서 ScrollView의 동작을 확인합니다. 텍스트가 너무 길어지면 스크롤바가 활성화되어 텍스트를 스크롤할 수 있어야 합니다.
2. TextMeshPro - Text (UI) 오브젝트에 너무 많은 텍스트가 들어갔을 경우, 자동으로 Content의 크기가 늘어나고, Scroll Rect에서 스크롤할 수 있게 됩니다.

 

우선 스크롤뷰 사용법의 시작과 끝이다. 

이제 직접 한 번 해보면서 실제 사용법을 익혀보자

 

 

1. Hierarchy에 UI - Scroll View 생성

그럼 누가봐도 스크롤뷰처럼 생긴게 모습을 드러낸다

 

2. Content에 TextMeshPro - Text (UI) 컴포넌트 추가

스크롤 뷰를 생성하면 이런 구조로 이뤄져있을것이다

Scroll View > Viewport > Content를 따라 들어가면

 

 

뭐가 있을것 같지만 아무것도 없는 텅 빈 오브젝트이다. 말 그대로 이름만 Content인것

하지만 아예 의미가 없는것은 아니다 스크롤뷰에 부착된 Scroll Rect 컴포넌트를 보면

Content에 할당된 오브젝트가 위에 Content 오브젝트이다. 

 

이제 이 오브젝트에 TextMeshPro(UI)를 부착해주면 된다

 

 

그럼 스크롤뷰 안에 텍스트 박스가 생성되고 적절하게 크기를 조절한뒤 텍스트를 채워넣으면

자동으로 밑부분은 잘리고 스크롤바가 활성화된다

 

 

 

 

 

3. Content 오브젝트에 Vertical Layout Group과 Content Size Fitter 추가

 

Vertical에서는 Child Force Expand를 활성화

Content Size Fitter에서는 Vertical Fit > Preferred Size로 설정

 

첫번째는 자식 오브젝트가 수직으로 정렬되도록 도와주고

두번째는 Content의 크기를 텍스트에 맞게 자동으로 조정해 준다.

 

 

 

 

 

4. 스크롤 & 스크롤바 설정

 

스크롤뷰에 부착된 Scroll Rect 컴포넌트에서 Horizontal, Vertical 설정을 바꿀 수 있다

여기서 Horizontal 체크를 해주면 스크롤을 세로로만 할 수 있다

 

 

그리고 스크롤뷰 구성에서 스크롤바 두개를 찾을 수 있을것이다

이중에서 필요없는 스크롤바는 삭제해 한개의 스크롤바만 남길 수 있다

이번 경우에는 Horizontal을 제거해 세로 스크롤바만 남겨주었다

 

 

 

 

이제 결과를 확인해보자. 우리가 생각하는 그 스크롤바가 잘 구현된다