布莱恩F爱
向一位来自Portlandyobet英雄联盟的谷歌开发专家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com
用终极课程学习Angular的正确方法

如何创建一个iPad弹窗视图

在本教程中,我们将学习在iPad应用程序中创建弹窗视图的必要步骤。我将使用Xcode 4.5.2, ARC和一个故事板来开发这个应用程序。这个应用程序也是一个通用的应用程序,它也有一个iPhone故事板。相同的UITableView我们将在iPad弹窗中显示的会在iPhone/iPod touch的模态视图中显示。

创建故事板

我们需要创建storyboard,ibactioniboutlet我们有aUIControl(或按钮),一个新的表视图绑定到一个定制类和一个弹出(iPad)或模态(iPhone) segue到新的表视图。

第一步是创建UITableViewController在iPhone和iPad故事板中。只要拖出来自Xcode的接口构建器中的对象库。创建扩展的新文件UITableViewController类,并实现UITableViewDelegate需要显示协议。

UITableView是弹窗或模态视图

创建UIControl这将是弹窗视图的锚点。我加了一个新的UIBarButtonItem在我的导航栏中我将使用它来触发弹窗。创建一个IBActionsonTouchUpInside的按钮。我叫我的touchedFilterButton:

UIBarButtonItem作为弹出窗口的锚

创建一个从按钮的视图控制器到新表格视图控制器的弹窗(iPad)或模态(iPhone) segue,并给它一个标识符,我使用的是"ToFilterTableView"将iPad故事板的segue的样式设置为一个“弹窗”,以及锚点箭头的方向,并绑定到锚点元素(从故事板属性中锚点输入的圆圈中拖出)。

如何创建弹出窗口segue

对于iPhone故事板,我们添加相同的segue,但指定样式为"modal"。这意味着视图将从底部滑到当前视图上,显示与iPad弹窗中相同的表格。

iPhone模态视图取代了弹窗视图

我们将使用弹出窗口/模态视图中的表格来设置排序用户选项。在弹出窗口/模态中选择一个新的排序方法将刷新显示给用户的表中的内容。

ViewController代码

当我说ViewController时,我指的是主视图控制器它会显示弹窗。对我来说,这个视图控制器包含了过滤器UIBarButtonItem这会触发iPad上的弹窗,或iPhone上的模态视图。在我们的ViewController,我们想实现IBAction我们把它与UIBarButtonItem发送的行动。如果你使用的是标准UIButton作为你的锚点,然后你会绑IBAction按钮的onTouchUpInside事件。我的栏按钮项目绑定到touchedFilterButton:方法。下面是这个方法的代码。

-(IBAction)touchedFilterButton:(UIBarButtonItem*)发送方{如果(_filterPopoverController= =){(自我performSegueWithIdentifier:segueToFilterPopoverView发送方:自我];}其他的(_filterPopoverController dismissPopoverAnimated:是的];_filterPopoverController=;}}

在这里,我检查了一个类实例变量_filterPopoverController是一个对象,如果是,我们将触发segue来显示过滤器弹窗。如果对象不是,或已经存在,则弹出窗口将显示给用户。在本例中,我们希望在过滤器按钮被触摸时关闭弹出窗口。这样过滤器按钮可以切换弹出窗口的“打开”和“关闭”。

现在,让我们看看prepareForSegue:发送方:在我们的视图控制器中方法实现。这里我们会设置任何信息到segue的目标控制器中,并设置弹窗的大小如果我们在iPad上做弹窗segue。

-(无效)prepareForSegue:(UIStoryboardSegue*)segue发送方:(id)发送方{如果((segue标识符isEqualToString:segueToFilterPopoverView]){FilterWordListViewController*风投=seguedestinationViewController;(vc setFilterDelegate:自我];如果((segue isKindOfClass:(UIStoryboardPopoverSegue类]]){_filterPopoverController=((UIStoryboardPopoverSegue*)segue popoverController];(_filterPopoverController setPopoverContentSize:CGSizeMake(320,240)];(_filterPopoverController setDelegate:自我];}}}

在我的实施prepareForSegue:发送方:方法,我检查segue标识符,以确保我们正在使用到过滤器弹窗视图的segue。如果是,我在获取对目标视图控制器的引用,它是类型的FilterWordListViewController

接下来,我设置filterDelegate属性设置为当前对象(self)。我将创建一个自定义委托协议,这样当用户选择了不同的过滤器类型时,我的ViewController就能得到通知。

最后,我检查segue是否为aUIStoryboardPopoverSegue。在故事板中,我们为iPad设置segue为弹窗,为iPhone设置segue为模态。因此,当我们在iPad上触发弹窗segue时,这段代码会运行。

如果是,我们就会得到引用UIPopoverController实例,并使用实例设置弹出窗口的大小setPopoverContentSize:方法。我还设置UIPopoverController的委托属性。此委托属性是对实现的对象(同样是实例中的当前对象或self)的引用UIPopoverControllerDelegate协议。我们将在稍后展示该协议的更多实现。

为了进一步说明,下面是我的头文件ViewController:

@ interfaceViewController:ui@ property(,原子)IBOutlet UITableView*表视图;@ property(强大的,原子)UIPopoverController*filterPopoverController;-(IBAction)touchedFilterButton:(UIBarButtonItem*)发送方;@end

FilterViewController

我们将使用代表团模式通知ViewController当过滤器选择被更新时。我们的滤镜选择仅仅是aUITableView它有不同的过滤器选项,允许用户选择一个。当前选择的筛选器使用行复选框附件类型显示在表中。您可以在本页顶部的屏幕截图中看到这一点。

为了开始我们的委托模式,我们将定义一个自定义协议,名为FilterDelegate

@protocolFilterDelegate-(无效)filterSelected:(FilterType)filterType;@end

在上面的代码中,我们声明了新的协议,它将由ViewController实现。该协议声明采用者必须具有filterSelected:方法,该方法与所选择的筛选器类型一起提供。此协议定义在FilterViewController.h头文件。在这里,我还声明了一个新的filterDelegate属性来保存对将接收的委托对象的引用filterSelected:消息。

@ property(强大的,原子)id filterDelegate;

回顾我们的prepareForSegue:发送方:实现上面,你可以看到我在哪里设置这个属性的值到ViewController的self。

最后,我的FilterViewController将采用UITableViewDelegate协议,这使我们能够实现tableView: didSelectRowAtIndex:方法。当用户触摸并选择表中的某一行(或者在我的例子中选择一个过滤器选项)时,就会调用这个函数。

-(无效)表视图:(UITableView*)tableView didSelectRowAtIndexPath:(NSIndexPath*)indexPath{/ /得到FilterType_filterType=filterTypes(indexPath];//保存为用户默认值((NSUserDefaults standardUserDefaults]setObject:(NSNumber numberWithInt:_filterType]forKey:@“wordListFilterType”];/ /调用委托方法如果(_filterDelegate! =){(_filterDelegate filterSelected:_filterType];}}

在上面的代码中,我们检查是否filterDelegate属性(记住,用于自动合成属性的实例变量以下划线开头),否则。如果filterDelegate设置,则调用filterSelected:方法处理该对象。我们知道对象已经实现了此方法,因为它是采用的一部分FilterDelegate我们之前定义的协议。

回到ViewController

回到ViewController中,让我们看看filterSelected:方法的实现。

#编译指示标记- FilterDelegate方法-(无效)filterSelected:(FilterType)类型{_filterType=类型;(自我initWords];(_tableView reloadData];如果(((UIDevice currentDevice]userInterfaceIdiom]= =UIUserInterfaceIdiomPad){(自我touchedFilterButton:];}其他的{(自我导航控制器dismissModalViewControllerAnimated:是的];}}

在实施中filterSelected:方法,我们正在刷新基于新选中的显示给用户(在弹出窗口下方)的表视图FilterType。在用新数据重载表格后,我将通过调用隐藏弹出窗口touchedFilterButton:方法,这将关闭弹出窗口,并将对过滤器弹出窗口控制器的引用设置为

我的ViewController也采用了UIPopoverControllerDelegate协议。这意味着我们可以选择实现协议的任何一种方法:

&即可;popoverControllerShouldDismissPopover:&即可;popoverControllerDidDismissPopover:

我需要实现popoverControllerDidDismissPopover:方法,这样我就可以通过触摸弹出窗口外而不是点击锚点来知道何时弹出窗口被取消UIBarButtonItem一次。在这个方法中,我们只需要设置_filterPopoverController到nil,这样当用户触摸锚时UIBarButtonItem变量还是nil,我们向用户显示弹窗。

#编译指示标记- UIPopoverControllerDelegate方法-(无效)popoverControllerDidDismissPopover:(UIPopoverController*)popoverController{_filterPopoverController=;_wordCategoryPopoverController=;}

我希望这篇文章能帮助你在下一个iPad应用程序中实现弹窗。正如我在一开始提到的,因为我们的通用应用程序对于iPhone版本有一个单独的故事板,所以我们只是将相同的过滤器表显示为模态视图。这样,功能在两个平台上是相同的,并且两个平台使用相同的ViewController代码。

请在下面的评论中提出任何问题。

布莱恩F爱

嗨,我是布莱恩。我对TypeScript, Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。