The use of Android development learning ViewPager sliding Tab

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

In the last article, we use ViewPager produced a simple sliding switch example. Today let us on the basis of yesterday, to make a sliding Tab using ViewPager. To achieve this function, in addition to ViewPager, we also need a PagerTabStrip to use. A simple PagerTabStrip, Google officials described as: PagerTabStrip is present, ViewPager interaction index future and previous page. It is intended to be used as a ViewPager plugin in XML layout graph. Add on for ViewPager children in your layout file, and set its Android:layout_gravity to the top or bottom of the pin to the top or bottom of the ViewPager. From the title of each page is a method for providing getPageTitle (INT) in the adapter for ViewPager. Roughly the meaning of these words is to say, PagerTabStrip is a ViewPager child controls, can not be used alone. To control the display position through the layout_gravity property. Use the getPageTitle () method returns the page title. According to this passage understanding we can design the layout code below:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    tools:context=".MainActivity" >
    <android.support.v4.view.ViewPager
        android:id="@+id/ViewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center">
        <android.support.v4.view.PagerTabStrip
            android:id="@+id/PagerTab" 
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:layout_gravity="top"> 
        </android.support.v4.view.PagerTabStrip>
    </android.support.v4.view.ViewPager>
</LinearLayout>
Next, like, we write a ViewPaperAdapter class to implement the getPageTitle () method

package com.Android.ViewPagerTab;

import java.util.ArrayList;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;

public class ViewPagerAdapter extends PagerAdapter
{

	//Array of View
	private ArrayList<View> Views;
	//Array of Title
	private ArrayList<String> Titles;
	
	
	public ViewPagerAdapter(ArrayList<View> Views,ArrayList<String> Titles)
	{
		this.Views=Views;
		this.Titles=Titles;
	}
	
	//Access to PageTitle
	@Override
	public CharSequence getPageTitle(int position) 
	{
		 return Titles.get(position);
	}
	
	@Override
	public void destroyItem(View container, int position, Object object) 
	{
        ((ViewPager)container).removeView(Views.get(position));
	}

	@Override
	public Object instantiateItem(View container, int position) 
	{
		((ViewPager)container).addView(Views.get(position),0);
		return Views.get(position);
	}

	@Override
	public int getCount() 
	{
		if(Views!=null)
		{
	           return Views.size();
		}
		return 0;
	}

	@Override
	public boolean isViewFromObject(View view, Object object) 
	{
		return (view==object);
	}

}

This adapter class yesterday and basically the same, only different is that it need to implement the getPageTitle () method. Here, we through the constructor to initialize an array stored title, by returning value specifies the index entries corresponding to the array to realize the getPageTitle () method;.

So far, the adapter and the interface has been completed, then, we need to fill the adapter, know us by the constructor,, we need a Views and Titles. For Titles we only need to write some string can be. For Views, we need to create some interface layout code, simple code.:


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/Content1" />
</RelativeLayout>
The layout will be in the center of the screen display a string, this for the sake of simplicity, other layout and the layout is the same, the only difference is that they display a different string.

Now we come to the main program logic code:


package com.Android.ViewPagerTab;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.Window;

public class MainActivity extends Activity implements OnPageChangeListener {

	//Array of view
	private ArrayList<View> Views;
	//Adapter class
	private ViewPagerAdapter mAdapter;
	//Array to store the title
	private ArrayList<String> Titles;
	//PagerTabStrip
	private PagerTabStrip PagerTab;
	//ViewPager
	private ViewPager mViewPager;
	@Override
	protected void onCreate(Bundle savedInstanceState) 
	{
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		//Obtain a ViewPager instance
		mViewPager=(ViewPager)findViewById(R.id.ViewPager);
		//Obtain a ViewTabStrip instance
		PagerTab=(PagerTabStrip)findViewById(R.id.PagerTab);
		//Set the Tab selected color
		PagerTab.setTabIndicatorColor(getResources().getColor(R.color.black));
		//Set Tab is underlined
		PagerTab.setDrawFullUnderline(true);
		//Set the Tab background color
		PagerTab.setBackgroundColor(getResources().getColor(R.color.white));
		//Set the Tab distance? I feel that way
		PagerTab.setTextSpacing(50);
		
		
		//The initialization of Views
		Views=new ArrayList<View>();
		LayoutInflater Inflater=LayoutInflater.from(this);
		Views.add(Inflater.inflate(R.layout.activity_tab1, null));
		Views.add(Inflater.inflate(R.layout.activity_tab2, null));
		Views.add(Inflater.inflate(R.layout.activity_tab3, null));
		
		//The initialization of Titles
		Titles=new ArrayList<String>();
		Titles.add("Tab1");
		Titles.add("Tab2");
		Titles.add("Tab3");
		
		//Initialize adapter
		mAdapter=new ViewPagerAdapter(Views,Titles);
		mViewPager.setAdapter(mAdapter);
		
		//The default display second
		SetTab(1);
	}

	public void SetTab(int index)
	{
		switch(index)
		{
		  case 0:
			  mViewPager.setCurrentItem(0);
			  break;
		  case 1:
			  mViewPager.setCurrentItem(1);
			  break;
		  case 2:
			  mViewPager.setCurrentItem(2);
			  break;
		}
		
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public void onPageScrollStateChanged(int arg0) {
		// The automatic generation of stub method TODO
		
	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
		// The automatic generation of stub method TODO
		
	}

	@Override
	public void onPageSelected(int position) 
	{
		SetTab(position);
	}

}
This part of the code and the basic agreement yesterday, need to implement the OnPageSelected () method interface. Figure of running the final as shown below

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Miranda at December 08, 2013 - 11:11 PM