web-dev-qa-db-ja.com

UISearchBar iOS 11でプレースホルダーテキストを中央に配置する方法

IOS 11では、searchBarsはデフォルトで左揃えのテキストになります。これは、iOSのネイティブな変更の残りの部分では見栄えがよくなりますが、実際には私のデザインには合わず、以前のように中心になりたいと思います。

UISearchBarにそのようなアライメント属性が見つかりません。何か不足していますか、それとも単に不可能ですか？これを実現するには、UITextFieldから派生した独自のカスタム検索バーを作成する必要がありますか？

ioscocoa-touchuisearchbarios11
14
Sti

私はまったく同じ問題を抱えていました-これを簡単に中央に戻すことなく、デフォルトの配置が変更される理由を理解するのに苦労しています。

以下は私のために働いています（Swift）：

let placeholderWidth = 200 // Replace with whatever value works for your placeholder text
var offset = UIOffset()

override func viewDidLoad() {
    offset = UIOffset(horizontal: (searchBar.frame.width - placeholderWidth) / 2, vertical: 0)
    searchBar.setPositionAdjustment(offset, for: .search)
}

func searchBarShouldBeginEditing(_ searchBar: UISearchBar) -> Bool {
    let noOffset = UIOffset(horizontal: 0, vertical: 0)
    searchBar.setPositionAdjustment(noOffset, for: .search)

    return true
}


func searchBarShouldEndEditing(_ searchBar: UISearchBar) -> Bool {
    searchBar.setPositionAdjustment(offset, for: .search)

    return true
}
8
user6219797

これは少しの回避策です。

まず、検索バーのテキストフィールドを取得し、テキストの配置を中央に配置する必要があります。

let textFieldOfSearchBar = searchController.searchBar.value(forKey: "searchField") as? UITextField textFieldOfSearchBar?.textAlignment = .center

その後、プレースホルダーの配置を変更する必要があります。何らかの理由で、テキストフィールドの配置によって変化しません。検索コントローラーがアクティブな場合にのみ、テキストフィールドの左側のビューにパディングを追加することでそれを行う必要があります。そのため、デリゲートメソッドを使用します。

func presentSearchController(_ searchController: UISearchController) {
    //Is active
    let width: CGFloat = 100.0 //Calcualte a suitable width based on search bar width, screen size, etc..

    let textfieldOfSearchBar = searchController.searchBar.value(forKey: "searchField") as? UITextField

    let paddingView = UIView(x: 0, y: 0, w: width, h: searchController.searchBar.frame.size.height)
    textfieldOfSearchBar?.leftView = paddingView
    textfieldOfSearchBar?.leftViewMode = .unlessEditing
}

func willDismissSearchController(_ searchController: UISearchController) {
    let textfieldOfSearchBar = searchController.searchBar.value(forKey: "searchField") as? UITextField
    textfieldOfSearchBar?.leftView = nil
}

幸運を

3
RJiryes

それを行う公式の方法はありません。 UISearchBarDelegateメソッドと独自のUILabelを使用してみてください。

extension YourViewController: UISearchBarDelegate {
    func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
        placeholderLabel.isHidden = true
    }

    func searchBarTextDidEndEditing(_ searchBar: UISearchBar) {
        placeholderLabel.isHidden = false
    }
}

標準の左揃えアイコンを非表示にすることを忘れないでください（空白の画像を使用）：

    searchBar.setImage(UIImage.imageWithColor(.clear), for: .search, state: .normal)
1
SoftDesigner

let placeHolderOffSet = UIOffset（horizo​​ntal：100、vertical：0）setPositionAdjustment（placeHolderOffSet、for：.search）

バーがアクティブなときに別の位置が必要な場合は、対応するデリゲートメソッドでこれをリセットする必要があります。

0
KVTaniguchi

Swift 4.0+

あなたの質問では実際にプレースホルダーだけを指定しているわけではないので、プレースホルダーとテキストの両方に回答します。私のプロジェクトでは、テキストフィールドを編集していないときだけでなく、両方のテキストを常に中央に配置する必要がありました。彼らが述べたようにデリゲートを使用することで、この投稿のいくつかの回答に合わせて左に戻すことができます。

また、SearchControllerを使用せず、SearchBarアウトレットを使用します。いずれにしても、コントローラーを使用する場合、プロジェクトで簡単に修正できます。 （単にsearchBarの代わりにsearchController.searchBarに置き換えてください）。

そのため、必要なときに次の関数を呼び出す必要があります。

func searchBarCenterInit(){
    if let searchBarTextField = searchBar.value(forKey: "searchField") as? UITextField {

        //Center search text
        searchBarTextField.textAlignment = .center

        //Center placeholder
        let width = searchBar.frame.width / 2 - (searchBarTextField.attributedPlaceholder?.size().width)!
        let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: width, height: searchBar.frame.height))
        searchBarTextField.leftView = paddingView
        searchBarTextField.leftViewMode = .unlessEditing
    }
}
0
rheligon

これは私のために働いた唯一のものです、Swift 4.2：

extension UISearchBar {
func setCenteredPlaceHolder(){
    let textFieldInsideSearchBar = self.value(forKey: "searchField") as? UITextField

    //get the sizes
    let searchBarWidth = self.frame.width
    let placeholderIconWidth = textFieldInsideSearchBar?.leftView?.frame.width
    let placeHolderWidth = textFieldInsideSearchBar?.attributedPlaceholder?.size().width
    let offsetIconToPlaceholder: CGFloat = 8
    let placeHolderWithIcon = placeholderIconWidth! + offsetIconToPlaceholder

    let offset = UIOffset(horizontal: ((searchBarWidth / 2) - (placeHolderWidth! / 2) - placeHolderWithIcon), vertical: 0)
    self.setPositionAdjustment(offset, for: .search)
}
}


使用法：

searchBar.setCenteredPlaceHolder()

結果：
enter image description here

0
Danny182