主页面布局文件
<?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:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:background="#ffffff"
android:orientation="horizontal" >
<TextView
android:id="@+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="页卡1"
android:textColor="#333" />
<TextView
android:id="@+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="页卡2"
android:textColor="#333" />
<TextView
android:id="@+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="页卡3"
android:textColor="#333" />
</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>
切换卡的子页面代码
public class Tab1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab_1, null);
return view;
}
}
主页面代码
public class MainActicity extends FragmentActivity {
private ViewPager mPager = null;
/**
* 代表下划线控件
*/
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 arg0) {
// TODO Auto-generated method stub
super.onCreate(arg0);
setContentView(R.layout.main);
mPager = (ViewPager) findViewById(R.id.vPager);
initImageView();
text1 = (TextView) findViewById(R.id.tab1);
text2 = (TextView) findViewById(R.id.tab2);
text3 = (TextView) findViewById(R.id.tab3);
final TextView[] titles = { text1, text2, text3 };
mPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
// TODO Auto-generated method stub
return TAB_COUNT;
}
@Override
public Fragment getItem(int index) {
switch (index) {
case 0:
return new Tab1();
case 1:
return new Tab2();
case 2:
return new Tab3();
default:
break;
}
return null;
}
});
mPager.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) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
text1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mPager.setCurrentItem(0);
current_index = 0;
}
});
text2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mPager.setCurrentItem(1);
current_index = 1;
}
});
text3.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mPager.setCurrentItem(2);
current_index = 2;
}
});
}
/**
* 初始化页面下划线
*/
private void initImageView() {
cursor = (ImageView) findViewById(R.id.cursor);
// 获取图片的宽度
lineWidth = BitmapFactory.decodeResource(getResources(),
R.drawable.line).getWidth();
Log.i("图片宽度", lineWidth + "");
// 获取屏幕的宽度
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int screenWidth = metrics.widthPixels;
Matrix matrix = new Matrix();
offset = (screenWidth / TAB_COUNT - lineWidth) / 2;
Log.i("偏移量", offset + "");
matrix.postTranslate(offset, 0);
// 设置初始位置
cursor.setImageMatrix(matrix);
}
}