[英]Right align magnifying glass icon in UISearchBar
在Cocoa-Touch中,我们找到了一个控件UISearchBar
。 我需要自定义它,以便在文本字段中显示的搜索图标(我们单击执行相应的操作)是右对齐的 。 通常我们发现它保持对齐 。 有可能这样做吗? 我做过R&D但找不到......
我该怎么做? 有什么好的教程我们可以找到吗?
不幸的是, UISearchBar
不是为了直接支持它而设计的。 在完成我们想要的工作时,我们可能不得不使用在视觉上或功能上有所妥协的解决方法,或者编写大量自定义代码。
我已经概述了几种接近我们想要和可能有用的方法。
UISearchBar
的文本是UITextField
,它是该UISearchBar
的子视图,可通过通常的方式即view.subviews
。
放大镜搜索图标是UITextField
的leftView
属性中的UIImageView
。 我们可以使用以下代码将其切换到右侧:
// The text within a UISearchView is a UITextField that is a subview of that UISearchView.
UITextField *searchField;
for (UIView *subview in self.searchBar.subviews)
{
if ([subview isKindOfClass:[UITextField class]]) {
searchField = (UITextField *)subview;
break;
}
}
// The icon is accessible through the 'leftView' property of the UITextField.
// We set it to the 'rightView' instead.
if (searchField)
{
UIView *searchIcon = searchField.leftView;
if ([searchIcon isKindOfClass:[UIImageView class]]) {
NSLog(@"aye");
}
searchField.rightView = searchIcon;
searchField.leftViewMode = UITextFieldViewModeNever;
searchField.rightViewMode = UITextFieldViewModeAlways;
}
这给了我们以下结果:
正如您所看到的那样,图标超出了圆角矩形的边缘,并且清除图标已消失。 此外, rightView
属性适用于其他内容,例如搜索结果按钮和书签按钮。 将搜索图标置于此处可能会以某种方式与此功能冲突,即使您能够使用偏移量填充来正确定位它。
至少你可以使用这种方法将图标提取为UIImageView
并将其显式定位在您认为合适的位置,就像任何其他视图一样,并编写自定义代码来处理点击事件等。
在iOS v5.0及更高版本中,您可以使用此处列出的方法自定义搜索栏的外观。 以下代码使用偏移量来定位UISearchBar
的图标和文本:
[self.searchBar setPositionAdjustment:UIOffsetMake(255, 0) forSearchBarIcon:UISearchBarIconSearch];
[self.searchBar setSearchTextPositionAdjustment:UIOffsetMake(-270, 0)];
在320宽度的标准UISearchBar
,它看起来如下所示:
这将保持与图标相关联的所有事件功能按预期工作,但不幸的是UITextField
很困惑,尽管它的宽度,它只显示其文本的一小部分。 如果你能找到一种方法让文本显示超出它认为是UITextField
的结尾,那么这可能是你最好的选择。
我的要求是搜索图标应该在右侧,并且每当X图标出现时它应该隐藏。
我提出了类似的解决方案,但有点不同,也使用Swift 2和AutoLayout。 基本思想是隐藏左视图,使用放大镜图像创建新视图,并使用autolayout将其固定到右侧。 然后使用UISearchBarDelegate方法在搜索栏文本不为空时隐藏搜索图标。
class CustomSearchView: UIView {
//the magnifying glass we will put on the right
lazy var magnifyingGlass = UIImageView()
@IBOutlet weak var searchBar: UISearchBar!
func commonInit() {
searchBar.delegate = self
searchBar.becomeFirstResponder()
//find the search bar object inside the subview stack
if let searchField = self.searchBar.subviews.firstObject?.subviews.filter(
{($0 as? UITextField) != nil }).firstObject as? UITextField {
//hides the left magnifying glass icon
searchField.leftViewMode = .Never
//add a magnifying glass image to the right image view. this can be anything, but we are just using the system default
//from the old left view
magnifyingGlass.image = (searchField.leftView! as? UIImageView)?.image
//add the new view to the stack
searchField.addSubview(magnifyingGlass)
//use autolayout constraints to pin the view to the right
let views = ["view": magnifyingGlass]
magnifyingGlass.translatesAutoresizingMaskIntoConstraints = false
searchField.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
"H:[view(12)]-|", options: [], metrics: nil, views: views))
searchField.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
"V:[view]-|", options: [], metrics: nil, views: views))
}
}
//hides whenever text is not empty
func searchBar(searchBar: UISearchBar, textDidChange searchText: String) {
magnifyingGlass.hidden = searchText != ""
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.