Android में ViewPager2 का उपयोग




android-viewpager android-viewpager2 (3)

अद्यतन 5

ViewPager2 के साथ TabLayout का उपयोग कैसे करें

नमूना कोड

नीचे dependencies उपयोग करें

implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01'

नमूना कोड

एक्सएमएल लेआउट

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

गतिविधि

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import java.util.ArrayList;

public class MyActivity extends AppCompatActivity {

    ViewPager2 myViewPager2;
    MyAdapter MyAdapter;
    private ArrayList<String> arrayList = new ArrayList<>();

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

        myViewPager2 = findViewById(R.id.view_pager);

        arrayList.add("Item 1");
        arrayList.add("Item 2");
        arrayList.add("Item 3");
        arrayList.add("Item 4");
        arrayList.add("Item 5");

        MyAdapter = new MyAdapter(this, arrayList);


        myViewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

        myViewPager2.setAdapter(MyAdapter);
    }
}

आउटपुट

ViewPager2 के साथ टैबलैट

डॉक्स से

ViewPager2

नए विशेषताएँ

  • दाएँ-से-बाएँ (RTL) लेआउट समर्थन
  • ऊर्ध्वाधर अभिविन्यास समर्थन
  • InformDataSetChanged पूरी तरह कार्यात्मक

एपीआई बदल जाता है

  • FragmentStateAdapter जगह लेता है
  • RecyclerView.Adapter , PagerAdapter जगह लेता है
  • registerOnPageChangeCallback जगह addPageChangeListener

नमूना कोड

ViewPager2 लिए नवीनतम dependencies जोड़ें

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {

    private Context context;
    private ArrayList<String> arrayList = new ArrayList<>();

    public MyAdapter(Context context, ArrayList<String> arrayList) {
        this.context = context;
        this.arrayList = arrayList;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.list_item, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        holder.tvName.setText(arrayList.get(position));
    }

    @Override
    public int getItemCount() {
        return arrayList.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {
        TextView tvName;

        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            tvName = itemView.findViewById(R.id.tvName);
        }
    }
}

ख़ाका

    myViewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            super.onPageScrolled(position, positionOffset, positionOffsetPixels);
        }

        @Override
        public void onPageSelected(int position) {
            super.onPageSelected(position);

            Log.e("Selected_Page", String.valueOf(position));
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            super.onPageScrollStateChanged(state);
        }
    });

गतिविधि

myViewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);

MyAdapter

myViewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

नए विशेषताएँ

अब हमें ViewPager2.OnPageChangeCallback() का उपयोग करने के लिए ViewPager2.OnPageChangeCallback() का उपयोग करने की आवश्यकता है

नमूना कोड

    btnAdd.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            arrayList.add("New ITEM ADDED");
            MyAdapter.notifyDataSetChanged();
        }
    });

हम myViewPager2.setOrientation() का उपयोग करके ओरिएंटेशन सेट कर सकते हैं

नमूना कोड

HORIZONTAL Orientation उपयोग के लिए

    btnRemove.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            arrayList.remove(3);
            MyAdapter.notifyItemRemoved(3);
        }
    });

VERTICAL Orientation उपयोग के लिए

import java.util.ArrayList;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerFragmentAdapter extends FragmentStateAdapter {

    private ArrayList<Fragment> arrayList = new ArrayList<>();

    public ViewPagerFragmentAdapter(@NonNull FragmentManager fragmentManager) {
        super(fragmentManager);
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return arrayList.get(position);
    }

    public void addFragment(Fragment fragment) {
        arrayList.add(fragment);
    }

    @Override
    public int getItemCount() {
        return arrayList.size();
    }
}

जैसा कि हम RecyclerView.Adapter में उपयोग कर रहे हैं, हम notifyDataSetChanged उपयोग कर सकते हैं

नया आइटम जोड़ने के लिए नमूना

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import neel.com.bottomappbar.R;

public class MainActivity extends AppCompatActivity {

    ViewPager2 myViewPager2;
    ViewPagerFragmentAdapter myAdapter;

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

        myViewPager2 = findViewById(R.id.view_pager);

        myAdapter = new ViewPagerFragmentAdapter(getSupportFragmentManager());

        // add Fragments in your ViewPagerFragmentAdapter class
        myAdapter.addFragment(new FragmentOne());
        myAdapter.addFragment(new Fragmenttwo());
        myAdapter.addFragment(new FragmentThree());

        // set Orientation in your ViewPager2
        myViewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

        myViewPager2.setAdapter(myAdapter);

    }

}

नया आइटम निकालने के लिए नमूना कोड

myViewPager2.setUserInputEnabled(false);// SAMPLE CODE to disable swiping in viewpager2


myViewPager2.setUserInputEnabled(true);//SAMPLE CODE to enable swiping in viewpager2

अद्यतन करें

यदि आप ViewPager2 साथ Fragment का उपयोग करना चाहते हैं, तो यह प्रयास करें

सबसे पहले एक ViewPagerFragmentAdapter क्लास बनाएं जो FragmentStateAdapter बढ़ाता है

import java.util.ArrayList;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerFragmentAdapter extends FragmentStateAdapter {

    private ArrayList<Fragment> arrayList = new ArrayList<>();


    public ViewPagerFragmentAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
        super(fragmentManager, lifecycle);
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return arrayList.get(position);
    }

    public void addFragment(Fragment fragment) {
        arrayList.add(fragment);
    }

    @Override
    public int getItemCount() {
        return arrayList.size();
    }
}

अब अपनी गतिविधि में इस तरह का उपयोग करें

import android.os.Bundle;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import neel.com.bottomappbar.R;

public class MainActivity extends AppCompatActivity {

    ViewPager2 myViewPager2;
    ViewPagerFragmentAdapter myAdapter;

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

        myViewPager2=findViewById(R.id.view_pager);
        myAdapter = new ViewPagerFragmentAdapter(getSupportFragmentManager(), getLifecycle());

        // add Fragments in your ViewPagerFragmentAdapter class
        myAdapter.addFragment(new FragmentOne());
        myAdapter.addFragment(new Fragmenttwo());
        myAdapter.addFragment(new FragmentThree());

        myViewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);

        myViewPager2.setAdapter(myAdapter);
    }
}

अधिक जानकारी के लिए इसे देखें

अद्यतन २

संस्करण 1.0.0-अल्फ़ा 02

नए विशेषताएँ

  • उपयोगकर्ता इनपुट अक्षम करने की क्षमता ( setUserInputEnabled , isUserInputEnabled )

एपीआई बदल जाता है

  • ViewPager2 वर्ग फाइनल

कंप्यूटर प्रोग्राम या प्रणाली में बग को दूर करना

  • FragmentStateAdapter स्थिरता को ठीक करता है

SAMPLE CODE viewpager2 में स्वाइप को अक्षम करने के लिए

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.RecyclerView;
import androidx.viewpager2.widget.MarginPageTransformer;
import androidx.viewpager2.widget.ViewPager2;
import neel.com.bottomappbar.R;

public class MainActivity extends AppCompatActivity {

    ViewPager2 myViewPager2;
    ViewPagerFragmentAdapter myAdapter;
    private ArrayList<Fragment> arrayList = new ArrayList<>();

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

        myViewPager2 = findViewById(R.id.myViewPager2);

        // add Fragments in your ViewPagerFragmentAdapter class
        arrayList.add(new FragmentOne());
        arrayList.add(new Fragmenttwo());
        arrayList.add(new FragmentThree());

        myAdapter = new ViewPagerFragmentAdapter(getSupportFragmentManager(), getLifecycle());
        // set Orientation in your ViewPager2
        myViewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);

        myViewPager2.setAdapter(myAdapter);

        myViewPager2.setPageTransformer(new MarginPageTransformer(1500));


    }
}

अद्यतन 3

संस्करण 1.0.0-अल्फ़ा 03

नए विशेषताएँ

  • ProgramPatically स्क्रॉल करने की क्षमता ViewPager2: fakeDragBy (ऑफसेटपीएक्स)

एपीआई बदल जाता है

  • FragmentStateAdapter अब एक Lifecycle ऑब्जेक्ट की आवश्यकता है। दो उपयोगिता कंस्ट्रक्टरों ने इसे होस्ट FragmentActivity या होस्ट FragmentActivity से प्राप्त करने के लिए जोड़ा

नमूना कोड

ViewPagerFragmentAdapter

import java.util.ArrayList;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerFragmentAdapter extends FragmentStateAdapter {

    private ArrayList<Fragment> arrayList = new ArrayList<>();


    public ViewPagerFragmentAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
        super(fragmentManager, lifecycle);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        switch (position) {
            case 0:
                return new FragmentOne();
            case 1:
                return new Fragmenttwo();
            case 2:
                return new FragmentThree();

        }
        return null;
    }

    @Override
    public int getItemCount() {
        return 3;
    }
}

MainActivity कोड

public class MainActivity extends AppCompatActivity {

    private ViewPager2 mPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getSupportActionBar().setTitle("View Pager 2");
        mPager = findViewById(R.id.pager);
        mPager.setAdapter(new MyViewPagerAdapter(this));
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (R.id.change == item.getItemId()) {
            mPager.setOrientation(mPager.getOrientation() != ViewPager2.ORIENTATION_VERTICAL ? ViewPager2.ORIENTATION_VERTICAL : ViewPager2.ORIENTATION_HORIZONTAL);
        }
        return super.onOptionsItemSelected(item);
    }
}

अद्यतन 4

Version 1.0.0-alpha05 नई सुविधाएँ

  • ItemDecorator को RecyclerView अनुरूप व्यवहार के साथ पेश किया गया।
  • MarginPageTransformer ने पृष्ठों (पृष्ठ के इनसेट के बाहर) के बीच जगह बनाने की क्षमता प्रदान करने के लिए पेश किया।
  • CompositePageTransformer ने कई PageTransformers को संयोजित करने की क्षमता प्रदान करने के लिए PageTransformers

एपीआई बदल जाता है

  • FragmentStateAdapter#getItem विधि का नाम बदलकर FragmentStateAdapter#createFragment - पिछले विधि नाम अतीत में बग का स्रोत साबित हुआ है।
  • OFFSCREEN_PAGE_LIMIT_DEFAULT मान 0 से -1 में बदल गया। यदि OFFSCREEN_PAGE_LIMIT_DEFAULTconstant उपयोग किया जाता है तो क्लाइंट कोड परिवर्तन की कोई आवश्यकता नहीं है।

नमूना कोड

गतिविधि कोड

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

ViewPagerFragmentAdapter

public class MyViewPagerAdapter extends RecyclerView.Adapter<MyHolder> {

    private Context context;

    public MyViewPagerAdapter(Context context) {
        this.context=context;
    }

    @NonNull
    @Override
    public MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new MyHolder(LayoutInflater.from(context).inflate(R.layout.cell_item, parent, false));
    }

    @Override
    public void onBindViewHolder(@NonNull MyHolder holder, int position) {
      holder.mText.setText("Page "+(position+1));
    }

    @Override
    public int getItemCount() {
        return 10;
    }
}

मुझे ViewPager2 बारे में पता चला और इसे लागू करने की कोशिश की, लेकिन कोई उचित उदाहरण नहीं मिला।

क्या कोई मुझे बता सकता है कि मैं इसका उपयोग कैसे कर सकता हूं।

मैं संकेत की तलाश कर रहा हूं, उदाहरण नहीं।


वास्तव में अब ViewPager2 के लिए एक आधिकारिक नमूना रेपो है (नीचे लिंक किया गया है)

रेपो में निम्नलिखित नमूने होते हैं (नीचे रेपो रीडमे से उद्धरण)

नमूने

  • दृश्य के साथ ViewPager2 - दिखाता है कि पृष्ठ के रूप में दृश्य के साथ एक ViewPager2 कैसे सेट करें
  • Fragments वाला ViewPager2 - दिखाता है कि पृष्ठों के रूप में Fragments के साथ ViewPager2 कैसे सेट किया जाए
  • एक म्यूज़िकल संग्रह (दृश्य) के साथ ViewPager2 - पृष्ठ एडाप्टर में पृष्ठ और म्यूटेशन के रूप में दृश्य के साथ ViewPager2 के उपयोग को दर्शाता है
  • ViewPager2 एक म्युचुअल संग्रह के साथ (टुकड़े) - पृष्ठ के रूप में टुकड़े के साथ ViewPager2 के उपयोग को दर्शाता है, और एक पृष्ठ अनुकूलक में उत्परिवर्तन
  • TabPayout (दृश्य) के साथ ViewPager2 - दिखाता है कि पृष्ठ के रूप में दृश्य के साथ ViewPager2 कैसे सेट करें, और इसे TabLayout से लिंक करें

कुछ अन्य उपयोगी संसाधन:


Android में ViewPager2 का उपयोग

जैसा कि ViewPager2 पर बताया गया है

एपीआई बदल जाता है

FragmentStateAdapter, FragmentStatePagerAdapter की जगह लेता है

RecyclerView.Adcape, PagerAdapter की जगह लेता है

registerOnPageChangeCallback की जगह addPageChangeListener

सरल शब्दों में वे इसे देखें पेज एडाप्टर को रीसायकल व्यू एडेप्टर की तरह काम करते हैं।

नोट: - हमें व्यू पेज 2 में टुकड़े का उपयोग करने की आवश्यकता नहीं है। यह पूरी तरह से RecyclerView.Adcape फुलाया लेआउट पर निर्भर है।

यहाँ नमूना gitHub रेपो Link

उदाहरण:-

MainActivity.class

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Page 1"
        android:textSize="20sp" />

</android.support.constraint.ConstraintLayout>

activity_main.xml

class MyHolder extends RecyclerView.ViewHolder {

    public TextView mText;

    public MyHolder(@NonNull View itemView) {
        super(itemView);
        mText = itemView.findViewById(R.id.text);
    }
}

MyViewPagerAdapter.class

 public class MyViewPagerAdapter extends RecyclerView.Adapter<MyHolder> { private Context context; public MyViewPagerAdapter(Context context) { this.context=context; } @NonNull @Override public MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { return new MyHolder(LayoutInflater.from(context).inflate(R.layout.cell_item, parent, false)); } @Override public void onBindViewHolder(@NonNull MyHolder holder, int position) { holder.mText.setText("Page "+(position+1)); } @Override public int getItemCount() { return 10; } } 

cell_item.xml

 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/text" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="Page 1" android:textSize="20sp" /> </android.support.constraint.ConstraintLayout> 

MyHolder.class

 class MyHolder extends RecyclerView.ViewHolder { public TextView mText; public MyHolder(@NonNull View itemView) { super(itemView); mText = itemView.findViewById(R.id.text); } } 

उत्पादन:





android-viewpager2