版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013758734/article/details/29848117
本篇文章介绍的方法不推荐使用，可以参考另一篇文章：
http://blog.csdn.net/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文件没有贴出来，有意向的可以到这个地址下载哦，免积分哦！