इस दस्तावेज़ में, MotionLayout को इस्तेमाल करने के उदाहरण दिए गए हैं.
हर उदाहरण में, मोशन दिखाने वाला एक वीडियो शामिल होता है. साथ ही, मोशन सीन और लेआउट के लिए कोड भी दिया जाता है.
सामान्य मोशन
इस उदाहरण में एक व्यू है. इसे छूकर और खींचकर, हॉरिज़ॉन्टल तौर पर ले जाया जा सकता है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
कस्टम एट्रिब्यूट - backgroundColor
यह उदाहरण, बेसिक मोशन के उदाहरण से मिलता-जुलता है. बेसिक मोशन के साथ-साथ, व्यू के हिलने पर उसके बैकग्राउंड का रंग भी बदलता है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
ImageFilterView - इमेज ट्रांज़िशन
इस उदाहरण में, ImageFilterView की सैचुरेशन वैल्यू को बदलने का तरीका दिखाया गया है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
कीफ़्रेम की पोज़िशन
इस उदाहरण में, मोशन के दौरान व्यू की Y पोज़िशन बदलने के लिए <KeyFrameSet> का इस्तेमाल किया गया है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
मुख्य-फ़्रेम इंटरपोलेशन
यह उदाहरण, मुख्य फ़्रेम की पोज़िशन के उदाहरण पर आधारित है. इसमें व्यू ट्रांज़िशन में रोटेशन और स्केलिंग को जोड़ा गया है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
मुख्य फ़्रेम साइकल
इस उदाहरण में, व्यू में वेव जैसी मोशन जोड़ने के लिए <KeyCycle> एलिमेंट जोड़े गए हैं.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
CoordinatorLayout (1/2)
इस उदाहरण में, ऐप्लिकेशन बार में मोशन जोड़ने के लिए, मौजूदा AppBarLayout में MotionLayout जोड़ा गया है. इस उदाहरण के बारे में ज़्यादा जानकारी, MotionLayout का परिचय (भाग III) में दी गई है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
CoordinatorLayout (2/2)
इस उदाहरण में, ऐप्लिकेशन बार में मोशन जोड़ने के लिए, मौजूदा AppBarLayout में MotionLayout जोड़ा गया है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
DrawerLayout (1/2)
इस उदाहरण में, DrawerLayout में मोशन जोड़ने का तरीका बताया गया है. इस उदाहरण के बारे में ज़्यादा जानकारी, MotionLayout का परिचय (भाग III) में दी गई है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
DrawerLayout (2/2)
इस उदाहरण में, DrawerLayout में मोशन जोड़ने का तरीका बताया गया है.
- लेआउट एक्सएमएल देखें.
MotionSceneमुख्य कॉन्टेंट के लिए एक्सएमएल देखें.- मेन्यू के लिए
MotionSceneएक्सएमएल देखें.
साइड पैनल
इस उदाहरण में, मुख्य कॉन्टेंट वाले हिस्से को दाईं ओर खींचने पर साइड पैनल दिखाने का तरीका बताया गया है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
पैरालैक्स
इस उदाहरण में, पैरलैक्स बैकग्राउंड दिखाया गया है. इसमें बैकग्राउंड की अलग-अलग लेयर अलग-अलग स्पीड से मूव करती हैं.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
ViewPager
इस उदाहरण में बताया गया है कि ViewPager टैब के बीच स्वाइप करते समय, मोशन कैसे जोड़ा जा सकता है.
इस उदाहरण के बारे में ज़्यादा जानकारी, MotionLayout का परिचय (भाग III) में दी गई है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
ViewPager - Lottie
इस उदाहरण में बताया गया है कि ViewPager टैब के बीच स्वाइप करते समय, मोशन कैसे जोड़ा जा सकता है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
जटिल मोशन (1/3)
इस उदाहरण में, पिछले उदाहरणों के एलिमेंट को मिलाकर, मुश्किल मोशन दिखाया गया है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
जटिल मोशन (2/3)
इस उदाहरण में, पिछले उदाहरणों के एलिमेंट को मिलाकर, मुश्किल मोशन दिखाया गया है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
जटिल मोशन (3/3)
इस उदाहरण में, पिछले उदाहरणों के एलिमेंट को मिलाकर, मुश्किल मोशन दिखाया गया है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
फ़्रैगमेंट ट्रांज़िशन (1/2)
इस उदाहरण में बताया गया है कि फ़्रैगमेंट के बीच ट्रांज़िशन करने के लिए, MotionLayout का इस्तेमाल कैसे किया जा सकता है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
फ़्रैगमेंट ट्रांज़िशन (2/2)
इस उदाहरण में बताया गया है कि फ़्रैगमेंट के बीच ट्रांज़िशन करने के लिए, MotionLayout का इस्तेमाल कैसे किया जा सकता है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
YouTube की तरह मोशन
इस उदाहरण में, कॉम्पैक्ट व्यू और फ़ुल-स्क्रीन मोड के बीच ट्रांज़िशन करने का तरीका दिखाया गया है. साथ ही, इसमें अतिरिक्त कॉन्टेंट भी शामिल है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
KeyTrigger
इस उदाहरण में, फ़्लोटिंग ऐक्शन बटन को दिखाने और छिपाने का तरीका बताया गया है. ऐसा तब किया जाता है, जब ट्रांज़िशन, प्रोग्रेस थ्रेशोल्ड को पार कर जाता है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.
कई राज्यों पर
इस उदाहरण में, यह तय करने के लिए कि कौनसा मोशन लागू करना है, स्टेट का इस्तेमाल करने का तरीका दिखाया गया है.
- लेआउट एक्सएमएल देखें.
MotionSceneएक्सएमएल देखें.