stephsharp / materialtextfield Goto Github PK
View Code? Open in Web Editor NEWMaterial design UITextField with animated placeholder label and error message
License: MIT License
Material design UITextField with animated placeholder label and error message
License: MIT License
Hi,
Awesome component!
Question though; I want to set a custom rightView on one of my TextFields, but when I do so the rightView also scrolls down when the custom errorMessage, displayed below the line, is animated.
Note: I use the component in a swift project using a bridging header.
My code to set the custom rightView:
let eyeButton = UIButton(type: .custom)
eyeButton.setImage(UIImage(named: "icon_eye"), for: .normal)
eyeButton.imageEdgeInsets = UIEdgeInsetsMake(0, -16, 0, 0)
eyeButton.frame = CGRect(x: CGFloat(passwordTextField.frame.size.width - 16), y:(passwordTextField.frame.size.height - 16) / 2, width: CGFloat(16), height: CGFloat(16))
eyeButton.addTarget(self, action: #selector(self.togglePassword), for: .touchUpInside)
passwordTextField.rightViewMode = UITextFieldViewMode.always
passwordTextField.rightView = eyeButton
The setup of the MFTextField itself it pretty straightforward, using properties like underlineColor, placeholderFont etc.
Can someone verify this behaviour?
Cheers, Raoul.
First off, thanks for writing and publishing this!
When I add error text to a field, the underline turns red, but I cannot see the error text. If I use Reveal to look at the views, the text is there, but hidden.
The field is attached to all 4 sides of the content view of the cell, and the cell should grow based on autolayout (height methods return UITableViewAutomaticDimension).
Any thoughts on how to get this to work? I also tried changing the error padding, but no help.
Thanks
I am not able to show an error. Could you please provide me an example.
Setting a string value for text simply clears the field. Does not do anything.
Excuse men you can convert source to version swift because to want use and extension function inside code
Need to set placeholder at the center of UITextfield . someone please help with this .
"failed to render and update auto layout status".
This error message appears when I assign MFTextField class for the UITextField in IB, However, it works but can't be rendered by interface builder.
Hi,
I'm using your library on the app I'm currently developing. I really liked it, but I've found that the error message is not getting displayed after setting the NSError to the MFTextField object.
As you can see in the GIF, the line and placeholder color is getting updated, but the message label is not showing up. I'm handling the text changes with delegation (UITextFieldDelegate).
By the way, my app is being written in Swift 4.2, but I'm making sure to pass NSObjects to the MFTextField.
Best regards, and I'll hope for your answer.
Strange behaviour with textfield on iOS 11 beta . Text are cropped and placed three dots at the end of string. It is like that your autolayout is broken on newer version of iOS
We've been using MaterialTextField in our app for about a year.
While testing our app for iOS 13.0 with the latest Xcode 11 beta (beta 7), we ran into an issue with MaterialTextField. The MaterialTextFields in our app have placeholderAnimatesOnFocus
enabled. The issue we ran into is that when focus leaves an empty MaterialTextField with a placeholder, the app crashes with an EXC_BAD_ACCESS (code=2, address=...) error. This appears to be a stack overflow. The bottom of the stack at exception time looks like this:
#10352 0x0000000105de5bad in -[MFTextField layoutSubviews] at <snip>/Pods/MaterialTextField/MaterialTextField/MFTextField.m:325
#10353 0x000000011287366e in -[UIView(CALayerDelegate) layoutSublayersOfLayer:] ()
#10354 0x0000000105f4d2bd in -[CALayer layoutSublayers] ()
#10355 0x0000000105f51cc3 in CA::Layer::layout_if_needed(CA::Transaction*) ()
#10356 0x000000011285e981 in -[UIView(Hierarchy) layoutBelowIfNeeded] ()
#10357 0x0000000105de6d13 in -[MFTextField hidePlaceholderLabelAnimated:] at <snip>/Pods/MaterialTextField/MaterialTextField/MFTextField.m:467
#10358 0x0000000105de5ca3 in -[MFTextField layoutPlaceholderLabelAnimated:] at <snip>/Pods/MaterialTextField/MaterialTextField/MFTextField.m:342
#10359 0x0000000105de5bad in -[MFTextField layoutSubviews] at <snip>/Pods/MaterialTextField/MaterialTextField/MFTextField.m:325
#10360 0x000000011287366e in -[UIView(CALayerDelegate) layoutSublayersOfLayer:] ()
#10361 0x0000000105f4d2bd in -[CALayer layoutSublayers] ()
#10362 0x0000000105f51cc3 in CA::Layer::layout_if_needed(CA::Transaction*) ()
#10363 0x000000011285e981 in -[UIView(Hierarchy) layoutBelowIfNeeded] ()
#10364 0x0000000105de6d13 in -[MFTextField hidePlaceholderLabelAnimated:] at <snip>/Pods/MaterialTextField/MaterialTextField/MFTextField.m:467
#10365 0x0000000105de5ca3 in -[MFTextField layoutPlaceholderLabelAnimated:] at <snip>/Pods/MaterialTextField/MaterialTextField/MFTextField.m:342
#10366 0x0000000105de5bad in -[MFTextField layoutSubviews] at <snip>/Pods/MaterialTextField/MaterialTextField/MFTextField.m:325
#10367 0x000000011287366e in -[UIView(CALayerDelegate) layoutSublayersOfLayer:] ()
#10368 0x0000000105f4d2bd in -[CALayer layoutSublayers] ()
#10369 0x0000000105f51cc3 in CA::Layer::layout_if_needed(CA::Transaction*) ()
#10370 0x0000000105f5e3a8 in CA::Layer::layout_and_display_if_needed(CA::Transaction*) ()
#10371 0x0000000105ea6a20 in CA::Context::commit_transaction(CA::Transaction*, double) ()
#10372 0x0000000105edc02b in CA::Transaction::commit() ()
#10373 0x00000001123c8b61 in _afterCACommitHandler ()
#10374 0x0000000107756eb7 in __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__ ()
#10375 0x000000010775194e in __CFRunLoopDoObservers ()
#10376 0x0000000107751fca in __CFRunLoopRun ()
#10377 0x00000001077516b6 in CFRunLoopRunSpecific ()
#10378 0x000000010b3b3bb0 in GSEventRunModal ()
#10379 0x000000011239f90f in UIApplicationMain ()
The top part, with calls to [MFTextField hidePlaceholderLabelAnimated:]
, [MFTextField layoutPlaceholderLabelAnimated:]
and [MFTextField layoutSubviews]
, keep repeating to the top of the stack.
The issue does not occur if we disable animation, nor when we disable placeholderAnimatesOnFocus
. It also does not occur with Xcode 10/iOS 12.
I've downloaded the source to try the demo app in the repository with Xcode 11 beta to see if it has the same issue, but it doesn't crash. I've been trying to change some settings in the demo app to match our setup more closely, but I haven't been able to reproduce it yet.
Browsing the repository history, I did notice there has been a similar issue before (commit 17e4908), but the changes to fix this were (partially?) reverted later.
Hopefully, this is enough information to investigate (and possibly fix) this issue. In the mean time, I will see if I can make a reproduction using the demo app.
Wanted to add left and top padding to Floating Label. I was able to insert padding to actual UITextField text.
For password field (Secured Text Entry = on), everytime when user input new content, existing content on that textfield will be erased.
Using the demo application as provided in the repo:
Steps to reproduce:
You will see the content typed in step 2 is all gone.
Is there any way we can set animated placeholder rightToLeft and LeftToRight?
i can't use method textFieldDidBeginEditing, and it's not called
Currently prepareForInterfaceBuilder
hides the error label because I was unable to get it to show up correctly in the storyboard.
Steps to fix:
Currently the error
property is of type NSError
, but the localized description is the only thing that's used in MFTextField
so it could be changed to a string instead.
Making the error an NSString
instead of an NSError
would allow the property to be made inspectable. The error string could then be set in the storyboard.
prepareForInterfaceBuilder
could be updated to not remove the error label anymore and call sharedInit
instead.
Considerations:
This would be a breaking change to the API.
Steps to reproduce:
Expected behaviour:
Actual behaviour:
I've run into a bug (or memory management issue?) where an MFTextField is referencing a previously initialised MFTextField's font and text alignment.
The app presents a VC modally, once a verification code is confirmed this is dismissed and a VC is then pushed. This latter VC also contains an MFTextField which should have the font Avenir Next Regular sized 16pt left aligned yet matches the previous field's styling of Avenir Next Regular sized 24pt centre aligned.
Here's the modally presented VC:
Here's the next pushed VC after the modal VC is dismissed:
And here's how it should look (and does look if the VC is pushed without the modal step)
What I've tried:
Any ideas?
When I set the height to 30, the content of the component will exceed the limit.
I found that in the "prepareForInterfaceBuilder" method, the ErrorLabel was removed.=.=
When user has empty textfield and he return the keyboard means resign the textfield then it will crash on below line.
CGSize intrinsicSize = [super intrinsicContentSize];
If user has input something then no crash. It's only occur when empty textfield and resign the responder.
Hi,
textRectForBounds
is sometimes wrong when using left/rightView:
viewMode
is .never
or .whileEditing
everything is working as expectedviewMode
is .always
or .whileEditing
, frame is smaller than expected.It seems coming from the fact that in 1st case UIKit UITextField.textRectForBounds
is returning the full frame while in second it returns frame minus left/right frames.
I've tried following code to set left view of uitextfield but got placeholder overlap over icon when editing uitextfield.
txtUsername.leftViewMode = UITextField.ViewMode.always let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20)) let image = UIImage(named: "icon_camera") imageView.image = image imageView.contentMode = .scaleAspectFit txtUsername.leftView = imageView
Hello.
Thanks for your hard work but now it's time for Swift.
Please convert this amazing textfield to Swift.
Thank you very much!
@sharplet Can you take a look at this please?
If you try to get attributedString that exist but empty you will catch app crash
- (NSAttributedString *)attributedString:(NSAttributedString *)attributedString withColor:(UIColor *)color
{
NSMutableDictionary *attributes = [[attributedString attributesAtIndex:0 effectiveRange:NULL] mutableCopy];
attributes[NSForegroundColorAttributeName] = color;
return [[NSAttributedString alloc] initWithString:attributedString.string attributes:attributes];
}
The problem is in this line of code
NSMutableDictionary *attributes = [[attributedString attributesAtIndex:0 effectiveRange:NULL] mutableCopy];
Can someone explain what i did wrong, some of my TextField working with MFTextField but another just display empty placeholder and i am realy sure i already make it to custome class MFTextField and set placeholder
and app crash after i tap on another MFTextField without fill it
*i am working on cell and some MFTextField are work
*sry for bad english
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'NSConcreteAttributedString initWithString:: nil value'
*** First throw call stack:
(
0 CoreFoundation 0x00000001117a012b __exceptionPreprocess + 171
1 libobjc.A.dylib 0x00000001104c0f41 objc_exception_throw + 48
2 CoreFoundation 0x0000000111815245 +[NSException raise:format:] + 197
3 Foundation 0x000000010fedb358 -[NSConcreteAttributedString initWithString:] + 135
4 Foundation 0x000000010fee4060 -[NSConcreteAttributedString initWithString:attributes:] + 27
5 MaterialTextField 0x000000010c748c16 -[MFTextField attributedString:withColor:] + 358
6 MaterialTextField 0x000000010c746748 -[MFTextField setAttributedPlaceholder:] + 168
7 MaterialTextField 0x000000010c7482e3 -[MFTextField hidePlaceholderLabelAnimated:] + 211
8 MaterialTextField 0x000000010c7472ca -[MFTextField layoutPlaceholderLabelAnimated:] + 202
9 MaterialTextField 0x000000010c7471a4 -[MFTextField layoutSubviews] + 148
10 UIKit 0x000000010dd21a6d -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 1439
11 QuartzCore 0x000000010c9db61c -[CALayer layoutSublayers] + 159
12 QuartzCore 0x000000010c9df7ad _ZN2CA5Layer16layout_if_neededEPNS_11TransactionE + 401
13 QuartzCore 0x000000010c96686c _ZN2CA7Context18commit_transactionEPNS_11TransactionE + 364
14 QuartzCore 0x000000010c993946 _ZN2CA11Transaction6commitEv + 500
15 QuartzCore 0x000000010c994694 _ZN2CA11Transaction17observer_callbackEP19__CFRunLoopObservermPv + 76
16 CoreFoundation 0x0000000111742c07 CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION + 23
17 CoreFoundation 0x0000000111742b5e __CFRunLoopDoObservers + 430
18 CoreFoundation 0x0000000111727124 __CFRunLoopRun + 1572
19 CoreFoundation 0x0000000111726889 CFRunLoopRunSpecific + 409
20 GraphicsServices 0x0000000114d3e9c6 GSEventRunModal + 62
21 UIKit 0x000000010dc505d6 UIApplicationMain + 159
22 GDC Mobile v2 0x0000000109088007 main + 55
23 libdyld.dylib 0x0000000112fa0d81 start + 1
24 ??? 0x0000000000000001 0x0 + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.