ViewPage Fragment 頁面滑動切換

今天做了一個滑動翻頁的功能，說到滑動翻頁大家最先想到的應該是ViewPage，滑動翻頁的實現方式爲：ViewPage+Fragment+

FragmentPagerAdapter+FragmentActivity。這其中有兩種實現方式：一種是Tab通過xml佈局來實現，另一種是Tab通過自定義控件的方式來實現，

但是我感覺後一種略複雜，遠沒有通過xml的方式來的容易。在網上看的一篇博客他的Tab就是通過自定義的方式實現的，代碼感覺寫的過於複雜。

http://blog.csdn.net/singwhatiwanna/article/details/17201587，我的實現方式就是通過xml的方式來實現的，除了xml編寫有點小複雜，但是感覺

代碼很清晰。

在寫之前我應該先了解Fragment，他導入工程有兩個包可以選擇，一個是android.support.v4.app.Fragment，另一個是android.app.Fragment。

前一個包是爲了支持android3.0以前的那些機型能夠使用Fragment，如果你的app只支持android3.0以後的那些機型那麼你可以導入後一個包。

Fragment是直接繼承Object類而來的，他和Activity的功能類似，也有相似的生命週期，能夠替代Activity的一部分功能但是他是依附於Activity的，

他的生命週期隨着Activity生命週期的結束而結束。具體的介紹可以看Fragment的API，那裏介紹的比較詳細。下面我們就來實現頁面滑動切換的

功能。

一：我們創建三個Fragment頁面類都繼承於Fragment，因爲代碼都一樣，只是類名不同而已，這裏我只貼出一個類的代碼：

public class FinishedTask_Fragment extends Fragment{
	
	public FinishedTask_Fragment(){
		super();
	}
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View mainView = inflater.inflate(R.layout.activity_finished__main, container, false);
		
		return mainView;
	}
}

二：創建適配類對象，繼承於FragmentPagerAdapter：

public class ViewPagerAdapter extends FragmentPagerAdapter{
	
	List<Fragment> list;
	public ViewPagerAdapter(FragmentManager fm,List<Fragment>list) {	
		super(fm);
		this.list = list;
	}

	@Override
	public android.support.v4.app.Fragment getItem(int position) {
		return list.get(position);
	}

	@Override
	public int getCount() {
		return list.size();
	}
	
	@Override
	public int getItemPosition(Object object) {
		return super.getItemPosition(object);
	}
}

三：編寫xml文件代碼，實現tab：

<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">
	
    <RelativeLayout
        android:id="@+id/page_statusTitle"
        android:layout_width="match_parent"
        android:layout_height="48dp"
      	android:background="@drawable/bg_1" >
      	
   	   	<TextView
   	   	    android:layout_width="wrap_content"
    	    android:layout_height="wrap_content"
    	    android:layout_centerInParent="true"
         	android:textSize="18sp"
         	android:textColor="#e8f3fb"
         	android:text="@string/speed_talk_main_title"/>
   	</RelativeLayout>
   
    <FrameLayout 
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:id="@+id/titile_tab"
        android:layout_below="@+id/page_statusTitle">            
	    <LinearLayout
	        android:id="@+id/page_title_bar"
	        android:layout_width="match_parent"
	        android:layout_height="match_parent"
	        android:orientation="horizontal">   	   	
	        <TextView
	            android:id="@+id/unfinished"
	            android:layout_width="match_parent"
	            android:layout_height="match_parent"
	            android:layout_weight="1"
	            android:gravity="center"
	            android:text="@string/speed_talk_main_unfinished"/>
	        <ImageView
	            android:id="@+id/divide1"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:layout_gravity="center_horizontal"
	            android:contentDescription="@string/title_activity_divider"
	            android:src="@drawable/icon_train_divide"/>
	        <TextView
	            android:id="@+id/finished"
	            android:layout_width="match_parent"
	            android:layout_height="wrap_content"
	            android:layout_weight="1"
	            android:gravity="center"
	            android:text="@string/speed_talk_main_finished"/>
	        <ImageView
	            android:id="@+id/divide2"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:layout_gravity="center_horizontal"
	            android:contentDescription="@string/title_activity_divider"
	            android:src="@drawable/icon_train_divide"/>
	        <TextView 
	            android:id="@+id/options"
	            android:layout_width="match_parent"
	            android:layout_height="match_parent"
	            android:layout_weight="1"
	            android:gravity="center"
	            android:text="@string/speed_talk_main_options"/>
	    </LinearLayout>
	    <TextView
	        android:id="@+id/title_tab_bottom"
	        android:layout_width="match_parent"
	        android:layout_height="1dp"
	        android:background="@drawable/divider"
	         android:layout_gravity="bottom"/>
	     <ImageView
	        android:id="@+id/tabbar_inditor"
	        android:layout_width="match_parent"
	        android:layout_height="2.0dp"
	        android:layout_gravity="bottom"
	        android:contentDescription="@string/title_activity_inditor"/>
    </FrameLayout>
      
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/titile_tab">      
    </android.support.v4.view.ViewPager>
    
</RelativeLayout>

其實xml文件也不復雜，實現起來遠比用代碼去實現要容易的多，而且可控的多，像距離高度能夠隨便進行調節。

四：編寫Activity的代碼，實現tab下的移動條的滑動：

public class SpeedTalk_MainActivity extends FragmentActivity 
							implements OnPageChangeListener,OnClickListener{	
	ViewPager viewPager;
	TextView textView0,textView1,textView2;
	ImageView imageView;
	int offset;//偏移量 
	int bmpW;//圖片寬度
	int currIndex=0;//當前頁面號

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_speed_talk__main);
		
		initViewPager();
		initTitle();
		initImage();
	}
	
	public void initViewPager(){
		viewPager = (ViewPager)findViewById(R.id.viewpager);
		ArrayList<Fragment> list = new ArrayList<Fragment>();
		
		UnFinishedTask_Fragment unFinishedTask = new UnFinishedTask_Fragment();
		FinishedTask_Fragment finishedTask = new FinishedTask_Fragment();
		Options_Fragment options = new Options_Fragment();
				
        list.add(unFinishedTask);
        list.add(finishedTask);
        list.add(options);
        
        viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(),list));
        viewPager.setCurrentItem(0);
        viewPager.setOnPageChangeListener(this);
	}

	public void initTitle(){
		textView0 = (TextView)findViewById(R.id.unfinished);
		textView1 = (TextView)findViewById(R.id.finished);
		textView2 = (TextView)findViewById(R.id.options);
		
		textView0.setOnClickListener(this);
		textView1.setOnClickListener(this);
		textView2.setOnClickListener(this);
	}
	
	public void initImage(){
		imageView = (ImageView)findViewById(R.id.tabbar_inditor);
		bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.icon_train_divide).getWidth();// 獲取圖片寬度
		//上面的圖片寬度是tab分割條圖片的寬度
		
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm); 
        int screenW = dm.widthPixels;// 獲取分辨率寬度
              
        LayoutParams para = imageView.getLayoutParams();
        para.width = (screenW-bmpW*2)/3;//計算tab頁面移動條的寬度，使得tab的寬度和移動條的寬度一樣
        imageView.setLayoutParams(para);
        imageView.setBackgroundResource(R.drawable.icon_add_loction_title_red_line);
        
        offset = ((screenW -bmpW*2)/3)/2;// 計算偏移量的依據：屏幕寬度-中間兩條分隔條的寬度=3個tab的寬度
        Matrix matrix = new Matrix();
        matrix.postTranslate(0, 0);//注意區分和preTranslate的區別，postTranslate是滑動之後才進行平移。
        imageView.setImageMatrix(matrix);// 設置動畫初始位置      
	}
	@Override
	public void onPageScrollStateChanged(int arg0) {
		
	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
		
	}

	@Override
	public void onPageSelected(int position) {
		
		int one = 2*offset + bmpW;// 一個頁面切換到另一個頁面的 偏移量  
        
		Animation animation = new TranslateAnimation(one*currIndex, one*position, 0, 0);//顯然這個比較簡潔，只有一行代碼。  
        currIndex = position;
        animation.setFillAfter(true);// True:圖片停在動畫結束位置  
        animation.setDuration(200);//設置動畫移動時間
        imageView.startAnimation(animation);
	}

	@Override
	public void onClick(View view) {
		switch (view.getId()) {
		case R.id.unfinished:
			viewPager.setCurrentItem(0);
			break;
		case R.id.finished:
			viewPager.setCurrentItem(1);
			break;
		case R.id.options:
			viewPager.setCurrentItem(2);
			break;
		default:
			break;
		}		
	}
}

這樣滑動翻頁的效果就完成了，真正要寫代碼的就xml文件和這個類，前面那些代碼都太簡單了，這樣實現起來是不是非常簡單高效。下面看一下

做出來的效果吧。

上傳的是gif圖片但是不知道爲什麼沒有動畫效果，看圖片算了。代碼鏈接：http://download.csdn.net/detail/zkw12358/7382289

如果對Fragment的使用感興趣可以去看這篇博客：http://blog.csdn.net/guolin_blog/article/details/8881711