ViewPager和Fragment的組合使用

       

支持手指滑動切換頁面，也支持點擊導航按鈕切換頁面。

頁面布局文件：

 

<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"  
    tools:context=".MainActivity" >  
      
    <!-- 底部四個導航按鈕 -->  
    <LinearLayout   
        android:id="@+id/ll_tabs"  
        android:layout_width="match_parent"  
        android:layout_height="50dp"  
        android:layout_alignParentBottom="true"  
        android:orientation="horizontal"  
        >  
          
        <Button   
            android:id="@+id/btn_one"  
            android:layout_width="0dp"  
            android:layout_height="match_parent"  
            android:layout_weight="1"  
            android:text="One"  
            android:background="#009eff"  
            android:textColor="#fff"  
            />  
        <Button   
            android:id="@+id/btn_two"  
            android:layout_width="0dp"  
            android:layout_height="match_parent"  
            android:layout_weight="1"  
            android:text="Two"  
            android:background="#009e00"  
            android:textColor="#fff"  
            />  
        <Button   
            android:id="@+id/btn_three"  
            android:layout_width="0dp"  
            android:layout_height="match_parent"  
            android:layout_weight="1"  
            android:text="Three"  
            android:background="#009eff"  
            android:textColor="#fff"  
            />  
        <Button   
            android:id="@+id/btn_four"  
            android:layout_width="0dp"  
            android:layout_height="match_parent"  
            android:layout_weight="1"  
            android:text="Four"  
            android:background="#009e00"  
            android:textColor="#fff"  
            />  
          
    </LinearLayout>  
      
    <!-- 覆蓋在導航按鈕上的覆蓋層，表示選中項 -->  
    <ImageView   
        android:id="@+id/imgv_overtab"  
        android:layout_width="60dp"  
        android:layout_height="50dp"  
        android:background="@drawable/red"  
        android:layout_alignParentBottom="true"  
        />  
      
    <!-- 導航和視圖的分割線 -->  
    <View   
        android:layout_width="match_parent"  
        android:layout_height="2dp"  
        android:background="#f00"  
        android:layout_above="@id/ll_tabs"  
        />  
      
    <!--   
    <RelativeLayout  
        android:id="@+id/fragment_content_view"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:layout_above="@id/ll_tabs"  
        android:layout_marginBottom="2dp"  
        android:background="#fff"  
        />  
     -->  
       
     <!-- VIewPager 主要是加載內容的 -->  
     <android.support.v4.view.ViewPager  
        android:id="@+id/viewpager"  
        android:layout_above="@id/ll_tabs"  
        android:layout_marginBottom="2dp"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"/>  
     
  
</RelativeLayout>  

 

下面是具體的代碼，由於代碼比較少，很容易看明白，就不做多的講述了：

 

import java.util.ArrayList;  
import java.util.List;  
import android.os.Bundle;  
import android.support.v4.app.Fragment;  
import android.support.v4.app.FragmentActivity;  
import android.support.v4.app.FragmentManager;  
import android.support.v4.app.FragmentStatePagerAdapter;  
import android.support.v4.view.ViewPager;  
import android.view.View;  
import android.view.ViewGroup;  
import android.view.View.OnClickListener;  
import android.view.animation.TranslateAnimation;  
import android.widget.Button;  
import android.widget.ImageView;  
import android.widget.RelativeLayout;  
  
public class MainActivity extends FragmentActivity implements OnClickListener{  
  
    /** 
     * 四個導航按鈕 
     */  
    Button buttonOne;  
    Button buttonTwo;  
    Button buttonThree;  
    Button buttonFour;  
      
    /** 
     * 作為頁面容器的ViewPager 
     */  
    ViewPager mViewPager;  
    /** 
     * 頁面集合 
     */  
    List<Fragment> fragmentList;  
      
    /** 
     * 四個Fragment（頁面） 
     */  
    OneFragment oneFragment;  
    TwoFragment twoFragment;  
    ThreeFragment threeFragment;  
    FourFragment fourFragment;  
      
    //覆蓋層  
    ImageView imageviewOvertab;  
      
    //屏幕寬度  
    int screenWidth;  
    //當前選中的項  
    int currenttab=-1;  
      
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        buttonOne=(Button)findViewById(R.id.btn_one);  
        buttonTwo=(Button)findViewById(R.id.btn_two);  
        buttonThree=(Button)findViewById(R.id.btn_three);  
        buttonFour=(Button)findViewById(R.id.btn_four);  
          
        buttonOne.setOnClickListener(this);  
        buttonTwo.setOnClickListener(this);  
        buttonThree.setOnClickListener(this);  
        buttonFour.setOnClickListener(this);  
          
        mViewPager=(ViewPager) findViewById(R.id.viewpager);  
          
        fragmentList=new ArrayList<Fragment>();  
        oneFragment=new OneFragment();  
        twoFragment=new TwoFragment();  
        threeFragment=new ThreeFragment();  
        fourFragment=new FourFragment();  
          
        fragmentList.add(oneFragment);  
        fragmentList.add(twoFragment);  
        fragmentList.add(threeFragment);  
        fragmentList.add(fourFragment);  
          
        screenWidth=getResources().getDisplayMetrics().widthPixels;  
          
        buttonTwo.measure(0, 0);  
        imageviewOvertab=(ImageView) findViewById(R.id.imgv_overtab);  
        RelativeLayout.LayoutParams imageParams=new RelativeLayout.LayoutParams(screenWidth/4, buttonTwo.getMeasuredHeight());  
        imageParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);  
        imageviewOvertab.setLayoutParams(imageParams);  
          
        mViewPager.setAdapter(new MyFrageStatePagerAdapter(getSupportFragmentManager()));  
    }  
  
    /** 
     * 定義自己的ViewPager適配器。 
     * 也可以使用FragmentPagerAdapter。關於這兩者之間的區別，可以自己去搜一下。 
     */  
    class MyFrageStatePagerAdapter extends FragmentStatePagerAdapter  
    {  
  
        public MyFrageStatePagerAdapter(FragmentManager fm)   
        {  
            super(fm);  
        }  
  
        @Override  
        public Fragment getItem(int position) {  
            return fragmentList.get(position);  
        }  
  
        @Override  
        public int getCount() {  
            return fragmentList.size();  
        }  
          
        /** 
         * 每次更新完成ViewPager的內容后，調用該接口，此處復寫主要是為了讓導航按鈕上層的覆蓋層能夠動態的移動 
         */  
        @Override  
        public void finishUpdate(ViewGroup container)   
        {  
            super.finishUpdate(container);//這句話要放在最前面，否則會報錯  
            //獲取當前的視圖是位於ViewGroup的第幾個位置，用來更新對應的覆蓋層所在的位置  
            int currentItem=mViewPager.getCurrentItem();  
            if (currentItem==currenttab)  
            {  
                return ;  
            }  
            imageMove(mViewPager.getCurrentItem());  
            currenttab=mViewPager.getCurrentItem();  
        }  
          
    }  
      
    /** 
     * 移動覆蓋層 
     * @param moveToTab 目標Tab，也就是要移動到的導航選項按鈕的位置 
     * 第一個導航按鈕對應0，第二個對應1，以此類推 
     */  
    private void imageMove(int moveToTab)  
    {  
        int startPosition=0;  
        int movetoPosition=0;  
          
        startPosition=currenttab*(screenWidth/4);  
        movetoPosition=moveToTab*(screenWidth/4);  
        //平移動畫  
        TranslateAnimation translateAnimation=new TranslateAnimation(startPosition,movetoPosition, 0, 0);  
        translateAnimation.setFillAfter(true);  
        translateAnimation.setDuration(200);  
        imageviewOvertab.startAnimation(translateAnimation);  
    }  
      
      
    @Override  
    public void onClick(View v)  
    {  
        switch (v.getId())  
        {  
        case R.id.btn_one:  
            changeView(0);  
            break;  
        case R.id.btn_two:  
            changeView(1);  
            break;  
        case R.id.btn_three:  
            changeView(2);  
            break;  
        case R.id.btn_four:  
            changeView(3);  
            break;  
        default:  
            break;  
        }  
    }  
    //手動設置ViewPager要顯示的視圖  
    private void changeView(int desTab)  
    {  
        mViewPager.setCurrentItem(desTab, true);  
    }  
  
}