SwiftUI 튜토리얼 [챕터1-기초1-섹션3: 스택 이용해서 뷰 조합하기] 애플 공식자료 번역

혼자 먼저 번역하고, 나중에 한 번에 보면서 공부 하려고 했는데,

방문자들이 좀 생기니까, 좀 더 잘 써보고 싶은 욕심이 생긴다.

 

먼저 말했듯이, 개발을 하려고 한 것이 아니고, 맥북을 샀는데, 유용하게 써먹고 싶어서 스위프트를 만져보는 것이다.

공부 자료가 시중에 많이 없어, 애플 공식 튜토리얼을 번역을 하고 있다.

내가 쓰는 글이 혹시라도 번역하기 번거로운 사람들에게 1톨의 도움이라도 되길 바란다.

그리고 성공해서, 좋은 아이폰 앱 많이 많이 만들어 주시길 바란다.

 

오늘은 애플 공식 튜토리얼 [챕터1-기본] 중에서

"섹션3-스택을 이용해서 뷰 조합하기" 편을 번역 해 보려고 한다. 이 섹션은 총9가지 스텝으로 이루어져 있다.

먼저 섹션3 설명 화면이다.

 

---

섹션3

스택(쌓기)를 사용해서 뷰 조합하기

 

지난 섹션에서 당신은 타이틀뷰를 생성했고, 이제 여기에 그 랜드마크(터틀락-Turtle Rock)의 이름과, 그 것이 있는 공원 이름, 공원이 있는 state( 스테이트: 미국의 주)  같은 디테일을 보여주는 텍스트를 추가 해 볼 것이다.

 

스위프트유아이 뷰를 생성 할때는 내용,배치,바디속성의 작용을 묘사해야 한다; 그러나, 바디속성은 딱 1개의 뷰만 실행한다.

그래서 stacks(스택스-쌓기) 안에다가 여러개의 뷰를 끼워 넣고, 조합 할 수 있다.

스택스는 가로(horizontally-호라이즌털리), 세로(vertically-벌티컬리) 또는 뒤에서 앞으로 가능하다.

 

이 섹션에서는, 랜드마크가 있는 공원에 대한 디테일을 포함한 가로(H)로 쌓기와,

이 공원 디테일 위로 세로(V)로 쌓기가 되어진 제목(title "Turtle Rock")을 볼 수 있을 것이다.

[HStack/ VStack]

 

---

엑스코드의 구조화된 편집 지원으로
컨테이너뷰 안에 뷰 하나를 끼워 넣기, 인스펙터 열기, 또는 다른 유용한 변경을 할 수 있습니다. 

---

스텝1

 

편집창의 Text 에 "커맨드+클릭" 해서 편집 팝업창을 띄운 후,

"임베디드 인 브이스택-Embeded in VStack:세로쌓기에 끼워넣기" 선택 한다.

(*그러면 편집창 Text 위에 VStack 생성됨)

---

다음은, 라이브러리에서 "Text" 를 찾아 드래그 해서 텍스트 뷰를 하나 더해 준다.

---

스텝2

 

엑스코드 창의 오른쪽-상단에 있는 (+) 더하기 표시 버튼을 클릭 해서, 라이브러리를 열고 

그다음 Text 뷰를 드래그 해서, "Turtle Rock" 텍스트 뷰 코드 바로 아래에 둔다.

 

---

스텝3

 

Text 뷰의 placeholder(플레이스홀더: 공간메꾸기)  글자를 "Joshua Tree National Park(조슈아 트리 내셔널 파크)" 로 교체 한다.

 

터틀락 바로 아래라더니, 폰트칸 밑에 넣어야 하네?

---

원하는 대로 레이아웃 하기

---

스텝4

 

조슈아 트리 내셔널 파크의 폰트를 "subheadline:서브헤드라인"으로 바꾸어 보자.

 

---

스텝5

 

브이스택 (VStack)의 뷰들를 앞 글자에 맞춰 정렬 시키기 위해 편집 해 보세요.

 

기본값으로 쌓여진 뷰들은 그 내용물을 중심선을 따라서 중간에 위치 되고,

앞뒤 공간에 맞추어서 보여 집니다.

 

---

다음은, 다른 텍스뷰 하나를 오른쪽에 추가 시킵니다. 여기서 그 공원의 주(state)를 표시 할 거에요.

---

챕터6

 

캔버스에서, "Joshua Tree National Park" 를 커맨드+클릭 하고, "Embeded in HStack-가로쌓기에 끼워넣기" 를 선택하세요.

 

---

스텝7

 

HStack 만든 후에, 새로운 텍스트뷰를 추가하고, placeholder 글자를 "California (캘리포니아)" 로 바꾸세요.

그 다음, 이 글자의 폰트를 subheadline 으로 설정하세요.

 

---

스텝8

 

레이아웃을 기기 화면 전체의 넓이로 사용 하도록 지시하기 위해서, 공원 이름(조슈아 트리 내셔널 파크) 부분과 주(캘리포니아) 부분을 분리 합니다.

분리는 : Spacer 라고 입력 함으로써 진행 됩니다.

입력 위치는: HStack 의 두 Text 사이 입니다.

 

spacer(스페이서)는 그 자체가 사이즈를 가지지 않고, 선행 뷰의 공간에서 확장된다.

 

---

스텝9

 

마지막으로, padding()모디파이어 메써드를 사용해서, landmark 의 이름과 디테일에 공간을 조금 더 만들어 주세요.

*padding: 패딩,

쿠션을 대는 동작

*

 

이렇게 스위프트유아이 튜토리얼 챕터1-섹션3 번역을 해보았습니다.

 

다음에는 챕터1-섹션4 로 고고 ^^ [아래 링크]

 

https://ingodwelove.tistory.com/9

SwiftUI 튜토리얼 [챕터1-기초1-섹션4: 커스텀 이미지 뷰 생성하기 ] 애플 공식자료 번역