iOS: анимированный заполнитель, такой как заполнитель текстового поля дизайна материала - PullRequest
0 голосов
/ 22 января 2020

Я пытаюсь сделать 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:

enter image description here

РЕДАКТИРОВАТЬ: я добавлю исходный код для файла 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>

1 Ответ

0 голосов
/ 22 января 2020

Используйте SkyFloatingLabelTextField Cocoa Pod. Вы можете настроить его из раскадровки. Вы можете получить его здесь:

https://github.com/Skyscanner/SkyFloatingLabelTextField

enter image description here

...