仿android桌面滑屏 ViewPage

最新推荐文章于 2022-12-24 20:49:38 发布

镜子里的大卫

最新推荐文章于 2022-12-24 20:49:38 发布

阅读量5.5k

点赞数

分类专栏： android ViewPage 文章标签： android layout animation listview matrix

本文链接：https://blog.csdn.net/zhuifeng11/article/details/7604734

版权

android 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

ViewPage

1 篇文章 0 订阅

订阅专栏

相信大家都对android桌面左右划屏操作很羡慕吧，QQ，新浪weibo，AndroidMarket都有这种操作，而且很多都作为主界面使用，可见其用户交互性特别好。

今天就把这种操作亲手实现，大家共同学习。ViewPage是Google最近在Compatibilit package发布的，支持android1.6+,可以在SDK安装目录下找到

\android-sdk-windows\extras\android\compatibility\v4，把这个jar包导入项目就可以了(这个就不用说了吧)

我们先看一看运行结果吧：如下：

好了，上面这就是我们今天要做的，首先我们先进行分析，看到头部三个页卡，及白色背景，那是最上层，中间是一个游标，一个长条图片，下面滑动的就是ViewPage了。

我们先将这个布局布好：

<?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/nav"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="#efefef">
        <TextView
            android:id="@+id/tab1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:textColor="#000000"
            android:text="页片1" />
        <TextView
            android:id="@+id/tab2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:textColor="#000000"
            android:text="页片2" />
        <TextView
            android:id="@+id/tab3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:textColor="#000000"
            android:text="页片3" />
     </LinearLayout>
     <ImageView android:id="@+id/cursor"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:scaleType="matrix"
         android:src="@drawable/cursor"/>
    <android.support.v4.view.ViewPager 
        android:id="@+id/page"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">        
    </android.support.v4.view.ViewPager>
</LinearLayout>

下面滑动的部分就是3个Layout：为了方便我们就用不同的背景色来区分吧

Layout1:

<?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" 
    android:background="#565656">   </LinearLayout>

Layout2:

<?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"
    android:background="#abab00">
</LinearLayout>

Layout3:

<?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" 
    android:background="#00abcd">
</LinearLayout>

定义变量

	private ViewPager myviewpage;
	private MyPagerAdapter mypagetadapter;
	private LayoutInflater inflater;
	private List<View> listviews;
	private View layout1=null,layout2=null,layout3=null;
	private TextView page1,page2,page3; 
	private ImageView cursor; 图片游标
	private int offset=0;  //动画图片偏移量
	private int currIndex=0; //当前卡片编号
	private int bmgW; //动画图片宽度

    //初始化动画
    private void initAnima(){
    	cursor = (ImageView)findViewById(R.id.cursor);  //初始化游标图片
    	bmgW = BitmapFactory.decodeResource(getResources(), R.drawable.cursor).getWidth(); //得到游标的宽度
    	DisplayMetrics dm = new DisplayMetrics(); 
    	getWindowManager().getDefaultDisplay().getMetrics(dm);
    	int screenW = dm.widthPixels; //屏幕宽度
    	offset=(screenW/3-bmgW)/2; //游标偏移量
    	Matrix matrix=new Matrix(); 
    	matrix.postTranslate(offset, 0); 
    	cursor.setImageMatrix(matrix); 游标初始位置
    }

初始化

        initAnima();
        myviewpage = (ViewPager)findViewById(R.id.page);
        listviews = new ArrayList<View>();
        inflater = getLayoutInflater();
        layout1=inflater.inflate(R.layout.layout1, null);
        layout2=inflater.inflate(R.layout.layout2, null);
        layout3=inflater.inflate(R.layout.layout3, null);
        listviews.add(layout1);
        listviews.add(layout2);
        listviews.add(layout3);
        page1=(TextView)findViewById(R.id.tab1);
        page2=(TextView)findViewById(R.id.tab2);
        page3=(TextView)findViewById(R.id.tab3);
        page1.setOnClickListener(new MyNavOnClickListener(0));
        page2.setOnClickListener(new MyNavOnClickListener(1));
        page3.setOnClickListener(new MyNavOnClickListener(2));
        mypagetadapter = new MyPagerAdapter(listviews);
        myviewpage.setAdapter(mypagetadapter);
        myviewpage.setOnPageChangeListener(new OnPageChangeListener() {
			int one = offset*2+bmgW; //页片1->页片2 偏移量
			int two=one*2; //页片1->页片3偏移量
			@Override
			public void onPageSelected(int pos) {
				// TODO Auto-generated method stub
				Animation animation = null;
				switch (pos) {
				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==1){
						animation=new TranslateAnimation(one, two, 0, 0);
					}else if(currIndex==0){
						animation=new TranslateAnimation(offset, two, 0, 0);
					}
					break;
				default:
					break;
				}
				currIndex=pos;
				animation.setFillAfter(true);
				animation.setDuration(300);
				cursor.setAnimation(animation);
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});

设置ViewPage适配器

    class MyPagerAdapter extends PagerAdapter{
    	List<View> views;
		public MyPagerAdapter(List<View> v) {
			super();
			// TODO Auto-generated constructor stub
		    views = v;
		}

		@Override
		public void destroyItem(View v, int pos, Object arg2) {
			// TODO Auto-generated method stub
			((ViewPager) v).removeView(views.get(pos));
		}

		@Override
		public void finishUpdate(View arg0) {
			// TODO Auto-generated method stub
			
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return views.size();
		}

		@Override
		public Object instantiateItem(View v, int pos) {
			// TODO Auto-generated method stub
			((ViewPager) v).addView(views.get(pos));
			return views.get(pos);
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0==arg1;
		}

		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1) {
			// TODO Auto-generated method stub
			
		}

		@Override
		public Parcelable saveState() {
			// TODO Auto-generated method stub
			return null;
		}

		@Override
		public void startUpdate(View arg0) {
			// TODO Auto-generated method stub
			
		}
    	
    }