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

搜索栏如下所示：

但与图片中不完全相同。有没有一种方法可以用图像替换文本框的左侧和右侧，这样我就可以使用自定义搜索栏中的圆角？

- Thomas

Answer 1

你应该更改 UISearchBar 中 searchTextField 的半径。

你可以像这样操作：

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

*searchBar是来自storyBoard的UISearchBar的Outlet

- Hamid Reza Ansari

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;
                    }
                }

- Usman

---

在较新的iOS版本中，您可以使用textField = searchBar.searchTextField来获取它，而不是使用未记录的接口（键值）来获取它。 - clearlight

Answer 3

这里的问题在于您正在为UISearchBar设置角半径，而不是其中的UITextField。您可以通过某种方法获取UITextField，但这并不是推荐的做法。

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

- mbottone

Answer 4

这段代码在Swift 3 iOS 10上可行：

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

- devjme

---

工作内容是什么？1）“searchBar”是文本框周围的矩形，而不是文本框本身；2）您设置了cornerRadius = 20 - 您的图片上哪些角落会被圆角化？ - Gargo

这不是他所寻找的预期圆角半径。 - undefined

Answer 5

搜索栏视图的简便方法

用于子视图和弹出窗口 [Swift 5]

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

- NSMohammad

Answer 6

如果有人在某些設備上無法讓這個工作，請確保您沒有將字體設置到搜索欄。自定義字體會因為某種原因影響半徑。對我來說，iPhone 13 Pro Max 沒有問題，而 iPhone 13 Pro 則出現了奇怪的矩形半徑。

- Zeynal

---

哇 - 这对我也起作用了。即使使用 UIFont.systemFont() 也无法产生圆角的效果。 - tospig