如何将正常的搜索栏更改为下方的图像，如搜索栏

Question

我刚刚放置了一个带有表格视图的搜索栏控制器。现在它看起来像这样的正常搜索栏：

但我需要将此搜索栏更改为像下面的图像。 ：

像圆润搜索图标应该显示在过去，当我按下搜索，取消按钮会自动应显示。

现在通过使用代码，是否有可能做这些更改。请帮助我。如何获得像上面的图像。

我使用SWIFT 2.0

Answer 1

1. 采取的UIView作为containerView您的文本框，只要你想设置它的背景色。

2. 将角落半径设置为textField并为其添加一些填充。

角半径：

夫特：

let textFieldSearchBar = UITextField() 
    textFieldSearchBar.layer.masksToBounds = true 
    textFieldSearchBar.layer.cornerRadius = 5.2 
    textFieldSearchBar.layer.borderColor = UIColor.lightGrayColor().CGColor 
    textFieldSearchBar.layer.borderWidth = 1.5 

目标c：

textFieldSearchBar.layer.cornerRadius = 5.2f; 
    textFieldSearchBar.layer.borderColor = kTextFieldBorderColor.CGColor; 
    textFieldSearchBar.layer.borderWidth = 1.5f; 

左填充：

夫特：

let leftPaddingView = UIView(frame: CGRect(x: 0, y: 0, width: paddingWidth, height: 20)) 
    textFieldSearchBar.leftView = leftPaddingView 
    textFieldSearchBar.leftViewMode = UITextFieldViewMode.Always; 

目标c：

UIView *leftPaddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, paddingWidth, 20)]; 
    textFieldSearchBar.leftView = leftPaddingView; 
    textFieldSearchBar.leftViewMode = UITextFieldViewModeAlways; 

右填充：

夫特：

let rightPaddingView = UIView(frame: CGRect(x: 0, y: 0, width: paddingWidth, height: 20)) 
    textFieldSearchBar.rightView = rightPaddingView 
    textFieldSearchBar.rightViewMode = UITextFieldViewMode.Always; 

目标c：

UIView *rightPaddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 10, 20)]; 
    textFieldSearchBar.rightView = rightPaddingView; 
    textFieldSearchBar.rightViewMode = UITextFieldViewModeAlways; 

现在需要两张图片，一张放大镜和其他Dismiss/Cross图片按钮。只需一个按钮并将这些图像设置为默认状态和选定状态的背景。 使按钮出口，现在当你想显示放大镜做[buttonSearch setSelected：NO];当Cross按钮做[buttonSearch setSelected：YES];

斯威夫特：

buttonSearch.setBackgroundImage(UIImage(named: "magnifyingGlass"), forState: UIControlState.Normal) 

buttonSearch.setBackgroundImage(UIImage(named: "crossButton"), forState: UIControlState.Selected) 

//Show magnifying glass image 
buttonSearch.selected = false 

//Show cross button image 
buttonSearch.selected = true 

我创造了如下自定义搜索BAS：

希望这会帮助你。