티스토리 뷰

Attribute Menu - Construction

만들었던 위젯 블루프린트를 활용하여 메뉴 위젯을 만들어볼 것이다.

기본적인 SizeBox와 Overlay창 그리고 메뉴 테두리 이미지를 세팅해주자.

 

그리고 속성들을 차례대로 배치하기 위해 Wrap Box를 활용할 것이다.

Wrap Box를 사용하면 공간이 남을 시 같은 줄을 유지하지만, 공간이 부족할 경우 자동으로 줄바꿈이 되어 아래와 같이 활용할 수 있다.

[속성 1] [속성 2]

공간 부족

↓

[속성 1]
[속성 2]

 

따라서 Wrap Box에 Text를 차례로 배치하여 제목/부제목으로 활용할 것이다.

해당 Text들이 너무 붙지 않도록 Padding 값도 우선 20으로 설정하였다.

현재 Wrap Box 폭은 805로 할당하였는데, Fill Span When Less Than 값을 805보다 크게 할당하면 자동으로 줄바꿈되는 것을 유도할 수 있다.

 

이제 만들었던 위젯을 활용하기에 앞서, 위젯의 전체 크기 사이즈를 쉽게 확인할 수 있도록 가로 세로 길이를 카테고리로 묶고, 디테일 패널에 표시되도록 설정해줄 것이다.

 

이러면은 기존 화면에서도 불러온 위젯의 가로 세로 길이 체크가 가능하다.

다만, 컴파일 시 기존 값으로 돌아가기에, 말그대로 당장의 사이즈 체크에만 활용할 수 있다.

 

이제 Spacer와 Text Value Row Button 위젯을 번갈아 가면서 할당하여 행을 생성해주자.

그리고 Padding 값도 좀 더 넓게 조정하였다.

이에 맞게 위젯의 가로 길이도 체크 후 720으로 조정하였다.

 

기본 속성 아래에는 보조 속성들도 위치시킬 것이다.

보조 속성의 수가 상당히 많기 때문에, 이는 스크롤 박스를 활용하여 할당한다.

스크롤용 Size Box와 Scroll Box, 그리고 보조 속성을 위한 Text Value Row를 모두 할당해주자.

마찬가지로 Fill Span When Less Than 수치를 조절하여 독립행을 확보해준다.

 

마지막으로 배경 이미지도 생성해주자.

Overay_Root 바로 아래에 배경 이미지를 테두리가 보이도록 Padding 값을 조절하여 할당해주자.

 

지금은 폰트가 크다거나, 숫자 영역 압축이 필요하다거나, 이름 슬롯 폭이 과도하게 큰 문제가 있다.

따라서 Text Value Row 위젯에서 각각에 대한 함수를 생성하여 폰트/레이아웃에 대해 세부적으로 조정할 예정이다.

 

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2026/06   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함