ActionBar को अगले स्तर पर ले जाएं

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

Google I / O पर होने के कारण, मुझे आखिरकार एक एप्लिकेशन मिला जो ActionBar में एक एनीमेशन तकनीक का उपयोग करता है। चलो ईमानदार हो, यह सचमुच मेरा दिमाग उड़ा दिया जब मैंने इसे पहली बार देखा। मुझे एक अच्छे, सूक्ष्म और बेहद उपयोगी एनिमेटेड प्रभाव से प्यार हो गया, और शायद खुद से भी ज्यादा! मुझे यकीन है कि आप उस एप्लिकेशन को जानते हैं जिसके बारे में मैं बात कर रहा हूं, क्योंकि इसे Google I / O के दौरान पेश किया गया था। यह Play Music ऐप है!

प्ले म्यूज़िक (v5.0) के नवीनतम अपडेट में कलाकार और एल्बम विवरण के साथ पूर्ण रीडिज़ाइन और पृष्ठों की उपस्थिति दिखाई दी है। यदि आप ऐसा पृष्ठ खोलते हैं, तो आप देखेंगे कि ActionBar शुरू में अदृश्य है और कलाकार या एल्बम का वर्णन करने वाली एक बड़ी छवि को ओवरले करता है। लेकिन जैसे ही आप पृष्ठ को स्क्रॉल करना शुरू करते हैं (यदि संभव हो), तो ActionBar धीरे-धीरे दिखाई देता है। ActionBar पूरी तरह से अपारदर्शी है जब छवि स्क्रीन के पीछे स्क्रॉल करती है।

इस तरह के एक ActionBar एनीमेशन के दो मुख्य लाभ हैं:

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

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


सैंपल एपीके डाउनलोड करें

आवेदन के लिए विषयों और शैलियों

जैसा कि आप आसानी से नोटिस कर सकते हैं, ऐसे प्रभाव को पुन: उत्पन्न करने के लिए, ActionBar को स्क्रीन की सामग्री को ओवरलैप करना होगा। यह android:windowActionBarOverlay XML विशेषता का उपयोग करके किया जाता है। नीचे दिया गया कोड उस विषय की परिभाषा का वर्णन करता है जिसका हम उपयोग करेंगे:
मान / थीम। xml

 <?xml version="1.0" encoding="utf-8"?> <resources> <style name="Theme.TranslucentActionBar" parent="@android:style/Theme.Holo.Light.DarkActionBar"> <item name="android:actionBarStyle">@style/Widget.ActionBar</item> </style> <style name="Theme.TranslucentActionBar.ActionBar" /> <style name="Theme.TranslucentActionBar.ActionBar.Overlay"> <item name="android:actionBarStyle">@style/Widget.ActionBar.Transparent</item> <item name="android:windowActionBarOverlay">true</item> </style> </resources> 

तार्किक रूप से, ActionBar शैली को मूल्यों / शैलियों में परिभाषित किया गया है। xml इस प्रकार है:
मान / स्टाइल। xml

 <?xml version="1.0" encoding="utf-8"?> <resources> <style name="Widget.ActionBar" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse"> <item name="android:background">@drawable/ab_background</item> </style> <style name="Widget.ActionBar.Transparent"> <item name="android:background">@android:color/transparent</item> </style> </resources> 

अंत में, हमें इस शैली को अपनी Activity पर लागू करने के लिए इस विषय का उपयोग करना चाहिए:
AndroidManifest.xml

 <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.cyrilmottier.android.translucentactionbar" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="17" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/Theme.TranslucentActionBar"> <activity android:name=".HomeActivity" android:theme="@style/Theme.TranslucentActionBar.ActionBar.Overlay"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> 

कृपया ध्यान दें कि विषयों और शैलियों की मदद से, हम स्टार्टअप पर फ़्लिकरिंग की सभी संभावित समस्याओं को दूर करते हैं (अधिक जानकारी के लिए " उचित रूप से लॉन्च किया गया एंड्रॉइड एप्लिकेशन " देखें)।

तैयार सामग्री प्राप्त करना

जैसा कि मैंने पहले बताया, एक ActionBar स्क्रॉल कंटेनर के पिक्सेल-बाय-पिक्सेल स्थिति पर सिंक्रनाइज़ किया जाता है। इस उदाहरण में, हम स्क्रॉल स्क्रॉल कंटेनर के रूप में स्क्रॉल का ScrollView करेंगे। इस कंटेनर का एक मुख्य नुकसान यह है कि आप स्क्रॉल श्रोता को सूचनाएं प्राप्त करने के लिए श्रोता को पंजीकृत नहीं कर सकते हैं जब स्क्रॉल राज्य बदल गया है। लेकिन मूल ScrollView NotifyingScrollView विरासत में मिली NotifyingScrollView बनाकर इसे आसानी से दरकिनार किया जा सकता है:
NotifyingScrollView.java

 package com.cyrilmottier.android.translucentactionbar; import android.content.Context; import android.util.AttributeSet; import android.widget.ScrollView; /** * @author Cyril Mottier */ public class NotifyingScrollView extends ScrollView { /** * @author Cyril Mottier */ public interface OnScrollChangedListener { void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt); } private OnScrollChangedListener mOnScrollChangedListener; public NotifyingScrollView(Context context) { super(context); } public NotifyingScrollView(Context context, AttributeSet attrs) { super(context, attrs); } public NotifyingScrollView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); if (mOnScrollChangedListener != null) { mOnScrollChangedListener.onScrollChanged(this, l, t, oldl, oldt); } } public void setOnScrollChangedListener(OnScrollChangedListener listener) { mOnScrollChangedListener = listener; } } 

अब हम अपने XML लेआउट में इस नए स्क्रॉल कंटेनर का उपयोग कर सकते हैं:
लेआउट / गतिविधि_होम। xml

 <?xml version="1.0" encoding="utf-8"?> <com.cyrilmottier.android.translucentactionbar.NotifyingScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/scroll_view" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:id="@+id/image_header" android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="centerCrop" android:src="@drawable/daft_punk"/> <! -- Some long content --> </LinearLayout> </com.cyrilmottier.android.translucentactionbar.NotifyingScrollView> 

दिखाएँ \ Hide ActionBar

अब हमारा अधिकांश टेम्पलेट तैयार है, और हम इन सभी घटकों को एक साथ जोड़ सकते हैं। ActionBar लिए उपयोग किया जाने वाला एल्गोरिथ्म काफी सरल है और इसमें केवल हमारे NotifyingScrollView स्क्रॉल NotifyingScrollView की पिक्सेल स्थिति के आधार पर अल्फा चैनल की गणना NotifyingScrollView । यह ध्यान दिया जाना चाहिए कि [0, image_height - actionbar_height] में स्क्रॉल कंटेनर बार के व्यवहार के कारण उत्पन्न होने वाले गलत मूल्यों से बचने के लिए प्रभावी स्क्रॉल दूरी [0, image_height - actionbar_height] से जुड़ी होनी चाहिए:
HomeActivity.java

 package com.cyrilmottier.android.translucentactionbar; import android.app.Activity; import android.graphics.drawable.Drawable; import android.os.Build; import android.os.Bundle; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout; import android.util.Log; import android.view.Menu; import android.widget.ScrollView; public class HomeActivity extends Activity { private Drawable mActionBarBackgroundDrawable; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_home); mActionBarBackgroundDrawable = getResources().getDrawable(R.drawable.ab_background); mActionBarBackgroundDrawable.setAlpha(0); getActionBar().setBackgroundDrawable(mActionBarBackgroundDrawable); ((NotifyingScrollView) findViewById(R.id.scroll_view)).setOnScrollChangedListener(mOnScrollChangedListener); } private NotifyingScrollView.OnScrollChangedListener mOnScrollChangedListener = new NotifyingScrollView.OnScrollChangedListener() { public void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt) { final int headerHeight = findViewById(R.id.image_header).getHeight() - getActionBar().getHeight(); final float ratio = (float) Math.min(Math.max(t, 0), headerHeight) / headerHeight; final int newAlpha = (int) (ratio * 255); mActionBarBackgroundDrawable.setAlpha(newAlpha); } }; } 

जैसा कि " ActionBar in motion " लेख में वर्णित है, ऊपर दिया गया यह कोड स्निपेट पूर्व JELLY_BEAN_MR1 उपकरणों के लिए काम नहीं करता है। वास्तव में, एक ActionBar आवश्यकता होने पर खुद को अमान्य नहीं करता है, क्योंकि यह Drawable लिए कॉलबैक के रूप में खुद को पंजीकृत नहीं करता है। आप इस समस्या के आसपास काम कर सकते हैं बस onCreate(Bundle) विधि में निम्नलिखित Callback संलग्न करें:
HomeActivity.java

 private Drawable.Callback mDrawableCallback = new Drawable.Callback() { @Override public void invalidateDrawable(Drawable who) { getActionBar().setBackgroundDrawable(who); } @Override public void scheduleDrawable(Drawable who, Runnable what, long when) { } @Override public void unscheduleDrawable(Drawable who, Runnable what) { } }; 

HomeActivity.java

 if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1) { mActionBarBackgroundDrawable.setCallback(mDrawableCallback); } 

आप पहले से ही कोड चला सकते हैं। हालाँकि परिणाम प्ले म्यूजिक ऐप के एनीमेशन जैसा ही दिखता है, हम इसे और बेहतर बनाने के लिए इसे निखारना जारी रख सकते हैं।

अंतिम ब्रश स्ट्रोक

ActionBar का कंट्रास्ट बढ़ाना

पारदर्शी ActionBar होने से डिज़ाइन संबंधी समस्याएं हो सकती हैं क्योंकि आप आमतौर पर उस पृष्ठभूमि के रंग के बारे में नहीं जानते हैं जिसे आप शीर्ष पर प्रदर्शित करेंगे। उदाहरण के लिए, आप वर्णन में सफेद कैप्शन और सफेद छवि के साथ पारदर्शी ActionBar प्रदर्शित कर सकते हैं। कहने की जरूरत नहीं है, यह ActionBar अदृश्य और बेकार बनाता है।
इस समस्या से बचने का सबसे आसान तरीका यह है कि छवि को शीर्ष पर थोड़ा गहरा बनाने के लिए संशोधित किया जाए। इस प्रकार, सबसे खराब स्थिति में (यानी एक सफेद छवि), ActionBar के शीर्ष पर ग्रे क्षेत्र इसकी सामग्री (नाम, चिह्न, बटन, आदि) को दिखाई देता है।
आप छवि के शीर्ष पर एक अंधेरे पारभासी ढाल को लागू करके ऐसा कर सकते हैं, जिसे हम Drawable XML विवरण में बनाएंगे:
drawable / gradient.xml

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <size android:height="100dp"/> <gradient android:angle="270" android:startColor="#8000" android:endColor="#0000"/> </shape> 

हम FrameLayout माध्यम से ढाल ओवरले लागू करते हैं:
लेआउट / गतिविधि_होम। xml

 <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/image_header" android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="centerCrop" android:src="@drawable/daft_punk"/> <View android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/gradient"/> </FrameLayout> 

स्क्रॉल करने से बचें

जिंजरब्रेड (एपीआई 9) में, एंड्रॉइड ने उपयोगकर्ता को यह सूचित करने के लिए एक नया तरीका पेश किया कि स्क्रॉल कंटेनर सीमाओं से परे जाने की कोशिश कर रहा है। EdgeEffect की अवधारणा को पहली बार पेश किया गया था (एपीआई 14 में एक एपीआई शुरू होता है), जिसमें ओवर-स्क्रॉल भी शामिल है। हालांकि यह कोई समस्या नहीं है, लेकिन सामान्य तौर पर, यह बहुत कष्टप्रद हो सकता है जब स्क्रॉल करने योग्य सामग्री के किनारों में से एक पृष्ठभूमि रंग से अलग हो।
आप बस इसे जल्दी से ScrollView अप ScrollView करके पुन: उत्पन्न कर सकते हैं। और आप देखेंगे कि स्क्रीन के शीर्ष पर कुछ सफेद (पृष्ठभूमि रंग) कैसे दिखाई देता है, क्योंकि छवि इसके परे स्क्रॉल की जाती है। व्यक्तिगत रूप से, मैं इसे इंटरफ़ेस की एक गड़बड़ मानता हूं और आमतौर पर इस व्यवहार को अक्षम करना पसंद करता हूं।
ओवर-स्क्रॉल से बचने का एक सबसे अच्छा तरीका यह है कि View#OVER_SCROLL_NEVER को बदलने के लिए View#setOverScrollMode(int) का View#OVER_SCROLL_NEVER । यद्यपि यह काम करता है, यह EdgeEffect को भी हटा EdgeEffect , जो नेत्रहीन स्वीकार्य नहीं हो सकता है। इसलिए, आवश्यक होने पर ओवर-स्क्रॉल मान को शून्य तक सीमित करने के लिए NotifyingScrollView को संशोधित करना आसान है:
NotifyingScrollView.java

 private boolean mIsOverScrollEnabled = true; public void setOverScrollEnabled(boolean enabled) { mIsOverScrollEnabled = enabled; } public boolean isOverScrollEnabled() { return mIsOverScrollEnabled; } @Override protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) { return super.overScrollBy( deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, mIsOverScrollEnabled ? maxOverScrollX : 0, mIsOverScrollEnabled ? maxOverScrollY : 0, isTouchEvent); } 

निष्कर्ष

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