`

【原创】android ViewPager控件的使用

 
阅读更多
android4.0有个控件,就是viewpager,用来实现左右滑动效果的。我们具体来看看是如何使用的。
首先看一下效果图

3个tab,每个tab有个layout,滑动的时候指示滑动条跟着走(当然,我觉得这个滑动条可以用三张图片来实现,更简单点)。
具体的我们看代码吧,主页xml就是实现上面三个tabbar,滑动条和一个viewpager控件,如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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="100.0dip"
        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/slide" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1.0"
        android:background="#000000"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />

</LinearLayout>


然后主要是看代码里面怎么用的,viewpager需要一个adapter来适配里面的每个layout。
public class ViewPageDemoActivity 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;// 动画图片宽度
	MyPagerAdapter adapter;
	LayoutInflater mInflater;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		Log.i("Viewpage","--onCreate--");
		initImageView();
		initTextView();
		initPageView();
		
	}

	private void initPageView() {
		mInflater = getLayoutInflater();
		listViews = new ArrayList<View>();
		listViews.add(mInflater.inflate(R.layout.item1, null));
		listViews.add(mInflater.inflate(R.layout.item2, null));
		listViews.add(mInflater.inflate(R.layout.item3, null));
		adapter = new MyPagerAdapter(listViews);
		mPager = (ViewPager) findViewById(R.id.vPager);
		mPager.setAdapter(adapter);
		mPager.setCurrentItem(0);
		mPager.setOnPageChangeListener(new MyOnPageChangeListener());
	}

	private void initTextView() {
		t1 = (TextView) findViewById(R.id.text1);
		t2 = (TextView) findViewById(R.id.text2);
		t3 = (TextView) findViewById(R.id.text3);
		t1.setOnClickListener(new MyOnClickListener(0));
		t2.setOnClickListener(new MyOnClickListener(1));
		t3.setOnClickListener(new MyOnClickListener(2));
	}

	private void initImageView() {
		cursor = (ImageView) findViewById(R.id.cursor);
		bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.slide)
				.getWidth();// 获取图片宽度
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		int screenW = dm.widthPixels;// 获取分辨率宽度
		offset = (screenW / 3 - bmpW) / 2;// 计算偏移量
		Matrix matrix = new Matrix();
		matrix.postTranslate(offset, 0);
		cursor.setImageMatrix(matrix);// 设置动画初始位置
	}

	private class MyOnClickListener implements View.OnClickListener {
		private int index = 0;

		public MyOnClickListener(int i) {
			index = i;
		}

		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			mPager.setCurrentItem(index);
		}
	}

	public class MyPagerAdapter extends PagerAdapter {
		public List<View> mListViews;

		public MyPagerAdapter(List<View> mListViews) {
			this.mListViews = mListViews;
		}

		public void destroyItem(View arg0, int arg1, Object arg2) {
			((ViewPager) arg0).removeView(mListViews.get(arg1));
		}

		public void finishUpdate(View arg0) {
		}

		@Override
		public int getCount() {
			return mListViews.size();
		}

		@Override
		public Object instantiateItem(View arg0, int arg1) {
			((ViewPager) arg0).addView(mListViews.get(arg1), 0);
			return mListViews.get(arg1);
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == (arg1);
		}

		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1) {
		}

		@Override
		public Parcelable saveState() {
			return null;
		}

		@Override
		public void startUpdate(View arg0) {
		}
	}

	public class MyOnPageChangeListener implements OnPageChangeListener {

		int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量
		int two = one * 2;// 页卡1 -> 页卡3 偏移量

		@Override
		public void onPageSelected(int arg0) {
			Animation animation = null;
			switch (arg0) {
			case 0:
				if (currIndex == 1) {
					animation = new TranslateAnimation(one, 0, 0, 0);
				} else if (currIndex == 2) {
					animation = new TranslateAnimation(two, 0, 0, 0);
				}
				break;
			case 1:
				if (currIndex == 0) {
					animation = new TranslateAnimation(offset, one, 0, 0);
				} else if (currIndex == 2) {
					animation = new TranslateAnimation(two, one, 0, 0);
				}
				break;
			case 2:
				if (currIndex == 0) {
					animation = new TranslateAnimation(offset, two, 0, 0);
				} else if (currIndex == 1) {
					animation = new TranslateAnimation(one, two, 0, 0);
				}
				break;
			}
			currIndex = arg0;
			animation.setFillAfter(true);// True:图片停在动画结束位置
			animation.setDuration(300);
			cursor.startAnimation(animation);
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
		}

		@Override
		public void onPageScrollStateChanged(int arg0) {
		}
	}
}

当然,你需要为每个tab对应一个layout,就想上面的item1,item2,item3一样。
这样就能实现左右滑动的一个效果了。

顺便说一下,viewpager刚开始推出,还没加入到正式的sdk,需要一个额外的jar包,运行工程的时候导入一下jar包就好了。
源码见附件。
  • 大小: 11.6 KB
分享到:
评论

相关推荐

    ViewPager+自定义控件实现的日历控件CalenderView

    总的来说,“ViewPager+自定义控件实现的日历控件CalenderView”项目展示了如何将Android的内置组件与自定义逻辑相结合,创造出满足特定业务需求的用户界面。开发者通过这个案例可以学习到如何有效地利用`ViewPager`...

    android ViewPager指示器

    在Android开发中,ViewPager是一种非常常用的组件,它允许用户通过左右滑动来浏览多个页面,常用于实现类似轮播图或者Tab切换的效果。而ViewPager指示器则是与ViewPager配合使用,用以显示当前所选页面的状态,通常...

    Android ViewPager切换的七种动画

    Android ViewPager切换的七种动画,分别是:深入浅出,立方体,旋转,左右折叠,右上角进入,右下角进入和淡入淡出。

    android viewpager各种滑动动画

    在Android开发中,ViewPager是一个非常重要的组件,常用于实现页面滑动切换的效果,例如在应用的引导页、图片轮播或者Tab布局中。本篇将深入讲解如何在ViewPager中实现各种自定义滑动动画,以及如何优化性能并保持...

    Android ViewPager的简单使用

    首先,ViewPager是Android Support Library中的一个控件,它允许用户通过左右滑动来浏览多个视图(View)。这为用户提供了一种流畅的交互体验,特别是在处理大量数据或多个子页面时。 1. **添加依赖** 在使用...

    Android控件ViewPager实现带有动画的引导页

    Android 控件 ViewPager 实现带有动画的引导页 Android 控件 ViewPager 是一个非常流行的控件,经常被用于实现引导页、图片展示等功能。今天,我们将详细介绍如何使用 ViewPager 实现带有动画的引导页。 知识点一...

    Android ViewPager使用详解

    **Android ViewPager 使用详解** ViewPager是Android开发中一个非常重要的组件,它允许用户通过左右滑动来切换不同的页面,常用于实现应用的滑动导航或展示多个相似内容的页面。在本篇文章中,我们将深入探讨...

    viewpager 关于子页面控件监听的解决方法

    在Android开发中,ViewPager是一个非常常用的组件,它用于展示多个Fragment或者View,并且可以左右滑动切换页面。在实际应用中,我们常常需要对ViewPager的子页面中的控件进行监听,以便实现各种交互功能。本篇文章...

    android ViewPager嵌套Fragment动态删除和插入案例

    android ViewPagerr嵌套Fragment 动态删除 动态插入,完美实现动态删除和插入,Fragment懒加载,可适用于各版本。the sample of android viewpager daynmic update or delete

    Android使用ViewPager加载图片和轮播视频

    至于ViewPager加载视频并在特定页面播放的功能,由于Android原生的ViewPager不支持视频直接播放,开发者需要在ViewPager中嵌入视频播放器控件,如ExoPlayer、MediaPlayer等,或者使用第三方视频播放库来实现视频的...

    Android ViewPager和Fragment 实现滑动切换页面

    在Android应用开发中,`ViewPager`和`Fragment`是两个重要的组件,它们常被结合使用以实现用户界面的滑动切换效果。`ViewPager`提供了一个可以左右滑动查看多个页面的容器,而`Fragment`则作为Activity的部分内容,...

    Android ViewPager 小示例

    在这个“Android ViewPager小示例”中,我们将深入探讨ViewPager的基本用法、功能以及如何与其他组件结合使用,以实现更丰富的交互体验。 首先,ViewPager是Android Support Library的一部分,它支持API 11及以上...

    Android ViewPager多页面滑动切换以及动画效果

    Android ViewPager实现仿QQ多页面滑动切换以及动画效果

    android viewpager滑动效果

    本项目“android viewpager滑动效果”专注于实现ViewPager的滑动动态效果,提供了预封装好的接口,使得开发者可以直接使用,无需从头实现复杂的动画逻辑。 ViewPager的滑动效果通常通过PageTransformer来实现,这是...

    Android原生ViewPager控件实现卡片翻动效果

    本文将详细介绍如何使用Android原生ViewPager控件实现卡片翻动效果的步骤和代码实现。 一、了解ViewPager控件 ViewPager控件是Android的一个基本控件,用于实现屏幕之间的切换。它可以容纳多个屏幕,用户可以通过...

    IOS实现类似Android的ViewPager

    在iOS开发中,为了实现类似Android的ViewPager效果,开发者经常需要用到UIPageViewController或者自定义的ScrollView来实现页面滑动切换的功能。这篇内容将详细介绍如何在iOS应用中创建一个简易的ViewPager,以达到...

    Android ViewPager用法解析

    **Android ViewPager详解** ViewPager是Android开发中一个非常重要的组件,主要用于在多个页面间进行滑动切换,常用于实现Tab切换或者展示多个相似内容的页面。它来自`androidx.viewpager.widget`包,提供了平滑的...

    android ViewPager应用demo

    **Android ViewPager 应用详解** ViewPager 是 Android 平台上一个强大的视图组件,它允许用户通过左右滑动来浏览多个页面,通常用于实现平滑的水平滚动效果。在本示例中,我们将会探讨如何利用 ViewPager 实现三种...

    Android ViewpagerDemo

    **Android ViewPager 深度解析** `Android ViewPager` 是 Android SDK 中一个强大的组件,用于实现水平滑动页面的效果,常用于展示多个相关的视图或页面。在这个 `ViewPagerDemo` 中,我们将深入探讨如何有效地利用...

Global site tag (gtag.js) - Google Analytics