Я пытаюсь сделать textField
, который ведет себя так же, как дизайн материала MDCTextField
. Все работает хорошо, но анимация заполнителя немного глючит. Заполнитель идет выше textField
на editingDidBegin
. Но при возврате textField
в его положение на editingDidEnd
он идет ниже textField
, а затем центрируется в textField
. Что я хочу, так это go вернуться в центр textField
, не заходя под него.
Зная, что заполнитель - это 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 как это может помочь
<?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>