iOS 개발 초보자 가이드 인터페이스 - 1 부

Apple은 iPhone 및 iPad 시리즈를 통해 수년 동안 모바일 업계에서 선도적 인 업계를 수행해 왔습니다. 모든 공식 릴리스에서 만들 수있는 과대 광고에도 불구하고 모바일 플랫폼에서 시장 점유율의 상당 부분을 차지하고 있으며, 이는 대부분의 고객이 앱을 앱 스토어에 존재하게하려는 이유 일 것입니다. 따라서 개발자가 iPhone 앱을 배우고 빌드해야하는 이유가되었습니다..

좋은 소식은 iPhone 응용 프로그램 개발이 생각만큼 어렵지는 않다는 점입니다.이 게시물은 iPhone 용 응용 프로그램을 작성하는 완전한 과정을 안내하는 포괄적 인 안내서로서 존재합니다.

우리는 앱 개발을위한 이유, 단계 및 도구에 대해 논의 할 것이고 궁극적으로 Xcode를 사용하여 기본 iPhone 응용 프로그램을 디자인하는 쉬운 자습서를 따라갈 것입니다.

그래서 당신이 사업을 배우고 있든, 아니면 백만장 자로 만들 수있는 놀라운 앱 아이디어를 가지고 있든 상관없이, 첫 번째 iPhone 앱을 만드는 것에 착수하자.!

참고 : Xcode 설치, 응용 프로그램 개발 및 응용 프로그램 제출을 위해 Macintosh 운영 체제 (Mac OS)가 설치된 컴퓨터가 필요합니다. 합법적으로 Windows에서 수행 할 수있는 방법은 없습니다.

Apple을 위해 개발해야하는 이유?

이 질문은 자주 묻습니다. 그래서 왜 아이폰 개발에 관심을 가져야하는지 설명하고 싶습니다. 소개에서 언급 한 것처럼 iPhone은 현재 모바일 플랫폼에서 시장 점유율의 상당 부분 차지.

나는이 이유가 당신이 스스로 또는 클라이언트를 위해 개발하고 있는지 여부를 아이폰 애플리케이션을 개발하는 법을 배우기에 충분해야한다고 생각한다. 대부분의 사람들은 아마 세계의 많은 사람들이 그들의 앱에 접근 할 수 있기를 희망한다..

개발의 관점에서, 애플은 단순한 것을 좋아한다., 이는 제품 및 프레임 워크에 적용됩니다.. iOS는 모든 Apple의 모바일 장치에 적용되는 운영 체제입니다.. 여기에는 iPod Touch, iPhone 및 iPad가 포함됩니다. iPhone 용 앱을 개발할 때 명심하십시오. iOS를 사용하여 다른 모든 기기 용으로 개발!

게다가 위의 기능을 훨씬 더 크게 만드는 것은 코딩 작업을 얼마나 절약 할 수 있는지입니다. iPhone 응용 프로그램 용 코드를 작성하면 모든 애플의 컴퓨팅 장치에 동일한 프로그래밍 언어 사용. 즉, iPhone 응용 프로그램을 개발할 때 나중에 iPad 및 Mac에 통합 할 수 있습니다..

목표 -C 모든 프레임 워크를 지원하는 핵심 프로그래밍 언어입니다. Objective-C와 함께 iPhone 앱을 개발할 것입니다. 코코아 터치, iOS에서 사용자 상호 작용을 유도하는 프로그래밍 프레임 워크.

이것은 iPhone 앱 개발을 시작하기위한 정보 일뿐입니다. 개발은 꽤 복잡한 과정이지만 긴장을 풀어 라. 그래서 이유가 여기에 있으며, 결정은 당신 것입니다. 대답이 "예"이든 아니든간에 항상 다음 주제로 넘어갈 수 있습니다. iPhone 용 앱 디자인.

iPhone 앱 구조 계획

아이폰 앱을 만드는 표준 이데올로기에서 몇 단계를 거치다. 첫 번째 단계는 다음을 포함합니다. 계획 및 스케치.

무엇보다도 먼저 아이디어를 얻을 필요가 있습니다. 앱이 할 일. 왜 사람들은 그것을 다운로드하기를 원했을까요?? 과 어떤 기능을 포함 시키시겠습니까?? 이것은 당신이 그것을 올바르게하는 것처럼 가장 중요한 단계입니다. 혼란과 어려움을 많이 덜어 준다. 코딩 단계에서.

최악의 경우 드로잉 보드로 돌아옵니다..

나는 추천한다. 몇 페이지 (또는보기)에 대한 거친 아이디어를 스케치하십시오. 귀하의 응용 프로그램의. 종이에 직사각형 모양, 아마도 5 또는 6 개의 모양을 그린 다음 앱의 각보기에서 원하는 기능을 그립니다..

웹 사이트에서 여러 페이지와 같은보기를 생각할 수 있습니다. 각보기는 로그인 양식, 연락처 목록 또는 데이터 테이블과 같은 다른 기능을 제공합니다..

아래에서는 다양한 UI 막대 요소의 간단한 컬렉션을 만들었습니다.

상태 표시 줄 - 기기의 현재 배터리 잔량, 3G 연결, 리셉션 바, 전화 회사 등을 표시합니다. 이러한 요소는 항상 포함하는 것이 좋습니다..
탐색 바 - 사용자가 페이지 계층을 탐색 할 수있는 옵션을 제공합니다. 여기에는 종종 사용자가 이전 앱보기로 돌아갈 수 있도록 막대의 왼쪽에 버튼이 포함됩니다.
툴바 - iPhone 앱 하단에 나타납니다. 이렇게하면 몇 가지 아이콘이 다음과 같은 일부 기능에 연결됩니다. 몫, 다운로드, 지우다, 기타.
탭 바 - 탭을 사용하는 것을 제외하면 툴바와 매우 유사합니다. 사용자가 탭 아이콘을 클릭하면 자동으로 강조 표시되고 광택있는 마우스 오버 상태가 표시됩니다. 이 막대는 직접 기능을 제공하는 대신보기간에 전환하는 데 사용됩니다..

이 목록에는 대부분의 응용 프로그램에서 찾을 수있는 도구 모음 만 포함되어 있습니다. 고려해야 할 다른보기와 스타일이 있습니다. Apple의 iOS UI 요소 사용 지침에서 찾을 수 있습니다. iPhone의 UI 요소에 의문이 생길 때이 설명서를 참조하는 것이 좋습니다..

시간의 이익을 위해 모든 UI 요소를 설명하지는 않을 것입니다. 고려해야 할 요소가 너무 많아서 단일 앱에서 모든 요소를 사용하지 않아도됩니다. 그러나 당신이 당신의 전망을 스케치 할 때, 당신은 할 수 있습니다. 위에 제안 된 가이드 라인 및 다른 iPhone 앱에서 영감을 얻으십시오. 너는 그들을 즐겼다..

Photoshop 모형을 디자인하십시오

대부분의 사람들이 Adobe Photoshop을 사용하는 것이 상당히 편하다고 생각합니다. 웹 사이트, 배너, 로고 및 모바일 모형 용 그래픽을 만들기위한 초연 소프트웨어입니다. 웹용 그래픽 디자인은 매우 간단하지만 iPhone 앱 디자인의 경우 좀 더 복잡합니다..

앱을 만들려는 경우 정말로해야합니다. 처음부터 완벽한 픽셀 디자인을 만들 수 있습니다..

먼저 Photoshop 설정에 대해 논의해야합니다. 우리는 iPhone 용으로 디자인했기 때문에 두 가지 디자인 스타일을 고려해야합니다. 그만큼 일반 iPhone 디스플레이는 320 x 480 픽셀입니다.. 그러나 iPhone 4에는 동일한 화면 크기 내의 픽셀 양을 두 배로하는 망막 디스플레이. 그래서 너는해야한다. 해상도를 640 x 960 픽셀로 두 배로 늘리십시오. 레이아웃을이 표준으로 디자인하십시오..

즉, 2 세트의 아이콘을 만든다. 너의 목업을 위해. 원래 아이콘은 163ppi로 설정 하지만 너는 iPhone 4 용 326ppi 아이콘 포함. 아이콘은 전통적으로 다음과 같이 표시되어 있습니다. @ 2x 파일 이름 끝에 “[email protected]“.

이제 새로운 문서 설정을 최적화 해 보겠습니다. 먼저 일부 환경 설정을 편집해야하므로 Photoshop> 편집> 환경 설정> 안내선, 격자 및 조각. 잘 할 수 Gridline을 20px마다 세분화하여 2로 설정. 망막 디스플레이 설계시 2px 줄은 1 포인트를 표시합니다. 화면에. 이것은 앱 규모를 줄이기 위해 명심해야 할 중요한 규칙입니다..

나는 고해상도로 디자인을 만든 다음 스케일을 줄이는 것이 더 쉽지만, 두 가지 방법을 모두 시도하고 가장 적합한 것을 확인하십시오.. 우리는 326ppi에서 640 x 960 픽셀을 사용하고 있습니다. 자주 사용한다고 생각되는 경우이를 사용자 정의 사전 설정으로 저장하십시오..

템플릿 요소로 만들기

이제 Photoshop을 사용하여 픽셀 완벽 레이아웃을 직접 만들 수도 있지만 이는 매우 지루하고 지루한 작업임이 드러납니다..

이것은 너무 많은 요소가있는 거대한 파일입니다. 일을 더 쉽게 만들려면 v를 누릅니다. 이동 도구 를 클릭하고 “자동 선택” 옵션 표시 줄에서 “층” 오히려 “그룹”. 설정을 사용하면 요소를 클릭하면 Photoshop에서 해당 레이어로 이동합니다.!

부담없이 놀아 라., 또는 실물 모형에서 응용 프로그램의 프로토 타입을 만들 수도 있습니다. 앱에 따라 핵심 영역 내에 많은 기능을 포함 할 수 있습니다.이 기능의 대부분은이 PSD 파일에서 찾을 수 있습니다. 또한이 요소의 레이어로 이동하여 글꼴, 그라디언트 색상 및 기타 디자인 스타일을 편집 할 수도 있습니다. 다만 아무것도 크기를 조정하지 않았는지 확인하십시오. 모든 막대 및 UI 요소가 기본 표준 크기로 설정되기 때문에.

Xcode에서 앱 개발하기

iOS 및 Mac OS X 프로그래밍 용 개발자 도구의 이름은 Xcode입니다. OS X Lion을 실행중인 경우 Xcode 및 모든 해당 패키지를 무료로 찾을 수 있습니다. Mac App Store.

설치가 완료되면 Xcode를 실행하면 환영 화면이 나타납니다. 여기에서 이전 프로젝트를로드하거나 새 프로젝트를 만들 수 있습니다. 지금은 클릭해야합니다. “새 Xcode 프로젝트 만들기“, 템플릿 창에 몇 가지 옵션이 나타납니다. iOS> 애플리케이션에서을 클릭하십시오. “단일보기 응용 프로그램” 쳤다. “다음 것”. 너는 할 수있다. 새 앱에 이름을 부여하십시오., 와 같은 테스트 (공백이없는 것이 바람직 함). 회사 식별자, 같은 단어를 입력하십시오. 내 회사, 마지막으로 디렉토리를 선택하고 조회합니다. “구하다”.

Xcode는 파일 디렉토리를 만들고 작업을위한 새로운 창으로 당신을 보냅니다. 많은 파일 옵션이 나열되어 있지만 응용 프로그램의 이름을 따서 명명 된 폴더 주요 초점은.

Xcode를 사용하면 프런트 엔드 요소를 디자인 할 때 두 가지 옵션이 있습니다. 고전적인 xib / 펜촉 형식은 매번 새로운 페이지보기를 디자인해야하는 Mac OS X 및 iOS 앱의 표준 형식입니다. 그러나 단일 응용 프로그램에서 더 많은 뷰를 생성하면 펜촉 파일의 양이 너무 많아 져서 새로운 스토리 보드 파일은 단일 편집기 창에서 모든 nib 뷰를 보유합니다. 여기에서 UI 요소 및 기능을 쉽게 제거하고 추가 할 수 있습니다..

또한 너는 만날거야. .h 과 .엠 같은 폴더 그룹에있는 파일 이들은 짧은 파일 이름입니다. 머리글 과 이행 암호. 이 파일은 앱이 실행되는 데 필요한 Objective-C 함수 및 변수를 모두 작성하는 곳입니다. Xcode가 어떻게 작동하는지 설명하는 것이 좋습니다. MVC (모델, 뷰, 컨트롤러), 이는 각 컨트롤러에 2 개의 파일이 필요하기 때문입니다.

MVC 프로그래밍 계층 구조

앱 작동 방식을 이해하려면 프로그래밍 아키텍처를 이해해야합니다. 와 모델, 뷰, 컨트롤러 (MVC)를 기반으로, Xcode는 모든 디스플레이와 인터페이스 코드를 로직과 프로세싱 기능에서 분리 할 수 있으며 선택할 수있는 또 다른 옵션은 없습니다. MVC는 처음에는 혼란스러워 보일지 모르지만, 그것을 이해하고 몇 가지 기본 앱을 작성하려고하면 구조를 좋아하게 될 것입니다.

이해하기 쉽도록 아래 목록에있는 각 개체를 제시했습니다.

모델 - 모든 논리 및 핵심 데이터를 보유합니다. 여기에는 변수, 외부 RSS 피드 또는 이미지에 대한 연결, 세부 기능 및 번호 처리가 포함됩니다. 이 레이어는보기에서 완전히 분리되므로보기를 쉽게 변경하고 동일한 데이터를 계속 사용할 수 있습니다..
전망 - 응용 프로그램의 화면 또는 표시 스타일. 테이블 목록, 프로필 페이지, 기사 요약 페이지, 오디오 플레이어, 비디오 플레이어는 모두보기의 예입니다. 스타일을 변경하고 요소를 제거 할 수 있지만 모델의 동일한 데이터로 계속 작업 할 수 있습니다..
제어 장치 - 다른 두 사람 사이의 중개자 역할을합니다. 뷰의 객체를 ViewController에 연결하여 모델과 정보를주고받습니다. 따라서 이런 식으로 사용자가 버튼을 탭하여 모델에 등록 할 수 있습니다. 그런 다음 로그 아웃 기능을 실행하고 동일한 컨트롤러를 통해 메시지를 전달하십시오. “성공적으로 로그 아웃 됨!”.

그래서 기본적으로 모델은 모든 정보와 기능을 보유하고있다. 화면의 어딘가에 표시해야합니다. 그러나 모델은 화면과 상호 작용할 수 없으며보기 만. 뷰는 대부분 모든 비주얼이며 ViewController를 통해서만 데이터를 가져올 수 있습니다.. 그만큼 컨트롤러는 프론트 엔드 디자인에서 백 엔드 데이터를 숨기는 훨씬 더 세련된 방식입니다.. 이러한 방식으로 어떤 기능을 잃지 않고 여러 번 디자인을 혁신 할 수 있습니다..

이 지식으로 처음 몇 가지 앱을 제작하는 것이 어려워서는 안됩니다. 앞서 언급 한 바와 같이, 목표 -C 앱을 개발하는 데 사용할 핵심 프로그래밍 언어입니다. 업데이트 된 구문과 몇 가지 추가 패러다임을 사용하여 C 언어로 작성되었습니다. 언어에 익숙해 지려면 많은 시간이 필요하지만 초보자를위한 수업에서는 Mobiletuts의 튜토리얼 시리즈를 사용하는 것이 좋습니다.+.

스토리 보드로 디자인보기

이제 응용 프로그램의 기술적 측면을 살펴 보았으므로 인터페이스를 설계하는 데 약간의 시간을 투자해야합니다. 네가 그걸 지켰다 고 가정하고있어. “스토리 보드” 선택권 프로젝트를 만들 때 선택됩니다. 즉, 프로젝트를 만들 때 MainStoryboard_iPhone.storyboard 창의 왼쪽에있는 폴더 그룹의 어딘가에 파일을 만듭니다. 파일을 클릭하여 선택하고보기를 엽니 다..

새 사이드 바가 폴더 그룹의 오른쪽에 직접 나타나야합니다. 이것은 문서 개요 이 스토리 보드에서 사용 가능한 모든보기를 확인하는 일종의 빠른 미리보기 방법입니다..

우리는 몇 가지 페이지 요소를 View Controller에 추가하는 것으로 시작하고 싶습니다. 두 가지 요소가 필요합니다. 탐색 바 및 탭 바. 우리가 그들을 붙잡기 전에, 속성 검사기 (보기> 유틸리티> 속성 검사기보기)를 클릭 한 다음, 상태 표시 줄 상표. 기본적으로 설정되어 있습니다. 추측 된 표준 iPhone 상태 색상을 사용하지만, 검은 또는 반투명 블랙 앱 디자인이 색상에 더 잘 맞는 경우.

객체 라이브러리

만약 유용 창이 표시되지 않으면보기> 유틸리티> 유틸리티보기로 액세스하여 활성화 할 수 있습니다. 유틸리티 창에서 아래쪽에있는 패널을 찾습니다. 객체 라이브러리. 드롭 다운 메뉴에서 “사물” 목록의 첫 번째 항목으로 찾지 못한 경우보기> 유틸리티> 객체 라이브러리 표시를 선택할 수 있습니다.

Object Library의 드롭 다운 메뉴에서 찾아서 선택합니다. Windows 및 바. 이제 탐색 바, 보기 창으로 끌어다 놓고 검정 바로 아래에 위치 시키십시오. 상태 표시 줄 (배터리 아이콘 포함). 이제 바의 제목 설명을 사용자 정의 할 수 있습니다. 현재 읽고있는 텍스트를 더블 클릭하십시오. “표제“, 그리고 당신은라는 레이블을 볼 수 있습니다 “표제” 유틸리티 창에서 제목 설명을로 바꿀 수 있습니다. “테스트” 거기에서. 히트 “들어가다” 변화를 목격하기.

다시 Windows & Bars 패널에서 아래로 스크롤하여 탭 바, 그런 다음보기 창으로 드래그하여 앱의 맨 아래에 배치하십시오. 기본적으로이 두 요소는 환상적으로 보입니다..

이제 탐색 막대의 그라데이션을 하단의 탭 막대와 일치 시키려면 탐색 막대를 클릭하고 오른쪽을 살펴보십시오. 속성 유틸리티 패널의 패널. 첫 번째 옵션이 호출됩니다. 스타일, 기본값으로 설정됩니다. 스타일을 기본값에서 검은 색 불투명 일치하는 색상 세트가 있습니다.!

앱의 하단 막대에 다른 탭 버튼을 추가해 보겠습니다. 마우스 커서를 Windows & Bars 패널로 다시 이동하고 아래로 스크롤하십시오. 탭 표시 줄 항목, 탭 바로 아래에 있습니다. 이것을 앱 창으로 드래그하여 2 개의 기존 탭 표시 줄 버튼 가운데에 놓습니다. 이 새로운 단추를 두 번 클릭하면 유틸리티 창에서 몇 가지 추가 옵션을 볼 수 있습니다. 영상 과 표제 거기에서. 예를 들어, 제목을로 변경했습니다. “서표” 새로 추가 된 탭 표시 줄 항목.

Xcode에서 뷰를 디자인하는 방법에 대한 간단한 자습서입니다. 대단히 어려운 프로세스는 아니지만 인터페이스에 익숙해지는 데는 약간의 시간이 필요합니다. 편안함을 느끼는 경우 몇 가지 요소로 게임을 즐기고 Apple의 iOS 개발 리소스에서 더 많은 학습 자료를 얻을 수 있습니다. 더 많은 것을 발견하는 것은 결코 나쁜 일이 아닙니다.!