ios开发（表视图）

Posted 2020-08-20 Ponytai1

1.在对象库中拖拉tableview至场景中。再拖拉tableviewcell作为原型单元格，注意要设置原型单元格标识符以备后面代码实现使用

2.设置tableVIEW属性（content：Dynamic Prototypes style：grouped）,原型单元格属性（style：basic，image，identifier标识符，identation：1）

3.将tableview的输出口delegate和datasource链接至viewcontroller

4.实现逻辑（书本例子）

在Viewcontroller.H中添加协议

@interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>

在.H中声明数组属性

@property (nonatomic, strong) NSArray *redFlowers;
@property (nonatomic, strong) NSArray *blueFlowers;

同时不要忘记清理

在.M中

- (void)viewDidUnload
{
    [self setRedFlowers:nil];
    [self setBlueFlowers:nil];
    [super viewDidUnload];

}

首先在viewcontroller..M中定义，避免程序出现magicnumber

#define kSectionCount 2
#define kRedSection 0
#define kBlueSection 1

 

在视图加载时填充原始数组

 1 - (void)viewDidLoad
 2 {
 3     self.redFlowers = [[NSArray alloc] 
 4                        initWithObjects:@"Gerbera",@"Peony",@"Rose",
 5                        @"Poppy",nil];
 6     self.blueFlowers = [[NSArray alloc] 
 7                         initWithObjects:@"Hyacinth",@"Hydrangea",
 8                         @"Sea Holly",@"Phlox",@"Iris",nil];
 9 
10     [super viewDidLoad];
11     // Do any additional setup after loading the view, typically from a nib.
12 }

View Code

实现协议

返回分区数

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return kSectionCount;
}
返回每个分区行数

- (NSInteger)tableView:(UITableView *)tableView
    numberOfRowsInSection:(NSInteger)section
{
    switch (section) {
        case kRedSection:
            return [self.redFlowers count];
        case kBlueSection:
            return [self.blueFlowers count];
        default:
            return 0;
    }
}
每个分区标题

- (NSString *)tableView:(UITableView *)tableView
titleForHeaderInSection:(NSInteger)section {
    switch (section) {
        case kRedSection:
            return @"Red";
        case kBlueSection:
            return @"Blue";
        default:
            return @"Unknown";
    }
}
配置表视图单元格

- (UITableViewCell *)tableView:(UITableView *)tableView
         cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView
                             dequeueReusableCellWithIdentifier:@"flowerCell"];        //flowercell为之前界面设计时原始单元格的标识符
    
    
    switch (indexPath.section) {
        case kRedSection:
            cell.textLabel.text=[self.redFlowers
                                 objectAtIndex:indexPath.row];         //将单元格标签设置为花名
            break;
        case kBlueSection:
            cell.textLabel.text=[self.blueFlowers
                                 objectAtIndex:indexPath.row];
            break;
        default:
            cell.textLabel.text=@"Unknown";
    }
    
    UIImage *flowerImage;
    flowerImage=[UIImage imageNamed:
                 [NSString stringWithFormat:@"%@%@",
                  cell.textLabel.text,@".png"]];         //花图片
    cell.imageView.image=flowerImage;
    
    return cell;
}

响应单元格选择事件

 1 - (void)tableView:(UITableView *)tableView 
 2             didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
 3     
 4     UIAlertView *showSelection;
 5     NSString    *flowerMessage;
 6     
 7     switch (indexPath.section) {
 8         case kRedSection:
 9             flowerMessage=[[NSString alloc] 
10                            initWithFormat:
11                            @"You chose the red flower - %@",
12                            [self.redFlowers objectAtIndex: indexPath.row]];
13             break;
14         case kBlueSection:
15             flowerMessage=[[NSString alloc] 
16                            initWithFormat:
17                            @"You chose the blue flower - %@",
18                            [self.blueFlowers objectAtIndex: indexPath.row]];
19             break;
20         default:
21             flowerMessage=[[NSString alloc] 
22                            initWithFormat:
23                            @"I have no idea what you chose!?"];
24             break;
25     }
26     
27     showSelection = [[UIAlertView alloc] 
28                      initWithTitle: @"Flower Selected" 
29                      message:flowerMessage 
30                      delegate: nil 
31                      cancelButtonTitle: @"Ok" 
32                      otherButtonTitles: nil];
33     [showSelection show];
34 }

View Code

 

创建基于主从视图应用程序

1.使用模板Master-Detail Application 新建项目，删除一个split view controller 一个negavationcontroller

2.将其修复IPHONE切换，按住CONTROL，选中单元格（不是表）连接到详细信息场景，选择PUSH链接

3.在detail页面用WEB视图填充满，显示网页信息。将标签detail view content goes here 放到WEB视图后面

因为这行字在IPHONE中永远也看不到，却在模板中也删不掉，所以放后面

4.实现数据源

在masterviewcontroller.H中

@property (strong, nonatomic) NSArray *flowerData;
@property (strong, nonatomic) NSArray *flowerSections;

同时清理

在maserViewCOntroller.M中

-viewdidunload中

1 [self setFlowerData:nil];
2     [self setFlowerSections:nil];

再master.H中声明方法将数据加入到数组

-（void）createFLowerData

 1 - (void)createFlowerData {
 2     
 3     NSMutableArray *redFlowers;
 4     NSMutableArray *blueFlowers;
 5     
 6     self.flowerSections=[[NSArray alloc] initWithObjects:
 7                     @"Red Flowers",@"Blue Flowers",nil];
 8     
 9     redFlowers=[[NSMutableArray alloc] init];
10     blueFlowers=[[NSMutableArray alloc] init];
11     
12     [redFlowers addObject:[[NSDictionary alloc]
13                            initWithObjectsAndKeys:@"Poppy",@"name",
14                            @"poppy.png",@"picture",
15                            @"http://en.wikipedia.org/wiki/Poppy",@"url",nil]];
16     [redFlowers addObject:[[NSDictionary alloc]
17                            initWithObjectsAndKeys:@"Tulip",@"name",
18                            @"tulip.png",@"picture",
19                            @"http://en.wikipedia.org/wiki/Tulip",@"url",nil]];
20     [redFlowers addObject:[[NSDictionary alloc]
21                            initWithObjectsAndKeys:@"Gerbera",@"name",
22                            @"gerbera.png",@"picture",
23                            @"http://en.wikipedia.org/wiki/Gerbera",@"url",nil]];
24     [redFlowers addObject:[[NSDictionary alloc]
25                            initWithObjectsAndKeys:@"Peony",@"name",
26                            @"peony.png",@"picture",
27                            @"http://en.wikipedia.org/wiki/Peony",@"url",nil]];
28     [redFlowers addObject:[[NSDictionary alloc]
29                            initWithObjectsAndKeys:@"Rose",@"name",
30                            @"rose.png",@"picture",
31                            @"http://en.wikipedia.org/wiki/Rose",@"url",nil]];
32     [redFlowers addObject:[[NSDictionary alloc]
33                            initWithObjectsAndKeys:@"Hollyhock",@"name",
34                            @"hollyhock.png",@"picture",
35                            @"http://en.wikipedia.org/wiki/Hollyhock",
36                            @"url",nil]];
37     [redFlowers addObject:[[NSDictionary alloc]
38                            initWithObjectsAndKeys:@"Straw Flower",@"name",
39                            @"strawflower.png",@"picture",
40                            @"http://en.wikipedia.org/wiki/Strawflower",
41                            @"url",nil]];
42     
43     [blueFlowers addObject:[[NSDictionary alloc]
44                             initWithObjectsAndKeys:@"Hyacinth",@"name",
45                             @"hyacinth.png",@"picture",
46                             @"http://en.m.wikipedia.org/wiki/Hyacinth_(flower)",
47                             @"url",nil]];
48     [blueFlowers addObject:[[NSDictionary alloc]
49                             initWithObjectsAndKeys:@"Hydrangea",@"name",
50                             @"hydrangea.png",@"picture",
51                             @"http://en.m.wikipedia.org/wiki/Hydrangea",
52                             @"url",nil]];
53     [blueFlowers addObject:[[NSDictionary alloc]
54                             initWithObjectsAndKeys:@"Sea Holly",@"name",
55                             @"sea holly.png",@"picture",
56                             @"http://en.wikipedia.org/wiki/Sea_holly",
57                             @"url",nil]];
58     [blueFlowers addObject:[[NSDictionary alloc]
59                             initWithObjectsAndKeys:@"Grape Hyacinth",@"name",
60                             @"grapehyacinth.png",@"picture",
61                             @"http://en.wikipedia.org/wiki/Grape_hyacinth",
62                             @"url",nil]];
63     [blueFlowers addObject:[[NSDictionary alloc]
64                             initWithObjectsAndKeys:@"Phlox",@"name",
65                             @"phlox.png",@"picture",
66                             @"http://en.wikipedia.org/wiki/Phlox",@"url",nil]];
67     [blueFlowers addObject:[[NSDictionary alloc]
68                             initWithObjectsAndKeys:@"Pin Cushion Flower",@"name",
69                             @"pincushionflower.png",@"picture",
70                             @"http://en.wikipedia.org/wiki/Scabious",
71                             @"url",nil]];
72     [blueFlowers addObject:[[NSDictionary alloc]
73                             initWithObjectsAndKeys:@"Iris",@"name",
74                             @"iris.png",@"picture",
75                             @"http://en.wikipedia.org/wiki/Iris_(plant)",
76                             @"url",nil]];
77     
78     self.flowerData=[[NSArray alloc] initWithObjects:
79                 redFlowers,blueFlowers,nil];
80     
81 }

在MASTERVIEW。m中ViewDidLoad方法中调用他

[self  createFlowerData];

 

实现主视图控制器

 1 - (NSInteger)numberOfSectionsInTableView:(UITableView *)aTableView {
 2     // Return the number of sections.
 3     return [self.flowerSections count];
 4 }
 5 
 6 
 7 - (NSInteger)tableView:(UITableView *)aTableView numberOfRowsInSection:(NSInteger)section {
 8     // Return the number of rows in the section.
 9     return [[self.flowerData objectAtIndex:section] count];
10 }
11 
12 
13 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath   //配置单元格
14 {
15     UITableViewCell *cell = [tableView 
16                              dequeueReusableCellWithIdentifier:@"flowerCell"];
17     
18     cell.textLabel.text=[[[self.flowerData objectAtIndex:indexPath.section] 
19                           objectAtIndex: indexPath.row] objectForKey:@"name"];
20     cell.detailTextLabel.text=[[[self.flowerData objectAtIndex:indexPath.section] 
21                                 objectAtIndex: indexPath.row] objectForKey:@"url"];
22     
23     UIImage *flowerImage;
24     flowerImage=[UIImage imageNamed:
25                  [[[self.flowerData objectAtIndex:indexPath.section] 
26                    objectAtIndex: indexPath.row] objectForKey:@"picture"]];
27     
28     cell.imageView.image=flowerImage;
29     
30     return cell;
31 }
32 
33 
34 
35 
36 - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {           //配置每栏标签
37     return [self.flowerSections objectAtIndex:section];
38 }

设置用户选定栏按钮后执行的操作

1 - (void)tableView:(UITableView *)aTableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {      //将Master的属性detailitem设置为选定花朵的NSDictionary，以便详细视图控制器中访问内容
2     self.detailViewController.detailItem=[[flowerData 
3                                            objectAtIndex:indexPath.section]
4                                           objectAtIndex: indexPath.row];
5 }

实现详细视图控制器

应将WEB视图加载detailitem中的地址

使用configureView方法（每当视图更新自动调用此方法）

- (void)configureView
{
    // Update the user interface for the detail item.

    if (self.detailItem) {
        NSURL *detailURL;
        detailURL=[[NSURL alloc] initWithString:[self.detailItem objectForKey:@"url"]];
        [self.detailWebView loadRequest:[NSURLRequest requestWithURL:detailURL]];
        self.navigationItem.title = [self.detailItem objectForKey:@"name"];
        self.detailDescriptionLabel.hidden=YES;
    }
}

设置详细视图弹出框

在纵向模式下，分割视图有一个按钮用于显示包含详细视图弹出框，默认为ROOTLIST，我们要加你修改为FLOWER TYPES

1 - (void)splitViewController:(UISplitViewController *)splitController willHideViewController:(UIViewController *)viewController withBarButtonItem:(UIBarButtonItem *)barButtonItem forPopoverController:(UIPopoverController *)popoverController
2 {
3     barButtonItem.title = NSLocalizedString(@"Flower List", @"Flower List");           　　　　　　//修改这一行，原先是@Master @Master
4     [self.navigationItem setLeftBarButtonItem:barButtonItem animated:YES];
5     self.masterPopoverController = popoverController;
6 }

为在IPHONE中正常运行

将masterviewcontroller的detailviewcontroller属性设置为该引用

1 - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
2     self.detailViewController=segue.destinationViewController;
3 }