右对齐的UISearchBar放大镜图标(Right align magnifying glass

2019-08-20 00:11发布

在可可触摸,我们发现一个控制UISearchBar 。 我需要自定义它,以便搜索图标(我们点击执行相应的操作)出现在文本框右对齐 。 通常情况下,我们发现它左对齐 。 是否可以这样做呢? 我已经做了R&d,但无法找到它...

我该怎么做? 是否有良好的教程,在这里我们可以找到它?

Answer 1:

不幸的是, UISearchBar不是设计用来直接支持这一点。 在完成的事情,我们希望它很可能是我们将不得不使用变通办法妥协的视觉或功能明智或写入大量的定制代码。

我已经概述了几个是接近我们想要的东西,可能是使用的方法。

访问子视图方法

一个中文字UISearchBar是一个UITextField那就是一个子视图UISearchBar并且可以访问通过通常意味着即view.subviews

放大镜搜索图标是一个UIImageViewleftView的财产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;
}

这为我们提供了以下结果:

正如你可以看到图标超支的圆角矩形的边缘和清晰的图标已经消失了。 此外, rightView财产被用于其他内容,如搜索结果按钮和书签按钮。 这里把搜索图标可能会以某种方式与这个功能发生冲突,即使你能够使用偏移填充到适当的定位。

在最起码你可以用这种方法提取图标为UIImageView并将其定位明确,你认为合适,你会任何其他视图,并编写自定义代码来处理点击事件等。

自定义外观途径

iOS系统V5.0及更高版本,您可以自定义的使用列出的方法搜索栏出现在这里 。 下面的代码使用偏移来定位中的图标和文本UISearchBar

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

在一个标准UISearchBar的宽度320,它看起来像下面这样:

这将保持与图标按预期工作,但不幸的是,相关联的所有事件功能UITextField混乱,尽管它的宽度,则仅显示其文本的一个很小的部分。 如果你能找到一种方法,让文字显示超出了它认为是该结束UITextField ,这可能会是你最好的选择。



Answer 2:

我的要求是,搜索图标应该是正确的,而且它应该隐藏每当X图标出现了。

我想出了一个类似的解决方案如上,但有点不同的,并且还使用斯威夫特2和自动版式。 其基本思想是隐藏左视图,创建具有放大镜图像的新观点,并使用自动布局到其固定在正确的。 然后使用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 != ""
  } 
 }


文章来源: Right align magnifying glass icon in UISearchBar