ViewPager固定标题的案例
一、编写布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:umadsdk="http://schemas.android.com/apk/res/com.LoveBus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- 选项卡的标题部分 -->
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="30dip"
android:background="#FFFFFF" >
<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/id_category_selector" />
<!-- 选项页面 -->
<android.support.v4.view.ViewPager
android:id="@+id/vPager"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1.0"
android:background="#000000"
android:flipInterval="30"
android:persistentDrawingCache="animation" />
</LinearLayout>
二、编写逻辑层代码
package com.example.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.R.layout;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Matrix;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Display;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;
/**
* 发现的问题如果mPager初始值不为0会出现问题
*
* @author AI_Ling
*
*/
public class MainActivity extends Activity {
private ViewPager mPager;// 页卡内容
private List<View> listViews; // Tab页面列表
private ImageView cursor;// 动画图片
private TextView t1, t2, t3;// 页卡头标
private int offset = 0;// 动画图片偏移量
private int currIndex = 0;// 当前页卡编号
private int bmpW;// 动画图片宽度
private int screenX;
private MyPagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bmpW = BitmapFactory.decodeResource(getResources(),
R.drawable.id_category_selector).getWidth();
// 得到窗体的默认宽高
WindowManager windowManager = getWindowManager();
Display display = windowManager.getDefaultDisplay();
screenX = display.getWidth();
initTextView();
initViewPager();
initCursor();
}
private void initCursor() {
cursor = (ImageView) findViewById(R.id.cursor);
offset = (currIndex * (screenX / listViews.size()) + (screenX
/ listViews.size() - bmpW) / 2)
% screenX;
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
cursor.setImageMatrix(matrix);// 设置动画初始位置
}
private void initViewPager() {
mPager = (ViewPager) findViewById(R.id.vPager);
listViews = new ArrayList<View>();
// 初始化三个page对应的视图
LinearLayout ll1 = new LinearLayout(this);
LinearLayout ll2 = new LinearLayout(this);
LinearLayout ll3 = new LinearLayout(this);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
ll1.setLayoutParams(params);
ll1.setBackgroundColor(Color.RED);
listViews.add(ll1);
ll2.setLayoutParams(params);
ll2.setBackgroundColor(Color.GREEN);
listViews.add(ll2);
ll3.setLayoutParams(params);
ll3.setBackgroundColor(Color.BLUE);
listViews.add(ll3);
adapter = new MyPagerAdapter();
mPager.setAdapter(adapter);
// 设置首次加载的界面,如果希望首次加载的页面发生改变需要改变currIndex的初始值
mPager.setCurrentItem(currIndex);
mPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int index) {
int start = (currIndex * (screenX / listViews.size()))
% screenX;
// + (screenX/ listViews.size() - bmpW) / 2
int end = (index * (screenX / listViews.size())) % screenX;
// start:动画开始位置X的偏移量,end动画结束位置X的偏移量
System.out.println(start + "," + end);
TranslateAnimation animation = new TranslateAnimation(start,
end, 0, 0);
animation.setDuration(500);
// True:图片停在动画结束位置
animation.setFillAfter(true);
cursor.startAnimation(animation);
currIndex = index;
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
});
}
private void initTextView() {
t1 = (TextView) findViewById(R.id.text1);
t2 = (TextView) findViewById(R.id.text2);
t3 = (TextView) findViewById(R.id.text3);
t1.setOnClickListener(new MyClickListener(0));
t2.setOnClickListener(new MyClickListener(1));
t3.setOnClickListener(new MyClickListener(2));
}
// 创建数据适配器
class MyPagerAdapter extends PagerAdapter {
@Override
public Object instantiateItem(ViewGroup container, int position) {
// 第一步万不能少
container.addView(listViews.get(position));
return listViews.get(position);
};
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(listViews.get(position));
};
@Override
public int getCount() {
return listViews.size();
};
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
}
class MyClickListener implements OnClickListener {
private int index;
public MyClickListener(int index) {
this.index = index;
}
@Override
public void onClick(View v) {
// 显示单击索引的pager
mPager.setCurrentItem(index);
// 更改当前显示的位置为当前索引
currIndex = index;
}
}
}
效果图: