본문 바로가기
컴퓨터 공학/Swift

[스위프트] 이미지 뷰를 화면에 출력하고 크기 변경하기1(예제)

by hahehohoo 2020. 4. 22.
반응형

2020 Xcode, 스위프트, 이미지 뷰를 화면에 출력하고 크기 변경하는 방법

 

아이폰 앱에 원하는 이미지를 출력하려면 이미지뷰 ImageView객체를 사용할 수 있습니다. 

그래서 오늘은 JPG나 PNG 등의 이미지를 화면에 출력할 수 있는 이미지 뷰의 사용법을 살펴 볼것입니다. 

이 글에서는 전체적인 레이아웃 구성을 진행할 것입니다. 잘 따라주세요. 

 

예제를 따라하기 앞서 선행 학습이 필요하신 분들은 아래 링크를 참고해주세요. 

새 프로젝트 생성 방법

 

[ 완성예제 ]

 

 

시작해보겠습니다!👐 

STEP 1 앱에서 사용할 이미지 추가하기

- 이미지를 선택하여 내비게이터 영역의 프로젝트 폴더 아래로 드래그 앱 드롭합니다. 

- 파일 추가에 대한 설정 창이 나타나며 현재 추가하려고 하는 이미지를 프로젝트 폴더에 복사해 주는 Copy items if needed 항목에 체크가 되어 있는지 확인한 후 Finish 버튼을 눌러주세요. 

 

이미지가 프로젝트에 추가되었습니다. 

 

STEP 2 이미지 뷰 추가하기

이미지를 보여줄 이미지 뷰 객체를 추가하겠습니다. 

1. 스토리보드를 열어주세요.

2. 라이브러리 버튼을 클릭해주세요.

3. imageView를 검색합니다.

4.스토리보드로 끌고와 화면의 왼쪽 윗부분에 배치합니다. 

 

 

 

STEP 3 이미지 크기를 수정하고, 뷰 모드 수정하기

- 아래와 같이 마우스로 드래그해서 크기를 변경해주세요.

- 뷰를 클릭하면 자동으로 생성되는 오른쪽 인스텍터 영역의 View 항목의 Content Mode를 [Aspect Fit] 모드로 설정합니다. 

 

Aspect Fit은 이미지의 가로, 세로 비율을 유지하면서 이미지 뷰의 크기에 맞게 이미지 크기를 바꿔주기 위함입니다. 

 

 

STEP 4 이미지 변경 버튼 추가하기

 

- 버튼을 더블클릭하여 '확대'라고 텍스트를 변경해줍니다.

 

STEP 5 앱 화면 구성 완성!

기능 구현을 위한 아울렛 변수와 액션 함수 추가는 다음 글에서 이어집니다. 

오늘도 수고하셨습니다. 👍👍👍

 

 

 

 

--------------------------

iOS프로그래밍 학습을 위해

더 많은 예제 보러가기 

--------------------------

 

 

 

반응형


댓글