android ViewPager 例子
來源：程序員人生 發布時間：2014-11-07 08:53:42 閱讀次數：2170次
今天用到viewpager，要實現多view動畫切換。自己動手做了1個。
先上效果圖，只是很簡單的例子。
步驟：1、在main布局文件里添加viewPager布局
<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"
>
<LinearLayout
android:id="@+id/top_ly"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/textView1"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:background="#999999"
android:gravity="center"
android:text="頁面1"
android:textColor="#222222"
/>
<TextView
android:id="@+id/textView2"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:background="#999999"
android:gravity="center"
android:text="頁面2"
android:textColor="#222222"
/>
<TextView
android:id="@+id/textView3"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:background="#999999"
android:gravity="center"
android:text="頁面3"
android:textColor="#222222"
/>
</LinearLayout>
<ImageView
android:id="@+id/cursor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/top_ly"
android:scaleType="matrix"
android:src="@drawable/cursor"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/cursor"
android:layout_gravity="center"
/>
</RelativeLayout>
（可能需要導入jar包。下載地址：android-support-v4.jar
）
再創建3個layout用于填充在ViewPager。我這里就是1個textview而已。
2、viewPager需要1個pagerAdapter的子類。
package com.away.viewpager;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
public class ViewPagerAdapter extends PagerAdapter {
List<View> viewLists;
public ViewPagerAdapter(List<View> lists)
{
viewLists = lists;
}
//取得size
@Override
public int getCount() {
return viewLists.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
//燒毀Item
@Override
public void destroyItem(View view, int position, Object object)
{
((ViewPager) view).removeView(viewLists.get(position));
}
//實例化Item
@Override
public Object instantiateItem(View view, int position)
{
((ViewPager) view).addView(viewLists.get(position), 0);
return viewLists.get(position);
}
}
3、最后mainActivity，主要寫了左右滑動切換頁面，還有1個小圖片隨頁面切換位移的動畫效果。
package com.away.viewpager;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.Menu;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
public class MainActivity extends Activity {
private ViewPager viewPager;
private ImageView imageView;
private List<View> lists = new ArrayList<View>();
private ViewPagerAdapter adapter;
private Bitmap cursor;
private int offSet;
private int currentItem;
private Matrix matrix = new Matrix();
private int bmWidth;
private Animation animation;
private TextView textView1;
private TextView textView2;
private TextView textView3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = (ImageView) findViewById(R.id.cursor);
textView1 = (TextView) findViewById(R.id.textView1);
textView2 = (TextView) findViewById(R.id.textView2);
textView3 = (TextView) findViewById(R.id.textView3);
lists.add(getLayoutInflater().inflate(R.layout.layout1, null));
lists.add(getLayoutInflater().inflate(R.layout.layout2, null));
lists.add(getLayoutInflater().inflate(R.layout.layout3, null));
initeCursor();
adapter = new ViewPagerAdapter(lists);
viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(adapter);
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
// 當滑動式，頂部的imageView是通過animation緩慢的滑動
@Override
public void onPageSelected(int arg0) {
switch (arg0) {
case 0:
if (currentItem == 1) {
animation = new TranslateAnimation(
offSet * 2 + bmWidth, 0, 0, 0);
} else if (currentItem == 2) {
animation = new TranslateAnimation(offSet * 4 + 2
* bmWidth, 0, 0, 0);
}
break;
case 1:
if (currentItem == 0) {
animation = new TranslateAnimation(0, offSet * 2
+ bmWidth, 0, 0);
} else if (currentItem == 2) {
animation = new TranslateAnimation(4 * offSet + 2
* bmWidth, offSet * 2 + bmWidth, 0, 0);
}
break;
case 2:
if (currentItem == 0) {
animation = new TranslateAnimation(0, 4 * offSet + 2
* bmWidth, 0, 0);
} else if (currentItem == 1) {
animation = new TranslateAnimation(
offSet * 2 + bmWidth, 4 * offSet + 2 * bmWidth,
0, 0);
}
}
currentItem = arg0;
animation.setDuration(150); // 光標滑動速度
animation.setFillAfter(true);
imageView.startAnimation(animation);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
textView1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
viewPager.setCurrentItem(0);
}
});
textView2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
viewPager.setCurrentItem(1);
}
});
textView3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
viewPager.setCurrentItem(2);
}
});
}
private void initeCursor() {
cursor = BitmapFactory.decodeResource(getResources(), R.drawable.cursor);
bmWidth = cursor.getWidth();
DisplayMetrics dm;
dm = getResources().getDisplayMetrics();
offSet = (dm.widthPixels - 3 * bmWidth) / 6;
matrix.setTranslate(offSet, 0);
imageView.setImageMatrix(matrix); // 需要imageView的scaleType為matrix
currentItem = 0;
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
最后附上光標圖
。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
