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);  
    }  
  
}