ViewPager固定标题的案例

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;
		}
	}

}
 

效果图：