android Tab和ViewPager结合的例子

package com.test.activity;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.graphics.Matrix;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.TextView;import android.widget.Toast;import com.test.R;public class TabActivity extends Activity {private ViewPager viewPager;// 可滑动的页卡内容,也就是我们主要练习的目标private ImageView imageView;// 类似游标的动画图片,这个就是那个左右滑动的小滑块private TextView textView1, textView2, textView3;private List<View> views;// 页面列表private int offset = 0;// 游标移动的偏移量private int currentIndex = 0;// 当前页面号码private int bmpW;// 游标宽度private View view1, view2, view3;// 各个页面卡片@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.tab);InitImageView();InitTextView();InitViewPager();}@SuppressWarnings("all")private void InitViewPager() {viewPager = (ViewPager) findViewById(R.id.vPager);views = new ArrayList<View>();LayoutInflater inflater = getLayoutInflater();// 这个在我前面写的几篇里面有介绍Inflaterview1 = inflater.inflate(R.layout.lay1, null);view2 = inflater.inflate(R.layout.lay2, null);view3 = inflater.inflate(R.layout.lay3, null);views.add(view1);views.add(view2);views.add(view3);// ViewPager跟ListView一样,也需要一个适配器,后面对PagerAdapter进行重写viewPager.setAdapter(new MyViewPagerAdapter(views));// 默认显示第一个卡片页viewPager.setCurrentItem(0);// 给ViewPager加监听器viewPager.setOnPageChangeListener(new MyOnPageChangeListener());}private void InitTextView() {textView1 = (TextView) findViewById(R.id.tt1);textView2 = (TextView) findViewById(R.id.tt2);textView3 = (TextView) findViewById(R.id.tt3);textView1.setOnClickListener(new MyOnClickLis(0));textView2.setOnClickListener(new MyOnClickLis(1));textView3.setOnClickListener(new MyOnClickLis(2));// 这些监听器保证在点击头部的标签时候页面也能滑动}private void InitImageView() {imageView = (ImageView) findViewById(R.id.cursor);bmpW = imageView.getWidth();DisplayMetrics displayMetrics = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);int screen = displayMetrics.widthPixels;// 这个地方就是给每个标签左右各留出一块offset,共3个标签,6个offset,offset = (screen - bmpW * 40) / 6;Matrix matrix = new Matrix();// 向右平移matrix.postTranslate(offset, 0);// 对图片进行平移操作imageView.setImageMatrix(matrix);}private class MyOnClickLis implements OnClickListener {private int index;public MyOnClickLis(int index) {// 注意,这里的监听器有一个默认的带参数的构造器,用来确定你点击的是哪一个标签this.index = index;}@Overridepublic void onClick(View v) {viewPager.setCurrentItem(index);}}// 下面是比较重点的了,就是之前提到过的重写PagerAdapter,重写时候我们至少需要重写一下4个方法,当然这里我们也只写了这4个方法.public class MyViewPagerAdapter extends PagerAdapter {private List<View> mListView;public MyViewPagerAdapter(List<View> views) {this.mListView = views;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mListView.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(mListView.get(position));return mListView.get(position);}@Overridepublic int getCount() {return mListView.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}}public class MyOnPageChangeListener implements OnPageChangeListener {int one = offset * 2 + bmpW;// 卡片1 --> 卡片2 偏移量int two = one * 2;// 卡片2 --> 卡片3 偏移量@Overridepublic void onPageScrollStateChanged(int arg0) {// arg0 ==1的时候表示正在滑动，arg0==2的时候表示滑动完毕了，arg0==0的时候表示什么都没做，就是停在那。}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// 表示在前一个页面滑动到后一个页面的时候，在前一个页面滑动前调用的方法}@Overridepublic void onPageSelected(int position) {// 左右移动动画Animation animation = new TranslateAnimation(one * currentIndex,one * position, 0, 0);currentIndex = position;// 图片停留在动画结束的位置animation.setFillAfter(true);animation.setDuration(100);imageView.startAnimation(animation);Toast.makeText(TabActivity.this, "卡片移向了第" + position + "页",Toast.LENGTH_SHORT).show();}}}
更多相关文章

随机推荐
