Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center align placeholder in textfield

I know this question been asked many times but as drawinrect deprecated and I need this in ios 8.As I have a textfield and I need the placeholder in center align and rest of the test left align.Please help me out.

like image 222
ashForIos Avatar asked Feb 09 '15 07:02

ashForIos


People also ask

How do you align the text in a text box or placeholder?

In most of the browsers, placeholder texts are usually aligned in left. The selector uses text-align property to set the text alignment in the placeholder. This selector can change browser to browser.

How do you center a placeholder text vertically in textarea?

Use the line-height property to make the placeholder vertically centered.

How do I change placeholder position?

Right-click the post placeholder to open the menu. Select the container: row, column, main row, main column. The Design Editor menu will open automatically. Change the spacing settings to set the placeholder on the page.

How do I center align text in a field in HTML?

If you only have one or a few blocks of text to center, add the style attribute to the element's opening tag and use the "text-align" property.


2 Answers

You can center the placeholder by using an attributedPlaceholder with a paragraph style whose alignment is set to .center:

let centeredParagraphStyle = NSMutableParagraphStyle()
centeredParagraphStyle.alignment = .center
textField.attributedPlaceholder = NSAttributedString(
    string: "Placeholder", 
    attributes: [.paragraphStyle: centeredParagraphStyle]
)
like image 122
Clay Ellis Avatar answered Sep 20 '22 18:09

Clay Ellis


based on Clay Ellis answer

Details

  • Xcode Version 10.2.1 (10E1001), Swift 5

Solution 1

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = .center
textField.attributedText = NSAttributedString(string: placeholder, attributes: [.paragraphStyle: paragraphStyle])

Solution 2

import Foundation

extension String {
    func toAttributed(alignment: NSTextAlignment) -> NSAttributedString {
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.alignment = .center
        return toAttributed(attributes: [.paragraphStyle: paragraphStyle])
    }

    func toAttributed(attributes: [NSAttributedString.Key : Any]? = nil) -> NSAttributedString {
        return NSAttributedString(string: self, attributes: attributes)
    }
}

Usage of the solution 2

// Way 1
textField.attributedPlaceholder = text.attributedString(alignment: .center)
// Way 2
textField.attributedPlaceholder = "title".attributedString(alignment: .center)

Full sample

Do not forget to add the solution code here

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let textField = UITextField()
        textField.borderStyle = .roundedRect
        view.addSubview(textField)
        //textField.attributedPlaceholder = getAttributedString1()
        textField.attributedPlaceholder = getAttributedString2()
        textField.translatesAutoresizingMaskIntoConstraints = false
        textField.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 24).isActive = true
        textField.leftAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leftAnchor, constant: 16).isActive = true
        view.safeAreaLayoutGuide.rightAnchor.constraint(equalTo: textField.rightAnchor, constant: 16).isActive = true
    }

    private func getAttributedString1() -> NSAttributedString {
        return "placeholder".toAttributed(alignment: .center)
    }

    private func getAttributedString2() -> NSAttributedString {
        var attributes = [NSAttributedString.Key: Any]()
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.alignment = .center
        attributes[.paragraphStyle] = paragraphStyle
        attributes[.font] = UIFont.systemFont(ofSize: 12, weight: .bold)
        attributes[.foregroundColor] = UIColor.black.withAlphaComponent(0.5)
        attributes[.underlineStyle] = NSUnderlineStyle.single.rawValue
        attributes[.underlineColor] = UIColor.red
        return "placeholder".toAttributed(attributes: attributes)
    }
}

Results

enter image description here

like image 27
Vasily Bodnarchuk Avatar answered Sep 19 '22 18:09

Vasily Bodnarchuk