'Mobile/IOS'에 해당되는 글 13건

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

TableView에서 Pull Down Refresh(끌어 당겨 새로고침) 구현하기

Published on: 2011. 11. 24. 19:11 by louis.dev
PullDownRefresh.zip

UITableView를 사용해서 데이터를 로딩할 때 버튼을 둬서 리프레시를 할 수도 있지만, twitter나 facebook앱 처럼 TableView를 아래로 당기면 리프레시가 되는 TableView를 구현해 보려고 한다.
[Pull Down Refresh를 구현 한 예]

이 refresh를 처음부터 구현을 하려면 많이 힘들겠지만 다행이도 다른 개발자가 라이브러리 화 시켜놓은 라이브러리가 있으며, 이 라이브러리를 통해 쉽게 구현할 수 있다.
해당 라이브러리는 여기에서 다운로드 할 수가 있다. 

xCode 4.2버전을 통해 프로젝트를 진행해보도록 하겠다.(스토리보드로 UI를 꾸며 보겠다.)

1. 프로젝트를 생성한 후(스토리보드 사용에 체크를 하고) "library"라는 이름과 "images"라는 이름으로 그룹을 만든다.
 

 2. 위의 링크에서 다운로드 받은 파일 중 PullRefreshTableViewController.h, PullRefreshTableViewController.m 그리고 arrow.png 이미지를 추가 한다.
 
3. 해당 라이브러리를 사용하기 위한 Quartz.Core 프레임웍을 추가 한다.

4. PullRefreshTableViewController를 상속받은 MainTableViewController를 생성한다.

5.story board를 오픈한 후 초기에 생성되어있는 ViewController를 삭제 한 후 TableViewController를 끌어다 올려 놓는다.그리고 해당 TableViewController의 클래스를 위의 3단계에서 만든 MainTableViewController로 지정한다.

6. MainTableViewController.h에 tableView에서 데이터를 담을 NSArray형 변수를 하나 생성한다. 그리고 m파일에서는 UITableView를 사용하기위한 method를 구현해 준다.
 
 
7. 이후에 iOS시뮬레이터를 실행시키고 데이블을 당기면 다음과 같이 refresh가 되는 화면을 볼수가 있다.

이렇게 tableView를 당기면 라이브러리로 추가 했던 PullRefreshTableViewController의 method중 refresh라는 메소드가 호출이 된다. 그렇기 때문에 우리가 새로 만든 MainTableViewController에서 해당 method를 override해주어 개발하고자 하는 내용을 추가 해주면 된다.

 위 코드에서도 볼수 있듯이 데이터로딩이라던가 필요한 로직이 끝나면 PullRefreshTableViewController에 있는 method인 stopLoading이라는 메소드를 호출하여 loading....이라는 메세지를 숨겨 주면 된다.

이상으로 쉽게 PullDownRefresh를 구현하는 방법을 알아 보았다 
저작자표시

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

ActionSheet 위에 PickerView + Toolbar 올리기  (0) 2011.11.20
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

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

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

UITableView - 8. Interface Builder를 이용한 Custom Cell 만들기

Published on: 2011. 11. 18. 10:22 by louis.dev
CustomCellEx.zip

일반적인 경우라면 iOS에서 기본적으로 제공하는 Cell Type을 통해 구현이 가능하지만, 특별히 사용자가 디자인한데로 cell을 만들어 사용하는 방법도 있다. Interface Builder를 통해 cell xib를 만들어 customize 한 cell을 만들어 보자.

1. 프로젝트를 생성하고 "UITableViewCell" 을 상속받은 Objective-C 클래스를 생성한다.


2. Custom Cell을 꾸밀 xib파일을 생성한다.(일반적으로 objective-c 클래스 파일 이름과 xib이름을 동일하게 - CustomCell이라고 - 만든다)

3. xib파일을 열어 우측 하단의 library에서 "Table View Cell"을 끌어다 놓는다. 끌어다 놓은 Table View Cell을 선택하고 "Identity Inspector" 창에서 Custom Class를 위에서 만든 Objective-c Class인 "CustomCell"로 지정한다.

 4. xib에 구성하고 싶은 UI들을 올려놓고 "CustomCell class"에서 IBOutlet을 이용하여 UI component들과 연결을 한다.
 
5. TableView를 사용하기 위한 기본설정을 한다. 기본적인 내용은 여기에서 확인하면 된다.

6. ViewController.h에 TableView에 넣을 NSArray형태의 데이터를 @property로 선언하고 @synthesize로 선언한다.
 //ViewController.h
@property (retain) NSMutableArray *products;
//ViewController.m
@synthesize products;  
 
7. 테이블에 들어갈 내용이 상품정보임으로 상품정보를 가지고 있을 Objective-C클래스(domain object)를 만든다.(이름은 Product라는 이름으로 만든다.)
 
 
8. CustomCell에 Product를 넘기면 Product의 property값을 CustomCell에 set해주는 method를 만들어 준다.

9. TableView 사용시 구현해야할 delegate method들을 구현한다.
 

 [실행 결과]

 
저작자표시

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

UITableView - 10. CustomCell에서 셀 안의 버튼 이벤트 처리하기  (0) 2011.11.19
UITableView - 9. iOS5(xcode4.2)의 새로운 기능 static cell사용하기  (0) 2011.11.18
UITableView - 7. 테이블 셀 이동하기  (0) 2011.11.18
UITableView - 6. 테이블 데이터 삭제 하기  (0) 2011.11.17
UITableView - 5. Cell tap시 수행되는 delegate method  (1) 2011.11.17

티스토리툴바