android - ViewPager स्लाइडिंग में अनुवाद देखें




android-viewpager android-animation (3)

मैं ViewPager की स्लाइडिंग पेज एनीमेशन को कस्टमाइज़ करने पर एक उदाहरण पढ़ रहा था जो पृष्ठ को एक निश्चित राशि में अनुवाद करने के लिए ViewPager उदाहरण डॉक्स से है । विशेष रूप से, यह ZoomOutPageTransformer नामक एक कार्यान्वयन के बारे में है जिसे ZoomOutPageTransformer setPageTransformer() माध्यम से एक setPageTransformer() पर सेट किया जा सकता है कि कैसे पेज स्लाइड (इसमें ज़ूम एनीमेशन शामिल करना)।

इस तरह अंतिम परिणाम दिखने वाला है:

अब, वे बताते हैं कि वे यह कैसे करेंगे:

transformPage() आपके कार्यान्वयन में, आप स्क्रीन पर पेज की स्थिति के आधार पर कौन से पन्नों को बदलने की ज़रूरत है, यह निर्धारित करके कस्टम स्लाइड एनिमेशन बना सकते हैं, जो ट्रांसफॉर्म पेज transformPage() विधि की position पैरामीटर से प्राप्त की जाती है।

position पैरामीटर यह इंगित करता है कि स्क्रीन के केंद्र के सापेक्ष किसी दिए गए पृष्ठ कहां स्थित है। यह एक गतिशील संपत्ति है जो पृष्ठों के माध्यम से उपयोगकर्ता स्क्रॉल के रूप में बदलता है। जब कोई पृष्ठ स्क्रीन को भरता है, तो उसकी position मान 0 होता है। जब कोई पृष्ठ स्क्रीन के दाईं ओर से खींचा जाता है, तो उसकी position मान 1 होता है। यदि उपयोगकर्ता स्क्रॉल करें, आधे रास्ते पृष्ठों के बीच एक और दो, पृष्ठ में एक की position है -0.5 और पृष्ठ दो में 0.5 की position है। स्क्रीन पर पृष्ठों की position के आधार पर, आप setAlpha() , setTranslationX() , या setScaleY() जैसी विधियों के साथ पृष्ठ गुणों को सेट करके कस्टम स्लाइड एनिमेशन बना सकते हैं।

और यह PageTransformer का कार्यान्वयन है जिसे उन्होंने प्रदान किया है:

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                    (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

मुसीबत:

मैं बयान को समझने में असमर्थ हूं,

view.setTranslationX(horzMargin - vertMargin / 2);

मेरी समझ यह थी कि position पैरामीटर के लिए 1.0 का मान स्क्रीन चौड़ाई को कवर करने के बराबर है, यानी, w इसलिए, यदि किसी पृष्ठ का position की एक्स इकाइयों को स्थानांतरित कर रहा है तो पिक्सेल / डीपी के संदर्भ में, w * x होगा लेकिन वे अनुवाद राशि गणना के लिए कुछ मार्जिन गणना का उपयोग कर रहे हैं

क्या कोई यह समझा सकता है कि उन्होंने यह गणना कैसे की है और मेरी गणना में क्या गलत होगा?


जैसा कि मैंने आपके प्रश्न और जवाब को फिर से पढ़ा है, मुझे यकीन नहीं है कि मैंने वास्तव में आपके प्रश्न को संबोधित किया है। मुझे लगता है कि यह कुछ मददगार हो सकता है, हालांकि मैं इसे पोस्ट कर रहा हूं।

इस के अनुसार, स्थिति = 0 का अर्थ है कि यह पृष्ठ सामने और केंद्र है (और इस उदाहरण के लिए, पूर्ण स्क्रीन)। हम केवल 1 से +1 रेंज में स्थिति के साथ एक पृष्ठ की परवाह करते हैं, अन्यथा यह ध्यान से देखने के लिए बहुत दूर है। आप इसे 1 और पिछली परिस्थितियों में देख सकते हैं जहां अल्फा 0 पर सेट है, इस दृश्य को पूरी तरह पारदर्शी बनाते हैं।

मैं बयान को समझने में असमर्थ हूं,

view.setTranslationX(horzMargin - vertMargin / 2);

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

        float vertMargin = pageHeight * (1 - scaleFactor) / 2;
        float horzMargin = pageWidth * (1 - scaleFactor) / 2;
        if (position < 0) {
            view.setTranslationX(horzMargin - vertMargin / 2);
        } else {
            view.setTranslationX(-horzMargin + vertMargin / 2);
        }

हालांकि मैं छोटा-सा अंतर देख सकता हूं, यदि मैं बारीकी से देखा, तो मुझे अनुवाद का उपयोग करने पर ध्यान नहीं दिया जाएगा। MIN_SCALE को 0.5 (या उससे कम) तक सेट करके एक अंतर का अधिक देखा जा सकता है।

मेरी गणना में क्या गलत होगा?

संभवत: जब तक आप इसे थोड़े नतीजे पर सीमित करते हैं, जैसे कि वर्तमान कोड करता है हालांकि ध्यान रखें कि ViewPager वर्ग setTranslationX() बजाय एनीमेशन का प्राथमिक नियंत्रक है


GitHub एनीमेशन के लिए एक लाइब्रेरी प्रदान करता है जिसे आप किसी भी गणना के बिना चाहते हैं
आपको अपने कस्टम व्यू पेजर पेजट्रांसफ़ॉर्मर बनाने की आवश्यकता नहीं है
बस अपने app/build.gradle फ़ाइल में लाइब्रेरी को नीचे जोड़ें

compile 'com.ToxicBakery.viewpager.transforms:view-pager-transforms:[email protected]'

MainActivity.java

public class MainActivity extends Activity {

    private static final String KEY_SELECTED_PAGE = "KEY_SELECTED_PAGE";
    private static final String KEY_SELECTED_CLASS = "KEY_SELECTED_CLASS";

    private int mSelectedItem;
    private ViewPager mPager;
    private PageAdapter mAdapter;

    @SuppressWarnings("deprecation")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        int selectedPage = 0;
        if (savedInstanceState != null) {
            mSelectedItem = savedInstanceState.getInt(KEY_SELECTED_CLASS);
            selectedPage = savedInstanceState.getInt(KEY_SELECTED_PAGE);
        }


        setContentView(R.layout.activity_main);

        mAdapter = new PageAdapter(getFragmentManager());

        mPager = (ViewPager) findViewById(R.id.container);
        mPager.setAdapter(mAdapter);
        try {
            mPager.setPageTransformer(true, new TransformerItem(ZoomOutSlideTransformer.class).clazz.newInstance());
        } catch (InstantiationException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
        mPager.setCurrentItem(selectedPage);

    }


    public static class PlaceholderFragment extends Fragment {

        private static final String EXTRA_POSITION = "EXTRA_POSITION";
        private static final int[] COLORS = new int[] { 0xFF33B5E5, 0xFFAA66CC, 0xFF99CC00, 0xFFFFBB33, 0xFFFF4444 };

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            final int position = getArguments().getInt(EXTRA_POSITION);
            final TextView textViewPosition = (TextView) inflater.inflate(R.layout.fragment_main, container, false);
            textViewPosition.setText(Integer.toString(position));
            textViewPosition.setBackgroundColor(COLORS[position - 1]);

            return textViewPosition;
        }

    }

    private static final class PageAdapter extends FragmentStatePagerAdapter {

        public PageAdapter(FragmentManager fragmentManager) {
            super(fragmentManager);
        }

        @Override
        public Fragment getItem(int position) {
            final Bundle bundle = new Bundle();
            bundle.putInt(PlaceholderFragment.EXTRA_POSITION, position + 1);

            final PlaceholderFragment fragment = new PlaceholderFragment();
            fragment.setArguments(bundle);

            return fragment;
        }

        @Override
        public int getCount() {
            return 5;
        }

    }

    private static final class TransformerItem {

        final String title;
        final Class<? extends PageTransformer> clazz;

        public TransformerItem(Class<? extends PageTransformer> clazz) {
            this.clazz = clazz;
            title = clazz.getSimpleName();
        }

        @Override
        public String toString() {
            return title;
        }

    }

}

activity_main.xml

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="MainActivity" />

fragment_main.xml

<TextView 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"
android:gravity="center"
android:text="@string/app_name"
android:textColor="@android:color/white"
android:textSize="72sp"
tools:context="MainActivity$PlaceholderFragment" />

मुझे आशा है कि यह आपकी सहायता कर सकता है। :-)


यदि आप स्केल फ़ैक्टर द्वारा रीकटाइज को हटाना चाहते हैं,

मान लें मूल ऊँचाई पृष्ठ हैइट और चौड़ाई पेजवर्थ है;

नई सिकुड़ ऊँचाई स्केल होगी फॅक्टर * पेजहाइट

shrinkMarginTopBottom = pageHeight - scaleFactor * pageHeight = pageHeight(1 - scaleFactor);

and I assume it will be equally shirnked from bottom and top;

shrinkMarginTop = shrinkMarginTopBottom/2;
which is equal to below mentioned formula
float vertMargin = pageHeight * (1 - scaleFactor) / 2;

तो मार्जिन गणनाओं को समझाते हुए पोस्ट करें

float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
    view.setTranslationX(horzMargin - vertMargin / 2);
} else {
    view.setTranslationX(-horzMargin + vertMargin / 2);
}

एक्स अनुवाद में एनीमेशन प्रभाव पाने के लिए पृष्ठ की स्थिति 0 और 1 के लिए ऑफसेट होना चाहिए और कुछ दूरी इसलिए दोनों के लिए मार्जिन घटाना है ... विभाजन होता है क्योंकि + ve और -ve x अनुवाद सटीक मार्जिन तक जोड़ता है

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





android-animation