내부 컨텐츠에 따라 자동으로 변형되는 프레임입니다.
버튼이나 컴포넌트들의 내부 내용이 수정되어도
프레임의 사이즈를 자동으로 수정해줍니다.
shift + a
- 오토 레이아웃 단축키
프레임에 fill color를 넣고 사용합니다.
오토 레이아웃은 컨테이너와 아이템으로 구성
방향, 아이템의 간격, 상하 패딩, 좌우 패딩 등의 기능이 있다.
오토 레이아웃의 정렬
오른쪽 사각형 박스안의 아이콘으로 정렬하면 된다.
고급 옵션
-
space between
사각형 오른쪽에 ...을 누르면
스페이싱 모드의 스페이스 비트윈이 있다.
css의 정렬 기능과 동일- 단축키: 정렬 패널 선택 후 x
-
캔버스 스태킹 = 아이템의 순서 바꾸기
폰트 고급 옵션
폰트의 종류나 크기가 다를 때 올바르게 정렬하기.
고급 옵션 > 제일 아래 텍스트 베이스라인 얼라인먼트를 체크
- 단축키: 정렬 패널 선택 후 b
resizing
hug contents = 컨테이너에 설정
아이템이 변화하면 컨테이너가 변화한다 > hug contents
ex) 버튼이나 칩 디자인
fill container = 아이템에 설정
컨테이너가 변화하면 아이템이 변화한다(채워짐) > fill container
ex) 화면을 늘리면 이미지도 늘어나기
변화 없음 > fixed size
변환될 항목에 적용한다고 보면 됩니다.
버튼 만들어보기
1. 텍스트로 버튼 만들기
2. 오토 레이아웃 만들기
3. fill 채우기
4. 프레임 선택 후 패딩 설정하기
5. 가운데 정렬 선택하기
복붙(2개 이상일 때)
6. 두 개 선택 후 오토레이아웃 만들기
7. 버튼의 리사이징을 fill container로 바꾸면?
반응형 버튼 프레임 완성
저녁놀 마을 사람