现在的位置: 首页 > 综合 > 正文

表视图与导航的结合

2017年12月08日 ⁄ 综合 ⁄ 共 13128字 ⁄ 字号 小 中 大 ⁄ 评论关闭

一、首先我们先创建一个iphone或ipad工程（本例以iphone为例）命名TableViewDemo1
如下图所示：

二、打开TableViewDemo1ViewController.xib,添加TableView控件。

三、编辑TableViewDemo1ViewController.h
      添加实现的协议UITableViewDelegate,UITableViewDataSource，及声明UITableView对象tableViewList

C代码
复制代码 收藏代码
  1. @interface TableViewDemo1ViewController : UIViewController<UITableViewDelegate,UITableViewDataSource> {   
  2.     IBOutlet UITableView *tableViewList;   
  3. }   
  4. @end  

四、打开TableViewDemo1ViewController.xib，IB设计器使TableView控件与之前声明的对象tableViewList做关联。


打开以上窗口，右键选中File's Owner并拖动至Table View上

在弹出菜单中选tableViewList
然后再右键选中Table View拖至File's Owner，淡出菜单如下

分别选中dataSource和delegate


至此IB设计完毕，下一步我们会在类中添加导航的实现代码。

五、添加实现代码
打开编辑TableViewDemo1ViewController.h
添加 NSMutableArray *dataItems;

C代码
复制代码 收藏代码
  1. @interface TableViewDemo1ViewController : UIViewController<UITableViewDelegate,UITableViewDataSource> {   
  2.     IBOutlet UITableView *tableViewList;   
  3.     NSMutableArray *dataItems;   
  4. }   
  5. @end  

打开编辑TableViewDemo1ViewController.m
在viewDidLoad中初始化dataItems

C代码
复制代码 收藏代码
  1. - (void)viewDidLoad {   
  2.     [super viewDidLoad];   
  3.     dataItems=[[NSMutableArray alloc]initWithObjects:@"中国",@"美国",@"日本",nil];   
  4. }  

添加数据源, 由三个函数来回答数据绑定的请求:numberOfSectionsInTableView, numberOfRowsInSection 和 cellForRowAtIndexPath.

用numberOfSectionsInTableView方法来返回table中有几个组.

C代码
复制代码 收藏代码
  1. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView   
  2. {   
  3.   return 1;   
  4. }  

用numberOfRowsInSection方法来返回每个组里有几行

C代码
复制代码 收藏代码
  1. - (NSInteger)tableView:(UITableView *)tableView   
  2.  numberOfRowsInSection:(NSInteger)section    
  3. {   
  4.   return [dataItems count];    
  5. }  

最后用cellForRowAtIndexPath来得到一个包含每一行显示信息的UITableViewCell对象. UITableViewCell类支持文本和图像,编辑和删除确认等功能. 这些信息会保存在表队列里,用来至此翻页等功能,但是内存很低的时候会自动释放,然后再需要的时候重新创建.

C代码
复制代码 收藏代码
  1. // Customize the appearance of table view cells.
      
  2. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {   
  3.        
  4.     static NSString *CellIdentifier = @"Cell";   
  5.        
  6.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];   
  7.     if (cell == nil) {   
  8.         cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];   
  9.     }   
  10.     NSUInteger row=[indexPath row];   
  11.     cell.textLabel.text=[dataItems objectAtIndex:row];     
  12.     return cell;   
  13. }  

OK至此最基本的导航菜单我们算是完成了，运行一下看看效果
 

     

TableViewDemo1.zip (674.1 KB)

在实例一我们做了一个最基本的导航列表（其实还没有导航功能，只不过简单的菜单而已），在本例中进一步丰富我们的导航列表，并增加导航功能，拭目以待吧！

一、首先先丰富一下导航列表
      目标：1、加上图标；2、加上明细；3、加上导航按钮；
      准备三个图标文件并拖拽到工程下的Resources下

在h文件中添加图标NSMutableArray *iconItems;  NSMutableArray *detailItems;声明代码
@interface TableViewDemo1ViewController :

C代码
复制代码 收藏代码
  1. UIViewController<UITableViewDelegate,UITableViewDataSource> {   
  2.     IBOutlet UITableView *tableViewList;   
  3.     NSMutableArray *dataItems;   
  4.     NSMutableArray *iconItems;   
  5.         NSMutableArray *detailItems;       
  6. }   
  7. @end   

在m文件viewDidLoad添加iconItems的初始化代码

C代码
复制代码 收藏代码
  1. - (void)viewDidLoad {   
  2.     [super viewDidLoad];   
  3.     dataItems=[[NSMutableArray alloc]initWithObjects:@"中国",@"美国",@"日本",nil];   
  4.     iconItems＝[[NSMutableArray alloc]initWithObjects:@"cn",@"us",@"jp",nil];   
  5.         detailItems=[[NSMutableArray alloc]initWithObjects:@"China",@"America",@"Japan",nil];   
  6. }  

以上都准备好后修改UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath方法

注意实例化cell时注意样式由原来的UITableViewCellStyleDefault缺省改成UITableViewCellStyleSubtitle

Java代码
复制代码 收藏代码
  1. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {   
  2.        
  3.     static NSString *CellIdentifier = @"Cell";   
  4.        
  5.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];   
  6.     if (cell == nil) {   
  7.         //实例化cell时注意样式由原来的UITableViewCellStyleDefault缺省改成UITableViewCellStyleSubtitle
      
  8.   
  9.         cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];   
  10.     }   
  11.     NSUInteger row=[indexPath row];   
  12.         //添加图标   
  13.     cell.imageView.image =[UIImage imageNamed:[NSString stringWithFormat:@"%@.gif",[iconItems objectAtIndex:row]]];   
  14.     cell.textLabel.text=[dataItems objectAtIndex:row];   
  15.     //添加明细   
  16.     cell.detailTextLabel.text =[detailItems objectAtIndex:row];   
  17.     // Configure the cell.   
  18.        
  19.     return cell;   
  20. }  

添加导航按钮 在m文件中添加委托函数– tableView:accessoryTypeForRowWithIndexPath:

C代码
复制代码 收藏代码
  1. -(UITableViewCellAccessoryType)tableView:(UITableView *)tableView accessoryTypeForRowWithIndexPath:(NSIndexPath *)indexPath{    
  2.    //返回类型选择按钮   
  3.     return UITableViewCellAccessoryDetailDisclosureButton;    
  4. }  

好现在我们执行程序看看

但是需要注意的时官方文档告诉我们accessoryTypeForRowWithIndexPath这个委托函数在iOS 3.0之后已经被废弃了，现在可以在UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath方法中添加

cell.accessoryType= UITableViewCellAccessoryDetailDisclosureButton;

C代码
复制代码 收藏代码
  1. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {   
  2.        
  3.     static NSString *CellIdentifier = @"Cell";   
  4.        
  5.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];   
  6.     if (cell == nil) {   
  7.         //实例化cell时注意样式由原来的UITableViewCellStyleDefault缺省改成UITableViewCellStyleSubtitle
      
  8.         cell = [[[UITableViewCell alloc] initWithStyle: UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];   
  9.     }   
  10.     NSUInteger row=[indexPath row];   
  11.     //添加图标   
  12.     cell.imageView.image =[UIImage imageNamed:[NSString stringWithFormat:@"%@.gif",[iconItems objectAtIndex:row]]];   
  13.     cell.textLabel.text=[dataItems objectAtIndex:row];   
  14.     //添加明细   
  15.     cell.detailTextLabel.text =[detailItems objectAtIndex:row];   
  16.     //导航按钮   
  17.     cell.accessoryType= UITableViewCellAccessoryDetailDisclosureButton;   
  18.            
  19.     return cell;   
  20. }  

二、现在导航按钮已经有了但是只是个空按钮，下一步我们添加其功能
  1、添加NextControlView类文件及NextControlView.xib文件，还有准备所需图片

  2、编辑NextControlView.m

C代码
复制代码 收藏代码
  1. - (void)viewDidLoad {   
  2.     self.imgArray = [[NSMutableArray alloc] init];   
  3.     for(int i=1;i<=3;i++)   
  4.     {   
  5.         NSString *imgName =[NSString stringWithFormat:@"img%d.jpg",i];   
  6.         [self.imgArray addObject:imgName];   
  7.     }   
  8.     [self.imgArray release];   
  9.        
  10.     UIImageView *img = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 436)];   
  11.     [img setImage:[UIImage imageNamed:[self.imgArray objectAtIndex:0]]];   
  12.     self.imgView = img;   
  13.     [self.imgView setContentMode:UIViewContentModeScaleAspectFit];   
  14.     [self.view addSubview:imgView];   
  15.     [img release];   
  16.        
  17.     [imgView setImage:[UIImage imageNamed:[self.imgArray objectAtIndex:Page]]];   
  18.     self.title = [NSString stringWithFormat:@"image %@",[self.imgArray objectAtIndex:Page]];   
  19.     [super viewDidLoad];   
  20. }  

3、在TableViewDemo1ViewController.m中增加如下导航按钮的处理代码，

C代码
复制代码 收藏代码
  1. -(void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath{    
  2.     NSInteger row = indexPath.row;   
  3.     nextControlView = [[NextControlView alloc] initWithNibName:@"NextControlView" bundle:nil];    
  4.     nextControlView.Page=row;   
  5.     [self.navigationController pushViewController:nextControlView animated:YES];       
  6. }  

好，现在我们运行程序试一试
但是经过试验点击导航按钮时没有任何反应，这时怎么回事呢？我们再仔细分析一下上面的导航按钮处理函数，注意最后一行代码：[self.navigationController pushViewController:nextControlView animated:YES];
是做切换画面功能的
那么self.navigationController  是什么？其实至此我们落掉了一个很重要的控制器即导航控制器，因为self 必须在navigation栈中,self.navigationController才不会为空，才可以帮助我们转化画面。下面我们来加上这个navigationController

首先更改TableViewDemo1AppDelegate.h代码如下：
增加navigationController 去掉viewController

C代码
复制代码 收藏代码
  1. @interface TableViewDemo1AppDelegate : NSObject <UIApplicationDelegate> {   
  2.     UIWindow *window;   
  3.     //TableViewDemo1ViewController *viewController;
      
  4.     UINavigationController *navigationController;   
  5. }   
  6.   
  7. @property (nonatomic, retain) IBOutlet UIWindow *window;   
  8. //@property (nonatomic, retain) IBOutlet TableViewDemo1ViewController *viewController;
      
  9. @property (nonatomic, retain) IBOutlet UINavigationController *navigationController;   
  10. @end  

在TableViewDemo1AppDelegate.m修改didFinishLaunchingWithOption函数如下

C代码
复制代码 收藏代码
  1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {       
  2.   
  3.     //[self.window addSubview:viewController.view];
      
  4.     [window addSubview:[navigationController view]];   
  5.     [self.window makeKeyAndVisible];   
  6.   
  7.     return YES;   
  8. }  

打开MainWindow.xib文件在IB设计器中删除原来的Table View Demo1 View Controller
增加一个Navigation Controller并且设置View Controller (Root View Controller)关联到TableViewDemo1ViewController

最后选择TableViewDemo1 App Delegate

如下图左键选中navigationController到Table View Demo1 View Controller做关联


关联后

OK至此我们导航控制器配置完毕，运行程序
分别点击中国、美国、日本一切正常显示见下图：


 

  • TableViewDemo2.zip (162.7 KB)

    • 返回
    【上篇】
    【下篇】

    作者:

    抱歉!评论已关闭.

    返回首页

    Copyright © 2013-2018 学步园  保留所有权利.
    软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
    必威体育
    必威电竞