Tạo ảnh động cho các thay đổi về bố cục bằng khung chuyển đổi

Thử cách sử dụng Compose
Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách sử dụng Ảnh động trong Compose.

Khung chuyển đổi của Android cho phép bạn tạo ảnh động cho mọi loại chuyển động trong giao diện người dùng bằng cách cung cấp bố cục bắt đầu và kết thúc. Bạn có thể chọn loại ảnh động bạn muốn (chẳng hạn như làm mờ hoặc thu nhỏ khung hiển thị hoặc thay đổi kích thước khung hiển thị) và khung chuyển đổi sẽ xác định cách tạo ảnh động từ bố cục bắt đầu đến bố cục kết thúc.

Khung chuyển đổi bao gồm các tính năng sau:

  • Ảnh động cấp nhóm: áp dụng hiệu ứng ảnh động cho mọi khung hiển thị trong một hệ phân cấp khung hiển thị.
  • Ảnh động tích hợp: sử dụng ảnh động được xác định trước cho các hiệu ứng phổ biến như mờ dần hoặc chuyển động.
  • Hỗ trợ tệp tài nguyên: tải hệ phân cấp khung hiển thị và ảnh động tích hợp sẵn từ các tệp tài nguyên bố cục.
  • Các phương thức gọi lại trong vòng đời: nhận các lệnh gọi lại cho phép kiểm soát quá trình thay đổi ảnh động và hệ phân cấp.

Để xem mã mẫu tạo ảnh động giữa các lần thay đổi bố cục, hãy xem BasicTransition.

Quy trình cơ bản để tạo ảnh động giữa hai bố cục như sau:

  1. Tạo một đối tượng Scene cho bố cục bắt đầu và kết thúc. Tuy nhiên, cảnh của bố cục ban đầu thường được xác định tự động từ bố cục hiện tại.
  2. Tạo đối tượng Transition để xác định loại ảnh động bạn muốn.
  3. Gọi TransitionManager.go() và hệ thống sẽ chạy ảnh động để hoán đổi bố cục.

Sơ đồ trong hình 1 minh hoạ mối quan hệ giữa bố cục, cảnh, hiệu ứng chuyển đổi và ảnh động cuối cùng.

Hình 1. Hình minh hoạ cơ bản về cách khung chuyển đổi tạo ảnh động.

Tạo cảnh

Cảnh lưu trữ trạng thái của hệ phân cấp khung hiển thị, bao gồm tất cả các khung hiển thị và giá trị thuộc tính của các khung hiển thị đó. Khung chuyển đổi có thể chạy ảnh động giữa cảnh bắt đầu và cảnh kết thúc.

Bạn có thể tạo cảnh từ tệp tài nguyên bố cục hoặc từ một nhóm các khung hiển thị trong mã của mình. Tuy nhiên, cảnh bắt đầu cho quá trình chuyển đổi thường được xác định tự động từ giao diện người dùng hiện tại.

Một cảnh cũng có thể xác định các hành động riêng sẽ thực hiện khi bạn thay đổi cảnh. Tính năng này rất hữu ích khi bạn dọn dẹp các chế độ cài đặt khung hiển thị sau khi bạn chuyển đổi sang một cảnh.

Tạo cảnh từ tài nguyên bố cục

Bạn có thể tạo thực thể Scene ngay từ tệp tài nguyên bố cục. Hãy sử dụng kỹ thuật này khi hệ phân cấp khung hiển thị trong tệp chủ yếu là tĩnh. Cảnh thu được thể hiện trạng thái của hệ phân cấp khung hiển thị tại thời điểm bạn tạo thực thể Scene. Nếu bạn thay đổi hệ phân cấp khung hiển thị, hãy tạo lại cảnh đó. Khung này sẽ tạo cảnh từ toàn bộ hệ phân cấp khung hiển thị trong tệp. Bạn không thể tạo cảnh từ một phần của tệp bố cục.

Để tạo một thực thể Scene từ tệp tài nguyên bố cục, hãy truy xuất gốc của cảnh trong bố cục dưới dạng ViewGroup. Sau đó, hãy gọi hàm Scene.getSceneForLayout() bằng thư mục gốc của cảnh và mã nhận dạng tài nguyên của tệp bố cục chứa hệ phân cấp khung hiển thị của cảnh đó.

Xác định bố cục cho cảnh

Các đoạn mã trong phần còn lại của phần này cho biết cách tạo 2 cảnh khác nhau bằng cùng một phần tử gốc của cảnh. Các đoạn mã này cũng chứng minh rằng bạn có thể tải nhiều đối tượng Scene không liên quan mà không ngụ ý rằng các đối tượng đó có liên quan với nhau.

Ví dụ này bao gồm các định nghĩa bố cục sau:

  • Bố cục chính của một hoạt động có nhãn văn bản và FrameLayout con.
  • ConstraintLayout cho cảnh đầu tiên có hai trường văn bản.
  • ConstraintLayout cho cảnh thứ hai có hai trường văn bản giống nhau theo thứ tự khác nhau.

Ví dụ này được thiết kế sao cho tất cả ảnh động đều xuất hiện trong bố cục con của bố cục chính cho hoạt động. Nhãn văn bản trong bố cục chính vẫn ở dạng tĩnh.

Bố cục chính của hoạt động được xác định như sau:

res/layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/master_layout">
    <TextView
        android:id="@+id/title"
        ...
        android:text="Title"/>
    <FrameLayout
        android:id="@+id/scene_root">
        <include layout="@layout/a_scene" />
    </FrameLayout>
</LinearLayout>

Định nghĩa bố cục này chứa một trường văn bản và một FrameLayout con cho cảnh gốc. Bố cục cho cảnh đầu tiên có trong tệp bố cục chính. Điều này cho phép ứng dụng hiển thị hình ảnh đó như một phần của giao diện người dùng ban đầu, đồng thời tải hình ảnh đó vào một cảnh vì khung chỉ có thể tải toàn bộ tệp bố cục vào một cảnh.

Bố cục của cảnh đầu tiên được xác định như sau:

res/layout/a_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    
</androidx.constraintlayout.widget.ConstraintLayout>

Bố cục cho cảnh thứ hai chứa 2 trường văn bản giống nhau (có cùng mã nhận dạng) được đặt theo một thứ tự khác. Nó được định nghĩa như sau:

res/layout/another_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    
</androidx.constraintlayout.widget.ConstraintLayout>

Tạo cảnh từ bố cục

Sau khi tạo định nghĩa cho 2 bố cục ràng buộc, bạn có thể có được một cảnh cho từng bố cục đó. Điều này cho phép bạn chuyển đổi giữa 2 cấu hình giao diện người dùng. Để có được một cảnh, bạn cần tham chiếu đến thư mục gốc của cảnh và mã nhận dạng tài nguyên bố cục.

Đoạn mã sau đây cho biết cách tham chiếu đến thư mục gốc của cảnh và tạo 2 đối tượng Scene từ các tệp bố cục:

Kotlin

val sceneRoot: ViewGroup = findViewById(R.id.scene_root)
val aScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this)
val anotherScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this)

Java

Scene aScene;
Scene anotherScene;

// Create the scene root for the scenes in this app.
sceneRoot = (ViewGroup) findViewById(R.id.scene_root);

// Create the scenes.
aScene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this);
anotherScene =
    Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this);

Trong ứng dụng này, hiện có 2 đối tượng Scene dựa trên hệ phân cấp khung hiển thị. Cả hai cảnh đều sử dụng thư mục gốc của cảnh được xác định bằng phần tử FrameLayout trong res/layout/activity_main.xml.

Tạo một cảnh trong mã

Bạn cũng có thể tạo một thực thể Scene trong mã từ đối tượng ViewGroup. Hãy sử dụng kỹ thuật này khi bạn sửa đổi hệ phân cấp khung hiển thị ngay trong mã của mình hoặc khi tạo hệ phân cấp khung hiển thị theo phương thức động.

Để tạo một cảnh từ một hệ phân cấp khung hiển thị trong mã của bạn, hãy sử dụng hàm khởi tạo Scene(sceneRoot, viewHierarchy). Việc gọi hàm khởi tạo này tương đương với việc gọi hàm Scene.getSceneForLayout() khi bạn đã tăng cường tệp bố cục.

Đoạn mã sau đây minh hoạ cách tạo một thực thể Scene từ thành phần gốc của cảnh và hệ phân cấp khung hiển thị cho cảnh đó trong mã của bạn:

Kotlin

val sceneRoot = someLayoutElement as ViewGroup
val viewHierarchy = someOtherLayoutElement as ViewGroup
val scene: Scene = Scene(sceneRoot, viewHierarchy)

Java

Scene mScene;

// Obtain the scene root element.
sceneRoot = (ViewGroup) someLayoutElement;

// Obtain the view hierarchy to add as a child of
// the scene root when this scene is entered.
viewHierarchy = (ViewGroup) someOtherLayoutElement;

// Create a scene.
mScene = new Scene(sceneRoot, mViewHierarchy);

Tạo các thao tác với cảnh

Khung này cho phép bạn xác định các thao tác tuỳ chỉnh với cảnh mà hệ thống sẽ chạy khi vào hoặc thoát khỏi một cảnh. Trong nhiều trường hợp, bạn không cần xác định các thao tác cảnh tuỳ chỉnh, vì khung này sẽ tự động tạo ảnh động cho sự thay đổi giữa các cảnh.

Thao tác với cảnh rất hữu ích khi xử lý các trường hợp sau:

  • Để tạo ảnh động cho các khung hiển thị không trong cùng một hệ phân cấp. Bạn có thể tạo ảnh động cho khung hiển thị cho cảnh bắt đầu và kết thúc bằng các thao tác vào cảnh và thoát.
  • Để tạo ảnh động cho các khung hiển thị mà khung chuyển đổi không thể tự động tạo ảnh động, chẳng hạn như các đối tượng ListView. Để biết thêm thông tin, hãy xem phần giới hạn.

Để cung cấp các thao tác với cảnh tuỳ chỉnh, hãy xác định thao tác của bạn dưới dạng đối tượng Runnable và truyền các thao tác đó đến các hàm Scene.setExitAction() hoặc Scene.setEnterAction(). Khung này sẽ gọi hàm setExitAction() trên cảnh bắt đầu trước khi chạy ảnh động chuyển đổi và hàm setEnterAction() trên cảnh kết thúc sau khi chạy ảnh động chuyển đổi.

Áp dụng hiệu ứng chuyển đổi

Khung chuyển đổi thể hiện kiểu ảnh động giữa các cảnh có đối tượng Transition. Bạn có thể tạo thực thể cho Transition bằng các lớp con tích hợp sẵn, chẳng hạn như AutoTransitionFade, hoặc xác định lượt chuyển đổi của riêng bạn. Sau đó, bạn có thể chạy ảnh động giữa các cảnh bằng cách truyền SceneTransition đến TransitionManager.go().

Vòng đời chuyển đổi tương tự như vòng đời hoạt động và đại diện cho các trạng thái chuyển đổi mà khung theo dõi giữa thời điểm bắt đầu và thời điểm hoàn tất ảnh động. Ở các trạng thái vòng đời quan trọng, khung sẽ gọi các hàm callback mà bạn có thể triển khai để điều chỉnh giao diện người dùng ở các giai đoạn chuyển đổi khác nhau.

Tạo hiệu ứng chuyển đổi

Phần trước cho biết cách tạo các cảnh thể hiện trạng thái của các hệ phân cấp khung hiển thị khác nhau. Sau khi xác định cảnh bắt đầu và cảnh kết thúc mà bạn muốn thay đổi, hãy tạo một đối tượng Transition xác định ảnh động. Khung này cho phép bạn chỉ định hiệu ứng chuyển đổi tích hợp trong tệp tài nguyên, rồi tăng cường hiệu ứng đó trong mã hoặc tạo một thực thể của hiệu ứng chuyển đổi tích hợp ngay trong mã.

Bảng 1. Các kiểu chuyển đổi tích hợp sẵn.

Lớp Thẻ Hiệu ứng
AutoTransition <autoTransition/> Chuyển đổi mặc định. Làm mờ, di chuyển và đổi kích thước cũng như làm mờ trong các khung hiển thị theo thứ tự đó.
ChangeBounds <changeBounds/> Di chuyển và đổi kích thước khung hiển thị.
ChangeClipBounds <changeClipBounds/> Chụp View.getClipBounds() trước và sau khi thay đổi cảnh và tạo ảnh động cho những thay đổi đó trong quá trình chuyển đổi.
ChangeImageTransform <changeImageTransform/> Chụp ma trận của ImageView trước và sau khi thay đổi cảnh, rồi tạo ảnh động cho ma trận đó trong quá trình chuyển đổi.
ChangeScroll <changeScroll/> Chụp thuộc tính cuộn của các mục tiêu trước và sau khi thay đổi cảnh và tạo ảnh động cho mọi thay đổi.
ChangeTransform <changeTransform/> Chụp tỷ lệ và xoay khung hiển thị trước và sau khi thay đổi cảnh, đồng thời tạo ảnh động cho những thay đổi đó trong quá trình chuyển đổi.
Explode <explode/> Theo dõi các thay đổi đối với chế độ hiển thị của khung hiển thị mục tiêu trong cảnh bắt đầu và cảnh kết thúc, đồng thời di chuyển khung hiển thị vào hoặc ra khỏi các cạnh của cảnh.
Fade <fade/> fade_in mờ dần trong khung hiển thị.
fade_out làm mờ khung hiển thị.
fade_in_out (mặc định) thực hiện fade_out, theo sau là fade_in.
Slide <slide/> Theo dõi các thay đổi đối với chế độ hiển thị của khung hiển thị mục tiêu trong cảnh bắt đầu và cảnh kết thúc, đồng thời di chuyển các khung hiển thị vào hoặc ra khỏi một trong các cạnh của cảnh.

Tạo một thực thể chuyển đổi từ tệp tài nguyên

Kỹ thuật này cho phép bạn sửa đổi định nghĩa hiệu ứng chuyển đổi mà không cần thay đổi mã của hoạt động. Kỹ thuật này cũng hữu ích khi tách các định nghĩa chuyển đổi phức tạp khỏi mã xử lý ứng dụng, như thể hiện trong phần về cách chỉ định nhiều quá trình chuyển đổi.

Để chỉ định hiệu ứng chuyển đổi tích hợp sẵn trong tệp tài nguyên, hãy làm theo các bước sau:

  • Thêm thư mục res/transition/ vào dự án.
  • Tạo tệp tài nguyên XML mới bên trong thư mục này.
  • Thêm nút XML cho một trong các hiệu ứng chuyển đổi tích hợp.

Ví dụ: tệp tài nguyên sau chỉ định quá trình chuyển đổi Fade:

res/transition/fade_transition.xml

<fade xmlns:android="http://schemas.android.com/apk/res/android" />

Đoạn mã sau đây cho biết cách tăng cường một thực thể Transition bên trong hoạt động của bạn từ một tệp tài nguyên:

Kotlin

var fadeTransition: Transition =
    TransitionInflater.from(this)
                      .inflateTransition(R.transition.fade_transition)

Java

Transition fadeTransition =
        TransitionInflater.from(this).
        inflateTransition(R.transition.fade_transition);

Tạo một thực thể chuyển đổi trong mã của bạn

Kỹ thuật này rất hữu ích cho việc tạo đối tượng chuyển đổi một cách linh động nếu bạn sửa đổi giao diện người dùng trong mã và tạo các phiên bản chuyển đổi tích hợp đơn giản mà không có hoặc có ít tham số.

Để tạo một thực thể của hiệu ứng chuyển đổi tích hợp, hãy gọi một trong các hàm khởi tạo công khai trong các lớp con của lớp Transition. Ví dụ: đoạn mã sau đây sẽ tạo một bản sao của hiệu ứng chuyển đổi Fade:

Kotlin

var fadeTransition: Transition = Fade()

Java

Transition fadeTransition = new Fade();

Áp dụng hiệu ứng chuyển đổi

Bạn thường áp dụng hiệu ứng chuyển đổi để thay đổi giữa các hệ phân cấp khung hiển thị để phản hồi một sự kiện, chẳng hạn như hành động của người dùng. Ví dụ: hãy xem xét một ứng dụng tìm kiếm: khi người dùng nhập cụm từ tìm kiếm và nhấn vào nút tìm kiếm, ứng dụng đó sẽ chuyển thành một cảnh đại diện cho bố cục kết quả trong khi áp dụng hiệu ứng chuyển đổi làm mờ nút tìm kiếm và mờ dần trong kết quả tìm kiếm.

Để thay đổi cảnh trong khi áp dụng hiệu ứng chuyển đổi để phản hồi một sự kiện trong hoạt động của bạn, hãy gọi hàm lớp TransitionManager.go() có cảnh kết thúc và thực thể chuyển đổi để sử dụng cho ảnh động, như minh hoạ trong đoạn mã sau:

Kotlin

TransitionManager.go(endingScene, fadeTransition)

Java

TransitionManager.go(endingScene, fadeTransition);

Khung này thay đổi hệ phân cấp khung hiển thị bên trong gốc cảnh bằng hệ phân cấp khung hiển thị từ cảnh kết thúc trong khi chạy ảnh động do thực thể chuyển đổi chỉ định. Cảnh bắt đầu là cảnh kết thúc trong lần chuyển đổi cuối cùng. Nếu không có quá trình chuyển đổi trước đó, cảnh bắt đầu sẽ tự động được xác định từ trạng thái hiện tại của giao diện người dùng.

Nếu bạn không chỉ định một thực thể chuyển đổi, trình quản lý chuyển đổi có thể áp dụng quá trình chuyển đổi tự động phù hợp với hầu hết các tình huống. Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho lớp TransitionManager.

Chọn chế độ xem mục tiêu cụ thể

Theo mặc định, khung này áp dụng các hiệu ứng chuyển đổi cho tất cả khung hiển thị trong cảnh bắt đầu và cảnh kết thúc. Trong một số trường hợp, bạn có thể chỉ muốn áp dụng ảnh động cho một nhóm nhỏ khung hiển thị trong cảnh. Khung này cho phép bạn chọn các khung hiển thị cụ thể mà bạn muốn tạo ảnh động. Ví dụ: khung này không hỗ trợ tạo ảnh động cho các thay đổi đối với đối tượng ListView, vì vậy, đừng cố tạo ảnh động cho các đối tượng đó trong quá trình chuyển đổi.

Mỗi thành phần hiển thị mà hiệu ứng chuyển đổi tạo ra hiệu ứng được gọi là một mục tiêu. Bạn chỉ có thể chọn các mục tiêu thuộc hệ phân cấp khung hiển thị liên kết với một cảnh.

Để xoá một hoặc nhiều khung hiển thị khỏi danh sách mục tiêu, hãy gọi phương thức removeTarget() trước khi bắt đầu chuyển đổi. Để chỉ thêm các khung hiển thị mà bạn chỉ định vào danh sách mục tiêu, hãy gọi hàm addTarget(). Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho lớp Transition.

Chỉ định nhiều hiệu ứng chuyển đổi

Để ảnh động có tác động lớn nhất, hãy khớp ảnh động đó với loại thay đổi xảy ra giữa các cảnh. Ví dụ: nếu bạn đang xoá một số khung hiển thị và thêm các khung hiển thị khác giữa các cảnh, thì hiệu ứng làm mờ hoặc mờ dần trong ảnh động sẽ cho biết rằng một số khung hiển thị không còn hoạt động nữa. Nếu đang di chuyển khung hiển thị đến các điểm khác nhau trên màn hình, bạn nên tạo ảnh động cho chuyển động để người dùng chú ý đến vị trí mới của khung hiển thị.

Bạn không phải chọn chỉ một ảnh động, vì khung chuyển đổi cho phép bạn kết hợp các hiệu ứng ảnh động trong tập hợp hiệu ứng chuyển đổi có chứa một nhóm các hiệu ứng chuyển đổi tuỳ chỉnh hoặc tích hợp sẵn riêng lẻ.

Để xác định một tập hợp hiệu ứng chuyển đổi trong XML, hãy tạo một tệp tài nguyên trong thư mục res/transitions/ và liệt kê các hiệu ứng chuyển đổi trong phần tử TransitionSet. Ví dụ: đoạn mã sau đây cho biết cách chỉ định một nhóm chuyển đổi có cùng hành vi với lớp AutoTransition:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="sequential">
    <fade android:fadingMode="fade_out" />
    <changeBounds />
    <fade android:fadingMode="fade_in" />
</transitionSet>

Để tăng cường hiệu ứng chuyển đổi được đặt thành đối tượng TransitionSet trong mã của bạn, hãy gọi hàm TransitionInflater.from() trong hoạt động của bạn. Lớp TransitionSet mở rộng từ lớp Transition, vì vậy, bạn có thể sử dụng lớp này với trình quản lý chuyển đổi giống như mọi thực thể Transition khác.

Áp dụng hiệu ứng chuyển đổi không có cảnh

Thay đổi hệ phân cấp khung hiển thị không phải là cách duy nhất để sửa đổi giao diện người dùng. Bạn cũng có thể thay đổi bằng cách thêm, sửa đổi và xoá khung hiển thị con trong hệ phân cấp hiện tại.

Ví dụ: bạn có thể triển khai một lượt tương tác tìm kiếm bằng một bố cục duy nhất. Bắt đầu với bố cục hiển thị trường nhập tìm kiếm và biểu tượng tìm kiếm. Để thay đổi giao diện người dùng nhằm hiện kết quả, hãy xoá nút tìm kiếm khi người dùng nhấn vào nút đó bằng cách gọi hàm ViewGroup.removeView() và thêm kết quả tìm kiếm bằng cách gọi hàm ViewGroup.addView().

Bạn có thể sử dụng phương pháp này nếu phương án thay thế là có hai hệ phân cấp gần như giống hệt nhau. Thay vì tạo và duy trì 2 tệp bố cục riêng biệt để tạo ra sự khác biệt nhỏ trong giao diện người dùng, bạn có thể có một tệp bố cục chứa hệ phân cấp khung hiển thị mà bạn sửa đổi trong mã.

Nếu thực hiện các thay đổi trong hệ phân cấp khung hiển thị hiện tại theo cách này, thì bạn không cần tạo cảnh. Thay vào đó, bạn có thể tạo và áp dụng quá trình chuyển đổi giữa hai trạng thái của hệ phân cấp khung hiển thị bằng cách sử dụng quá trình chuyển đổi bị trễ. Tính năng này của khung chuyển đổi bắt đầu với trạng thái hệ phân cấp khung hiển thị hiện tại, ghi lại những thay đổi bạn thực hiện đối với khung hiển thị và áp dụng hiệu ứng chuyển đổi tạo ảnh động cho các thay đổi khi hệ thống vẽ lại giao diện người dùng.

Để tạo một lượt chuyển đổi bị trễ trong một hệ phân cấp khung hiển thị, hãy làm theo các bước sau:

  1. Khi sự kiện kích hoạt quá trình chuyển đổi xảy ra, hãy gọi hàm TransitionManager.beginDelayedTransition(), cung cấp chế độ xem mẹ của mọi chế độ xem bạn muốn thay đổi và chế độ chuyển đổi sẽ sử dụng. Khung này lưu trữ trạng thái hiện tại của các khung hiển thị con và giá trị thuộc tính của các khung hiển thị đó.
  2. Chỉnh sửa các thành phần hiển thị con theo yêu cầu trong trường hợp sử dụng của bạn. Khung này ghi lại những thay đổi bạn thực hiện đối với các thành phần hiển thị con cũng như thuộc tính của các thành phần hiển thị đó.
  3. Khi hệ thống vẽ lại giao diện người dùng theo các thay đổi của bạn, khung này sẽ tạo ảnh động cho các thay đổi giữa trạng thái ban đầu và trạng thái mới.

Ví dụ sau cho thấy cách tạo ảnh động cho việc thêm khung hiển thị văn bản vào hệ phân cấp khung hiển thị bằng cách sử dụng quá trình chuyển đổi bị trễ. Đoạn mã đầu tiên cho thấy tệp định nghĩa bố cục:

res/layout/activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <EditText
        android:id="@+id/inputText"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    ...
</androidx.constraintlayout.widget.ConstraintLayout>

Đoạn mã tiếp theo cho thấy mã tạo ảnh động cho hoạt động thêm chế độ xem văn bản:

MainActivity

Kotlin

setContentView(R.layout.activity_main)
val labelText = TextView(this).apply {
    text = "Label"
    id = R.id.text
}
val rootView: ViewGroup = findViewById(R.id.mainLayout)
val mFade: Fade = Fade(Fade.IN)
TransitionManager.beginDelayedTransition(rootView, mFade)
rootView.addView(labelText)

Java

private TextView labelText;
private Fade mFade;
private ViewGroup rootView;
...
// Load the layout.
setContentView(R.layout.activity_main);
...
// Create a new TextView and set some View properties.
labelText = new TextView(this);
labelText.setText("Label");
labelText.setId(R.id.text);

// Get the root view and create a transition.
rootView = (ViewGroup) findViewById(R.id.mainLayout);
mFade = new Fade(Fade.IN);

// Start recording changes to the view hierarchy.
TransitionManager.beginDelayedTransition(rootView, mFade);

// Add the new TextView to the view hierarchy.
rootView.addView(labelText);

// When the system redraws the screen to show this update,
// the framework animates the addition as a fade in.

Xác định phương thức gọi lại trong vòng đời chuyển đổi

Vòng đời chuyển đổi tương tự như vòng đời hoạt động. Nó đại diện cho các trạng thái chuyển đổi mà khung theo dõi trong khoảng thời gian từ khi gọi đến hàm TransitionManager.go() đến khi hoàn tất ảnh động. Ở các trạng thái vòng đời quan trọng, khung sẽ gọi các lệnh gọi lại do giao diện TransitionListener xác định.

Lệnh gọi lại trong vòng đời chuyển đổi rất hữu ích, chẳng hạn như khi sao chép giá trị thuộc tính khung hiển thị từ hệ phân cấp khung hiển thị bắt đầu sang hệ phân cấp khung hiển thị kết thúc trong khi thay đổi cảnh. Bạn không thể chỉ sao chép giá trị từ khung hiển thị bắt đầu sang khung hiển thị trong hệ phân cấp khung hiển thị kết thúc, vì hệ phân cấp khung hiển thị kết thúc không được tăng cường cho đến khi quá trình chuyển đổi hoàn tất. Thay vào đó, bạn cần lưu trữ giá trị trong một biến rồi sao chép giá trị đó vào hệ phân cấp khung hiển thị kết thúc khi khung đã hoàn tất quá trình chuyển đổi. Để nhận được thông báo khi quá trình chuyển đổi hoàn tất, hãy triển khai hàm TransitionListener.onTransitionEnd() trong hoạt động của bạn.

Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho lớp TransitionListener.

Các điểm hạn chế

Phần này liệt kê một số hạn chế đã biết của khung chuyển đổi:

  • Ảnh động áp dụng cho SurfaceView có thể không xuất hiện chính xác. Các thực thể SurfaceView được cập nhật từ một luồng không phải giao diện người dùng, vì vậy, nội dung cập nhật có thể không đồng bộ với ảnh động của các khung hiển thị khác.
  • Một số loại chuyển đổi cụ thể có thể không tạo ra hiệu ứng ảnh động mong muốn khi áp dụng cho TextureView.
  • Các lớp mở rộng AdapterView, chẳng hạn như ListView, quản lý khung hiển thị con theo cách không tương thích với khung chuyển đổi. Nếu bạn cố tạo ảnh động cho khung hiển thị dựa trên AdapterView, thì màn hình thiết bị có thể ngừng phản hồi.
  • Nếu bạn cố đổi kích thước TextView bằng ảnh động, thì văn bản sẽ bật đến một vị trí mới trước khi đối tượng đổi kích thước hoàn toàn. Để tránh vấn đề này, đừng tạo ảnh động thay đổi kích thước của các khung hiển thị có chứa văn bản.