如何在UISearchBar文本框周围添加1像素灰色边框

14

我正在尝试在我的应用程序中为我的UISearchBar添加一个1像素的灰色描边。Facebook Messenger 应用程序可以很好地实现这一点。(见下图)

我知道 UISearchBar 有一个背景图片属性,但我认为那不是正确的使用方法,因为它会将图像拉伸并重复显示在整个搜索栏的视图上。

我非常感谢能够指导正确的方向。

输入图像描述

6个回答

12

尝试运行这段代码:

//First add the following import and macro:
#import <QuartzCore/QuartzCore.h>
#define SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(v) ([[[UIDevice currentDevice] systemVersion] compare:v options:NSNumericSearch] != NSOrderedAscending)

//Then change yourSearchBar border: 
if (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"7.0"))
{
    for (id object in [[[yourSearchBar subviews] objectAtIndex:0] subviews])
    {
        if ([object isKindOfClass:[UITextField class]])
        {
            UITextField *textFieldObject = (UITextField *)object;
            textFieldObject.layer.borderColor = [[UIColor grayColor] CGColor];
            textFieldObject.layer.borderWidth = 1.0;
            break;
        }
    }
}
else
{
    for (id object in [yourSearchBar subviews])
    {
        if ([object isKindOfClass:[UITextField class]])
        {
            UITextField *textFieldObject = (UITextField *)object;
            textFieldObject.layer.borderColor = [[UIColor grayColor] CGColor];
            textFieldObject.layer.borderWidth = 1.0;
            break;
        }
    }
}

你能提供Swift的解决方案吗?谢谢您的帮助。 - Engineeroholic

11

Swift 3 版本

override func viewDidLoad() {
    super.viewDidLoad()

    for s in searchBar.subviews[0].subviews {
        if s is UITextField {
            s.layer.borderWidth = 1.0
            s.layer.borderColor = UIColor.gray.cgColor
        }
    }
}

要使它变圆,您可以使用textField.layer.cornerRadius属性。


4

Swift 5

轻松实现的方法

    @IBOutlet private weak var searchBar:UISearchBar!{
        didSet{
            if let searchTextfield = self.searchBar.value(forKey: "searchField") as? UITextField  {
                searchTextfield.layer.borderColor = UIColor.lightGray.cgColor
                searchTextfield.layer.borderWidth = 1
                searchTextfield.layer.cornerRadius = 10
            }
        }
    }

enter image description here


3

这样做可以正常工作:

UITextField *txtSearchField = [yourSearchBar valueForKey:@"_searchField"];
[txtSearchField setBorderStyle:UITextBorderStyleRoundedRect];
txtSearchField.layer.cornerRadius = 4;
txtSearchField.layer.borderWidth = 1.0f;
txtSearchField.layer.borderColor = [[UIColor colorWhatYouWant] CGColor]; 

不要忘记导入#import <QuartzCore/QuartzCore.h>


8
所使用的密钥值为私有密钥。拒绝理由。 - klcjr89

2

试试这个

self.poundsTxt.layer.borderColor = [[UIColor whiteColor]CGColor];
self.poundsTxt.layer.borderWidth=2.0;

将Quartz Core框架参考文件导入您的项目,并将 <QuartzCore/QuartzCore.h> 添加到您的ViewController.m中,以使borderColor和borderWidth正常工作。

1
不起作用。这会将边框添加到整个视图边界 :( 除非我做错了。self.searchDisplayController.searchBar.layer.borderColor = [[UIColor colorWithRed:201.0/255.0 green:201.0/255.0 blue:201.0/255.0 alpha:1.0]CGColor]; - klcjr89
也许这个链接可以帮助你 link - R00We

2

我赞同Yaroslav的答案,但在iOS 13上已经失效。以下是今天有效的方法:

    func changeSearchBarAppearance() {
        var searchTextField : UITextField?
        if #available(iOS 13, *) {
            // brand new searchTextField is available as of iOS 13
            searchTextField = searchBar.searchTextField
        } else {
            // Yaroslav's answer still works in iOS versions less than 13
            // here's a slightly different implementation:
            if let matchingTextField = searchBar.subviews[0].subviews.compactMap ({ $0 as? UITextField }).first {
                searchTextField = matchingTextField
            }
        }

        guard let validTextField = searchTextField else {
            return
        }

        validTextField.layer.cornerRadius = 16
        validTextField.layer.borderWidth = 1.0
        validTextField.layer.borderColor = UIColor.grey.cgColor
        validTextField.backgroundColor = .white
        validTextField.placeholder = "insert-some-placeholder-text"
    }

很棒的解决方案。FYI,对我来说.grey就是.gray。但是我使用.lightGray,因为在白色背景上看起来更清晰一些。 - TM Lynch

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接