• 한 화면에 담기 어려운 많은 내용을 특정 범위에 표현하기 위해 사용하는 UI
• 특정 범위 내에서 화면을 스크롤 하며 내용을 확인

Scroll Rect 컴포넌트

실습1)

• ScrollView > Scroll Rect 컴포넌트

  

• 실행

  

실습2) 아이템 찾기

1. Scrollbar Horizontal, Scrollbar Vertical 삭제

   

2. Viewport > Rect Transform의 right, bottom 0으로

   • scrollbar 남은 영역 제거

   

   • play

     

3. 모바일에서 많이 사용하는 방식 (horizontal 또는 vertical만 사용)

   • Scroll Rect에서 Horizontal 또는 Vertical 하나만 체크

     • Vertical만 Check : 세로 방향만 움직임

     

4. Content 안에 여러개의 Button 배치

   • Ctrl + D로 복사 & 배치

     • Tip) 배치하는 동안만 Viewport > Mask 끄고 보면 편함

     

   • 실행

     • 회색 영역 마우스 클릭 앤 무브

       

     • 단점) 버튼 사이의 간격 조정이 어려움.

5. 동일한 오브젝트를 일정한 간격으로 배치

   • Content > Vertical Layout Group 컴포넌트 추가

   

   • Padding : 상하좌우의 여백 조절
   • Spacing : 오브젝트 사이의 간격

   Horizontal/Vertical Layout Group 컴포넌트