2012-09-14 26 views
12

में लंबन प्रभाव मैं अपने टुकड़ों के माध्यम से स्लाइड करते समय लंबन प्रभाव का अनुकरण करने की कोशिश कर रहा हूं, मैंने शुरुआत के बारे में पढ़ा है FakeDrag और fakeDragBy लेकिन ईमानदार होने के लिए, मुझे नहीं पता कि यह मेरी समस्या का सबसे अच्छा तरीका है ।एंड्रॉइड के व्यूपेजर

किसी ने भी ViewPager के साथ कुछ ऐसा किया है या इस बारे में संकेत है कि मैं इसे कैसे संपर्क करूँ?

धन्यवाद

उत्तर

11

यह सवाल थोड़ा पुराना है, लेकिन मैं यह पाया जब मैं वास्तव में ऐसा करने की कोशिश कर रहा था ...

मैं अपने खुद के समाधान लागू, मूल रूप से ViewPager और अधिभावी onDraw विस्तार।

आप एक सरल उदाहरण here

+0

आपको बहुत बहुत धन्यवाद! मैंने अपना खुद का कोड भी समाप्त कर दिया। मैं इसे एक समाधान के रूप में चिह्नित करूंगा। – pdj

+0

हाय, मुझे व्यूअर में एकाधिक लंबन प्रभाव बनाने के लिए क्या करना है? 2 या 3 की तरह? – Tsunaze

2

के साथ सभी कोड प्राप्त कर सकते हैं हो सकता है कि इस पुस्तकालय आप मदद कर सकते हैं:

https://github.com/garrapeta/ParallaxViewPager

+0

क्या आप कृपया बताएंगे कि इसे gradle फ़ाइल में कैसे जोड़ना है? –

2

आप इस पर एक नज़र ले जा सकते हैं:

https://github.com/luxsypher/ParallaxViewPager

आप अपने विचार के किसी भी तत्व पर लंबन प्रभाव लागू कर सकते हैं और उन्हें सभी भिन्नता दे सकते हैं NT गति

+0

इसका काम नहीं कर रहा:/ –

5

मुझे पता है कि यह थोड़ा पुराना है, लेकिन यह OnDraw विधि ओवरराइड करता है नहीं कि https://github.com/xgc1986/ParallaxPagerLibrary

को एक बार देख ले, और प्रभाव न केवल छवियों के साथ, यह देखने के हर तरह के साथ काम करता

mPager.setPageTransformer(false, new ParallaxTransformer(R.id.parallaxContent)); 

R.id.paraallaxContent काम करने के लिए किसी भी कोई ठोस संरचना की जरूरत नहीं है, तो आप इस प्रभाव

जब तक कि अन्य समाधान करना चाहते हैं दृश्य की आईडी है, और यह भी लेआउट स्वतंत्र

है

डेमो: youtube

2

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

2

इस पुस्तकालय x और y दिशाओं में पूरी तरह से अनुकूलन योग्य है और अल्फा प्रभाव भी शामिल है:

https://github.com/prolificinteractive/ParallaxPager

V0 के रूप में अधिष्ठापन (।7, अद्यतन के लिए README जाँच):

  1. एक Maven सेंट्रल निर्भरता के रूप में जोड़े Gradle साथ

  2. उपयोग ViewPager

  3. के बजाय लेआउट XML में एक ParallaxContainer प्रत्येक पृष्ठ के लिए एक लेआउट एक्सएमएल फ़ाइल बनाएं (x/y/अल्फा विशेषताओं को पृष्ठ के अंदर/बाहर जाने वाली प्रत्येक ऑब्जेक्ट के लिए अलग से सेट किया जा सकता है)

  4. में जोड़ने के लिए कुछ प्रतिलिपि/पेस्ट लाइनें हैं अपनी गतिविधि

parallax planet animation

+0

मैं इस पुस्तकालय को लागू किया और यह मेरा कोड है: parallaxContainer.setupChildren (getLayoutInflater(), R.layout.parallax_view_1, R.layout.parallax_view_2, R.layout.parallax_view_3); लेकिन यह केवल अंतिम दृश्य को सही दिखाता है। पहला दृश्य खाली है, दूसरा दृश्य वास्तव में तीसरे दृश्य का आधा है और अंतिम दृश्य देखा जाता है कि यह कैसे होना चाहिए। समस्या क्या है? यह सभी 3 विचारों को एक दूसरे से स्वतंत्र क्यों नहीं लोड करता है? –

+1

@rosualin मेरा पहला सुझाव लेआउट एक्सएमएल में उपयोग किए गए कस्टम विशेषताओं की जांच करना होगा। [सेटअप प्रक्रिया का यह चरण] (https://github.com/prolificinteractive/ParallaxPager#2-create-a-layout-xml-file-for-each-page) मदद कर सकता है। क्या रूट में 'xmlns: app' लाइन जोड़ा गया है? प्रत्येक लेआउट में विचारों के लिए 'x_in', आदि, मान क्या हैं? आपकी टिप्पणी के लिए धन्यवाद, उम्मीद है कि हम इसे काम कर सकते हैं। –

+0

समस्या यह थी कि यह एक सापेक्ष लेआउट था और रैखिक नहीं था, इसे रैखिक में बदल दिया और काम किया। मैंने रैखिक एक के अंदर कुछ रिश्तेदार लेआउट रखे हैं और उन्हें भी परेशानी है। लेकिन फिर मैंने सभी वस्तुओं को x_in, x_out (x, y, कोई फर्क नहीं पड़ता) के लिए मजबूर कर दिया और यह काम किया। स्पष्ट रूप से आपको इसे कॉल करने की आवश्यकता है भले ही आप अनुवाद नहीं चाहते हैं, इसलिए मैंने उन्हें केवल मूल्य 0 के साथ बुलाया और अब यह अच्छा है, बहुत बहुत धन्यवाद !! –

0

की 210 हो सकता है कि इस पुस्तकालय उपयोगी हो सकता है: https://github.com/matrixxun/ProductTour ?

यह चीजों को अलग-अलग स्थानांतरित करने के लिए "ViewPager.PageTransformer" का उपयोग करता है।

6

एक कस्टम पुस्तकालय का उपयोग किए बिना यह करने के लिए एक आसान तरीका है ViewPager.PageTransformer

मैं उनकी पृष्ठभूमि तत्व के लिए एक ही id उपयोग करने के लिए मेरी लेआउट बनाया लागू करने के लिए है। मेरे उदाहरण के लिए सभी पृष्ठभूमि छवियों जब मैं में जाना आईडी background

<ImageView 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:id="@+id/background" 
    android:src="@drawable/img12" 
    android:scaleType="fitXY"/> 

तो उपयोग करेगा ViewPager.PageTransformer लागू करने के लिए मैं संदर्भित कर सकते हैं कि छवि तो जैसे:

public class Transformer implements ViewPager.PageTransformer{ 
    @Override 
    public void transformPage(View page, float position) { 
     if(position >= -1 && position <= 1){ 
      page.findViewById(R.id.background).setTranslationX(-position * page.getWidth()/2); 
     } else { 
      page.setAlpha(1); 
     } 
    } 
} 

अंत में, मैं अपने ViewPager.PageTransformer मेरी ViewPager को असाइन इस तरह।

ViewPager pager = (ViewPager) findViewById(R.id.pager); 
pager.setPageTransformer(false, new Transformer()); 
+1

यह * सबसे अच्छा * जवाब है, धन्यवाद पाल – orelzion

+1

यह एक जीवन बचतकर्ता है .. बहुत बढ़िया। – Sanoop

+1

यह उत्तर स्वीकार किया जाना चाहिए! –

0

आप लंबन ViewPager एंड्रॉयड लाइब्रेरी का उपयोग कर सकते तुम सिर्फ एंड्रॉयड स्टूडियो के लिए build.gradle में रेखा से नीचे कुछ जोड़ने के इस लागू करने के लिए की जरूरत है।

allprojects { 
    repositories { 
     ... 
     maven { url 'https://jitpack.io' } 
    } 
} 

और फिर निर्भरता जोड़ने

dependencies { 
    compile 'com.github.demoNo:ParallaxViewPager:v1.0.0' 
} 

और अब आप सामान्य ViewPager

<li.yohan.parallax.ParallaxViewPager 
    android:id="@+id/viewPager" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 
ParallaxViewPager mPager = ((ParallaxViewPager) findViewById(R.id.pager)); 
mPager.setAdapter(new Adapter()); 

के रूप में इस पुस्तकालय का उपयोग कर सकते आप देख सकते हैं demo here

आप एक्सएमएल में सेट कर सकते हैं :

android:background="@drawable/background" 

या कोड में

setBackgroundResource(int resid) 
setBackground(Drawable background)