2011-12-07 4 views
1

내 앱에 뉴스 섹션이 있습니다. 내 스토리 보드에 뉴스 항목을 표시하는보기를 만들려고합니다. 뉴스에는 제목, 날짜, 이미지 및 일부 텍스트가 포함됩니다.iOS 스토리 보드 : 동적 인 플로팅 콘텐츠를 처리하는 방법은 무엇인가요?

콘텐츠가 떠 다니기 때문에 HTML로 표시하기가 쉽지만 iOS 요소는 고정 크기로되어 있습니다. 제 생각 엔 UILabel은 제목과 날짜가 좋을 수 있습니다. 이미지는 UIImage이고 텍스트는 UITextView입니다. 모든 요소는 스크롤보기 안에 있어야한다고 생각합니다. 문제는 일부 뉴스의 제목이 한 줄을 채우지 만 다른 뉴스는 여러 줄을 채울 수 있다는 것입니다.

스토리 보드에서 이와 같은 설정을 어떻게 처리 할 수 ​​있습니까? 가이드 링크, 자습서는 괜찮습니다.

답변

3

여러 가지 방법으로 접근 할 수 있습니다. 궁극적으로 런타임에 이러한 요소 중 하나의 크기를 제어 할 수 있습니다. UX의 관점에서 적어도 일부 요소는 크기가 고정되어 있어야합니다 (예 : 뉴스 항목의 전체 크기를 나타내는 이미지와 스크롤보기). 그것은 제목과 세부 사항의 상대적 크기로 재생을 떠날 것입니다. 전체 제목을 표시하려면 NSString 클래스의 sizeWithFont 메서드 (또는 그 변형 중 하나)를 사용하여 제목에 사용할 공간을 계산하고 원하는만큼 세부 사항에 남은 공간을 할당하십시오.

업데이트 : 새로운 iOS 5 스토리 보드 기능을 특별히 겨냥한 것이 아니라 일반적인 전략으로 의도 한 것이라고 덧붙였습니다.

업데이트 : 글쎄, 자습서는 없지만 여기에 몇 가지 일반적인 지침이 있습니다 (적어도 내가 다루는 방식에 관한 것입니다).

여기 예제 이미지에서 설명한 것과 비슷한 요소를 캡슐화하는 NewsItem 클래스를 설정합니다. 어떻게 NewsItem을 드러내는가는 맛의 문제입니다. NewsItem 컬렉션을 더 간단하게 관리 할 수 ​​있도록 UITableView를 컨테이너로 시작하는 것이 좋습니다. UITableViewCellNewsItemTableViewCell으로 서브 클래 싱하고 Interface Builder를 사용하여 NewsItem의 공칭 레이아웃을 생성하십시오. 따라서 예제 이미지에서 뉴스 항목은 하나의 테이블 행에 해당합니다.

묻고있는 주요 부분은 이미지의 빨간색과 파란색 프레임으로 식별됩니다. 위의 방법을 사용하여 제목의 범위를 계산하려면 NewsItemTableViewCell에 논리를 추가합니다.이 경우보기 (이 경우 NewsItemTableViewCell)에 모델의 명시적인 지식 (뉴스 항목의 기본 데이터)이 있음을 가정합니다. 참조의 형식 (즉, 웹 서비스에서 검색 한 항목을 포함하는 NewsItem 클래스 의 인스턴스). 제목의 너비가 빨간색 프레임의 기본 너비보다 큰 경우 파란색 프레임의 높이를 줄이는 동시에 빨간색 프레임의 높이를 조정합니다 (높이기). 이런 종류의 접근법은 테이블 내의 셀 높이를 다르게하기위한 추가 논리를 포함하지 않아도됩니다.

자주 사용하는 대안은 컨트롤러 클래스가보기와 모델을 중재하는 것입니다. 테이블에 여러 종류의 셀이 있어야한다는 요구 사항이있을 때 유용 할 수 있습니다. 그것은 또한 tableview 셀 재사용을 훨씬 간단하게 만든다. 이 경우 기본 클래스를 선언하십시오. 다음

@protocol GenericCellController 

- (UITableViewCell*) tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath; 
@optional 
- (void) tableView:(UITableView*)tableView didSelectRowAtIndexPath:(NSIndexPath*)indexPath; 

@end 

과 : 그런 다음 테이블 셀 컨트롤러 개체의 컬렉션을 설정

@interface NewsItemTableCellController : NSObject<GenericCellController> { 
    NewsItem* newsitem; 
} 

이 같이 보일 수 있습니다.이 장점은 tableView:cellForRowAtIndexPath:을 tableview 컨트롤러 코드에 구현할 때 해당 행의 셀 컨트롤러 개체로 위임해야한다는 점입니다. 게다가 수퍼 클래스 지정을 사용하여 참조 할 수 있습니다. 예를 들어, 가상 NewsItemTableViewController 수업 시간에 당신은 할 수 있습니다

- (UITableViewCell*) tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*) path { 
    NSObject<GenericCellController>* cellController = [cellControllerArray objectAtIndexPath:indexPath.row]; 
    UITableViewCell* cell = [cellController tableView:tableView cellForRowAtIndexPath:indexPath]; 
    return cell; 
} 

이 방법을 사용하면 파생 클래스가 렌더링 로직을 처리하도록 위임을 사용 다형 컬렉션에 NSObject의에서 파생 된 모든 클래스를 가지고 있습니다. 파생 된 Controller 클래스는 위에서 설명한대로 해당 UITableViewCell 파생 하위 클래스가있는 tableView:cellForRowAtIndexPath:의 자체 구현을가집니다.

이 방법을 선택하면 이러한 아이디어를 구현하기위한 머리말로 사용할 수있는 테이블 뷰 및 컨트롤러의 기본 예제가 많이 있습니다.

enter image description here

관련 문제