การเปลี่ยนกิจกรรมในแอปดีไซน์ Material มอบการเชื่อมต่อทางภาพระหว่าง สถานะต่างๆ ผ่านการเคลื่อนไหวและการแปลงระหว่างองค์ประกอบทั่วไป คุณสามารถระบุภาพเคลื่อนไหวที่กำหนดเองสำหรับการเปลี่ยนเข้าและออก และสำหรับ การเปลี่ยนแปลงขององค์ประกอบที่แชร์ระหว่างกิจกรรม
รูปที่ 1 ต การเปลี่ยนด้วยองค์ประกอบที่แชร์
- การเปลี่ยนแบบ Enter กําหนดมุมมองของกิจกรรม
เข้าสู่ฉาก ตัวอย่างเช่น ใน
explode
ให้ป้อนการเปลี่ยน มุมมองจะเข้าสู่ฉากจากภายนอก และบินเข้าศูนย์กลางของ บนหน้าจอ - การเปลี่ยนการออกจะกำหนดวิธีที่มุมมองในการออกจากกิจกรรม
เพื่อสร้างฉาก ตัวอย่างเช่น ในการเปลี่ยนการออก
explode
มุมมอง ออกจากฉากให้ห่างจากจุดกึ่งกลาง - การเปลี่ยนองค์ประกอบที่แชร์จะกำหนดวิธีที่ข้อมูลพร็อพเพอร์ตี้
ที่แชร์กันระหว่างกิจกรรม 2 รายการ เปลี่ยนผ่านระหว่างกิจกรรมเหล่านี้ ตัวอย่างเช่น
หากกิจกรรม 2 รายการมีรูปภาพเดียวกันในตำแหน่งและขนาดต่างกัน
การเปลี่ยนองค์ประกอบที่แชร์
changeImageTransform
รายการจะแปลและ ปรับขนาดภาพได้อย่างราบรื่นระหว่างกิจกรรมเหล่านี้
Android รองรับการเปลี่ยนเข้าและออกต่อไปนี้
explode
: เลื่อนมุมมองเข้าหรือออกจากกึ่งกลางของฉากslide
: เลื่อนมุมมองเข้าหรือออกจากขอบด้านใดด้านหนึ่งของ ด้วยfade
: เพิ่มหรือนำมุมมองออกจากฉากโดยการเปลี่ยนมุมมอง ความทึบแสง
ระบบรองรับการเปลี่ยนที่ขยายคลาส Visibility
เป็นการเปลี่ยนเข้าหรือออก
สำหรับข้อมูลเพิ่มเติม โปรดดูข้อมูลอ้างอิง API สำหรับ
Transition
Android ยังรองรับการเปลี่ยนองค์ประกอบที่แชร์ต่อไปนี้ด้วย
changeBounds
: ทำให้การเปลี่ยนแปลงขอบเขตเลย์เอาต์ของเป้าหมายเคลื่อนไหว ครั้งchangeClipBounds
: ทำให้การเปลี่ยนแปลงในขอบเขตคลิปของเป้าหมายเคลื่อนไหว ครั้งchangeTransform
: แสดงการเปลี่ยนแปลงขนาดและการหมุนของ การดูเป้าหมายchangeImageTransform
: แสดงการเปลี่ยนแปลงขนาดและขนาดของ รูปภาพเป้าหมาย
เมื่อคุณเปิดใช้การเปลี่ยนกิจกรรมในแอป การเฟดข้ามที่เป็นค่าเริ่มต้น การเปลี่ยนเปิดใช้งานระหว่างกิจกรรมที่เข้าและออก
รูปที่ 2 การเปลี่ยนฉากที่มีองค์ประกอบที่แชร์ 1 รายการ
สำหรับโค้ดตัวอย่างที่เคลื่อนไหวระหว่างกิจกรรมโดยใช้องค์ประกอบที่แชร์ โปรดดู ActivitySceneTransitionBasic
ตรวจสอบเวอร์ชันของระบบ
API การเปลี่ยนกิจกรรมมีให้บริการใน Android 5.0 (API 21) ขึ้นไป หากต้องการรักษาความเข้ากันได้กับ Android เวอร์ชันก่อนหน้าไว้ โปรดตรวจสอบ
ระบบ version
ขณะรันไทม์ก่อนคุณ
เรียกใช้ API สำหรับฟีเจอร์ใดๆ ต่อไปนี้
Kotlin
// Check if we're running on Android 5.0 or higher if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { // Apply activity transition } else { // Swap without transition }
Java
// Check if we're running on Android 5.0 or higher if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { // Apply activity transition } else { // Swap without transition }
ระบุการเปลี่ยนที่กำหนดเอง
ขั้นแรก ให้เปิดใช้งานการเปลี่ยนเนื้อหาของหน้าต่างด้วย android:windowActivityTransitions
เมื่อคุณกำหนดรูปแบบที่สืบทอดมาจากธีมวัสดุ คุณสามารถระบุ
เข้า ออก และทรานซิชันที่แชร์ร่วมกันในคำจำกัดความรูปแบบ
<style name="BaseAppTheme" parent="android:Theme.Material"> <!-- enable window content transitions --> <item name="android:windowActivityTransitions">true</item> <!-- specify enter and exit transitions --> <item name="android:windowEnterTransition">@transition/explode</item> <item name="android:windowExitTransition">@transition/explode</item> <!-- specify shared element transitions --> <item name="android:windowSharedElementEnterTransition"> @transition/change_image_transform</item> <item name="android:windowSharedElementExitTransition"> @transition/change_image_transform</item> </style>
การเปลี่ยน change_image_transform
ในตัวอย่างนี้กำหนดไว้ดังต่อไปนี้
<!-- res/transition/change_image_transform.xml --> <!-- (see also Shared Transitions below) --> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeImageTransform/> </transitionSet>
องค์ประกอบ changeImageTransform
สอดคล้องกับ
ชั้นเรียนChangeImageTransform
ดูข้อมูลเพิ่มเติมได้ที่ API
ข้อมูลอ้างอิงสำหรับ Transition
หากต้องการเปิดใช้งานการเปลี่ยนเนื้อหาของหน้าต่างในโค้ดของคุณ ให้เรียกเมธอด
ฟังก์ชัน Window.requestFeature()
:
Kotlin
// Inside your activity (if you did not enable transitions in your theme) with(window) { requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS) // Set an exit transition exitTransition = Explode() }
Java
// Inside your activity (if you did not enable transitions in your theme) getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS); // Set an exit transition getWindow().setExitTransition(new Explode());
ในการระบุการเปลี่ยนในโค้ดของคุณ ให้เรียกใช้ฟังก์ชันเหล่านี้ด้วย
ออบเจ็กต์ Transition
รายการ:
Window.setEnterTransition()
Window.setExitTransition()
Window.setSharedElementEnterTransition()
Window.setSharedElementExitTransition()
setExitTransition()
และ
ฟังก์ชัน setSharedElementExitTransition()
กำหนดการออก
สำหรับกิจกรรมการโทร setEnterTransition()
และ
setSharedElementEnterTransition()
จะกำหนดคำสั่ง Enter
สำหรับกิจกรรมที่ถูกเรียก
คุณต้องเปิดใช้งานเนื้อหาของหน้าต่างเพื่อให้การเปลี่ยนเกิดผลอย่างเต็มประสิทธิภาพ จะเปลี่ยนทั้งในกิจกรรมการโทรและกิจกรรมที่มีการเรียก มิเช่นนั้น การเรียก กิจกรรมจะเริ่มการเปลี่ยนผ่าน แต่คุณเห็นหน้าต่าง การเปลี่ยน เช่น การปรับขนาดหรือการจางลง
หากต้องการเริ่มการเปลี่ยนแบบ Enter โดยเร็วที่สุด ให้ใช้
Window.setAllowEnterTransitionOverlap()
ในกิจกรรมที่ถูกเรียก ซึ่งจะช่วยให้คุณเปลี่ยนเข้าสู่เนื้อหาได้อย่างเข้มข้นยิ่งขึ้น
เริ่มกิจกรรมโดยใช้การเปลี่ยน
ถ้าคุณเปิดใช้การเปลี่ยน และตั้งค่าการเปลี่ยนการออกสำหรับกิจกรรม การเปลี่ยนเปิดใช้งานเมื่อคุณเริ่มต้นกิจกรรมอื่น ดังนี้
Kotlin
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle())
Java
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
หากคุณตั้งค่าการเปลี่ยนเป็น Enter สำหรับกิจกรรมที่ 2 การเปลี่ยนนั้นก็จะ
เปิดใช้งานเมื่อกิจกรรมเริ่มต้น วิธีปิดใช้การเปลี่ยนเมื่อเริ่มต้น
กิจกรรมอื่น โปรดระบุแพ็กเกจตัวเลือก null
เริ่มกิจกรรมด้วยองค์ประกอบที่แชร์
เพื่อสร้างภาพเคลื่อนไหวการเปลี่ยนหน้าจอระหว่างกิจกรรม 2 อย่างที่มี องค์ประกอบที่แชร์ ให้ทำดังนี้
- เปิดใช้การเปลี่ยนเนื้อหาของหน้าต่างในธีม
- ระบุการเปลี่ยนองค์ประกอบที่แชร์ในสไตล์ของคุณ
- กำหนดการเปลี่ยนของคุณเป็นทรัพยากร XML
- กำหนดชื่อทั่วไปให้กับองค์ประกอบที่ใช้ร่วมกันในเลย์เอาต์ทั้ง 2 แบบด้วย
android:transitionName
- ใช้ฟังก์ชัน
ActivityOptions.makeSceneTransitionAnimation()
Kotlin
// Get the element that receives the click event val imgContainerView = findViewById<View>(R.id.img_container) // Get the common element for the transition in this activity val androidRobotView = findViewById<View>(R.id.image_small) // Define a click listener imgContainerView.setOnClickListener( { val intent = Intent(this, Activity2::class.java) // Create the transition animation - the images in the layouts // of both activities are defined with android:transitionName="robot" val options = ActivityOptions .makeSceneTransitionAnimation(this, androidRobotView, "robot") // Start the new activity startActivity(intent, options.toBundle()) })
Java
// Get the element that receives the click event final View imgContainerView = findViewById(R.id.img_container); // Get the common element for the transition in this activity final View androidRobotView = findViewById(R.id.image_small); // Define a click listener imgContainerView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(this, Activity2.class); // Create the transition animation - the images in the layouts // of both activities are defined with android:transitionName="robot" ActivityOptions options = ActivityOptions .makeSceneTransitionAnimation(this, androidRobotView, "robot"); // Start the new activity startActivity(intent, options.toBundle()); } });
สำหรับมุมมองแบบไดนามิกที่แชร์ที่คุณสร้างขึ้นในโค้ด ให้ใช้
View.setTransitionName()
เพื่อระบุชื่อองค์ประกอบทั่วไปในทั้ง 2 แบบ
กิจกรรม
หากต้องการกลับภาพเคลื่อนไหวการเปลี่ยนฉากเมื่อคุณทำกิจกรรมที่ 2 เสร็จแล้ว ให้เรียกใช้
Activity.finishAfterTransition()
แทน Activity.finish()
เริ่มกิจกรรมที่มีองค์ประกอบที่แชร์หลายรายการ
เพื่อสร้างภาพเคลื่อนไหวการเปลี่ยนฉากระหว่าง 2 กิจกรรมที่มีจำนวนมากกว่า
องค์ประกอบที่แชร์มากกว่า 1 รายการ ให้กำหนดองค์ประกอบที่แชร์ในเลย์เอาต์ทั้ง 2 แบบด้วย
android:transitionName
หรือใช้แอตทริบิวต์
View.setTransitionName()
ในทั้ง 2 กิจกรรม และ
สร้าง
ActivityOptions
ดังนี้
Kotlin
// Rename the Pair class from the Android framework to avoid a name clash import android.util.Pair as UtilPair ... val options = ActivityOptions.makeSceneTransitionAnimation(this, UtilPair.create(view1, "agreedName1"), UtilPair.create(view2, "agreedName2"))
Java
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(view1, "agreedName1"), Pair.create(view2, "agreedName2"));