Android ViewPager का उपयोग कैसे करें?

परिचय

उदाहरण में जाने से पहले, हमें पता होना चाहिए कि Android में ViewPager क्या है। ViewPager Android में सपोर्ट लाइब्रेरी में पाया जाता है, ViewPager का उपयोग करके हम फ्रैगमेंट्स को स्विच कर सकते हैं।

यह उदाहरण दर्शाता है कि Android ViewPager का उपयोग कैसे करें।

चरण 1: नया प्रोजेक्ट बनाएं

Android Studio में File → New Project पर जाएं और नया प्रोजेक्ट बनाने के लिए सभी आवश्यक विवरण भरें।

चरण 2: build.gradle में डिपेंडेंसी जोड़ें

apply plugin: 'com.android.application'
android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.andy.myapplication"
        minSdkVersion 19
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

चरण 3: activity_main.xml में लेआउट जोड़ें

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android = "https://schemas.android.com/apk/res/android"
    xmlns:app = "https://schemas.android.com/apk/res-auto"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent">
    <android.support.design.widget.AppBarLayout
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:theme = "@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.v7.widget.Toolbar
            android:id = "@+id/toolbar"
            android:layout_width = "match_parent"
            android:layout_height = "?attr/actionBarSize"
            android:background = "?attr/colorPrimary"
            app:layout_scrollFlags = "scroll|enterAlways"
            app:popupTheme = "@style/ThemeOverlay.AppCompat.Light" />
        <android.support.design.widget.TabLayout
            android:id = "@+id/tabs"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            app:tabMode = "fixed"
            app:tabGravity = "fill"/>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id = "@+id/viewpager"
        android:layout_width = "match_parent"
        android:layout_height = "match_parent"
        app:layout_behavior = "@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

चरण 4: MainActivity.java में कोड जोड़ें

package com.example.andy.myapplication;
import android.annotation.TargetApi;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private Toolbar toolbar;
    private TabLayout tabLayout;

    @TargetApi(Build.VERSION_CODES.O)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        tabLayout = findViewById(R.id.tabs);
        viewPager = findViewById(R.id.viewpager);
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new OneFragment(), "ONE");
        adapter.addFragment(new TwoFragment(), "TWO");
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mList = new ArrayList<>();
        private final List<String> mTitleList = new ArrayList<>();

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

        @Override
        public Fragment getItem(int i) {
            return mList.get(i);
        }

        @Override
        public int getCount() {
            return mList.size();
        }

        public void addFragment(Fragment fragment, String title) {
            mList.add(fragment);
            mTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTitleList.get(position);
        }
    }
}

चरण 5: OneFragment.java बनाएं

package com.example.andy.myapplication;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class OneFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View v = inflater.inflate(R.layout.fragment_one, container, false);
        TextView textView = v.findViewById(R.id.text);
        textView.setText("First Fragment");
        return v;
    }
}

चरण 6: TwoFragment.java बनाएं

package com.example.andy.myapplication;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class TwoFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View v = inflater.inflate(R.layout.fragment_one, container, false);
        TextView textView = v.findViewById(R.id.text);
        textView.setText("Second Fragment");
        return v;
    }
}

चरण 7: fragment_one.xml लेआउट बनाएं

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://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="wrap_content"
        android:gravity="center"
        android:textSize="20sp" />
</LinearLayout>

चरण 8: styles.xml में स्टाइल जोड़ें

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name = "windowNoTitle">true</item>
        <item name = "windowActionBar">false</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

ऐप चलाएं

मान लें कि आपने अपना वास्तविक Android मोबाइल डिवाइस कंप्यूटर से कनेक्ट किया है। Android Studio से ऐप चलाने के लिए, अपनी प्रोजेक्ट की एक्टिविटी फ़ाइलों में से एक खोलें और टूलबार से Run आइकन पर क्लिक करें। अपने मोबाइल डिवाइस को विकल्प के रूप में चुनें और फिर अपना मोबाइल डिवाइस जांचें जो डिफ़ॉल्ट स्क्रीन प्रदर्शित करेगा: