ViewPager和Fragment的组合使用

本篇文章介绍的方法不推荐使用，可以参考另一篇文章：

http://blog.youkuaiyun.com/u013758734/article/details/43197659

今天想看TabHost相关信息的时候，提示建议使用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>

下面是具体的代码，由于代码比较少，很容易看明白，就不做多的讲述了：

package com.example.switchfragment;

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

}

注释写的很详细了，就不多说了。其实也没什么深的技术，就是对ViewPager的使用。

里面还有其他的布局文件以及java文件没有贴出来，有意向的可以到这个地址下载哦，免积分哦！

http://download.youkuaiyun.com/detail/u013758734/7477459