viewpagertabsdemo
1.一共两个类.
类一:
package com.qzl.viewpagertabsdemo;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
/**
* ViewPager适配器
*
* @author wwj
*
*/
public class MyViewPagerAdapter extends PagerAdapter {
// 集合view 界面
private List<View> views;
//构造函数
public MyViewPagerAdapter(List<View> views) {
this.views = views;
}
//覆盖的方法
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//从views中移除
container.removeView(views.get(position));
}
@Override
public int getCount() {
if (views != null) {
return views.size();
}
return 0;
}
//初始化
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(views.get(position)); // 把被点击的view放入缓存中
return views.get(position); // 返回被view对象
}
//
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return (arg0 == arg1);
}
}
类二:
package com.qzl.viewpagertabsdemo;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
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.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends Activity {
//控件
ViewPager viewPager;
MyViewPagerAdapter pagerAdapter;
View view1, view2, view3, view4; // 页面
List<View> views; // Tab页面列表
ImageView img_cursor; // 指示图片
TextView tv_guid1, tv_guid2, tv_guid3, tv_guid4; // 页卡头标
int offset = 0; // 偏移量
int currIndex = 0; // 当前页卡编号
int bmpW; // 图片宽度
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initImageView();
initTextView();
// view1 = (View) findViewById(R.layout.viewpager1);
// view2 = (View) findViewById(R.layout.viewpager2);
// view3 = (View) findViewById(R.layout.viewpager3);
// view4 = (View) findViewById(R.layout.viewpager4);
//得到inflater.获取四个view,加入list集合.得到适配器
//
LayoutInflater inflater = LayoutInflater.from(this);
view1 = inflater.inflate(R.layout.viewpager1, null);
view2 = inflater.inflate(R.layout.viewpager2, null);
view3 = inflater.inflate(R.layout.viewpager3, null);
view4 = inflater.inflate(R.layout.viewpager4, null);
views = new ArrayList<View>();
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
pagerAdapter = new MyViewPagerAdapter(views);
//实例化vp
viewPager = (ViewPager) findViewById(R.id.viewpager);
//给vp设置适配器
viewPager.setAdapter(pagerAdapter);
//设置初始页面
viewPager.setCurrentItem(0);
//设置监听器
viewPager.setOnPageChangeListener(new MyOnPageChangeListener());
}
/**
* 初始化动画图片
*
*/
private void initImageView() {
//得到ImageView
img_cursor = (ImageView) findViewById(R.id.cursor);
//得到bitmap的的宽度.
bmpW = BitmapFactory.decodeResource(getResources(),R.drawable.star)
.getWidth();
//屏幕分辩率
DisplayMetrics dm = new DisplayMetrics();
this.getWindowManager().getDefaultDisplay().getMetrics(dm);
//宽度的分辨率
int screenW = dm.widthPixels; // 获取手机屏幕宽度分辨率
//使平移看上去像动画
offset = (screenW / 4 - bmpW) / 2; // 获取图片偏移量
// imageview设置平移，使图片平移到初始位置（平移一个offset）
//得到矩阵
Matrix matrix = new Matrix();
//设置平移 x平移
matrix.postTranslate(offset, 0);
//给imageview设置平移
img_cursor.setImageMatrix(matrix);
}
/**
*
* 初始化TextView控件，和注册监听器
*/
private void initTextView() {
tv_guid1 = (TextView) findViewById(R.id.tv_guid1);
tv_guid2 = (TextView) findViewById(R.id.tv_guid2);
tv_guid3 = (TextView) findViewById(R.id.tv_guid3);
tv_guid4 = (TextView) findViewById(R.id.tv_guid4);
tv_guid1.setOnClickListener(listener);
tv_guid2.setOnClickListener(listener);
tv_guid3.setOnClickListener(listener);
tv_guid4.setOnClickListener(listener);
}
//实例化接口 点击事件
OnClickListener listener = new OnClickListener() {
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tv_guid1:
//当点击第一个按钮,vp设置为第一个.
viewPager.setCurrentItem(0);
break;
case R.id.tv_guid2:
viewPager.setCurrentItem(1);
break;
case R.id.tv_guid3:
viewPager.setCurrentItem(2);
break;
case R.id.tv_guid4:
viewPager.setCurrentItem(3);
break;
default:
break;
}
}
};
// 当页面滑动时，开始动画并跳出Toast
public class MyOnPageChangeListener implements OnPageChangeListener {
//例如10.2+30=50
private int one = offset * 2 + bmpW; // 页面1到页面2的偏移量
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
// arg0 即将要被显示的页卡的index
//note:new一个平移动画,设置给imageview.
@Override
public void onPageSelected(int arg0) {
// 初始化移动的动画（从当前位置，x平移到即将要到的位置）
//当前页卡为0,0...1x50 50个单位
// 1X50...2X50 50个单位
Animation animation = new TranslateAnimation(currIndex * one, arg0
* one, 0, 0);
//此时currIndex为1
currIndex = arg0;
//让平移的动画停留.
animation.setFillAfter(true); // 动画终止时停留在最后一帧，不然会回到没有执行前的状态
animation.setDuration(200); // 动画持续时间，0.2秒
img_cursor.startAnimation(animation); // 是用imageview来显示动画
int i = currIndex + 1;
Toast.makeText(MainActivity.this, "您选择了第" + i + "个页卡",
Toast.LENGTH_SHORT).show();
}
}
}
布局:
主布局:/ViewPagerTabsDemo/res/layout/activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/ll_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_guid1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="特性1"
android:textSize="18sp"/>
<TextView
android:id="@+id/tv_guid2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="特性2"
android:textSize="18sp"/>
<TextView
android:id="@+id/tv_guid3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="特性3 "
android:textSize="18sp"/>
<TextView
android:id="@+id/tv_guid4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="特性4"
android:textSize="18sp"/>
</LinearLayout>
<ImageView
android:id="@+id/cursor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ll_layout"
android:scaleType="matrix"
android:src="@drawable/star" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/cursor"
android:flipInterval="30"
android:persistentDrawingCache="animation" />
</RelativeLayout>
其他四页:/ViewPagerTabsDemo/res/layout/viewpager1.xml
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:drawable/btn_radio" >
</RelativeLayout>剩下的类似.