问题
I'm trying to make a textField that behaves just like the Material design MDCTextField.
Everything is working well, but the animation of the placeholder is a bit buggy. The placeholder is going above the textField on editingDidBegin. But when returning the textField to its position on editingDidEnd, it is going below the textField then centered in the textField.
What I want is to go back to the center of the textField without going below it.
Knowing that the Placeholder is a UILabel.
Here is the code of animation:
func setUpTextField(){
textField.rx.controlEvent(.editingDidBegin).subscribe(onNext: { (next) in
if self.textField.text == "" {
self.changeFrame(label: self.placeHolderPreview, toOriginX: self.textField.frame.origin.x, toOriginY: self.textField.center.y - self.textField.frame.height/2 - 30, toWidth: self.placeHolderPreview.frame.width, toHeight: self.placeHolderPreview.frame.height, withFontSize: 10, duration: self.placeholderAnimationDuration)
self.placeHolderPreview.textColor = self.activeColor
self.line.backgroundColor = self.activeColor
}
}).disposed(by: bag)
textField.rx.controlEvent(.editingDidEnd).subscribe(onNext: { (next) in
if self.textField.text == "" {
self.changeFrame(label: self.placeHolderPreview, toOriginX: self.textField.frame.origin.x, toOriginY: self.textField.center.y - self.placeHolderPreview.frame.height/2, toWidth: self.placeHolderPreview.frame.width, toHeight: self.placeHolderPreview.frame.height, withFontSize: 14, duration: self.placeholderAnimationDuration)
self.placeHolderPreview.textColor = self.inActiveColor
self.line.backgroundColor = self.inActiveColor
}
}).disposed(by: bag)
}
func changeFrame(label: UILabel, toOriginX newOriginX: CGFloat, toOriginY newOriginY: CGFloat, toWidth newWidth: CGFloat, toHeight newHeight: CGFloat, withFontSize size: CGFloat, duration: TimeInterval) {
label.font = UIFont.systemFont(ofSize: size)
let oldFrame = label.frame
let newFrame = CGRect(x: newOriginX, y: newOriginY, width: newWidth, height: newHeight)
let translation = CGAffineTransform(translationX: newFrame.midX - oldFrame.midX,
y: newFrame.midY - oldFrame.midY)
UIView.animate(withDuration: duration, animations: {
label.transform = translation//transform
}) { _ in
label.transform = .identity
label.frame = newFrame
}
}
Here is the .xib file:
EDIT: I'll add the source code for the xib file as it might help
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15400" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
<device id="retina4_7" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15404"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<customFonts key="customFonts">
<array key="Lato-Regular.ttf">
<string>Lato-Regular</string>
</array>
</customFonts>
<objects>
<placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="FloatingTextField" customModule="LifePoints" customModuleProvider="target">
<connections>
<outlet property="contentView" destination="aEi-6k-e1c" id="34w-0d-GoM"/>
<outlet property="errorLabel" destination="c1K-2U-7Ji" id="rny-1I-Pgy"/>
<outlet property="heightOfLineConstraint" destination="I2C-70-aed" id="Ceq-24-RX1"/>
<outlet property="line" destination="SO6-mF-ZpE" id="dPL-2u-tsv"/>
<outlet property="placeHolderPreview" destination="VCP-t2-PaI" id="ZUJ-Nz-8Pw"/>
<outlet property="placeholderCenterTotTextFieldConstraint" destination="Dkm-1j-JaC" id="lqQ-zi-VKB"/>
<outlet property="textField" destination="fnW-XV-HEI" id="7GM-Kg-W4W"/>
</connections>
</placeholder>
<placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
<view contentMode="scaleToFill" restorationIdentifier="FloatingTextField" id="iN0-l3-epB">
<rect key="frame" x="0.0" y="0.0" width="390" height="67"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="aEi-6k-e1c">
<rect key="frame" x="0.0" y="0.0" width="390" height="67"/>
<subviews>
<textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="fnW-XV-HEI">
<rect key="frame" x="16" y="8" width="358" height="24"/>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="height" constant="24" id="LUo-Oy-qtS"/>
</constraints>
<fontDescription key="fontDescription" name="Lato-Regular" family="Lato" pointSize="16"/>
<textInputTraits key="textInputTraits"/>
</textField>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="PlaceHolder Preview" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="VCP-t2-PaI">
<rect key="frame" x="16" y="0.5" width="358" height="19"/>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<fontDescription key="fontDescription" name="Lato-Regular" family="Lato" pointSize="16"/>
<color key="textColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<nil key="highlightedColor"/>
</label>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="SO6-mF-ZpE">
<rect key="frame" x="0.0" y="40" width="390" height="1"/>
<color key="backgroundColor" white="0.33333333333333331" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="height" constant="1" id="I2C-70-aed"/>
</constraints>
</view>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Error" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="c1K-2U-7Ji">
<rect key="frame" x="16" y="49" width="28.5" height="14.5"/>
<fontDescription key="fontDescription" name="Lato-Regular" family="Lato" pointSize="12"/>
<color key="textColor" systemColor="systemRedColor" red="1" green="0.23137254900000001" blue="0.18823529410000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="trailing" relation="greaterThanOrEqual" secondItem="c1K-2U-7Ji" secondAttribute="trailing" constant="8" id="9mx-IV-g5D"/>
<constraint firstItem="VCP-t2-PaI" firstAttribute="centerY" secondItem="fnW-XV-HEI" secondAttribute="centerY" constant="-10" id="Dkm-1j-JaC"/>
<constraint firstItem="SO6-mF-ZpE" firstAttribute="leading" secondItem="aEi-6k-e1c" secondAttribute="leading" id="EsY-tv-e8T"/>
<constraint firstItem="c1K-2U-7Ji" firstAttribute="leading" secondItem="fnW-XV-HEI" secondAttribute="leading" id="G9h-pV-NVI"/>
<constraint firstItem="SO6-mF-ZpE" firstAttribute="top" secondItem="fnW-XV-HEI" secondAttribute="bottom" constant="8" id="Jmj-XS-4Gj"/>
<constraint firstAttribute="trailing" secondItem="SO6-mF-ZpE" secondAttribute="trailing" id="KUi-xD-VwI"/>
<constraint firstItem="c1K-2U-7Ji" firstAttribute="top" secondItem="SO6-mF-ZpE" secondAttribute="bottom" constant="8" id="S7p-vj-ADg"/>
<constraint firstItem="fnW-XV-HEI" firstAttribute="top" secondItem="aEi-6k-e1c" secondAttribute="top" constant="8" id="XaO-PT-zQv"/>
<constraint firstAttribute="trailing" secondItem="fnW-XV-HEI" secondAttribute="trailing" constant="16" id="YKl-EV-3pb"/>
<constraint firstItem="VCP-t2-PaI" firstAttribute="trailing" secondItem="fnW-XV-HEI" secondAttribute="trailing" id="cVd-bX-SUo"/>
<constraint firstItem="fnW-XV-HEI" firstAttribute="leading" secondItem="aEi-6k-e1c" secondAttribute="leading" constant="16" id="q1o-Vb-lip"/>
<constraint firstItem="VCP-t2-PaI" firstAttribute="leading" secondItem="fnW-XV-HEI" secondAttribute="leading" id="sZS-zl-JQn"/>
</constraints>
</view>
</subviews>
<color key="backgroundColor" systemColor="systemPinkColor" red="1" green="0.1764705882" blue="0.33333333329999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="aEi-6k-e1c" firstAttribute="top" secondItem="vUN-kp-3ea" secondAttribute="top" id="0md-3V-tdJ"/>
<constraint firstItem="vUN-kp-3ea" firstAttribute="bottom" secondItem="aEi-6k-e1c" secondAttribute="bottom" id="3k9-FI-Iij"/>
<constraint firstItem="aEi-6k-e1c" firstAttribute="leading" secondItem="vUN-kp-3ea" secondAttribute="leading" id="dS5-Fg-n8f"/>
<constraint firstItem="vUN-kp-3ea" firstAttribute="trailing" secondItem="aEi-6k-e1c" secondAttribute="trailing" id="qv3-nB-n98"/>
</constraints>
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
<viewLayoutGuide key="safeArea" id="vUN-kp-3ea"/>
<point key="canvasLocation" x="-920" y="-73"/>
</view>
</objects>
</document>
回答1:
Use SkyFloatingLabelTextField Cocoa Pod. You can configure it from the storyboard. You can get it from here:
https://github.com/Skyscanner/SkyFloatingLabelTextField
来源：https://stackoverflow.com/questions/59855909/ios-animating-placeholder-like-material-design-textfield-placeholder