UISearchBar 自定义角点

Question

我正在尝试创建一个像这样的搜索栏：

但是我注意到我可能必须用自己的图像替换搜索栏，因为当我设置时搜索栏角出现错误：

self.searchController.searchBar.layer.cornerRadius = 50 // I've tried other numbers besides this too with no luck
self.searchController.searchBar.clipsToBounds = true

如果我这样设置：

self.searchController.searchBar.layer.cornerRadius = self.searchController.searchBar.bounds.height/2

搜索栏出来是这样的：

这仍然与图像中的不完全一样。

有没有办法用图像替换文本字段的左侧和右侧，这样我就可以使用自定义搜索栏中的圆角？

Answer 1

您应该更改 UISearchBar 内 searchTextField 的半径。

你可以这样做:

searchBar.searchTextField.layer.cornerRadius = 20
searchBar.searchTextField.layer.masksToBounds = true

* searchBar 是来自storyBoard 的UISearchBar 的一个出口

Answer 2

我将此代码与 UISearchBar 一起使用，但您可以将此代码与 UISearchController 一起使用。

    let searchBar = UISearchBar()
                searchBar.sizeToFit()
                searchBar.placeholder = "Search"
                navigationItem.titleView = searchBar
                
                if let textfield = searchBar.value(forKey: "searchField") as? UITextField {
                    textfield.textColor = UIColor.blue
                    if let backgroundview = textfield.subviews.first {
                        // Background color
                        backgroundview.backgroundColor = UIColor.white
                        // Rounded corner
                        backgroundview.layer.cornerRadius = 14;
                        backgroundview.clipsToBounds = true;
                    }
                }

Answer 3

这里的问题是您在 UISearchBar 上设置圆角半径，而不是在其中设置 UITextField。您可以进行某种破解来获取 UITextField，但并不真正推荐这样做。

正如您在问题中提到的，您需要使用自定义图像和此处显示的方法：https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISearchBar_Class/#//apple_ref/文档/uid/TP40007529-CH3-SW40

Answer 4

这在 swift 3 iOS 10 中对我有用：

    searchController.searchBar.layer.cornerRadius = 20
    searchController.searchBar.clipsToBounds = true

Answer 5

搜索栏视图的这种方式

对于子视图和 POPUP [Swift 5]

override func layoutSublayers(of layer: CALayer) {
    searchBarPopup.clipsToBounds = true
    searchBarPopup.layer.cornerRadius = 10
    searchBarPopup.layer.maskedCorners = [ .layerMaxXMinYCorner, .layerMinXMinYCorner]
}

Answer 6

如果有人无法在某些设备上使用此功能， 确保您没有为搜索栏设置字体。由于某种原因，自定义字体会影响半径。 对我来说，iPhone 13 Pro Max 没有问题，而 iPhone 13 Pro 却有奇怪的矩形半径。