Android自定义ViewPager加上滑动条

今天我们来做一个自定义的ViewPager并且加上滑动条的效果。

首先，我们把activity_main.xml作为程序的主xml，代码如下：

<LinearLayout 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:orientation="vertical"    tools:context=".DiscoverMusicFragment" >    <LinearLayout        android:id="@+id/linearLayout1"        android:layout_width="fill_parent"        android:layout_height="80dp"        android:background="#FFFFFF" >        <TextView            android:id="@+id/gexingtuijian"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1"            android:gravity="center"            android:text="个性推荐"            android:textColor="#000000"            android:textSize="18dp" />        <TextView            android:id="@+id/gedan"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1"            android:gravity="center"            android:text="歌单"            android:textColor="#000000"            android:textSize="18dp" />        <TextView            android:id="@+id/zhubodiantai"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1"            android:gravity="center"            android:text="主播电台"            android:textColor="#000000"            android:textSize="18dp" />        <TextView            android:id="@+id/paihangbang"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1"            android:gravity="center"            android:text="排行榜"            android:textColor="#000000"            android:textSize="18dp" />    </LinearLayout>    <ImageView        android:id="@+id/cursorImage"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:scaleType="matrix"        android:src="@drawable/a" />    <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"        android:background="#000000"        android:flipInterval="30"        android:persistentDrawingCache="animation" /></LinearLayout>

下面我们开始写“个性推荐”界面，代码如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#154154"    android:orientation="vertical" >    </LinearLayout>

为了方便，我们只添加一个颜色，每一个界面的颜色都不同，快速的来实现这个自定义的ViewPager的功能。

“歌单”界面，代码如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#878536"    android:orientation="vertical" >    </LinearLayout>

“主播电台”界面，代码如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#256397"    android:orientation="vertical" >    </LinearLayout>

“排行榜”界面，代码如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#964236"    android:orientation="vertical" >    </LinearLayout>

好了，四个界面的布局都已经写完了，下面开始重要的代码部分，我们需要些一个适配器来管理滑动的效果，以及当点击标签的时候会直接滑动到标签界面。

public class MainFragmentPagerAdapter extends FragmentPagerAdapter {private ArrayList<Fragment> fragments;public MainFragmentPagerAdapter(FragmentManager fm) {super(fm);}public MainFragmentPagerAdapter(FragmentManager fm,ArrayList<Fragment> fragments) {super(fm);this.fragments = fragments;}/* * (non-Javadoc) *  * @see android.support.v4.app.FragmentPagerAdapter#getItem(int) */@Overridepublic Fragment getItem(int arg0) {return fragments.get(arg0);}/* * (non-Javadoc) *  * @see android.support.v4.view.PagerAdapter#getCount() */@Overridepublic int getCount() {return fragments.size();}@Overridepublic int getItemPosition(Object object) {// TODO Auto-generated method stubreturn super.getItemPosition(object);}}

我们把MainActivity作为程序的主Activity，代码如下所示：

public class MainActivity extends FragmentActivity {private ViewPager mPager;// 页卡内容private ArrayList<Fragment> listViews; // Tab页面列表private ImageView cursor;// 动画图片private TextView t1, t2, t3;// 页卡头标private int offset = 0;// 动画图片偏移量private int currIndex = 0;// 当前页卡编号private int bmpW;// 动画图片宽度OneFragment oneFragment = new OneFragment();TWOFragment twoFragment = new TWOFragment();THREEFragment thrFragment = new THREEFragment();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);InitTextView();InitViewPager();InitImageView();}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));}/** * 头标点击监听 */public class MyOnClickListener implements View.OnClickListener {private int index = 0;public MyOnClickListener(int i) {index = i;}@Overridepublic void onClick(View v) {mPager.setCurrentItem(index);}};/** * 初始化ViewPager */private void InitViewPager() {mPager = (ViewPager) findViewById(R.id.vPager);listViews = new ArrayList<Fragment>();/* * LayoutInflater mInflater = getLayoutInflater(); * listViews.add(mInflater.inflate(R.layout.one, null)); * listViews.add(mInflater.inflate(R.layout.two, null)); * listViews.add(mInflater.inflate(R.layout.three, null)); */listViews.add(oneFragment);listViews.add(twoFragment);listViews.add(thrFragment);// 用support包，只能用getSupportFragmentManager();FragmentManager fragmentManager = this.getSupportFragmentManager();// 通过fragment适配器把fragment添加入viewpager中mPager.setAdapter(new MainFragmentPagerAdapter(fragmentManager,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;}@Overridepublic void destroyItem(View arg0, int arg1, Object arg2) {((ViewPager) arg0).removeView(mListViews.get(arg1));}@Overridepublic void finishUpdate(View arg0) {}@Overridepublic int getCount() {return mListViews.size();}@Overridepublic Object instantiateItem(View arg0, int arg1) {((ViewPager) arg0).addView(mListViews.get(arg1), 0);return mListViews.get(arg1);}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == (arg1);}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {}@Overridepublic Parcelable saveState() {return null;}@Overridepublic void startUpdate(View arg0) {}}/** * 初始化动画 */private void InitImageView() {cursor = (ImageView) findViewById(R.id.cursor);bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a).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);// 设置动画初始位置}/** * 页卡切换监听,改变动画位置 */public class MyOnPageChangeListener implements OnPageChangeListener {int one, two;@Overridepublic void onPageSelected(int arg0) {one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量two = one * 2;// 页卡1 -> 页卡3 偏移量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);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}}}

代码看不懂的上面有注释。

好了，今天的讲解就到这里，谢谢！