एंड्रॉइड फ्रेगमेंट एनीमेशन

सभी को शुभ दिन। मैं इस पोस्ट को Android के लिए टुकड़ों के विषय में समर्पित करना चाहता हूं। Habré और कुछ लेखों में पहले से ही अनुवाद हैं जो उल्लेख करते हैं कि एंड्रॉइड के लिए टुकड़ों के साथ काम करना कैसे शुरू करें। उदाहरण के लिए, लेख 3.0 Android में Fragments API । इसमें यह वर्णन होता है कि वे कौन से टुकड़े हैं और Android के किस संस्करण में वे उपलब्ध हैं, इसलिए जो अभी तक नहीं पहुंचे हैं, यदि वे चाहें, तो परिचित हो सकते हैं, मैं इसे अपने पोस्ट में नहीं बताऊंगा। इसलिए, मैं तुरंत व्यापार के लिए नीचे उतरूंगा।

शुरुआत हो रही है

मैं केवल संक्षेप में कहूंगा कि टुकड़े उपयोगकर्ता यूआई के घटक हैं जिनका उपयोग उपयोगकर्ता डेटा प्रदर्शित करने के लिए गतिविधि वर्ग के साथ किया जा सकता है, लेकिन उनका जीवन चक्र इस पर निर्भर नहीं करता है। जिस कार्यक्षमता के साथ टुकड़े होते हैं, उनके पास गतिविधि की तुलना में उनके साथ काम करने के लिए एक व्यापक कार्यक्षमता होती है, इसलिए डेवलपर्स के लिए उनका उपयोग कोई छोटा महत्व नहीं है यदि वे चाहते हैं कि उनके आवेदन में वर्तमान मानकों द्वारा अधिक आधुनिक उपयोगकर्ता इंटरफ़ेस हो।

अब पोस्ट के सार पर चलते हैं। मेरी राय में, Google डेवलपर्स के टुकड़े टुकड़े को स्वयं प्रदर्शित करने वाले एनीमेशन के लिए उत्कृष्ट समर्थन से संपन्न थे। इस पर आगे चर्चा की जाएगी। मैं इस विषय पर हैबर में पोस्ट ढूंढ रहा था, लेकिन मुझे कुछ नहीं मिला, इसलिए अब मैं अपना ज्ञान साझा करूंगा।

एक प्रोजेक्ट बनाएं

चलो एक छोटा प्रोजेक्ट बनाते हैं। मैंने अपने सैमसंग नेक्सस एस के लिए एक परियोजना बनाई, वहां मेरे पास एंड्रॉइड 4.1.2 का एक संस्करण है, मैंने वास्तव में इसका इस्तेमाल किया (Api Level 16)। मैंने प्रोजेक्ट को ही फ्रैगमेंट्सएनीमेशनटेस्ट कहा।

प्रदर्शन के लिए, हमें मुख्य गतिविधि और उसके लेआउट, टुकड़े के एक जोड़े, प्रत्येक के अपने लेआउट और एनीमेशन के लिए एक्सएमएल-फाइलों के एक जोड़े की आवश्यकता है, जिसके बारे में मैं बाद में चर्चा करूंगा।

एप्लिकेशन इस तरह दिखाई देगा: स्क्रीन पर टुकड़ों में से एक को प्रदर्शित किया जाएगा, उनके बीच स्विच करना एक नियमित बटन का उपयोग करके किया जाएगा, और तदनुसार, टुकड़ों का स्विच एनीमेशन प्रभाव के साथ होगा।

सबसे पहले, गतिविधि में मुख्य गतिविधि के तत्वों को रखें_मैं। Xml फ़ाइल:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <FrameLayout android:id="@+id/fragCont" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_weight="1" > </FrameLayout> <Button android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="SWITCH FRAGMENTS" android:layout_toRightOf="@id/fragCont"/> </RelativeLayout> 

कोड से पता चलता है कि मुख्य लेआउट का उपयोग किया जाता है - RelativeLayout, जो टुकड़ों के साथ काम करते समय काफी सुविधाजनक होता है; दो मानक फ्रेमऑलआउट तत्व इसमें रखे गए हैं - वास्तव में, यह टुकड़ों के लिए एक कंटेनर होगा और एक बटन जिसके द्वारा हम आपस में टुकड़ों को स्विच करेंगे। अब तक, सब कुछ बेहद सरल होना चाहिए।

आगे हम अपने अंशों में लगे रहेंगे। आइए उनके और खुद कक्षाओं के लिए मार्कअप बनाएं:
fragment1.xml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#5A4"> <TextView android:layout_width="200dp" android:layout_height="fill_parent" android:text="fragment 1"/> </LinearLayout> 

fragment2.xml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#A55"> <TextView android:layout_width="200dp" android:layout_height="fill_parent" android:text="fragment 2"/> </LinearLayout> 

दोनों टुकड़ों के लिए, कोड लगभग समान है, वे केवल उस पाठ में भिन्न होते हैं जो अपनी पहचान और पृष्ठभूमि के रंग के लिए टुकड़े में ही प्रदर्शित होगा ताकि एनीमेशन को स्पष्ट रूप से देखा जा सके।

Fragment1.java

 public class Fragment1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_1, null); } } 

Fragment2.java

 public class Fragment2 extends Fragment{ @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_2, null); } } 

कक्षाओं में, सब कुछ भी स्पष्ट होना चाहिए यदि आप टुकड़ों के विषय से परिचित हैं। वे केवल यह इंगित करते हैं कि किसी विशिष्ट टुकड़े को प्रदर्शित करते समय किस लेआउट का उपयोग किया जाएगा और वह यह है।

अब स्वाद के लिए आगे बढ़ें। आइए मुख्य गतिविधि वर्ग के साथ काम करें, यहाँ इसका कोड है:

 public class MainActivity extends Activity { private Fragment fragment2; private Fragment fragment1; private FragmentTransaction ft; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); fragment1 = new Fragment1(); fragment2 = new Fragment2(); ft = getFragmentManager().beginTransaction(); ft.setCustomAnimations(R.animator.slide_in_left, R.animator.slide_in_right); // ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN); ft.replace(R.id.fragCont, fragment1); ft.addToBackStack(null); ft.commit(); Button btn = (Button) findViewById(R.id.btn); btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { ft = getFragmentManager().beginTransaction(); ft.setCustomAnimations(R.animator.slide_in_left, R.animator.slide_in_right); // ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN); if(fragment1.isVisible()){ ft.replace(R.id.fragCont, fragment2); }else{ ft.replace(R.id.fragCont, fragment1); } ft.commit(); } }); } } 

हम विश्लेषण करेंगे कि वास्तव में हमारी गतिविधि में क्या हो रहा है। सबसे पहले, दोनों खंड बनाए जाते हैं, जो पहले से ही उल्लेख किया गया है, एक-दूसरे को वैकल्पिक रूप से बदल देगा। अगला, लाइन फीट निर्दिष्ट करें = getFragmentManager ()। BeginTransaction () हमें FragmentTransaction मिलता है, जिसके साथ हम अपने टुकड़ों के साथ बातचीत कर सकते हैं, लेकिन यह उस लेख में है जो मैंने पहले उल्लेख किया था। निम्नलिखित कोड को पार्स करने के लिए आगे बढ़ने से पहले, मैं एक छोटा विषयांतर करूंगा।

टुकड़े प्रदर्शित करने के लिए एनिमेशन बनाने के दो तरीके हैं:

• पहला तरीका सेटट्रांसिशन (इंट ट्रांजिट) विधि का उपयोग करके एक मानक एनीमेशन कनेक्ट करना है। FragmentTransaction वर्ग में कई पूर्वनिर्धारित एनिमेशन हैं।
• दूसरी विधि वास्तव में इस विषय में हमें क्या दिलचस्पी है, कस्टम एनीमेशन का कार्यान्वयन। SetCustomAnimations () विधि का उपयोग करके कार्यान्वित किया गया।

अब हमारे कोड के विश्लेषण पर वापस जाएं। आइए अगली पंक्ति ft.setCustomAnimations (R.animator.slide_in_left, R.animator.slide_in_right) पर देखें, यहां एनिमेशन उन सभी अंशों से जुड़ा है, जिन्हें लेन-देन पूरा होने से पहले संसाधित किया जाएगा, लाइन ft.commit () को। वास्तव में क्या हो रहा है? दो मापदंडों को सेट किया जाता है। पहला पैरामीटर दिखाई देने वाले टुकड़े को प्रदर्शित करने के लिए एनीमेशन का वर्णन करता है, और दूसरा उस टुकड़े के लिए एनीमेशन का वर्णन करता है जो बदलता है, अर्थात। डिवाइस स्क्रीन से हटा दिया गया। यह उल्लेख करना महत्वपूर्ण है कि टुकड़े दिखाई देने से पहले इस विधि को बुलाया जाना चाहिए, अन्यथा एनीमेशन लागू नहीं किया जाएगा।

स्टॉक टिप्पणियों की एक जोड़ी वर्णित एनीमेशन के साथ खेलने की कोशिश करना है, बस उन्हें अनसुना करें और पिछली पंक्ति पर टिप्पणी करें - ft.setCustomAnimations (R.animator.slide_in_left, R.animator.slide_in_right), दोनों मामलों में, हालांकि यह वैकल्पिक।

आइए सक्रियण कोड को अंत तक ले जाएं और एनीमेशन बनाने के लिए आगे बढ़ें।

एनीमेशन स्थापित करने के बाद, टुकड़ा दिखाया गया है, स्टैक में जोड़ा गया है और सभी परिवर्तनों को प्रदर्शित करने के लिए लेनदेन पूरा हो गया है। फिर हम अपने बटन को इनिशियलाइज़ करते हैं और इसे बटन क्लिक इवेंट के लिए एक श्रोता को देते हैं, जिसके अंदर खंडों को बदलने के लिए एक कोड होता है, एक बटन के क्लिक पर हम लेन-देन शुरू करते हैं, एनीमेशन कनेक्ट करते हैं और दिखाए गए एक के विपरीत टुकड़े को बदलते हैं। कोड सरल है, इसलिए कोई गहन स्पष्टीकरण की आवश्यकता नहीं है।

एनीमेशन बनाएं

हमारे विषय के मुख्य भाग पर चलते हैं। एनीमेशन स्वयं बनाना सीखें। आपके द्वारा यहां एनीमेशन बनाने का तरीका थोड़ा अलग है कि हम इसे एंड्रॉइड के पुराने संस्करणों में कैसे करते थे। कार्यान्वयन इस प्रकार है। शुरू करने के लिए, आपको एप्लिकेशन संसाधन फ़ोल्डर में एनिमेटर फ़ोल्डर बनाने की आवश्यकता है, यह इस तरह दिखेगा - Res / animator /। यहां हमें एक्सएमएल फाइलें डालनी चाहिए जो यह बताएंगी कि एनीमेशन कैसे खेला जाना चाहिए। उन्हें वहाँ रखो:
slide_in_left.xml

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:propertyName="y" android:valueType="floatType" android:valueTo="0" android:valueFrom="-1280" android:duration="1500"/> </set> 

और Slide_in_right.xml

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="together"> <objectAnimator android:interpolator="@android:anim/accelerate_interpolator" android:propertyName="alpha" android:valueType="floatType" android:valueTo="0" android:duration="300"/> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:propertyName="x" android:valueType="floatType" android:valueTo="1280" android:valueFrom="0" android:duration="1500"/> </set> 

अब हम उनका विस्तार से विश्लेषण करेंगे। विज़ुअल इफ़ेक्ट्स के एलिमेंट्स को ऑब्जेक्ट ऑब्जेक्ट टैग में वर्णित किया गया है, प्रत्येक ऐसा टैग एक नए एनीमेशन इफ़ेक्ट के विवरण की बात करता है। अब आइए विशेषताओं को स्वयं देखें। Slide_in_left.xml फ़ाइल में पहली विशेषता एक इंटरपोलर है, इसमें कई मान हैं, आप उनके बारे में संपत्ति एनीमेशन के प्रलेखन से अधिक जान सकते हैं। इंटरपोलर एक निश्चित समय के लिए एक निश्चित तरीके से हमारे टुकड़े को प्रदर्शित करने के लिए जिम्मेदार है। अगला, हमारे पास गुणनाम विशेषता है, यह इंगित करता है कि एनीमेशन के दौरान हम किस खंड के विशेष गुण को बदल देंगे, हमारे उदाहरण में, y पहला है, और valueType इंगित करता है कि हमारे पास किस प्रकार का पैरामीटर है। प्रो एंड्रॉइड 4 पुस्तक में, इस स्थिति को इस तथ्य से तर्क दिया जाता है कि यदि आप दृश्य वर्ग में सेटएक्स () विधि को देखते हैं, तो यह स्पष्ट हो जाता है कि यह एक प्रकार का फ्लोट लेता है, सेटी के साथ (), यह भी मामला है, इसलिए फ्लोटटाइप का मान।

अगला महत्वहीन गुण नहीं हैं मान और मूल्य से, वे इंगित करते हैं कि किस मूल्य से संपत्ति के मूल्य में निर्दिष्ट मूल्य में परिवर्तन होता है, हमारे पहले मामले में यह वाई है। यदि मान पैरामीटर निर्दिष्ट नहीं है, तो मान वर्तमान के बराबर लिया जाता है। हमारे मामले में, valueFrom -1280 है, जिसका अर्थ है कि y अक्ष के साथ टुकड़े की आवाजाही मूल्य -1280 के साथ शुरू होगी, यह मान इसलिए चुना गया क्योंकि यह डिवाइस की स्क्रीन के बाहर है और जब तक y बराबर नहीं हो जाता तब तक आंदोलन होगा। 1500 मिलीसेकंड के लिए हमारे टुकड़े के ऊपरी बाएं कोने के लिए 0। और अंत में, अवधि - विशेषता इंगित करती है कि हमारे एनिमेटेड प्रभाव कितने समय तक मिलीसेकंड में रहेंगे।

और आखिरी बारीकियों का वर्णन करना चाहता हूं। किसी भी एनीमेशन विवरण फ़ाइलों को देखते हुए, आप सेट टैग को नोटिस कर सकते हैं, जिसमें सभी एनीमेशन प्रभाव शामिल हैं, यह प्रभावों को संयोजित करने या उन्हें अलग करने के लिए कार्य करता है। Slide_in_right.xml फ़ाइल सेट टैग में ऑर्डरिंग विशेषता का उपयोग करती है, हमारे मामले में इसका एक साथ मूल्य है, जिसका अर्थ है कि एक ही समय में प्रभाव खेलना, इसके विपरीत एक क्रमिक मूल्य है जिसे एनीमेशन में प्रभावों के अनुक्रमिक प्रदर्शन की आवश्यकता होती है, जो कुछ मामलों में बहुत सुविधाजनक है।

वास्तव में बस इतना ही। Slide_in_right.xml फ़ाइल में एक उदाहरण है कि आप एनीमेशन के लिए अन्य गुणों का उपयोग कैसे कर सकते हैं, जैसे कि अल्फा चैनल। मुझे उम्मीद है कि यह लेख उन लोगों के लिए उपयोगी है जो इस बात की परवाह करते हैं कि इसका आवेदन कैसा दिखेगा।

जैसा कि आप स्वयं समझते हैं, प्रिय हैम्ब्रेजरी, स्क्रीनशॉट काम के परिणाम को प्रदर्शित करने में सक्षम नहीं होंगे।

लेख लिखने के दौरान उपयोग किए जाने वाले साहित्य और स्रोतों का उल्लेख लेख के दौरान ही किया गया था।