How to implement Material chips in UITextfield using Swift 4 - ios

I have needed this type of chips UITextfield with a cancel button
let chipView = MDCChipView()
chipView.titleLabel.text = "Furkan#vijapura.com"
chipView.setTitleColor(UIColor.red, for: .selected)
chipView.sizeToFit()
chipView.backgroundColor(for: .selected)
self.view.addSubview(chipView)
self.userAdd.addSubview(chipView)

You can achieve this by creating a collectionView with multiple cells you can define the layout of each cell and your last cell will contain a text field.
Please let me know if you need a reference code for doing this.

Supposing that you have installed via pods:
Text Field with Floating Placeholder
let textFieldFloating = MDCMultilineTextField()
scrollView.addSubview(textFieldFloating)
textFieldFloating.placeholder = "Full Name"
textFieldFloating.textView.delegate = self
textFieldControllerFloating = MDCTextInputControllerUnderline(textInput: textFieldFloating) // Hold on as a property
Text Field with Character Count and Inline Placeholder
// First the text field component is setup just like a UITextField
let textFieldDefaultCharMax = MDCMultilineTextField()
scrollView.addSubview(textFieldDefaultCharMax)
textFieldDefaultCharMax.placeholder = "Enter up to 50 characters"
textFieldDefaultCharMax.textView.delegate = self
// Second the controller is created to manage the text field
textFieldControllerDefaultCharMax = MDCTextInputControllerUnderline(textInput: textFieldDefaultCharMax) // Hold on as a property
textFieldControllerDefaultCharMax.characterCountMax = 50
textFieldControllerDefaultCharMax.isFloatingEnabled = false
Also If you want to follow a Git Project Use: https://github.com/Skyscanner/SkyFloatingLabelTextField

Related

Wrapping text on TitleLabel and DetailLabel - Material Card

I am using CosmicMind - Material Framework to create a Card. titleLabel and DetailLabel do not wrap to a new line.
My question is: What do I need to do to accomplish such task and is it supposed to be automatically adjusted by the framework?
This is what I have so far:
let card = Card()
var heartIcon = IconButton()
heartIcon = IconButton(image: Icon.favoriteBorder, tintColor: Color.red.base)
//Title Bar
let toolbar = Toolbar(rightViews: [heartIcon])
toolbar.title = cardData.cardTitleText
toolbar.titleLabel.textAlignment = .left
toolbar.titleLabel.numberOfLines = 0
toolbar.detail = "Company: " + cardData.cardTitleSubtitle
toolbar.detailLabel.font = RobotoFont.regular(with: 14)
toolbar.detailLabel.textColor = Color.grey.base
toolbar.detailLabel.textAlignment = .left
toolbar.detailLabel.numberOfLines = 0
And this is my output:
Update:
I managed to achieve what I wanted by increasing the size of the toolbar frame.
toolbar.frame = CGRect(x:0,y:0,width: view.frame.width,height: 100)
My goal was to at least show 2 lines of text.
Thanks!
I have no experience with the CosmicMind framework but usually, the label.numberOfLines property defines the maximum number of lines that the label text can have. You can set it to 2 instead of 0 and it should wrap.

creating spaces in placeholder fields

my problem is I want to put 2 placeholders for one textField. one of the place holders should be on the left and the other should be on the right.
my code:
func returnPlaceHolder(first: String, second: String, textField: UITextField){
let width: Int = Int(textField.bounds.width * 0.2)
let spaceValue = width - (first.count + second.count)
var temp = "\(first) "
let tempCount = spaceValue - (first.count + second.count)
var value = String()
for _ in 0..<tempCount {
temp.append(" ")
}
value = "\(temp) \(second)"
textField.placeholder = value
textField.setLeftPaddingPoints(10)
textField.setRightPaddingPoints(10)
}
I'm currently using this function to create spaces.. but my problem is the spaces won't be the same for more than one textField, and I want them to be aligned..
just like this picture: https://imgur.com/pZZMoNv
and this is the result I'm getting for my current code: https://imgur.com/a/5AN8EXl
don't mind the textFields format & text I can fix them later.. I just want to be able to align the textFields placeholders.
It would be really hard (if possible) to achieve what you are trying to do by injecting spaces into the text because each character in the font has a different width unless you use a monospaced font.
https://en.wikipedia.org/wiki/Monospaced_font
Instead, I would recommend a different approach. Override the text field, provide two UILabels and adjust their position using Autolayout.

How to dynamically change the display text of a button in xcode using tags

Im trying to create an email us button in my app where the text displayed changes depending on what version of the app youre using. Currently the text is "Email: " and i want to add an email address to that text.
The button is in a table view cell, and i want to change this text using tags, how would i go about this or is there another option?
P.S The reason i want to do it with tags is when i try to hook the button up to an outlook the build will fail
let sendEmailButton = cell.viewWithTag(666)!
var rect = sendEmailButton.frame
rect.origin.x = 19
sendEmailButton.frame = rect
rect.origin.y = 75
sendEmailButton.frame = rect
change text here to be add email address
In this code i'm moving the button into its position, and then i want to change its text. Again, there no outlet as that caused fails due to it being in a table view. I realise this screen should not be in a table view, but its the way my company does it and i have to work with it
cast your button as UIButton like this:
guard let sendEmailButton = cell.viewWithTag(666) as? UIButton else { return }
and than just set title
sendEmailButton.setTitle("here goes your text", for: .normal)
For your code it will be work.
if let button = cell.viewWithTag(666) as? UIButton {
button.setTitle("Set Your Text here", for: .normal)
}

UITextField wrong content width when isSecureTextEntry property set to true

I have two UITextFields configured like that:
let yellowPasswordTextField = UITextField()
view.addSubview(yellowPasswordTextField)
yellowPasswordTextField.placeholder = "Type"
yellowPasswordTextField.isSecureTextEntry = true
yellowPasswordTextField.backgroundColor = UIColor.yellow
yellowPasswordTextField.topToSuperview(offset: 30) // TinyConstraints api
yellowPasswordTextField.leftToSuperview()
yellowPasswordTextField.text = "mmmmmm"
let greenTextField = UITextField()
view.addSubview(greenTextField)
greenTextField.placeholder = "Type"
greenTextField.isSecureTextEntry = false
greenTextField.backgroundColor = UIColor.green
greenTextField.topToSuperview(offset: 60)
greenTextField.leftToSuperview()
greenTextField.text = "mmmmmm"
Please notice that both are configured exactly the same (including text), the only difference is that the first one has isSecureTextEntry property enabled while the second one has this property disabled.
And here is the result layout:
Why first UITextField has width that is exactly the same like for text field with isSecureTextEntry disabled (the one below)? Is there any way to force first text field to adjust its width to actual content - bullets replacing original text?
It's problematic because I would like to add rightView for showing/hiding password just after textfield content.

Having textfield background transparent, but placeholder text opaque

Is it possible to have a textfield's placeholder text opaque while its background is set to be transparent, eg. if I choose some background color, and set alpha to some value, like this:
the placeholder text becomes transparent as well. But I want it opaque. So, is this achievable, preferably using storyboard ? Or at least through the code.
If it is unclear what I am trying to achieve, just let me know , and I'll post an image with an example.
You can set the color's transparency instead of the UITextField's alpha. Open the color drop down and select "Other". A color picker will open up. At the bottom of the color picker you can change the opacity.
In Swift you can obtain the placeholder element with:
let placeHolder = textField.value(forKey: "placeholderLabel") as! UILabel
placeHolder.textColor = .blue
placeHolder.isOpaque = true
and make all customizations you prefeer..
You can set the UITextView.background = .clear
I'm providing a little more code so it'll be easier to setup it programmatically, this is a ready-to-use sample.
private lazy var textField: UITextView = {
let textField = UITextView()
textField.translatesAutoresizingMaskIntoConstraints = false
textField.font = UIFont.systemFont(ofSize: 14)
textField.isEditable = false
textField.textAlignment = .center
textField.isScrollEnabled = false
textField.backgroundColor = .clear // this is the line that answer you question
textField.text = """
People with these symptoms may have COVID-19:
Fever of chills, cough, shortness of breath or
difficulty breathing, fatigue, muscle or body aches,
headache, new loss of taste and smell, sore throat,
congestion or runny nose, nausea or vomiting,
diarrhea
"""
return textField
}()
Just remember to set the constraints and add the subview into your superview .addSubview(TextField)

Resources