UITableView 자동차 브랜드 구현(demo)

TableView 의 자 료 를 본 지 오래 되 었 습 니 다.뭔 가 를 쓰 고 싶 었 지만 여러 가지 이유 로 지연 되 었 습 니 다.오늘 저녁 에 마음 을 가 라 앉 히 고 최근 에 배 운 TableView 의 지식 을 기록 할 시간 이 있 습 니 다.다음은 본론 으로 들 어 갑 니 다.UITableView 는 UIKit 에서 가장 복잡 한 컨트롤 이 라 고 할 수 있 습 니 다.사용 하 는 것 은 어렵 지 않 지만 잘 사용 하 는 것 은 쉽 지 않 습 니 다.사용 할 때 우 리 는 배경 데이터 의 디자인,table View Cell 의 디자인 과 재 활용,table View 의 효율 등 문 제 를 고려 해 야 한다.
지난번 에 소 개 된 UITableView 는 UITableView 의 애플 릿 을 만 듭 니 다.자동차 브랜드 는 다음 과 같이 캡 처 합 니 다.

1.1 프로젝트 를 만 드 는 것 은 더 이상 말 하지 않 습 니 다.
1.2 모든 자동차 브랜드 의 사진 을 images.xcassets 에 넣 으 면 다음 과 같다.

1.3 plist 데 이 터 를 만 듭 니 다.plist 데이터 에 있 는 모든 array 는 하나의 자동차 브랜드 로 그룹 을 나 누고 모든 array 안에 하나의 array 가 있 습 니 다.이 안에 각 그룹 아래 의 모든 브랜드 자동차 데 이 터 를 저장 합 니 다.데 이 터 는 다음 그림 과 같 습 니 다.

1.4 데 이 터 를 만 든 다음 에 페이지 를 디자인 합 니 다.페이지 는 간단 합 니 다.바로 UItable View 를 놓 으 면 됩 니 다.
2.1 배경 코드,첫 번 째 가 져 오기

<UITableViewDataSource,UITableViewDelegate,UIAlertViewDelegate>

이 UItable View 의 프 록 시 를 가 져 와 야 다음 코드 에서 UItable View 의 대응 하 는 방법 을 사용 할 수 있 습 니 다.
2.2 UItable View 컨트롤 의 속성 을 만 들 고 데 이 터 를 저장 하 는 배열 을 만 듭 니 다.다음 과 같 습 니 다.

@property (weak, nonatomic) IBOutlet UITableView *tableView;
@property(nonatomic,strong)NSArray *carGroups;

2.3 데 이 터 를 불 러 옵 니 다.여 기 는 두 개의 모델 류 를 만들어 서 데 이 터 를 저장 해 야 합 니 다.국 가 는 이곳 의 데 이 터 를 모두 현지의 plist 문화 에 있 기 때문에 이 plist 안의 데 이 터 를 읽 어서 저장 해 야 합 니 다.
만 든 carGroups 배열 에 서 는 로 컬 plist 파일 이 하나의 array 형식 이 고,각 array 에는 하나의 array 배열 이 있 기 때문에 우 리 는 두 개의 모델 류 를 만들어 데 이 터 를 저장 해 야 합 니 다.하나의 모델 류 는 밖의 array 데 이 터 를 저장 하고,하나의 모델 류 는 array 안의 하위 array 데 이 터 를 저장 합 니 다.그리고 모델 클래스 에서 plist 에 대응 하 는 데이터 의 속성 과 방법 을 만 듭 니 다. 
코드 는 다음 과 같 습 니 다:

#import <Foundation/Foundation.h>
@interface ZKCarModel : NSObject
//  
@property(nonatomic,copy)NSString * icon;
//  
@property(nonatomic,copy)NSString *name;
+(instancetype)CarWithDict:(NSDictionary *)dic;
-(instancetype)initWithDict:(NSDictionary *)dic;
@end

#import "ZKCarModel.h"
@implementation ZKCarModel
-(instancetype)initWithDict:(NSDictionary *)dic
{
 if(self=[super init])
 {
 [self setValuesForKeysWithDictionary:dic];
 }
 return self;
}
+(instancetype)CarWithDict:(NSDictionary *)dic
{
 return [[self alloc] initWithDict:dic];
}
@end
#import <Foundation/Foundation.h>
#import "ZKCarModel.h"
@interface ZKCarGroupModel : NSObject
//  
@property(nonatomic,copy)NSString *title;
@property(nonatomic,strong)NSArray *cars;
+(instancetype)CarGroupWithDic:(NSDictionary *)dic;
-(instancetype)initWithDict:(NSDictionary *)dic;
@end

#import "ZKCarGroupModel.h"
@implementation ZKCarGroupModel
-(instancetype)initWithDict:(NSDictionary *)dic
{
 if(self=[super init])
 {
 self.title=dic[@"title"];
 NSMutableArray *Array=[NSMutableArray array];
 for (NSDictionary *dict in dic[@"cars"]) {
 ZKCarModel *Car=[ZKCarModel CarWithDict:dict];
 [Array addObject:Car];
 }
 self.cars=Array;
 }
 return self;
}
+(instancetype)CarGroupWithDic:(NSDictionary *)dic
{
 return [[self alloc] initWithDict:dic];
}
@end

2.4 데이터 에 대응 하 는 모델 류 를 만 든 후에 배열 게 으 른 로 딩 을 만 들 기 시작 합 니 다.
코드 는 다음 과 같 습 니 다:

#import <Foundation/Foundation.h>
@interface ZKCarModel : NSObject
//  
@property(nonatomic,copy)NSString * icon;
//  
@property(nonatomic,copy)NSString *name;
+(instancetype)CarWithDict:(NSDictionary *)dic;
-(instancetype)initWithDict:(NSDictionary *)dic;
@end

#import "ZKCarModel.h"
@implementation ZKCarModel
-(instancetype)initWithDict:(NSDictionary *)dic
{
 if(self=[super init])
 {
 [self setValuesForKeysWithDictionary:dic];
 }
 return self;
}
+(instancetype)CarWithDict:(NSDictionary *)dic
{
 return [[self alloc] initWithDict:dic];
}
@end
#import <Foundation/Foundation.h>
#import "ZKCarModel.h"
@interface ZKCarGroupModel : NSObject
//  
@property(nonatomic,copy)NSString *title;
@property(nonatomic,strong)NSArray *cars;
+(instancetype)CarGroupWithDic:(NSDictionary *)dic;
-(instancetype)initWithDict:(NSDictionary *)dic;
@end

#import "ZKCarGroupModel.h"
@implementation ZKCarGroupModel
-(instancetype)initWithDict:(NSDictionary *)dic
{
 if(self=[super init])
 {
 self.title=dic[@"title"];
 NSMutableArray *Array=[NSMutableArray array];
 for (NSDictionary *dict in dic[@"cars"]) {
 ZKCarModel *Car=[ZKCarModel CarWithDict:dict];
 [Array addObject:Car];
 }
 self.cars=Array;
 }
 return self;
}
+(instancetype)CarGroupWithDic:(NSDictionary *)dic
{
 return [[self alloc] initWithDict:dic];
}
@end

2.5.데 이 터 를 불 러 온 다음 에 UItable View 에 해당 하 는 프 록 시 방법 을 쓰기 시작 합 니 다.
코드 는 다음 과 같 습 니 다:

//    
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
 return self.carGroups.count;
}
//             
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
 ZKCarGroupModel *Model=self.carGroups[section];
 return Model.cars.count;
}
//       
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
 static NSString *ID=@"A";
 //      cell
 UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:ID];
 //       cell，      cell
 if(cell==nil){
 cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
 }
 //         
 ZKCarGroupModel *GroupModel=self.carGroups[indexPath.section];
 //        
 ZKCarModel *CarModel=GroupModel.cars[indexPath.row];
 //  cell     
 cell.textLabel.text=CarModel.name;
 //  cell     
 cell.imageView.image=[UIImage imageNamed:CarModel.icon];
 return cell;
}

위의 세 가지 프 록 시 방법 은 UItable View 에서 가장 많이 사용 하 는 세 가지 방법 입 니 다.이 세 가지 방법 을 다 쓰 고 xcode 를 실행 하면 데 이 터 를 볼 수 있 습 니 다.
그러나 여기 서 작은 문제 가 있 습 니 다.여기 표 시 된 모든 브랜드 는 위 에서 아래로 배열 되 어 있 습 니 다.그룹 이 하나 도 없습니다.그러면 우 리 는 어느 브랜드 의 자동 차 를 찾기 가 쉽 지 않 습 니 다.그래서 우 리 는 같은 데이터 의 자동차 브랜드 에 알파벳 을 붙 여 어떻게 해 야 합 니까?이것 은 UItable View 의 각 구역 에 머리 를 하나 더 해 야 합 니 다.titleForHeaderInSection 에이전트 사용 하기
코드 는 다음 과 같 습 니 다:

//     
-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
 //             
 ZKCarGroupModel *Model=self.carGroups[section];
 
 //           title
 return Model.title;
}

2.6 위의 프로그램 에서 화면의 맨 오른쪽 에 색인 이 하나 더 있 습 니 다.이 색인 을 누 르 면 해당 하 는 파 티 션 데 이 터 를 찾 을 수 있 습 니 다.사실은 이것 도 간단 하고 호출 도 가능 합 니 다.
section Index Titles ForTableView 의 에이전트 방법 입 니 다.이 방법 은 array 의 배열 을 되 돌려 줍 니 다.
코드 는 다음 과 같 습 니 다:

//    
-(NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
 return [self.carGroups valueForKeyPath:@"title"];
}

2.7 이 프로그램 에서 하나 더 만 들 었 습 니 다.화면 에 있 는 모든 자동차 브랜드 를 클릭 할 때 하나의 대화 상자 가 나타 납 니 다.왜 이것 을 해 야 합 니까?화면 에 있 는 그림 과 문 자 를 클릭 할 수 있 는 경우 가 많 기 때문에 정적 디 스 플레이 만 하 는 것 이 좋 습 니 다.이 대화 상 자 는 아무 소 용이 없 는 것 같 지만,하지만 여 기 는 이 방법의 사용 에 대해 서 만 말씀 드 리 겠 습 니 다.
코드 는 다음 과 같 습 니 다:

//  cell   
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
 //     
 UIAlertView *alertView=[[UIAlertView alloc] initWithTitle:@"  " message:@"  " delegate:self cancelButtonTitle:@"  " otherButtonTitles:@"  ", nil];
 //    
 alertView.tag=1;
 alertView.alertViewStyle=UITableViewCellStyleSubtitle;
 //[alertView ];
 
 [alertView show];
}

3.1 하나의 UITableView 가 만 든 자동차 브랜드 는 이렇게 OK 되 었 습 니 다.이것 은 하나의 앱 이 아니 지만 여기 서 UITableView 의 자주 사용 하 는 대리 방법 을 모두 적 었 습 니 다.물론 UITableView 는 아직도 많은 대표 적 인 방법 이 있 습 니 다.여 기 는 말 하지 않 았 지만 이런 것들 을 알 게 된 후에 앞으로 의 사용 에서 우 리 는 다시 조회 할 수 있 습 니 다.중요 한 것 은 사상 입 니 다.
이상 은 UITableView 가 자동차 브랜드 를 실현 하 는 모든 내용 이 므 로 여러분 께 도움 이 되 기 를 바 랍 니 다.