带有图像的自定义 UIPickerView 皮肤

Posted

技术标签:

【中文标题】带有图像的自定义 UIPickerView 皮肤【英文标题】:Customize UIPickerView's Skin with images 【发布时间】:2012-07-12 11:27:41 【问题描述】:

我正在开发一个 iPhone 应用程序。在哪里,我想要UIPickerView,如图所示。可以这样改变UIPickerView的外观吗?!请指导我这样做!我在没有 XIB 的情况下创建它。

或者有没有办法让UIPickerView皮肤透明?

提前致谢!! :-)

【问题讨论】:

【参考方案1】:

我不知道这是否正确,但你可以设置你的UIPickerView 背景图片...我做过一次。

看到这个:-

//Make a view to set as background of UIPickerView
UIView * viewForPickerView = [[UIView alloc]initWithFrame:CGRectMake(0.0, 0.0, 320.0, 216.0)];
[viewForPickerView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"pickerViewBackground.png"]]];

[[[pickerView subviews]objectAtIndex:2] addSubview: viewForPickerView];

//UIPickerView has 8 subviews like, background, rows, container etc.
// hide unnecessary subview

[(UIView*)[[pickerView subviews] objectAtIndex:3] setHidden:YES];
[(UIView*)[[pickerView subviews] objectAtIndex:5] setHidden:YES];
[(UIView*)[[pickerView subviews] objectAtIndex:6] setHidden:YES];
[(UIView*)[[pickerView subviews] objectAtIndex:7] setHidden:YES];
[(UIView*)[[pickerView subviews] objectAtIndex:8] setHidden:YES];

现在在您的UIPickerViewselectionIndicator 上添加UILabel,并使用label 作为selectionIndicator。 你可以用你自己的方式管理它。

谢谢!

【讨论】:

嗯...好像我的pickerView只有5个子组件。由于未捕获的异常“NSRangeException”而终止应用程序,原因:“*** -[__NSArrayM objectAtIndex:]: index 5 beyond bounds [0 .. 4]” 知道为什么会这样吗? 你是如何添加你的pickerView的?上面的代码你必须在你添加pickerView作为self.view的subVie之后编写......?你能看到我的代码吗? 在我做之前 - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view 方法。这向我展示了范围异常错误。我在 addSubview 行下面尝试了这些行。它现在声明,它有一个空数组!奇怪的!! :-| 一些选择器显示 5 个子视图而其他选择器显示 9 个的原因是选择指示器。如果已禁用,选择器将只有 5 个子视图。如果启用(默认),它将有 9。【参考方案2】:

UIPickerView 只不过是一个带有一个或多个 UITableView 以及背景和选择器视图的 UIView。

当 Apple 决定以另一种方式实现它时,向 UIPicker 视图隐藏和添加视图可能会破坏您的代码。

使用 UITableView(s) 和您自己的自定义背景和选择器视图来实现您的控件可能是一个更好的主意。

在 UITableView(s) 上实现 UIPickerView 行为的一些技巧:

使用 ContentInset 确保第一行/最后一行显示在 滚动到顶部/底部时居中。

在 UITableViewSource 上实现 tableView:didSelectRowAtIndexPath: 并在 UITableView 上调用 scrollToRowAtIndexPath 将选中的行显示在中间。

在 UITableViewSource 上实现 scrollViewDidEndDecelerating 和 scrollViewDidEndDragging(其中 willDecelerate 为 false)。检测最靠近中间的行,将该行设置为选中,然后使用 UITableView 上的 selectRowAtIndexPath 将该行滚动到中间(或在该行已被选中时使用 scrollToRowAtIndexPath)。

在 selectRowAtIndexPath 和 scrollToRowAtIndexPath 中将 atScrollPosition 设置为 TOP。这有点令人困惑,因为该行显示在中间,但 ContentInset 将顶部推到了视图的中间。

您可以使用 visibleCells 和 contentOffset 的框架检测 UITableView 上最靠近中间的行。可以通过对 indexPathsForVisibleRows 应用相同的索引来找到行的 NSIndexPath。

【讨论】:

【参考方案3】:

不幸的是 UIPickerView 不是高度可定制的,因此您最终可能会使用私有标头来修改外观(不推荐)或使用一些模拟 UIPickerView 行为但允许自定义的第三方库。

【讨论】:

【参考方案4】:

看看these。可能不是你想要的,但也可能有帮助:)

【讨论】:

感谢您的快速响应 Vaibhav!但是我不想使用除了 UIPickerView 之外的任何东西 :-) 我知道我们可以使用 ALPickerView 来做到这一点 :-) 我正在寻找一种自定义 UIPickerView 的方法! ***.com/questions/5744996/…

以上是关于带有图像的自定义 UIPickerView 皮肤的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Xamarin IOS 自定义渲染器中单击 UITextField Rightview 打开 UIPickerView

Swift 中 UIPickerView 的自定义数据源类

ios 7 中带有一个组件的自定义 UIPickerView

带有 UIImageView 的自定义 UITableViewCell 不显示图像

iOS 7 中的自定义 UIPickerView 崩溃

带有图像和文本的 UIPickerView 快速?