iOS Swift如何根据下拉列表中的选择显示动态用户界面
Posted
技术标签:
【中文标题】iOS Swift如何根据下拉列表中的选择显示动态用户界面【英文标题】:iOS Swift how to show dynamic ui based on selction from drop list 【发布时间】:2017-05-27 07:47:57 【问题描述】:大家好,
我是 ios swift 的新手。我的屏幕有一个问题。
我有一个带有选项下拉列表的屏幕,例如:current bill,water bill., bike bill, loan bill, phone bill....so on
我有这个。但我需要的是,每当我从下拉列表中选择任何选项时。我需要显示一些 ui 元素,如标签、文本字段、文本框,为下拉列表中的每个选择动态显示。
例如:
如果我选择water bill
,那么在我的下拉菜单下方,我需要显示两个标签 ui,名称为 id。
如果我选择current bill
,然后在我的下拉菜单下方,我需要显示一个带有占位符'输入当前账单号'的文本
所以当我从下拉列表中选择任何选项时,我需要显示一些动态 ui。
我怎样才能做到这一点??
任何帮助都会被充分利用
【问题讨论】:
您不能简单地隐藏所有这些视图,如果您单击特定选项,只需为其创建可见元素吗? @Raymond 是的,我也想过。但是,如果我的下拉列表中有 20 个选项..那么如果我在同一个屏幕上放置 20 个不同的 ui? 嗯,我明白了。另一种解决方案。为每个选项制作 nib 文件,并在选择一个后显示。 使用容器视图 @Raymond Oaky 如果我创建一些 currentbill.xib、waterbill.xib 之类的...然后在下面下拉列表的同一个屏幕中,我将有一个共同的视图...但是我怎么能打电话那个xib文件,当我从下拉列表中选择任何选项时。那么我如何在我的ui屏幕中显示那个xib 【参考方案1】:您可以利用容器视图来实现:
1- 将下拉菜单添加到您想要的任何视图控制器。
2- 在该下拉菜单下添加一个容器视图并使用自动布局使该容器视图填充您希望它可切换/动态的位置。
3- 重复步骤 2 的次数与下拉菜单中的项目一样多。
4- 为每个容器视图创建 IBOutlet
s,并为下拉菜单创建 IBAction
。
5- 在下拉菜单的IBAction
中,将一个容器视图的isHidden
属性设置为false
,并根据用户从下拉菜单中的选择将其设置为其他true
。
这里有一个tutorial,用一个简单的例子解释了这一点。
【讨论】:
好的,这意味着,我需要在同一个屏幕上放置更多容器,比如一个上面一个.....而且我需要对下拉列表进行操作。我需要使用一些布尔值来根据我的下拉选择显示容器视图..对吗?? 但它看起来就像我们正在做的一样,就像将 uiview 放在与上面一样的屏幕上?.. 那么在上面一个接一个地保留更多容器是否是好的做法?? 是的,您将拥有许多相互重叠的容器视图,并且您将根据用户的选择从下拉菜单的IBAction
中控制哪个是可见的。拥有多个容器视图不是问题,每个容器视图都将嵌入一个视图控制器,因此您将在单独的类中管理与每个容器视图的视图控制器相关的所有内容。【参考方案2】:
只需将viewcontrollers
拖放到您当前的bill,water bill., bike bill, loan bill, phone bill
etc 的情节提要中即可。
当您从下拉列表中更改选项时,请使用以下代码将所需的控制器添加为子控制器。
let currentBill = self.storyboard?.instantiateViewController(withIdentifier: "currentBill") as! CurrentBillVC
// remove other views
for k in 0..<self.parentView.subviews.count
self.parentView.subviews[k].removeFromSuperview()
self .addChildViewController(currentBill)
// Add view to your maincontroller i named it parent view in which you want to display other controller w.r.t your drop down list.
self.parentView .addSubview(currentBill.view)
currentBill.didMove(toParentViewController: self)
【讨论】:
以上是关于iOS Swift如何根据下拉列表中的选择显示动态用户界面的主要内容,如果未能解决你的问题,请参考以下文章
如何修改此 jQuery 以在下拉列表中动态显示和隐藏相关选择选项?