viewpagertabsdemo

最新推荐文章于 2017-09-20 19:00:17 发布

啄米科技

最新推荐文章于 2017-09-20 19:00:17 发布

阅读量392

点赞数

CC 4.0 BY-SA版权

分类专栏： android学习知识点

本文链接：https://blog.youkuaiyun.com/jonemill/article/details/38410455

android学习知识点专栏收录该内容

109 篇文章

订阅专栏

本文详细介绍了Android应用开发中使用View Pager组件实现界面切换的技术，包括适配器类的实现、页面初始化、动画效果及监听器设置，以及如何通过Tab页面控制视图平滑切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

剩下的类似.