🔲 🚙 🧘 आवेदन के अंदर स्क्रीन फिसलने 🖕🏾 👨🏻‍🌾 ◾️

आपका स्वागत है!

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

इस तरह के समाधान का एक उदाहरण एंड्रॉइड में काम करने वाली स्क्रीन के बीच स्विच कर रहा है, जहां एक स्क्रीन से दूसरी स्क्रीन पर जाने के लिए यह दाएं या बाएं इशारे को करने के लिए पर्याप्त है। इस तरह के समाधान के संभावित कार्यान्वयन पर इस पोस्ट में चर्चा की जाएगी।

ज्वाइन करने के बजाय

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

ऊपर दिखाए गए एप्लिकेशन में, चार असंबंधित दृश्य हैं , जिनके बीच की आवाजाही को स्क्रीन पर दाएं / बाएं इशारों द्वारा किया जाता है। दृश्य की सामग्री मनमानी हो सकती है, लेकिन धारणा की सादगी के लिए, मैंने उन्हें रंगीन और संख्याबद्ध बना दिया।

ऐसी कार्यक्षमता बुनियादी नहीं है, अर्थात एक तैयार-निर्मित एम्बेडेड समाधान नहीं है। और भी, अजीब तरह से पर्याप्त है, यह बहुत आम नहीं है, और, शायद, इस वजह से, यह इंटरनेट पर पर्याप्त रूप से कवर नहीं है।

डिज़ाइन

उपरोक्त आवेदन को लागू करने के लिए, आपको निम्नलिखित कदम उठाने होंगे:

व्यू के बीच सुविधाजनक भंडारण और आवाजाही के लिए एक कंटेनर खोजें या लागू करें
प्राप्त उपयोगकर्ता के हावभाव और सूचनाओं के आधार पर निष्कर्ष निकाला गया कि किस दिशा में "कदम" देखें
स्क्रीन के बीच आंदोलनों की कल्पना करने के लिए एनीमेशन जोड़ें

सौभाग्य से, एक कंटेनर जो हमारी आवश्यकताओं को पूरा करता है, पहले से ही एंड्रॉइड शस्त्रागार में मौजूद है, इसे ViewFlipper कहा जाता है। एक खाली प्रोजेक्ट बनाएं और ViewFlipper तत्व को मुख्य लेआउट में जोड़ें :

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/main_layout" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ViewFlipper android:id="@+id/flipper" android:layout_width="fill_parent" android:layout_height="fill_parent"/> </LinearLayout>

अब चार विचार बनाएं जिनके बीच हम चलेंगे, मेरे उदाहरण में उनका रूप है:

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background="@android:color/white" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:text="1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_centerInParent="true" android:textSize="140px" android:textStyle="bold"/> </RelativeLayout>

अगला, आपको ViewFlipper के साथ मौजूदा दृश्य को लिंक करना होगा। ऐसा करने के लिए, आधार गतिविधि के OnCreate विधि में निम्नलिखित कोड जोड़ें:

 public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //  listener ,     LinearLayout mainLayout = (LinearLayout) findViewById(R.id.main_layout); mainLayout.setOnTouchListener(this); //   ViewFlipper flipper = (ViewFlipper) findViewById(R.id.flipper); //  View       flipper LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); int layouts[] = new int[]{ R.layout.first, R.layout.second, R.layout.third, R.layout.fourth }; for (int layout : layouts) flipper.addView(inflater.inflate(layout, null)); }

अब हम शो कॉल के बीच में स्थानांतरित कर सकते हैं शोप्न () और शोप्रेग () फ्लिपर ऑब्जेक्ट के तरीके।

उपयोगकर्ता इशारों पर इन घटनाओं को संसाधित करने के लिए, आपको इन विधियों को लागू करना होगा:

 boolean onTouch(View view, MotionEvent event)

इस विधि में, MotionEvent वर्ग की वस्तु में, सभी आवश्यक जानकारी और एक इशारा है।

क्योंकि अगर हमें यह समझने की आवश्यकता है कि इशारे को दाईं या बाईं ओर किया गया था, तो हम इसे बहुत सरलता से करेंगे: हम एक्स अक्ष के साथ समन्वय को बचाएंगे जब हम स्क्रीन पर क्लिक करते हैं, और स्क्रीन जारी होने के बाद समन्वय के साथ तुलना करते हैं। यदि प्रारंभिक मूल्य अधिक है, तो यह बाईं ओर एक आंदोलन है, अन्यथा दाईं ओर। कोड काफी सरल लगता है:

 public boolean onTouch(View view, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: //    , ..   // fromPosition -    X    fromPosition = event.getX(); break; case MotionEvent.ACTION_UP: //   , ..   float toPosition = event.getX(); if (fromPosition > toPosition) flipper.showNext(); else if (fromPosition < toPosition) flipper.showPrevious(); default: break; } return true; }

यह एनीमेशन जोड़ने के लिए बनी हुई है। ViewFlipper, ViewAnimator के सभी वंशजों की तरह , तरीकों का समर्थन करता है: setInAimimation (...) और setOutAnimation (...) , जिसके माध्यम से आप स्क्रीन में प्रवेश करने के दृश्य और स्क्रीन से गायब होने के दृश्य के लिए एनिमेशन सेट कर सकते हैं। लेकिन कब से चूंकि हमारा एनीमेशन इशारों के आधार पर भिन्न होगा, इसलिए आपको वर्तमान ऑपरेशन के आधार पर इसे हर बार फिर से निर्दिष्ट करना होगा। यानी OnTouch विधि को निम्नानुसार संशोधित करने की आवश्यकता है:

 ... if (fromPosition > toPosition) { flipper.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.go_next_in)); flipper.setOutAnimation(AnimationUtils.loadAnimation(this,R.anim.go_next_out)); flipper.showNext(); } else if (fromPosition < toPosition) { flipper.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.go_prev_in)); flipper.setOutAnimation(AnimationUtils.loadAnimation(this,R.anim.go_prev_out)); flipper.showPrevious(); } ...

जहां R.anim। * उपस्थिति और गायब होने के दृश्य के एनीमेशन के साथ संसाधन। मैं सभी चार विकल्प नहीं दूंगा, मैं केवल पहला एक ही दूंगा (बाकी सभी उदाहरण परियोजना में देखे जा सकते हैं जिन्हें मैं पोस्ट से संलग्न करूंगा):

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="400"/> <alpha android:fromAlpha="1.0" android:toAlpha="1.0" android:duration="400" /> </set>

सब कुछ तैयार है! आप यहां से एक उदाहरण के साथ परियोजना डाउनलोड कर सकते हैं ।

युपीडी। एक उंगली जारी किए बिना ViewFlipper विकल्प (onTouch विधि को बदलना):

 ... //  ACTION_UP case MotionEvent.ACTION_MOVE: float toPosition = event.getX(); // MOVE_LENGTH -    X,      .  //     MOVE_LENGTH = 150 if ((fromPosition - MOVE_LENGTH) > toPosition) { fromPosition = toPosition; flipper.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.go_next_in)); flipper.setOutAnimation(AnimationUtils.loadAnimation(this,R.anim.go_next_out)); flipper.showNext(); } else if ((fromPosition + MOVE_LENGTH) < toPosition) { fromPosition = toPosition; flipper.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.go_prev_in)); flipper.setOutAnimation(AnimationUtils.loadAnimation(this,R.anim.go_prev_out)); flipper.showPrevious(); } ...

UPD 2. यदि आप अगले पृष्ठ के पूर्वावलोकन के साथ एक स्लाइड पसंद करते हैं, तो आप ViewFlipper के बिना समाधान देख सकते हैं, ViewGroup और ScrollTo के आधार पर, एक उदाहरण पाया जा सकता है, उदाहरण के लिए, यहां ।

निष्कर्ष

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

लेकिन मरहम में एक मक्खी अभी भी मौजूद है। सबसे पहले, यदि आप पहली बार मेरे उदाहरण को देखते हैं, तो यह अनुमान लगाना लगभग असंभव है कि स्लाइडिंग वहां मौजूद है (यह एक उदाहरण है और मैंने ऐसा कोई कार्य यहां सेट नहीं किया है), और इसलिए स्लाइडिंग के उपयोग के लिए अन्य यूआई-समाधान की उपस्थिति की आवश्यकता होती है जो इसे समझाते हैं उदाहरण के लिए, स्लाइडिंग, उदाहरण के लिए, एक ही एंड्रॉइड होम स्क्रीन पर एक "स्लाइडर संकेतक" होता है, जो दिखाता है कि उपयोगकर्ता वर्तमान में किस स्क्रीन पर है। दूसरी बात, अगर उस दृश्य पर नियंत्रण है जिसे दबाने, स्क्रॉल करने आदि की अपनी प्रतिक्रिया है, तो ViewFlipper के अंदर ऑनटच विधि पर कॉल चाइल्ड व्यू के अंदर इसके पहले के अवरोधन द्वारा अवरुद्ध हो जाएगी, इसलिए आपको इस घटना को फेंकने के बारे में अतिरिक्त रूप से विचार करना होगा " शीर्ष “ViewFlipper के लिए।

आवेदन के अंदर स्क्रीन फिसलने

ज्वाइन करने के बजाय

डिज़ाइन

निष्कर्ष

More articles: