7

在 Cocoa-Touch 中，我们找到了一个 control UISearchBar。我需要对其进行自定义，以便文本字段中的搜索图标（我们单击它执行相应的操作）右对齐。通常我们会发现它是左对齐的。有可能这样做吗？做过研发，但没找到...

我该怎么做？有什么好的教程可以找到吗？

4

2 回答 2

19

不幸的UISearchBar是，它并不是为了直接支持这一点而设计的。在完成我们想要的事情时，我们可能不得不使用在视觉或功能方面妥协的变通方法，或者编写大量自定义代码。

我已经概述了一些接近我们想要并且可能有用的方法。

访问子视图方法

a 中的文本UISearchBar是UITextFielda 的子视图，UISearchBar可以通过通常的方式访问，即view.subviews.

放大镜搜索图标UIImageView是leftView. UITextField我们可以使用以下代码将其切换到右侧：

// 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;
}

这给了我们以下结果：

搜索栏 1

如您所见，图标超出了圆角矩形的边缘，并且清除图标已经消失。此外，该rightView属性还用于其他内容，例如搜索结果按钮和书签按钮。即使您能够使用偏移的填充来适当地定位它，将搜索图标放在此处也可能会以某种方式与此功能发生冲突。

至少，您可以使用这种方法将图标提取为 aUIImageView并将其显式放置在您认为合适的位置，就像任何其他视图一样，并编写自定义代码来处理点击事件等。

自定义外观方法

在iOS v5.0及更高版本中，您可以使用此处列出的方法自定义搜索栏的外观。以下代码使用偏移量在 中定位图标和文本UISearchBar：

[self.searchBar setPositionAdjustment:UIOffsetMake(255, 0) forSearchBarIcon:UISearchBarIconSearch];
[self.searchBar setSearchTextPositionAdjustment:UIOffsetMake(-270, 0)];

在 320 宽度的标准UISearchBar上，它看起来如下所示：

搜索栏 2

这将使与图标相关的所有事件功能按预期工作，但不幸的UITextField是，尽管它的宽度很混乱，但它只显示其文本的一小部分。如果你能找到一种方法让文本显示超出它认为的结尾UITextField，这可能是你最好的选择。

于 2013-04-06T06:55:38.550 回答
0

我的要求是搜索图标应该在右侧，并且只要 X 图标出现，它就应该隐藏起来。

我想出了与上面类似的解决方案，但有点不同，并且还使用了 Swift 2 和 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 != ""
  } 
 }
于 2016-03-30T00:17:52.277 回答