【約束佈局】ConstraintSet 約束集 ( 簡介 | 約束屬性集合 | 約束集初始化 | 約束集應用到佈局中 | 關鍵幀動畫 | TransitionManager 使用 )



I . ConstraintSet 約束集 簡介



ConstraintSet 約束集 簡介 :


① ConstraintSet 約束集 概念 : ConstraintSet 約束集 顧名思義 , 就是 約束屬性的集合 , 其表示 約束佈局 ( ConstraintLayout ) 中 所有的組件 的 約束條件 , 尺寸 , 邊距 , 等 約束屬性 ;

② 約束集 ConstraintSet 封裝內容 : 約束集中封裝了 每個組件 的所有 約束佈局 屬性 ;

③ 約束集應用效果 : 約束佈局 ( ConstraintLayout ) 應用 約束集 ( ConstraintSet ) 時 , 約束佈局中的所有組件都會按照約束集中的約束屬性進行重新佈局繪製 ;



II . ConstraintSet 約束集中封裝的約束屬性及操作 示例



1 . 獲取約束集 : 從 約束佈局 ( ConstraintLayout ) 中 , 可以獲取 約束集 ( ConstraintSet ) , 約束集可以從當前現有組件中獲取 , 也可以從佈局文件中獲取 , 下面代碼是從佈局文件中獲取的 ;


//1 . 創建 約束集 對象
ConstraintSet mConstraintSet = new ConstraintSet();

//2 . 從佈局文件中獲取 約束集 對象
mConstraintSet.clone(context, R.layout.constraintlayout);

2 . 約束集中的約束屬性 : R.layout.constraintlayout 佈局就是如下代碼 , 從下面的佈局中獲取 約束集 ConstraintSet , 該約束集中封裝了 button1 , button2 這 22 個組件的 所有約束屬性 , 如 android:layout_width , android:layout_height , 可以直接獲取 , app:layout_constraintBottom_toBottomOf 等約束屬性需要從 ConstraintLayout.LayoutParams 中獲取 ;


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- 按鈕組件 1 -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 按鈕組件 2 -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World! Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button1"
        app:layout_constraintVertical_bias="0.2" />
        
</androidx.constraintlayout.widget.ConstraintLayout>

3 . 獲取某組件的約束屬性 : 約束集 ( ConstraintSet ) 目前只提供了設置某組件的 約束屬性 , 無法獲取組件的 約束屬性 ;


4 . 設置某組件的約束屬性 : 調用 setXxx(int viewId, 屬性值類型 屬性值) , 或 constrainXxx(int viewId, 屬性值類型 屬性值) , 等類型的方法 , 一般是第一個參數傳入要修改的屬性 ID , 第二個參數傳入要修改的約束屬性值 , 即可修改指定組件的指定約束屬性 ;



III . ConstraintSet 約束集 初始化方法



1 . 從佈局中拷貝 ConstraintSet 約束集 數據 :


① 從 約束佈局文件 中拷貝約束集 : void clone(Context context, int constraintLayoutId) ;

② 從 約束佈局 組件中拷貝約束集 : void clone(ConstraintLayout constraintLayout) ;

③ 從 約束集 中拷貝約束集 : void clone(Constraints constraints) ;

④ 從 約束 中拷貝約束集 : void clone(ConstraintSet set) ;


2 . 從 XML 資源文件中加載 約束集 ConstraintSet 數據 : 從 ConstraintLayout 佈局文件 類型的 XML 資源中加載約束集數據 ;


① 從資源中加載 : void load(Context context, int resourceId) ;

② 從 Xml 解析器中加載 : void load(Context context, XmlPullParser parser) ;



IV . ConstraintSet 約束集 應用到 約束佈局 ConstraintLayout 中



ConstraintSet 約束集 應用到 約束佈局 ConstraintLayout 中 :


① 傳統屬性 與 約束屬性 : 這裏將屬性分爲 傳統屬性 ( Custom Attributes ) , 約束屬性 , 約束屬性是只有在 約束佈局中使用的屬性 , 其它的非約束屬性就是傳統屬性 , 如 寬高 , 邊距 , 位置 , 旋轉 , 縮放 , 等所有佈局類型通用的這些屬性 ;

② 應用 約束集所有屬性 : void applyTo(ConstraintLayout constraintLayout) ; 將所有的屬性 , 傳統屬性 , 約束屬性 , 都應用到約束佈局中 ;

③ 應用 傳統屬性 : void applyCustomAttributes(ConstraintLayout constraintLayout) ; 只將傳統屬性應用到約束佈局中 ;

④ 應用 約束佈局屬性 : void applyToLayoutParams(int id, ConstraintLayout.LayoutParams layoutParams) ; 爲某個組件應用 約束佈局屬性 ;

⑤ 應用 約束屬性 : void applyToWithoutCustom(ConstraintLayout constraintLayout) ; 將約束屬性 ( 非傳統屬性 ) 應用到約束佈局中 ;



V . ConstraintSet 關鍵幀動畫



關鍵幀動畫 :


① 核心方法 : 使用 TransitionManager.beginDelayedTransition ( final ViewGroup sceneRoot ) 方法生成並執行動畫 ;

② 初始幀 與 目的幀 : 該方法 使用 默認的轉換方式 , 創建一個動畫 , 動畫是基於一個場景 ViewGroup 進行生成的 , 初始場景是 初始幀 , 轉換後的新場景是 目的幀 ;

③ 過渡幀 : TransitionManager 會自動生成中間的多個過渡幀 , 其中的 初始幀 和 目的幀 是關鍵幀 , 過渡幀 是根據兩個關鍵幀之間的改變自動生成的 ,

④ 方法原型 :

/**
 * Convenience method to animate, using the default transition,
 * to a new scene defined by all changes within the given scene root between
 * calling this method and the next rendering frame.
 * Equivalent to calling {@link #beginDelayedTransition(ViewGroup, Transition)}
 * with a value of <code>null</code> for the <code>transition</code> parameter.
 *
 * @param sceneRoot The root of the View hierarchy to run the transition on.
 */
public static void beginDelayedTransition(final ViewGroup sceneRoot) {
    beginDelayedTransition(sceneRoot, null);


VI . ConstraintSet 關鍵幀動畫 代碼流程



關鍵幀動畫流程 :


① 設置起始幀 : 準備 ViewGroup 組件 AA , 作爲關鍵幀動畫的起始幀 , 只要獲取到該組件即可 ;

② 設置關鍵幀動畫 : 調用 TransitionManager.beginDelayedTransition ( ) 方法 , 生成過渡幀 , 執行時會自動進行關鍵幀動畫執行 ;

③ 設置目的幀 : 設置 ViewGroup 組件 AA 的變化結果 , 任何組件的 尺寸 位置 的 變化 , 都會以動畫形式過渡轉換過去 ;



VII . ConstraintSet 關鍵幀動畫 支持的屬性



關鍵幀動畫支持的屬性 :


① 不適配所有屬性 : 不是所有的屬性都適用於關鍵幀動畫 ;

② 適配屬性 : 組件的 尺寸 , 位置 , 旋轉 , 縮放 , 等屬性 , 可以使用關鍵幀動畫生成過渡幀 ;

③ 不適配屬性 : 組件的 顏色 , 透明度 , 等屬性 , 無法使用關鍵幀動畫生成過渡幀 ;



VIII . ConstraintSet 關鍵幀動畫 示例代碼



1 . 開始幀 佈局文件 :


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/constraintLayout"
    android:onClick="onClick">

    <Button
        android:id="@+id/button"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0"/>

</androidx.constraintlayout.widget.ConstraintLayout>

2 . 目的幀 佈局文件 : 兩幀的區別是 按鈕的 位置 , 大小 , 角度 發生了改變 ;


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/constraintLayout">

    <Button
        android:id="@+id/button"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1"
        android:rotation="210"/>

</androidx.constraintlayout.widget.ConstraintLayout>

3 . Activity 代碼 :


package kim.hsl.cckfa;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;

import android.os.Bundle;
import android.transition.TransitionManager;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    /**
     * 點擊觸發 關鍵幀動畫
     * @param view
     */
    public void onClick(View view){
        //1 . 獲取 約束佈局 組件 ( 設置 關鍵幀動畫的 開始幀 )
        ConstraintLayout constraintLayout = findViewById(R.id.constraintLayout);

        //2 . 創建 約束集 對象
        ConstraintSet constraintSet = new ConstraintSet();

        //3 . 從 約束佈局 中加載約束集
        constraintSet.load(this, R.layout.activity_main2);

        //4 . 設置 關鍵幀動畫
        TransitionManager.beginDelayedTransition(constraintLayout);

        //5 . 在 約束佈局 中 , 應用約束集屬性 ( 設置 關鍵幀動畫的 結束幀 )
        constraintSet.applyTo(constraintLayout);
    }
}

4 . 關鍵幀動畫效果 :


在這裏插入圖片描述


示例代碼地址 : GitHub - ConstraintLayout_ConstraintSet_Key_Frame_Animation ;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章