ScrollView 3

½ºÅ©·Ñºä¸¦ ¸¸µé¶§ Content Size FitterÀÇ ¿ö´×À» Á¦°ÅÇÏ´Â ¹æ¹ý¿¡ ´ëÇؼ­ ¾Ë¾Æº¸ÀÚ.

ScrollView °ÔÀÓ¿ÀºêÁ§Æ®¿¡ ScrollRect ÄÄÆ÷³ÍÆ®°¡ Æ÷ÇԵǾî ÀÖ´Ù.
Content °ÔÀÓ¿ÀºêÁ§Æ®¿¡´Â Content Size Fitter ÄÄÆ÷³ÍÆ®°¡ Æ÷ÇԵǾî ÀÖ´Ù.
ÀÌ °æ¿ì, ScrollView ³ëµå ¾Æ·¡ Content ³ëµå°¡ ÀÚ½ÄÀ¸·Î ÀÖÀ¸¸é ´ÙÀ½ÀÇ ¿¡·¯°¡ ¹ß»ýÇÑ´Ù.

Content Size Fitter Ç׸ñ¿¡ ´ÙÀ½°ú °°Àº ¿ö´×ÀÌ ¶á´Ù.



"Parent has a type of layout group component. A child of layout group should not have a Content Size Fitter component. since it should be driven by the layout group."

»óÀ§³ëµå¿¡ ScrollRect ÄÄÆ÷³ÍÆ®°¡ À־ ¹ß»ýÇÏ´Â ¿ö´×ÀÌ´Ù.

ÀÌ ¿ö´×À» Á¦°Å ÇÒ·Á¸é Content °ÔÀÓ¿ÀºêÁ§Æ®¿Í ScrollView °ÔÀÓ¿ÀºêÁ§Æ® »çÀÌ¿¡ ÀÓÀÇÀÇ °ÔÀÓ¿ÀºêÁ§Æ®¸¦ ÇϳªµÎ¸é µÈ´Ù. (¿©±â¼­´Â ViewPort °ÔÀÓ¿ÀºêÁ§Æ®·Î ÇÑ´Ù.)

½ÇÇàÈ­¸é


°èÃþºä



1. Canvas¸¦ ¸¸µç´Ù
UI > Canvas·Î Á¦ÀÛÇÑ´Ù.

2. ScrollView¸¦ ¸¸µç´Ù.

  • UI > PanelÀ» ¸¸µç´Ù
  • PanelÀ̸§À» ScrollView·Î ¼öÁ¤ÇÑ´Ù
  • ScrollRect ÄÄÆ÷³ÍÆ®¸¸ Ãß°¡ÇÑ´Ù
  • Width, Height¸¦ 256, 500À¸·Î ¼³Á¤ÇÑ´Ù
  • À§,¾Æ·¡·Î ½ºÅ©·ÑÇϱ⠶§¹®¿¡ HorizontalÀº ÇØÁ¦ÇÑÇÑ´Ù.
  • ScrollRect > Content Ç׸ñÀ» Content ³ëµå·Î ÁöÁ¤ÇÑ´Ù.
    (ÀÌ°Ç ³ªÁß¿¡ Content ¸¸µé°í ³ª¼­ ÇÑ´Ù)
  • Å×½ºÆ®¸¦ À§ÇØ Image - Color¸¦ »¡°­»öÀ¸·Î ¼³Á¤ÇÑ´Ù.

¼öÁ¤) ViewPort´Â ¼³Á¤ÇÒ ÇÊ¿ä ¾ø´Ù.
±×¸²¶§¹®¿¡ ¿ÀÇØÀÇ ¼ÒÁö°¡ À־ ±â·ÏÀ¸·Î ³²±ä´Ù.

3. ViewPort¸¦ ¸¸µç´Ù.
  • UI > PanelÀ» ¸¸µç´Ù
  • PanelÀ̸§À» ViewPort·Î ¼öÁ¤ÇÑ´Ù
  • Mask ÄÄÆ÷³ÍÆ®¸¦ Ãß°¡ÇÑ´Ù
  • Image ÄÄÆ÷³ÍÆ®ÀÇ SourceImage¸¦ UIMask·Î ¼³Á¤ÇÑ´Ù.

¼öÁ¤)
Mask ÄÄÆ÷³ÍÆ®¿¡¼­ "Show Mask Graphic" OnÀ̳ª Off ¾î´ÀÂÊÀÌ¶óµµ »ó°ü¾ø´Ù.

Mask ÄÄÆ÷³ÍÆ®¿¡¼­ "Show Mask Graphic"°¡ OnÀ϶§  Image ÄÄÆ÷³ÍÆ®ÀÇ SourceImage¸¦ ¼³Á¤ÇÏÁö ¾Ê°í NoneÀ¸·Î ¼³Á¤Çصµ »ó°ü ¾ø´Ù.


4. Content¸¦ ¸¸µç´Ù.

  • UI > PanelÀ» ¸¸µç´Ù
  • PanelÀ̸§À» Content·Î ¹Ù²Û´Ù
  • Width, Height¸¦ 256À¸·Î ¼³Á¤ÇÑ´Ù
  • ¼öÁ÷À¸·Î ½ºÅ©·Ñ Çϱâ À§ÇØ PivotÀ» 0.5, 1·Î ¼³Á¤ÇÑ´Ù.
  • GridLayoutGroupÄÄÆ÷³ÍÆ®¸¦ Ãß°¡ÇÑ´Ù.
  • Content Size Fitter¸¦ Ãß°¡ÇÑ´Ù.




  • GridLayGroupÀÇ ¼¿ »çÀÌÁ 256, 80À¸·Î ¼³Á¤ÇÑ´Ù.
  • SpacingÀº 10, 10À¸·Î ¼³Á¤ÇÑ´Ù.



  • ¼öÁ÷À¸·Î ½ºÅ©·Ñ Çϱ⠶§¹®¿¡ ContentSizeFitter´Â VerticalFit¸¦ "PerferredSize"·Î ¼³Á¤ÇÑ´Ù.


4. ¸®½ºÆ®ÀÇ itemÀ» Ãß°¡ÇÑ´Ù.





  • UI > Image¸¦ Ãß°¡ÇÏ°í À̹ÌÁö¸¦ ¼³Á¤ÇÑ´Ù.


5. ¸®½ºÆ®ÀÇ itemÀ» º¹»çÇÑ´Ù.
Image ³ëµå¸¦ ¼±Åà ÈÄ Ctrl+D ´ÜÃàÅ°·Î ItemÀ» º¹»çÇÑ´Ù.