프로그래밍 교실에서 iOS 앱을 만드는 방법을 설명했습니다. 5

지난번

개요

2주 만입니다.

이번에는 Autolayout을 사용한 화면 레이아웃의 응용편입니다.

같은 과제를 다루는 학생 수는 2명이었습니다.

했던 일(1.5시간)

AutoLayout을 사용하여 다양한 화면을 만들어 다양한 화면 크기, 장치의 방향(세로/가로)을 바꾸어도 올바르게 표시되도록 레이아웃할 수 있게 되는 테크닉을 몇개인가 습득하는 것을 목표로 한다.

그 1 (기본)

화면을 세 영역으로 나눕니다.

화면 크기에 따라 중앙의 녹색 영역의 높이는 변하지 않고 상하의 핑크와 하늘색의 높이가 바뀝니다.

UIView
 |- UIView ピンク
 |- UIView 緑
 |- UIView 水色

그 2 (레이아웃에 대한 보이지 않는 View 넣어)

화면을 네 영역으로 나눕니다. 화면 사이즈가 바뀌어도 각각 같은 면적을 유지한다.

UIView
 |- UIView ピンク
 |- UIView 緑
 |- UIView 水色
 |- UIView 薄赤

화면 중앙에 사이즈 제로의 보이지 않는 View 를 두어 그것을 기점으로 하는 것이 미.

Multiplier를 사용하는 방법도 가르쳤습니다

그 3 (Multiplier 사용)

전체 화면을 덮는 녹색 View의 중앙에는 절반 크기의 분홍색 View가 있습니다.

UIView
 |- UIView 緑
     |- UIView ピンク

※ Multiplier 를 0.5 로 하면 부모에 대해서 반의 사이즈가 된다

그 4

응용편.

왼쪽 상단의 핑크 뷰는 화면의 가로 폭에 대해 1/3의 너비를가집니다. 종횡비는 1 : 1

남은 영역에 하늘색의 View가 표시된다. 높이는 핑크와 같습니다.

핑크와 라이트 블루 뷰 아래에는 녹색 뷰가 있습니다.

녹색 View의 중앙에 절반 높이와 폭을 가진 밝은 빨간색 View가 있습니다

UIView
 |- UIView ピンク
 |- UIView 水色
 |- UIView 緑
     |- UIView 薄赤

요약

Autolayout을 사용하여 iOS 앱을 레이아웃하는 방법을 배웠습니다

장치의 화면 크기와 화면 방향에 따라 유연하게 레이아웃하는 방법을 배웠습니다.

예상되는 과제를 시간 내에 마무리 할 수 ​​있었기 때문에 과제의 레벨감도 딱 좋았다고 생각됩니다

Swift를 사용하여 스스로 생각한 앱을 만들고 싶다는 요구가 나왔기 때문에 좋은 방향으로 향하고 있다고 생각합니다.

소스 코드

해답 예의 소스 코드를 github 에 공개하고 있습니다.

수업 풍경

개최 장소: TENTO 사이타마