android Tab和ViewPager结合的例子
程序员文章站
2022-07-04 18:48:38
...
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;// 各个页面卡片
@Override
protected 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();// 这个在我前面写的几篇里面有介绍Inflater
view1 = 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;
}
@Override
public 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;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mListView.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mListView.get(position));
return mListView.get(position);
}
@Override
public int getCount() {
return mListView.size();
}
@Override
public 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 偏移量
@Override
public void onPageScrollStateChanged(int arg0) {
// arg0 ==1的时候表示正在滑动,arg0==2的时候表示滑动完毕了,arg0==0的时候表示什么都没做,就是停在那。
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// 表示在前一个页面滑动到后一个页面的时候,在前一个页面滑动前调用的方法
}
@Override
public 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();
}
}
}