Android
ViewPager

परिचय

टिप्पणियों

टुकड़ों के साथ मूल ViewPager उपयोग

एक ViewPager एक गतिविधि में कई टुकड़े दिखाने की अनुमति देता है जिसे बाएं या दाएं फ्लिप करके नेविगेट किया जा सकता है। एक ViewPager एक का उपयोग करके या तो दृश्य या टुकड़े की फ़ीड करने की आवश्यकता है PagerAdapter ।

हालाँकि दो और विशिष्ट कार्यान्वयन हैं जो आपको FragmentPagerAdapter और FragmentStatePagerAdapter FragmentPagerAdapter का उपयोग करने के मामले में सबसे उपयोगी मिलेंगे। जब एक फ्रैगमेंट को पहली बार तत्काल करने की आवश्यकता होती है, तो getItem(position) को प्रत्येक स्थिति के लिए बुलाया जाएगा, जिसे तुरंत करने की आवश्यकता होती है। getCount() विधि पृष्ठ की कुल संख्या वापस कर देगी ताकि ViewPager जानता है कि कितने टुकड़े दिखाए जाने की आवश्यकता है।

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

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

मूल लेआउट में वर्णित के अनुसार अपने लेआउट में एक ViewPager जोड़ें:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout> 
    <android.support.v4.view.ViewPager
        android:id="@+id/vpPager"> 
    </android.support.v4.view.ViewPager>
</LinearLayout>

फिर एडेप्टर को परिभाषित करें जो यह निर्धारित करेगा कि एडेप्टर के प्रत्येक पृष्ठ के लिए कितने पृष्ठ मौजूद हैं और कौन से टुकड़े प्रदर्शित करने हैं।

public class MyViewPagerActivity extends AppCompatActivity {
    private static final String TAG = MyViewPagerActivity.class.getName();

    private MyPagerAdapter mFragmentAdapter;
    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);    
        setContentView(R.layout.myActivityLayout);

        //Apply the Adapter
        mFragmentAdapter = new MyPagerAdapter(getSupportFragmentManager());    
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setAdapter(mFragmentAdapter);
    }

    private class MyPagerAdapter extends FragmentPagerAdapter{

        public MyPagerAdapter(FragmentManager supportFragmentManager) {
            super(supportFragmentManager);
        }

        // Returns the fragment to display for that page
        @Override
        public Fragment getItem(int position) {
            switch(position) {
                case 0:
                    return new Fragment1();

                case 1:
                    return new Fragment2();

                case 2:
                    return new Fragment3();

                default:
                    return null;
            }
        }

        // Returns total number of pages    
        @Override
        public int getCount() {
            return 3;
        }

    }
}

compile 'com.android.support:support-v13:25.3.1'

यदि आप android.support.v4.app.Fragment का उपयोग कर रहे हैं। तो आपको इस निर्भरता को जोड़ना होगा:

compile 'com.android.support:support-fragment:25.3.1'

TabLayout के साथ ViewPager

एक TabLayout का उपयोग आसान नेविगेशन के लिए किया जा सकता है।
आप TabLayout.newTab() विधि का उपयोग करके अपने एडॉप्टर में प्रत्येक टुकड़े के लिए टैब सेट कर सकते हैं लेकिन इस कार्य के लिए एक और अधिक सुविधाजनक और आसान तरीका है जो TabLayout.setupWithViewPager() ।

हर बार जब आप इसे कॉल करते हैं, तो आपके ViewPager जुड़े एडेप्टर की सामग्री के अनुसार टैब बनाकर और हटाकर यह विधि सिंक हो जाएगी।
साथ ही, यह एक कॉलबैक सेट करेगा ताकि हर बार जब उपयोगकर्ता पृष्ठ को फ़्लिप करे, तो संबंधित टैब का चयन किया जाएगा।

बस एक लेआउट को परिभाषित करें

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        app:tabMode="scrollable" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1" />

</LinearLayout>

फिर FragmentPagerAdapter को लागू करें और ViewPager लागू करें:

public class MyViewPagerActivity extends AppCompatActivity {
    private static final String TAG = MyViewPagerActivity.class.getName();

    private MyPagerAdapter mFragmentAdapter;
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);    
        setContentView(R.layout.myActivityLayout);

        // Get the ViewPager and apply the PagerAdapter
        mFragmentAdapter = new MyPagerAdapter(getSupportFragmentManager());    
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setAdapter(mFragmentAdapter);

        // link the tabLayout and the viewpager together
        mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mTabLayout.setupWithViewPager(mViewPager);
    }

    private class MyPagerAdapter extends FragmentPagerAdapter{

        public MyPagerAdapter(FragmentManager supportFragmentManager) {
            super(supportFragmentManager);
        }

         // Returns the fragment to display for that page
        @Override
        public Fragment getItem(int position) {
            switch(position) {
                case 0:
                    return new Fragment1();

                case 1:
                    return new Fragment2();

                case 2:
                    return new Fragment3();

                default:
                    return null;
            }
        }
        
        // Will be displayed as the tab's label
        @Override
        public CharSequence getPageTitle(int position) {
            switch(position) {
                case 0:
                    return "Fragment 1 title";

                case 1:
                    return "Fragment 2 title";

                case 2:
                    return "Fragment 3 title";

                default:
                    return null;
            }
        }

        // Returns total number of pages 
        @Override
        public int getCount() {
            return 3;
        }

    }
}

वरीयता के साथ ViewPager

अभी हाल तक, का उपयोग कर android.support.v4.app.FragmentPagerAdapter एक के उपयोग को रोका जा सकेगा PreferenceFragment FragmentPagerAdapter में इस्तेमाल किया टुकड़े में से एक के रूप में।

समर्थन v7 लाइब्रेरी के नवीनतम संस्करणों में अब PreferenceFragmentCompat क्लास शामिल है, जो ViewPager और FragmentPagerAdapter के v4 संस्करण के साथ काम करेगा।

उदाहरण टुकड़ा है कि फैली PreferenceFragmentCompat :

import android.os.Bundle; 
import android.support.v7.preference.PreferenceFragmentCompat; 
import android.view.View; 
 
public class MySettingsPrefFragment extends PreferenceFragmentCompat { 
  
    public MySettingsPrefFragment() { 
        // Required empty public constructor 
    } 
 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        addPreferencesFromResource(R.xml.fragment_settings_pref); 
    } 
 
    @Override 
    public void onCreatePreferences(Bundle bundle, String s) { 
 
    } 
}

अब आप इस Fragment का उपयोग android.support.v4.app.FragmentPagerAdapter उपवर्ग में कर सकते हैं:

private class PagerAdapterWithSettings extends FragmentPagerAdapter {

    public PagerAdapterWithSettings(FragmentManager supportFragmentManager) {
        super(supportFragmentManager);
    }

    @Override
    public Fragment getItem(int position) {
        switch(position) {
            case 0:
                return new FragmentOne();

            case 1:
                return new FragmentTwo();

            case 2:
                return new MySettingsPrefFragment();

            default:
                return null;
        }
    }
    
    // .......

}

एक ViewPager जोड़ना

सुनिश्चित करें कि निम्न निर्भरता आपके ऐप की build.gradle फ़ाइल में निर्भरता के तहत build.gradle गई है:

compile 'com.android.support:support-core-ui:25.3.0'

फिर अपने गतिविधि लेआउट में ViewPager जोड़ें:

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

फिर अपने PagerAdapter को परिभाषित करें:

public class MyPagerAdapter extends PagerAdapter {

    private Context mContext;

    public CustomPagerAdapter(Context context) {
        mContext = context;
    }

    @Override
    public Object instantiateItem(ViewGroup collection, int position) {
 
        // Create the page for the given position. For example:
        LayoutInflater inflater = LayoutInflater.from(mContext);
        ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.xxxx, collection, false);
        collection.addView(layout);
        return layout;
    }

    @Override
    public void destroyItem(ViewGroup collection, int position, Object view) {
        // Remove a page for the given position. For example:
        collection.removeView((View) view);
    }

    @Override
    public int getCount() {
        //Return the number of views available.
        return numberOfPages;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        // Determines whether a page View is associated with a specific key object
        // as returned by instantiateItem(ViewGroup, int). For example:
        return view == object;
    }    
}

अंत में अपनी गतिविधि में ViewPager सेटअप करें:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(new MyPagerAdapter(this));
    }
}

एक डॉट्स संकेतक के साथ ViewPager

हम सभी की जरूरत है: ViewPager , TabLayout और चयनित और डिफ़ॉल्ट डॉट्स के लिए 2 दराज ।

सबसे पहले, हमें TabLayout को अपने स्क्रीन लेआउट में जोड़ना होगा, और इसे ViewPager साथ जोड़ना होगा। हम इसे दो तरीकों से कर सकते हैं:

ViewPager में नेस्टलैबआउट

<android.support.v4.view.ViewPager
    android:id="@+id/photos_viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</android.support.v4.view.ViewPager>

इस मामले में TabLayout अपने आप ViewPager साथ TabLayout जाएगा, लेकिन TabLayout , ViewPager बगल में होगा, उसके ऊपर नहीं।

अलग टैबलैटआउट

<android.support.v4.view.ViewPager
    android:id="@+id/photos_viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

इस मामले में, हम TabLayout कहीं भी रख सकते हैं, लेकिन हमें TabLayout को ViewPager साथ प्रोग्रामेटिक रूप से कनेक्ट TabLayout

ViewPager pager = (ViewPager) view.findViewById(R.id.photos_viewpager);
PagerAdapter adapter = new PhotosAdapter(getChildFragmentManager(), photosUrl);
pager.setAdapter(adapter);

TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(pager, true);

एक बार जब हमने अपना लेआउट तैयार कर लिया, तो हमें अपने डॉट्स तैयार करने होंगे। : तो हम तीन फ़ाइलों को बनाने के selected_dot.xml , default_dot.xml और tab_selector.xml ।

selected_dot.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@color/colorAccent"/>
        </shape>    
    </item>
</layer-list>

default_dot.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
        </shape>    
    </item>
</layer-list>

tab_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/selected_dot"
          android:state_selected="true"/>

    <item android:drawable="@drawable/default_dot"/>
</selector>

अब हमें अपने xml लेआउट में TabLayout को कोड की केवल 3 पंक्तियों को जोड़ना होगा और आपका काम हो जाएगा।

app:tabBackground="@drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"

सेटअप OnPageChangeListener

यदि आपको चुने गए पृष्ठ में बदलाव के लिए सुनना है तो आप ViewPager.OnPageChangeListener श्रोता को ViewPager पर लागू कर सकते हैं:

viewPager.addOnPageChangeListener(new OnPageChangeListener() {
    
    // This method will be invoked when a new page becomes selected. Animation is not necessarily complete.
    @Override
    public void onPageSelected(int position) {
         // Your code
    }
    
    // This method will be invoked when the current page is scrolled, either as part of 
    // a programmatically initiated smooth scroll or a user initiated touch scroll.
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
         // Your code
    }
    
    // Called when the scroll state changes. Useful for discovering when the user begins
    // dragging, when the pager is automatically settling to the current page, 
    // or when it is fully stopped/idle.
    @Override
    public void onPageScrollStateChanged(int state) {
         // Your code
    }
});