Viewpager 选项卡的滑动动画效果

最新推荐文章于 2022-10-14 14:34:37 发布

原创最新推荐文章于 2022-10-14 14:34:37 发布 · 649 阅读

0 ·

CC 4.0 BY-SA版权

< ANDROID 自定义UI> 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个基于Android平台的简单应用案例，该应用通过使用ViewPager实现页面间的切换，并配合自定义动画完成平滑的页卡切换效果。文章详细展示了如何在XML布局文件中设置ViewPager及与其对应的页卡，同时在MainActivity.java中实现动画效果和页面切换的监听。

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

//activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:umadsdk="http://schemas.android.com/apk/res/com.LoveBus"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="60dip">

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="fill_parent"
            android:layout_height="60.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="20sp" />

            <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="20sp" />

            <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="20sp" />
        </LinearLayout>

        <ImageView
            android:layout_alignBottom="@id/linearLayout1"
            android:id="@+id/cursor"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:scaleType="matrix"
            android:src="@drawable/tab" />
    </RelativeLayout>

    <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>

//MainActivity.java

public class MainActivity extends Activity {

	private ViewPager pager;
	private List<View> list_layouts;
	private ImageView tabImg;// 选项卡
	private TextView t1, t2, t3;// 标题
	private int offset = 0;// 动画偏移量初始值
	private int currentIndex = 0;// 当前页卡编号
	private int bmpW;// 图片宽度

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		initImageView();
		
		initTextView();
		
		InitViewPager();
		
		

	}
	
	 private void InitViewPager() {
	        pager = (ViewPager) findViewById(R.id.vPager);
	        list_layouts = new ArrayList<View>();
	        LayoutInflater mInflater = getLayoutInflater();
	        list_layouts.add(mInflater.inflate(R.layout.tab1, null));
	        list_layouts.add(mInflater.inflate(R.layout.tab2, null));
	        list_layouts.add(mInflater.inflate(R.layout.tab3, null));
	        pager.setAdapter(new MyPagerAdapter(list_layouts));
	        pager.setCurrentItem(0);
	        pager.setOnPageChangeListener(new MyOnPageChangeListener());
	    }
	 

	private void initImageView() {
		tabImg = (ImageView) findViewById(R.id.cursor);
		bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.tab)
				.getWidth();
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		int screenW = dm.widthPixels;

		/******************初始化选项卡的位置************************/
		/**
           | offset |    bmW    | offset | offset |    bmW   |   offset | offset    |   bmW    |    offset|   
           
              **/
		
		offset = (screenW / 3 - bmpW) / 2;// 计算偏移量
		Matrix matrix = new Matrix();
		matrix.postTranslate(offset, 0);//
		tabImg.setImageMatrix(matrix);// 设置动画初始位置
	}

	private void initTextView() {
		t1 = (TextView) this.findViewById(R.id.text1);
		t2 = (TextView) this.findViewById(R.id.text2);
		t3 = (TextView) this.findViewById(R.id.text3);

		t1.setOnClickListener(new MyOnClickListener(0));
		t2.setOnClickListener(new MyOnClickListener(1));
		t3.setOnClickListener(new MyOnClickListener(2));
	}
	
	
	public class MyPagerAdapter extends PagerAdapter {
        public List<View> mListViews;
 
        public MyPagerAdapter(List<View> mListViews) {
            this.mListViews = mListViews;
        }
 
        @Override
        public void destroyItem(View arg0, int arg1, Object arg2) {
            ((ViewPager) arg0).removeView(mListViews.get(arg1));
        }
 
        @Override
        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 (currentIndex == 1) {
                    animation = new TranslateAnimation(one, 0, 0, 0);
                } /*else if (currentIndex == 2) {
                    animation = new TranslateAnimation(two, 0, 0, 0);
                }*/
                break;
            case 1:
                if (currentIndex == 0) {
                    animation = new TranslateAnimation(offset, one, 0, 0);
                } else if (currentIndex == 2) {
                    animation = new TranslateAnimation(two, one, 0, 0);
                }
                break;
            case 2:
               /* if (currentIndex == 0) {
                    animation = new TranslateAnimation(offset, two, 0, 0);
                } else */if (currentIndex == 1) {
                    animation = new TranslateAnimation(one, two, 0, 0);
                }
                break;
            }
            currentIndex = arg0;
            animation.setFillAfter(true);// True:图片停在动画结束位置
            animation.setDuration(300);
            tabImg.startAnimation(animation);
        }
 
//        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }
 
//        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    }
 
   
 

	// 选项卡动作监听
	public class MyOnClickListener implements View.OnClickListener {

		private int index = 0;

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

		public void onClick(View v) {

			pager.setCurrentItem(index);
		}

	}

}

//参考博客：http://blog.sina.com.cn/s/blog_b37dcd9701018ujn.html