iOS:像材质设计文本字段占位符一样为占位符设置动画 [英] iOS: animating placeholder like material design textfield placeholder
本文介绍了iOS:像材质设计文本字段占位符一样为占位符设置动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试制作一个与材料设计MDCTextField一样的textField.
一切工作正常，但占位符的动画有点问题.占位符位于editingDidBegin上textField的上方.但是，当将textField返回到其在editingDidEnd上的位置时，它会在textField之下，然后在textField中居中.
我想要的是回到textField的中心而不要走到它的下方.
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.
知道占位符是UILabel.
Knowing that the Placeholder is a UILabel.
以下是动画代码:
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
}
}
这是.xib文件:
我将添加xib文件的源代码，因为它可能会帮助
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>
推荐答案
使用SkyFloatingLabelTextField可可豆荚.您可以从情节提要中对其进行配置.您可以从这里获取:
Use SkyFloatingLabelTextField Cocoa Pod. You can configure it from the storyboard. You can get it from here:
https://github.com/Skyscanner/SkyFloatingLabelTextField
这篇关于iOS:像材质设计文本字段占位符一样为占位符设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
