1.프레임을 만들고 텍스트 추가해서 쓰기
2.하나 복사해서 이번엔 더 길게 쓰기
3.아래에 버튼을 하나 만든다 (버튼에 자동 레이아웃과 채우기로 색 추가/ 테두리 곡률, 수평패딩, 수직패딩 설정)
4.전체 프레임에 자동 레이아웃을 추가한다 (shifte+a)
→ 이제 텍스트는 자동 레이아웃을 따라 움직인다. 방향 변경도 가능(세로 또는 가로 등)
이제 텍스트를 선택하면 가로 크기 조정, 세로 크기 조정 등을 할 수 있음
프레임 크기를 가로로 조정하면 프레임에 따라 동작하지 않고 콘텐츠의 너비가 고정된다.
→텍스트를 반응형으로 만들어보자!
속성을 고정에서 컨테이너 채우기(Fill container)로 변경하고 프레임 크기를 조정하면 텍스트가 반응한다
(프레임 크기 조정하는 대로 움직임)
→버튼을 반응형으로 만들어보자!
버튼을 선택하고 컨테이너 채우기로 변경하고 텍스트를 중앙에 배치한다.(Alignment에서 중앙으로 눌러주기)
프레임의 크기를 가로로 조정하면 이 세 요소가 반응하여 움직임
/
수직 방향도 적용하기
버튼을 선택하고 허그 콘텐츠에서 컨테이너 채우기로 변경, 나머지 텍스트들도 선택해서 허그 콘텐츠에서 컨테이너 채우기로 변경한다.
프레임을 선택하고 크기를 조정하면 요소가 반응함!
/
버튼을 선택하고 해당 속성을 컨테이너 채우기에서 고정 높이로 변경한다(Fixed height)
그럼 텍스트, 텍스트, 버튼 세가지 요소가 반응한다.