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