TAB 버튼 균등하게 6개 추가됨

[zzangae]

각 TAB 버튼의 크기 설정 (가로 길이를 Box 너비의 1/6로 설정)

• 각 버튼의 너비는 Box 너비를 6등분 ㅣ 각 TAB 버튼의 X 좌표는 균등하게 나누어 설정

• GUI.Box 상단에 붙여서 배치 (만약, 위로 상단을 띄우려면 아래 코드를 체험하시오)

  상단 붙여서 배치 :

  float tabButtonY = boxY - tabButtonHeight;

  상단에서 30f 여백만큼 배치 :

  float tabButtonY = boxY - tabButtonHeight - 30f;

• GUIStyle 을 사용해 텍스트의 실제 크기를 계산하고 여백을 추가

• Commit 링크를 따라가면 소스를 볼 수 있습니다. [aac650d858a30b26be6de1f4c6a14e00f0a475c0]

[zzangae]

TAB 버튼 만들기

구현 개요

• 1. GUI.Box의 가로 최대 길이 값을 기준으로 TAB 버튼의 위치와 크기를 결정합니다.
• 2. TAB 버튼은 문자열의 길이에 따라 자동으로 크기를 조정하고, 양쪽에 여백을 추가하여 배치합니다.
• 3. TAB 버튼은 상단으로부터 30f 아래에 배치되며, Box의 너비를 기준으로 가로 정렬됩니다.

1. 문자열의 너비 구하기

IMGUI 에서는 GUIStyle.CalcSize 를 사용하여 문자열의 길이에 따른 버튼의 크기를 계산할 수 있습니다. 이를 통해 문자열의 길이에 따라 버튼의 너비를 자동으로 조정합니다.

2. GUI.Box의 최대 가로 길이 계산

Box 의 가로 길이는 이미 코드에서 boxWidth 로 계산했으므로, 이를 기준으로 TAB 버튼을 배치할 수 있습니다.

주요 변경 사항 설명

문자열의 크기 계산:

buttonStyle.CalcSize(new GUIContent(tabText)) 를 사용하여 버튼에 들어갈 텍스트의 크기를 계산하고, 여기에 양쪽 여백을 더해 최종 버튼 크기를 결정합니다.

TAB 버튼 배열:

• Box 의 상단으로부터 30f 아래에 TAB 버튼을 배치합니다. 이때, Box의 가로 길이 중심을 기준으로 버튼이 배치됩니다.
• tabTexts[] 배열을 사용하여 6개의 탭 버튼에 대한 텍스트를 정의합니다. 버튼의 수는 배열의 길이 tabCount 를 기준으로 설정됩니다.
• 각 TAB 버튼의 가로 너비는 Box 가로 길이를 6으로 나눈 값 tabButtonWidth = boxWidth / tabCount 로 설정되어, 화면 전체에서 균등한 크기로 나열됩니다.

TAB 버튼의 위치:

• TAB 버튼의 X 좌표는 boxX + (tabButtonWidth * i)로 계산하여, 각 버튼이 화면의 좌우에 균등하게 나열됩니다.
• Y 좌표는 Box 상단에서 30f 아래에 위치하도록 설정하였습니다.

자동 크기 조정:

• TAB 버튼의 크기는 문자열의 길이에 따라 자동으로 조정되며, 양쪽 여백 20f 를 추가로 적용하여 버튼이 더 여유롭게 표시됩니다.
• 각 TAB 버튼의 너비는 boxWidth / tabCount로 계산하여, Box 의 전체 가로 길이를 기준으로 균등한 크기로 설정됩니다.
• TAB 버튼 텍스트가 긴 경우 텍스트의 크기에 따라 버튼 크기를 동적으로 변경할 수도 있습니다.
• TAB 버튼의 높이는 화면 높이의 5% 로 설정되었습니다.

해상도 및 레이아웃 유연성

• Box 와 TAB 버튼은 화면 크기에 맞춰 유연하게 배치됩니다. 이 코드는 다양한 해상도에서도 Box 의 중심을 기준으로 TAB 버튼이 적절하게 배치되도록 설정되었습니다.
• 해상도에 상관없이 각 TAB 버튼은 Box의 가로 전체 길이를 기준으로 적절하게 배치됩니다.
• UI 요소의 크기와 위치는 Screen.width와 Screen.height 값을 사용하여 화면 크기에 비례해서 조정됩니다.

[zzangae]

주요 변경 사항:

TAB 버튼의 Y 좌표 수정:

• 기존 코드에서 Box 상단에서 30f 아래에 배치된 것을 Box 상단 바로 위에 붙도록 수정했습니다.
• tabButtonY = boxY - tabButtonHeight;로 설정하여 Box 상단에 정확하게 붙도록 했습니다. 즉, Box의 Y 좌표에서 버튼의 높이만큼 위로 이동하여 바로 위에 붙는 형태로 조정했습니다.

나머지 구조는 동일:

나머지 TAB 버튼의 X 좌표와 크기, 레이블 및 다른 UI 요소의 배치는 이전과 동일하게 유지됩니다.

결과:

이제 TAB 버튼은 Box의 최상단에 정확하게 붙어서 배치되며, 버튼은 Box의 너비를 6등분한 크기로 균등하게 나열됩니다.