نمایش اطلاعات در ویوپیجر و فراگمنت توسط تب

بدون ترجمه با یک نگاه گذار دستتون میاد که چجوری اطلاعت وفراگمنت(fragment) را  توسط یک ویوپیجر(viewpager) و تب(PagerTabStrip) قابل نمایش می سازد  سوالی بود در خدمتم

In this tutorial, you will learn how to create a PagerTabStrip in your Android application. PagerTabStrip is intended to be used as a child view of a ViewPager widget in your XML layout. PagerTabStrip is most often used with fragment, which is a convenient way to supply and manage the Lifecycle of each fragment. We will create a PagerTabStrip with custom titles and tabs and on flip left or right or tab click will show different fragments. So lets begin…

Create a new project in Eclipse File > New > Android Application Project. Fill in the details and name your project PagerTabStripTutorial.

Application Name : PagerTabStripTutorial

Project Name : PagerTabStripTutorial

Package Name : com.androidbegin.pagertabstriptutorial

Open your MainActivity.java and paste the following code.

MainActivity.java

package com.androidbegin.pagertabstriptutorial;
 
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
 
public class MainActivity extends FragmentActivity {
 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// Get the view from activity_main.xml
		setContentView(R.layout.activity_main);
 
		// Locate the viewpager in activity_main.xml
		ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
 
		// Set the ViewPagerAdapter into ViewPager
		viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));
	}
 
}

In this activity, we have set the location and the ViewPagerAdapter into the ViewPager. Then pass the support fragment manager into ViewPagerAdapter to manage the fragments.

Next, create an XML graphical layout for the MainActivity. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file activity_main.xml and paste the following code.

activity_main.xml

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <android.support.v4.view.PagerTabStrip
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:textColor="#000000" />
 
</android.support.v4.view.ViewPager>

Next, create the first fragment tab. Go to File > New > Class and name it FragmentTab1.java. Select your package named com.androidbegin.pagertabstriptutorial and click Finish.

Open your FragmentTab1.java and paste the following code.

package com.androidbegin.pagertabstriptutorial;
 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class FragmentTab1 extends Fragment {
 
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// Get the view from fragmenttab1.xml
		View view = inflater.inflate(R.layout.fragmenttab1, container, false);
		return view;
	}

Next, create the second fragment tab. Go to File > New > Class and name it FragmentTab2.java. Select your package named com.androidbegin.pagertabstriptutorial and click Finish.

Open your FragmentTab2.java and paste the following code.

FragmentTab2.java

package com.androidbegin.pagertabstriptutorial;
 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class FragmentTab2 extends Fragment {
 
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// Get the view from fragmenttab2.xml
		View view = inflater.inflate(R.layout.fragmenttab2, container, false);
		return view;
	}
 
}

Next, create the third fragment tab. Go to File > New > Class and name it FragmentTab3.java. Select your package named com.androidbegin.pagertabstriptutorial and click Finish.

Open your FragmentTab3.java and paste the following code.

FragmentTab3.java

package com.androidbegin.pagertabstriptutorial;
 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class FragmentTab3 extends Fragment {
 
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// Get the view from fragmenttab3.xml
		View view = inflater.inflate(R.layout.fragmenttab3, container, false);
		return view;
	}
 
}

Next, create a ViewPager Adapter class. Go to File > New > Class and name it ViewPagerAdapter.java. Select your package named com.androidbegin.pagertabstriptutorial and click Finish.

Open your ViewPagerAdapter.java and paste the following code.

ViewPagerAdapter.java

package com.androidbegin.pagertabstriptutorial;
 
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
 
public class ViewPagerAdapter extends FragmentPagerAdapter {
 
	final int PAGE_COUNT = 3;
	// Tab Titles
	private String tabtitles[] = new String[] { "Tab1", "Tab2", "Tab3" };
	Context context;
 
	public ViewPagerAdapter(FragmentManager fm) {
		super(fm);
	}
 
	@Override
	public int getCount() {
		return PAGE_COUNT;
	}
 
	@Override
	public Fragment getItem(int position) {
		switch (position) {
 
			// Open FragmentTab1.java
		case 0:
			FragmentTab1 fragmenttab1 = new FragmentTab1();
			return fragmenttab1;
 
			// Open FragmentTab2.java
		case 1:
			FragmentTab2 fragmenttab2 = new FragmentTab2();
			return fragmenttab2;
 
			// Open FragmentTab3.java
		case 2:
			FragmentTab3 fragmenttab3 = new FragmentTab3();
			return fragmenttab3;
		}
		return null;
	}
 
	@Override
	public CharSequence getPageTitle(int position) {
		return tabtitles[position];
	}
}

In this ViewPagerAdapter class, we have declared the number of ViewPager pages and on tab switch or flip will show different fragments.

Next, create an XML graphical layout for first fragment tab. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file fragmenttab1.xml and paste the following code.

fragmenttab1.xml

<RelativeLayout 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" >
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/Fragment1" />
 
</RelativeLayout>

Next, create an XML graphical layout for second fragment tab. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file fragmenttab2.xml and paste the following code.

fragmenttab2.xml

<RelativeLayout 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" >
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/Fragment2" />
 
</RelativeLayout>

Next, create an XML graphical layout for third fragment tab. Go to res > layout > Right Click on layout > New > Android XML File

Name your new XML file fragmenttab3.xml and paste the following code.

fragmenttab3.xml

<RelativeLayout 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" >
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/Fragment3" />
 
</RelativeLayout>

Change the application name and fragment textview texts in strings.xml. Open your strings.xml and paste the following code. Go to res > values > strings.xml

?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <string name="app_name">PagerTabStrip Tutorial</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="Fragment1">This is Fragment 1</string>
    <string name="Fragment2">This is Fragment 2</string>
    <string name="Fragment3">This is Fragment 3</string>
 
</resources>

In your AndroidManifest.xml, no changes needed to be made.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidbegin.pagertabstriptutorial"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />
 
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

Output

:

سایت اصلی مطلب