显示效果：
实现过程：
1.创建3个选项卡中的内容，即三个Fragment。
这里仅贴出其中一个：
Tab2：
package com.example.viewpagerdemo3;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.Button;import android.widget.Toast;public class Tab2 extends Fragment{ private Button but = null; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.tab2,null);//注意不要指定父视图 but = (Button) view.findViewById(R.id.but); return view; } @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); but.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(Tab2.this.getActivity(),"hahah", 0).show(); } }); }}布局：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00ff00" android:orientation="vertical" > <TextView android:id="@+id/tab1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="我是第二个界面" /> <Button android:id="@+id/but" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="我是按钮" /></LinearLayout>
剩下两个Fragment类似。
2.主界面布局
<LinearLayout 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" android:orientation="vertical" tools:context=".MainActivity" > <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#FFFFFF" android:orientation="horizontal" > <TextView android:id="@+id/text1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="页卡1" android:textColor="#000000" android:textSize="22.0dip" /> <TextView android:id="@+id/text2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="页卡2" android:textColor="#000000" android:textSize="22.0dip" /> <TextView android:id="@+id/text3" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="页卡3" android:textColor="#000000" android:textSize="22.0dip" /> </LinearLayout> <ImageView android:id="@+id/cursor" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="matrix" android:src="@drawable/line" /> <android.support.v4.view.ViewPager android:id="@+id/vPager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:background="#000000" android:flipInterval="30" android:persistentDrawingCache="animation" /></LinearLayout>
三个TextView代表选项卡标题，ImageView代表选项卡下的下划线。
3.实现activity。
package com.example.viewpagerdemo3;import android.graphics.BitmapFactory;import android.graphics.Color;import android.graphics.Matrix;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.TextView;public class MainActivity extends FragmentActivity{ private ViewPager vPager = null; /** * 代表选项卡下的下划线的imageview */ private ImageView cursor = null; /** * 选项卡下划线长度 */ private static int lineWidth = 0; /** * 偏移量 * （手机屏幕宽度/3-选项卡长度）/2 */ private static int offset = 0; /** * 选项卡总数 */ private static final int TAB_COUNT = 3; /** * 当前显示的选项卡位置 */ private int current_index = 0; /** * 选项卡标题 */ private TextView text1,text2,text3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); vPager = (ViewPager) findViewById(R.id.vPager); initImageView(); text1 = (TextView) findViewById(R.id.text1); text2 = (TextView) findViewById(R.id.text2); text3 = (TextView) findViewById(R.id.text3); final TextView[] titles = {text1,text2,text3}; vPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public int getCount() { return TAB_COUNT; } @Override public Fragment getItem(int index)//直接创建fragment对象并返回 { switch (index) { case 0: return new Tab1(); case 1: return new Tab2(); case 2: return new Tab3(); } return null; } }); vPager.setOnPageChangeListener(new OnPageChangeListener() { int one = offset * 2 + lineWidth;// 页卡1 -> 页卡2 偏移量 @Override public void onPageSelected(int index)//设置标题的颜色以及下划线的移动效果 { Animation animation = new TranslateAnimation(one*current_index,one*index, 0,0); animation.setFillAfter(true); animation.setDuration(300); cursor.startAnimation(animation); titles[current_index].setTextColor(Color.BLACK); titles[index].setTextColor(Color.RED); current_index = index; } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int index) { } }); } private void initImageView() { cursor = (ImageView) findViewById(R.id.cursor); //获取图片宽度 lineWidth = BitmapFactory.decodeResource(getResources(),R.drawable.line).getWidth(); DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); //获取屏幕宽度 int screenWidth = dm.widthPixels; Matrix matrix = new Matrix(); offset = (int) ((screenWidth/(float)TAB_COUNT - lineWidth)/2); matrix.postTranslate(offset, 0); //设置初始位置 cursor.setImageMatrix(matrix); }}