ConstraintLayout2.0一篇寫不完之MotionLabel

MotionLabel是CL2.1新加入的一個為單行文字制作動畫的View，它支持下面幾種典型的動畫效果：

• 使用PanX和PanY取代Gravity，它是一個float值，-1是左，0是中心，+1是右，它可以對位置進行動畫
• 可以設置文本輪廓的厚度和顏色，并設置它的動畫效果
• 給文本的背景設置顏色或紋理
• 確保textSize的動畫效果順滑

?

那么問題來了，只支持單行？？沒錯，MotionLabel并不是繼承TextView，所以文字測量相關的方法是沒有的，只能支持單行，那么多行咋辦，其實很簡單，你可以借助一個假的TextView來進行文字的測量，再通過它的API獲取每行的文本，根據(jù)每行的文本，創(chuàng)建MotionLabel，或者更直接一點，通過TextMeasure來對文字進行測量。

?

紋理背景

下面的示例，展示了MotionLabel設置圖片紋理作為它的background，主要涉及三個屬性：

• textBackground：不同于background，textBackground是文字的填充紋理
• textureHeight：文字填充紋理的高度
• textureWidth：文字填充紋理的寬度
• textBackgroundRotate：文字填充紋理的旋轉角度
• textBackgroundZoom：文字填充紋理的縮放

?

當不設置textureWidth和textureHeight時，紋理默認撐滿文字。

?

<androidx.constraintlayout.utils.widget.MotionLabel
    android:id="@+id/label1"
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:background="@drawable/monterey"
    android:padding="10dp"
    android:text="XuYiSheng"
    android:textSize="60sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:textBackground="@drawable/avatar"
    app:textureHeight="10dp"
    app:textureWidth="10dp" />

?

借助文字紋理，可以很方便的實現(xiàn)文字的Blur效果，實際上就是一張正常圖片墊底，另一個MotionLabel使用背景圖的Blur圖做文字背景來實現(xiàn)的。

?

TextOutline

MotionLabel還支持對文字添加描邊處理，涉及到下面這些屬性。

• textOutlineColor：描邊顏色
• textOutlineThickness：描邊寬度

borderRound

MotionLabel自帶了背景圓角的處理。

• borderRound：按dp處理圓角
• borderRoundPercent：按百分比處理圓角

textBackgroundPan

文字紋理背景的偏移，是通過textBackgroundPanX和textBackgroundPanY屬性來實現(xiàn)的。

通過CustomAttribute給textBackgroundPanX和textBackgroundPanY設置-1到1的變換，就可以實現(xiàn)紋理背景移動的動畫效果。

textPan

文字在MotionLabel中的偏移，使用的是textPanX和textPanY，同樣是通過-1到1來實現(xiàn)定位。

通過CustomAttribute給textPanX和textPanY設置-2到2的變換，就可以實現(xiàn)文字的偏移動畫。

動畫就不貼了，太麻煩了，最后會有一個驚喜大Demo，滿足你的一切幻想。