viewPager使用(二）-自主实现滑动指示条,固定标题项

  由于viewPager自带的指示条都无法固定， PagerTabStrip和PagerTitleStrip都不适合用在实际用途。    

1. 布局中自定出选项卡与指示条图片

2. 通过改变图片的偏移量实现图片的滑动

3. 通过事件触发图片移动的动画

<LinearLayout xmlns:android=" http://schemas.android.com/apk/res/android"
    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="40dp"
        android:background="#ffffff">
        <TextView 
            android:id="@+id/text1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="我"
            android:textColor="#000000"
            android:textSize="20sp"/>
        <TextView 
            android:id="@+id/text2"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="评论"
            android:textColor="#000000"
            android:textSize="20sp"/>
        <TextView 
            android:id="@+id/text3"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="私信"
            android:textColor="#000000"
            android:textSize="20sp"/>
    </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/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"  
        android:layout_gravity="center" >

    </android.support.v4.view.ViewPager>

</LinearLayout>

public class FixViewPagerActivity extends Activity {

 private ViewPager viewPager;// 页卡内容

 private ImageView imageView;// 动画图片

 private TextView textView1, textView2, textView3;

 private int offset = 0;// 动画图片偏移量

 private int currIndex = 0;// 当前页卡编号

 private int bmpW;// 动画图片宽度

 private int oneTabWid;

 private List<View> viewContainter;

 @Override

 protected void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);

  setContentView(R.layout.activity_fixtab);

  initView();

  initTitle();

 }

 private void initTitle() {

  textView1 = (TextView) findViewById(R.id.text1);

  textView2 = (TextView) findViewById(R.id.text2);

  textView3 = (TextView) findViewById(R.id.text3);

  textView1.setOnClickListener(new MyOnClickListener(0));

  textView2.setOnClickListener(new MyOnClickListener(1));

  textView3.setOnClickListener(new MyOnClickListener(2));

 }

 private void initView() {

  viewPager = (ViewPager) findViewById(R.id.viewpager);

  imageView = (ImageView) findViewById(R.id.cursor);

  bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.line)

    .getWidth();// 获取图片宽度

  DisplayMetrics dm = new DisplayMetrics();

  getWindowManager().getDefaultDisplay().getMetrics(dm);

  int screenW = dm.widthPixels;// 获取分辨率宽度

  oneTabWid = screenW / 3;

  offset = (oneTabWid - bmpW) / 2;// 计算偏移量 Matrix matrix = new

  Matrix matrix = new Matrix();

  matrix.postTranslate(offset, 0);

  imageView.setImageMatrix(matrix);// 设置动画初始位置

  View view1 = LayoutInflater.from(this).inflate(R.layout.item1, null);

  View view2 = LayoutInflater.from(this).inflate(R.layout.item2, null);

  View view3 = LayoutInflater.from(this).inflate(R.layout.item3, null);

  // 标签块

  viewContainter = new ArrayList<View>();

  viewContainter.add(view1);

  viewContainter.add(view2);

  viewContainter.add(view3);

  MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(

    viewContainter);

  viewPager.setAdapter(myViewPagerAdapter);

  viewPager.setCurrentItem(0);

  viewPager.setOnPageChangeListener(new MyOnPageChangeListener()); // 若不设置这个，标题下边的线不会随着页卡滑动而滑动

 }

 class MyOnPageChangeListener implements OnPageChangeListener {

  public void onPageScrollStateChanged(int arg0) { // arg0

               // ==1的时辰默示正在滑动，arg0==2的时辰默示滑动完毕了，arg0==0的时辰默示什么都没做，就是停在那。

  }

  public void onPageScrolled(int arg0, float arg1, int arg2) { // 默示在前一个页面滑动到后一个页面的时辰，在前一个页面滑动前调用的办法。

  }

  public void onPageSelected(int arg0) { // arg0是默示你当前选中的页面，这事务是在你页面跳转完毕的时辰调用的。

   Animation animation = new TranslateAnimation(oneTabWid * currIndex,

     oneTabWid * arg0, 0, 0);// 显然这个比较简洁，只有一行代码。

   currIndex = arg0;

   animation.setFillAfter(true);// True:图片停在动画结束位置

   animation.setDuration(300);

   imageView.startAnimation(animation);

   Toast.makeText(FixViewPagerActivity.this,

     "您选择了" + viewPager.getCurrentItem() + "页卡",

     Toast.LENGTH_SHORT).show();

  }

 }

 /**

  *

  * 头标点击监听 3

  */

 class MyOnClickListener implements OnClickListener {

  private int index = 0;

  public MyOnClickListener(int i) {

   index = i;

  }

  public void onClick(View v) {

   viewPager.setCurrentItem(index);

  }

 }

 class MyViewPagerAdapter extends PagerAdapter {

  private List<View> mListViews;

  public MyViewPagerAdapter(List<View> listViews) {

   this.mListViews = listViews;

  }

  @Override

  public void destroyItem(ViewGroup container, int position, Object object) {

   container.removeView(mListViews.get(position));

  }

  @Override

  public Object instantiateItem(ViewGroup container, int position) {

   container.addView(mListViews.get(position), 0);

   return mListViews.get(position);

  }

  @Override

  public int getCount() {

   return mListViews.size();

  }

  @Override

  public boolean isViewFromObject(View arg0, Object arg1) {

   return arg0 == arg1;

  }

 }

}