如何将普通搜索栏更改为搜索栏下方的图像

Question

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

但我需要将此搜索栏更改为下图中的某些内容。 ：

像圆形和搜索图标应该在最后显示，当我按下搜索时，应自动显示取消按钮。

现在通过使用代码，是否可以进行这些更改。请帮帮我。如何得到上面的图像。

我正在使用swift 2.0

Answer 1

1. 将UIView作为textField的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;

1. 现在您将需要两张图片，一张用于放大镜，另一张用于“放弃/交叉”按钮。按一个按钮并将这些图像设置为状态默认和选定的背景。 按下按钮的出口，现在当你想要显示放大镜时[buttonSearch setSelected：NO];当十字按钮执行[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，如下所示：



希望这会对你有所帮助。