效果圖.gif
MotionLayout 是一種布局類型耻讽，可幫助您管理應用中的運動和微件動畫税手。MotionLayout 是 ConstraintLayout 的子類识虚，在其豐富的布局功能基礎之上構建而成。作為 ConstraintLayout 庫的一部分辫秧，MotionLayout 可用作支持庫，并可向后兼容 API 級別 14被丧。
ImageFilterView 是constraintlayout 2.0 以后新增加的一個圖片處理的,繼承于AppCompatImageView的ImageView,可以理解為ImageView的擴展子View.ImageFilterView繼承ImageVIew擴展出一些圖像處理的屬性方法,.字面翻譯是 圖像過濾器視圖
屬性方法
<declare-styleable name="ImageFilterView">
<attr format="reference" name="altSrc"/> //為src圖像提供可選圖像盟戏，以允許交叉衰落
<attr format="float" name="saturation"/> //設置圖像的飽和度<br>0=灰度绪妹，1=原始，2=超飽和
<attr format="float" name="brightness"/> //設置圖像的亮度<br>0=黑色柿究，1=原色邮旷，2=亮度的兩倍
<attr format="float" name="warmth"/> //這將調整圖像的外觀色溫<br>1=中性，2=溫暖蝇摸，5=寒冷
<attr format="float" name="contrast"/> //這將設置對比度婶肩。1=不變，0=灰色探入，2=高對比度
<attr format="float" name="crossfade"/> //設置兩個圖像之間的當前混合<br>0=src 1=altSrc圖像
<attr format="dimension" name="round"/> //圓形圓形
<attr format="boolean" name="overlay"/>定義alt圖像是在原始圖像的頂部淡入淡入狡孔，還是將淡入淡入我被它迷住了。默認值為true蜂嗽。半透明對象設置為false
<attr format="float" name="roundPercent"/> 將拐角曲率半徑設置為較小邊的分數(shù)苗膝。對于正方形，1將生成一個圓
<attr format="float" name="imagePanX"/> //從中心設置平移 pan將平移設置為X植旧，其中0居中
<attr format="float" name="imagePanY"/>//從中心設置平移 pan將平移設置為Y辱揭，其中0居中
<attr format="float" name="imageZoom"/> //縮放效果
<attr format="float" name="imageRotate"/> //旋轉效果
</declare-styleable>
實現(xiàn)MotionLayout關聯(lián)ImageFilterView 實現(xiàn)圖像 縮放(內容縮放非尺寸縮放),調整飽和度,以及混合切換的效果
1.scene_image_filter.xml 資源代碼
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<!-- 配置動畫屬性 -->
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:duration="500">
<!-- 觸摸屬性 onTouchUp stop 不自動滑動-->
<OnSwipe
motion:dragDirection="dragDown"
motion:touchAnchorId="@+id/image"
motion:touchAnchorSide="bottom" />
</Transition>
<!-- 是定義描述您的運動的各種限制條件的位置 -->
<!-- 開始的View限制 -->
<ConstraintSet android:id="@+id/start">
<!-- 條件限制 -->
<Constraint
android:id="@+id/image"
android:layout_width="320dp"
android:layout_height="180dp"
android:layout_marginTop="20dp"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<!-- 設置縮放 -->
<CustomAttribute
motion:attributeName="ImageZoom"
motion:customFloatValue="1.0" />
<!-- 設置兩個圖像之間的當前混合 -->
<CustomAttribute
motion:attributeName="Crossfade"
motion:customFloatValue="0" />
<!-- 設置飽和度 -->
<CustomAttribute
motion:attributeName="Saturation"
motion:customFloatValue="0" />
</Constraint>
</ConstraintSet>
<!-- 結束的View限制 -->
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/image"
android:layout_width="320dp"
android:layout_height="180dp"
android:layout_marginBottom="20dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent">
<CustomAttribute
motion:attributeName="ImageZoom"
motion:customFloatValue="1.5" />
<CustomAttribute
motion:attributeName="Crossfade"
motion:customFloatValue="1" />
<CustomAttribute
motion:attributeName="Saturation"
motion:customFloatValue="1" />
</Constraint>
</ConstraintSet>
</MotionScene>
2.activity_mothion_image_filter.xml 資源代碼
<?xml version="1.0" encoding="utf-8"?>
<!-- activity_main.xml -->
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/motionLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/scene_image_filter">
<!-- 移動的控件 -->
<androidx.constraintlayout.utils.widget.ImageFilterView
android:id="@+id/image"
android:src="@mipmap/roard"
app:altSrc="@mipmap/hoford"
android:layout_width="320dp"
android:layout_height="180dp"
/>
</androidx.constraintlayout.motion.widget.MotionLayout>
3.Activity 代碼
package com.wu.material
import android.annotation.SuppressLint
import android.graphics.Rect
import android.os.Bundle
import android.widget.FrameLayout
import android.widget.RelativeLayout
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.motion.widget.MotionLayout
import com.google.android.material.badge.BadgeDrawable
import com.google.android.material.badge.BadgeUtils
/**
* @author wkq
*
* @date 2021年11月04日 16:40
*
*@des 觸摸平移動畫
*
*/
class MothionImageFilterViewActivity :AppCompatActivity() {
@SuppressLint("RestrictedApi")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_mothion_image_filter)
setShowLines()
}
/**
* 設置展示動畫路徑
*/
private fun setShowLines() {
var motionLayout= findViewById<MotionLayout>(R.id.motionLayout)
motionLayout.setDebugMode(MotionLayout.DEBUG_SHOW_PATH)
}
}
總結
ImageFilterView 一個繼承于ImageView的圖像變化處理的新控件值得你擁有,搭配MotionLayout效果更美好,美滋滋又學了一招.
