利用Viewpager制作滚动游标效果
由之前几篇文章的了解,我懂得了图片的各种变换效果,和动画的效果,因此我做了下面的游标效果
附上代码:
activity:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
package com.example.ui; 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.os.Parcelable; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.view.KeyEvent; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.ImageView; import android.widget.TextView; import com.example.testforrun.R; import com.example.testforrun.R.drawable; import com.example.testforrun.R.id; import com.example.testforrun.R.layout; public class SimpleViewPagerActivity 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;// 动画图片宽度 @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.activity_viewpager); InitTextView(); InitImageView(); InitViewPager(); // initEvent(); } private void initEvent() { cursor.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } }); cursor.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { return false; } }); cursor.setOnKeyListener(new View.OnKeyListener() { @Override public boolean onKey(View v, int keyCode, KeyEvent event) { switch (keyCode) { case KeyEvent.ACTION_DOWN: break; case KeyEvent.ACTION_UP: break; case KeyEvent.ACTION_MULTIPLE: break; default: break; } return false; } }); } /** * 初始化头标 */ 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.ic_launcher) .getWidth(); //手机的外观机构工具,外观度量工具 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); // int screenW = dm.widthPixels;// 获取分辨率宽度 offset = (screenW / 3 - bmpW) / 2;// 计算偏移量 //3*3矩阵类 Matrix matrix = new Matrix(); matrix.postTranslate(offset, 0); cursor.setImageMatrix(matrix);// 设置动画初始位置 } /** * 头标点击监听 */ public class MyOnClickListener implements View.OnClickListener { private int index = 0; public MyOnClickListener(int i) { index = i; } @Override public void onClick(View v) { mPager.setCurrentItem(index); } }; /** * 初始化ViewPager */ private void InitViewPager() { mPager = (ViewPager) findViewById(R.id.vPager); listViews = new ArrayList<View>(); LayoutInflater mInflater = getLayoutInflater(); listViews.add(mInflater.inflate(R.layout.activity_test1, null)); listViews.add(mInflater.inflate(R.layout.activity_test2, null)); listViews.add(mInflater.inflate(R.layout.activity_test3, null)); mPager.setAdapter(new MyPagerAdapter(listViews)); mPager.setCurrentItem(0); mPager.setOnPageChangeListener(new MyOnPageChangeListener()); } /** * ViewPager适配器 */ public class MyPagerAdapter extends PagerAdapter { public List<View> mListViews; public MyPagerAdapter(List<View> mListViews) { this.mListViews = mListViews; } /** * 将page的view从父viewgroup中丢弃,参数分别为父view、要丢弃的子view在page中的position、子view */ @Override public void destroyItem(View arg0, int arg1, Object arg2) { ((ViewPager) arg0).removeView(mListViews.get(arg1)); } /** * 当全部page的view初始化完毕,即instantiateItem()执行完 */ @Override public void finishUpdate(View arg0) { } /** * viewpager的页数 */ @Override public int getCount() { return mListViews.size(); } /** * 适配器中核心的方法,将每个page的view加到viewgroup中,该方法在finishUpdate(View container)方法执行前必须全部完成。 */ @Override public Object instantiateItem(View arg0, int arg1) { ((ViewPager) arg0).addView(mListViews.get(arg1), 0); return mListViews.get(arg1); } /** * 将每页与一个特殊的key联系起来。通过instantiateItem(View arg0, int arg1)返回的对象与当页的view进行比较 * Determines whether a page View is associated with a specific key object * as returned by {@link #instantiateItem(ViewGroup, int)}. This method is * required for a PagerAdapter to function properly. */ @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == (arg1); } /** * Restore any instance state associated with this adapter and its pages * that was previously saved by {@link #saveState()}. * 恢复任何 通过saveState()方法存下状态信息并且与此适配器及其相关页面有关的实例 * @param state State previously saved by a call to {@link #saveState()} * @param loader A ClassLoader that should be used to instantiate any restored objects */ @Override public void restoreState(Parcelable arg0, ClassLoader arg1) { } /** * Save any instance state associated with this adapter and its pages that should be * restored if the current UI state needs to be reconstructed. */ @Override public Parcelable saveState() { return null; } @Override public void startUpdate(View arg0) { } } /** * 页卡切换监听 */ public class MyOnPageChangeListener implements OnPageChangeListener { int one = offset * 2 + bmpW;// 第一页到第二页的偏移量 int two = one * 2;// 第一页到第三页的偏移量 @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);//图片停在动画结束位置 animation.setDuration(300); cursor.startAnimation(animation);//imageView的各种动画的方法都需要参考开始点,开始点就是imageView初始化完的位置 } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } } }
布局文件:
三个基本一样的文件,viewgroup的颜色不同而已。
仅贴上activity_test1.xml
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#123123" ></LinearLayout> </RelativeLayout>
其中关于偏移量的图示: