'개발자의 길'에 해당되는 글 195건

xCode 4.2의 Story Board 사용하기 2011.11.21
ActionSheet 위에 PickerView + Toolbar 올리기 2011.11.20
UITableView - 10. CustomCell에서 셀 안의 버튼 이벤트 처리하기 2011.11.19
MongoDB 설치하기(CentOS 5 64bit) 2011.11.19
UITableView - 9. iOS5(xcode4.2)의 새로운 기능 static cell사용하기 2011.11.18

xCode 4.2의 Story Board 사용하기

Published on: 2011. 11. 21. 16:13 by louis.dev
StoryBoard.zip

스토리 보드 구조
 
Story Board는 위와같이 세가지 정도로 구성되어있으며, 각 scene들은 View Controller들 이다.(이전버전의 xib라고 생각하면 편할 듯) 그리고 이것들을 서로 이어주고 있는것이 segue(세그웨이 라고 읽음)라고 한다.

1. 초기 화면
프로젝트를 생성하면 다음과 같이 scene이 하나인 스토리 보드가 생성된다. 이때 다음  scene을 만들고 싶으면 storyboard으 빈공간에 View Controller를 끌어다 놓으면 된다.
 

이렇게 끌어다 놓으면 scene은 추가가 되지만 서로 연결이 되어있지 않기 때문에(segue를  생성하지 않았기 때문에) 서로 연결 시켜주는 작업을 하면 된다.

2. scene들의 연결
 
위 그림과 같이 좌측의 scene에 버튼을 하나 만들고 버튼을 마우스 오른쪽 클릭을 누른 상태에서 오른쪽이 scene로 옮기면 아래와 같은 팝업 창이 뜨게 된다.
 세그웨이 연결 방식에 따라 push(navigation bar사용시), modal, custom이 다음 scene으로 넘어가기 위해 modal을 선택한다.
이렇게 선택을 하면 세그웨이가 생성된 것을 확인 할 수 있다.

3. 새로 생성한 scene(오른쪽 화면)과 View Controller 클래스 파일을 생성하고 새로 생성한 파일과 연결한다.

이때 "With XI for user interface"에 체크를 해제한후 클래스를 생성해 준다.
그리고 storyboard의 오른쪽(두번째) scene의 View Controller를 클릭 후 inspector창에서 새로 만든 SecondViewController를 지정해 준다.


이제 설정부분은 다 끝났다.
두번째에 꾸미고자하는 UI들을 올려 놓고 IBOutlet으로 연결한다. 이번에는 간단하게 UILabel만 올려보고 첫번째 scene에서 두번째  scene으로 문자열을 넘겨주어 두번째 scene의 Label에 적용하도록 해보자.
다음과 같이 구성하고 UILabel이름은 secondLabel로 버튼 클릭시는 closeModal이란 method로 각각 연결 시켜 놓았다.

5. 두 scene들을 연결하는 세그웨이의 아이디를 지정한다. 이 아이디를 통해 세그웨이를 가져오고, 가져온 세그웨이를 통해 세그웨이와 연결된 View Controller를 가져올 수 있기 때문에 세그웨이 아이디를 지정한다.
세그웨이 지정은 세그웨이를 선택한 후 inspector창에 identifier에 아이디를 지정해 주면 된다.


맨 처음에 첫번째 scene에 show next라는 버튼을 만들고 다음 scene에 연결해 두었음으로 따로 버튼 액션을 등록할 필요는 없다. 대신 이 버튼이 클릭 될때(페이지 전환이 일어날때) 다음과 같은 메소드가 실행 되는데 이 메소드를 통해 다음 scene으로 전달하고 싶은 데이터 라든가 각종 처리를 해주면 된다.
-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender; 

6. 해당 method를 구현한다.

그후 SecondViewController의 viewWillApear method에서 해당 msg를 Label에 넣어주면 작업은 끝난다

그리고 마지막으로 닫기 버튼이 눌렸을때  modal창을 없애는 dismissModalViewControllerAnimated를 실행한다.

 
저작자표시

ActionSheet 위에 PickerView + Toolbar 올리기

Published on: 2011. 11. 20. 00:28 by louis.dev
ActionSheetPicker.zip

메인 화면에서 버튼을 클릭하면 PickerView를 포함한 ActionSheet를 보여주는 것을 진행해 보겠다.

1. 다음과 같은 화면으로 xib를 생성합니다.
 2. IBOutlet과 결과 레이블을 연결하고 버튼 클릭시 수행할 method를 IBAction을 통해 선언한다. 그리고 PickerView를 사용하기 위한 UIPickerViewDelegate, UIPickerViewDataSource를 선언한다.
 
3. 필요할 delegate method를 구현하고 PickerView에 들어갈 데이터를 초기화 한다.
 
4. 버튼클릭시 실행 될 method에서 ActionSheet에 PickerView와 Toolbar를 올리는 코드를 작성한다. 또한 Toolbar 버튼 클릭시 실행될 method들을 구현한다.
 

 [실행결과]
저작자표시

'Mobile > IOS' 카테고리의 다른 글

TableView에서 Pull Down Refresh(끌어 당겨 새로고침) 구현하기  (0) 2011.11.24
UITableView - 10. CustomCell에서 셀 안의 버튼 이벤트 처리하기  (0) 2011.11.19
UITableView - 9. iOS5(xcode4.2)의 새로운 기능 static cell사용하기  (0) 2011.11.18
UITableView - 8. Interface Builder를 이용한 Custom Cell 만들기  (3) 2011.11.18
UITableView - 7. 테이블 셀 이동하기  (0) 2011.11.18

UITableView - 10. CustomCell에서 셀 안의 버튼 이벤트 처리하기

Published on: 2011. 11. 19. 17:37 by louis.dev
CustomCellDelegate.zip

이전의 포스팅에서 IB를 이용하여 Custom Cell을 만드는 법에 대해서 알아보았다. 이때 셀 가장 오른쪽에 만든 오른쪽 버튼이 클릭 되었을때 delegate를 통해 처리해 보자.
버튼 클릭시 일어나는 이벤트 처리 method를 protocol로 만들어 두고 이 protocol을 구현하도록 하여 delegate처리를 하면 된다. 

1. cell의 클릭 이벤트를 처리할 protocol을 만든다.
 itemId는 현재 클릭한 cell의 index를 저장한다.


2. 버튼클릭시 발생하는 -(IBAction)addCart: 에서 method실행시 등록된 delegate로 이전하는 코드를 작성한다.

4. ViewController.h에 만든 delegate를 등록하고 cell을 생성할 때 delegate와 itemId를 지정해 준다. 그리고 delegate method를 구현한다.



저작자표시

'Mobile > IOS' 카테고리의 다른 글

TableView에서 Pull Down Refresh(끌어 당겨 새로고침) 구현하기  (0) 2011.11.24
ActionSheet 위에 PickerView + Toolbar 올리기  (0) 2011.11.20
UITableView - 9. iOS5(xcode4.2)의 새로운 기능 static cell사용하기  (0) 2011.11.18
UITableView - 8. Interface Builder를 이용한 Custom Cell 만들기  (3) 2011.11.18
UITableView - 7. 테이블 셀 이동하기  (0) 2011.11.18

MongoDB 설치하기(CentOS 5 64bit)

Published on: 2011. 11. 19. 01:13 by louis.dev

1. MongoDB 공식 홈페이지에서 설치하려고 하는 OS의 버전에 따라 다운로드 한다.
#db 데이터가 저장될 디렉토리 생성 mongodb의 default는 /data/db 디렉토리이다.
$ mkdir -p /data/db
$ cd /data
$ wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.0.1.tgz
$ chown ${사용자명}:${사용자그룹명} mongodb-linux-x86_64-2.0.1.tgz

$ tar xvf mongodb-linux-x86_64-2.0.1.tgz
#mongodb 시작
$ ./mongodb-linux-x86_64-2.0.1/bin/mongod &

$ ps -ef |grep mongod
root      2746  2577  0 01:12 pts/0    00:00:00 ./mongodb-linux-x86_64-2.0.1/bin/mongod
root      2759  2577  0 01:13 pts/0    00:00:00 grep mongod
저작자표시

UITableView - 9. iOS5(xcode4.2)의 새로운 기능 static cell사용하기

Published on: 2011. 11. 18. 10:24 by louis.dev
StaticCellTableView.zip

iOS에서 가장많이 사용하는 UI는 바로 테이블 뷰이다. 테이블 뷰는 리스트형태의 데이터를 보여주기위해 사용하기도 하지만, 설정화면을 TableView로 구성하기도 한다.
[TableView로 설정화면을 구성한 예]

이렇게 설정을 TableView로 만들었을때 해당 Cell들은 고정적이며 동적으로 처리해야 할일이 없다. 그런데도 이전버전의 방식으로 구현을 하려면 Custom Cell을 xib로 만들고 이것들을 배열로 만드는 불편한 작업을 할 뿐만 아니라, 테이블을 구현하기 위한 각종 delegate method까지 구현을 해줘야 한다.

이렇게 불편한 점을 개선하고자 xCode4.2(iOS5)에서는 "static cell"이라는 일종의 TableView 타입을 제공해 줌으로서, Cell의 갯수가 변하지 않는 상황에서 쉽게 셀을 구성하도록 해주는 기능입니다. 해당기능은 xCode 4.2에서 제공하는 story board에서 사용할 수 있습니다.

작성 방법
1. 프로젝트 생성을 다음과 같이 진행합니다.
 
두번째 화면에서 Use Storyboard 에 체크를 한후 프로젝트를 생성합니다.
 
그럼 다음과 같은 구조의 프로젝트가 생성이 됩니다.

 2. 첫번째로 ViewController.h가 상속받고 있는 Class를 UIViewController 에서 UITableViewController로 변경합니다. 

3. MainStoryboard.storyboard파일을 선택합니다. 그후 오른쪽 아래쪽의 library창에서 TableViewController를 끌어다가 빈 화면으로 올려놓습니다.(기존에 있던 view위에 올리는 것이 아닙니다.)

빈공간으로 끌어올려 아래 그림처럼 두개를 나란히 배치시킵니다.

4. 맨 좌측의 화살표를 드래그 하여 TableView Controller에 붙입니다.

 이렇게 화살표를 붙이면 TableViewController가 시작점이 되면서 앱을 실행 시키면 가장 먼저 이 Controller가 보여지게 됩니다.


5. 이제 이전의 View Controller(좌측에 있던)는 사용할 일이 없음으로 삭제 합니다.

6. 이제 좌측 상단의 object 영역에서 TableView를 선택하고 속성창에서 content를 "static cells"로 변경합니다.





















7. Storyboard에 있는 TableViewController의 File's Owner가 ViewController라고 지정해 줍니다.
좌측의 "Table view Controller Scene"에서 Table View Controller를 선택하고 오른쪽 상단의 Identity Inspector창에서 Custom Class를 ViewController로 지정합니다.
  






















이상으로 static cell을 사용하기 위한 기본설정은 모두 끝났습니다. 이제 TableView의 속성의 설정을 통해 static cell을 만들어 보겠습니다.
왼쪽상단의 TableView를 선택하면 우측 inspector창에 다양한 TableView들의 속성이 나오게 되는데, 이것들을 통해 다양한 모양의 TableView를 구성할 수 있습니다.
저는 섹션의 갯수와 table style만 변경하여 다음과 같은 모양을 만들었습니다.
 


[설정된 화면 모습] 

이후 각셀 위로 library창에서 UI들을 끌어다가 셀에다 놓으면 바로 Custom cell을 만들어 낼 수 있습니다.
그리고 각 셀을 선택을 하면 각셀의 세부설정(accessory타입 같은)을 할 수 있으니 필요한 데로 만들면 됩니다.

[실행결과 화면] 
물론 IBOutlet 과 IBAction으로 연결하여 각 셀의 view들을 제어할 수 있습니다. 
저작자표시

'Mobile > IOS' 카테고리의 다른 글

ActionSheet 위에 PickerView + Toolbar 올리기  (0) 2011.11.20
UITableView - 10. CustomCell에서 셀 안의 버튼 이벤트 처리하기  (0) 2011.11.19
UITableView - 8. Interface Builder를 이용한 Custom Cell 만들기  (3) 2011.11.18
UITableView - 7. 테이블 셀 이동하기  (0) 2011.11.18
UITableView - 6. 테이블 데이터 삭제 하기  (0) 2011.11.17

티스토리툴바