第一种情况
为了更好的用户体验,许多应用中的引导在viewpager滑动的时候都做了指示当前页的indicator,下面我简单的实现一个viewpager的indicator。效果图如下:
主要代码:
public class ShowActivity extends Activity {
private ArrayList<View> dots;
private ViewPager mViewPager;
private ViewPagerAdapter adapter;
private View view1, view2, view3, view4;
private int oldPosition = 0;// 记录上一次点的位置
private int currentItem; // 当前页面
private List<View> viewList = new ArrayList<View>();// 把需要滑动的页卡添加到这个list中
@Override
public void onCreate(Bundle savedInstanceState) {
requestWindowFeature(Window.FEATURE_NO_TITLE);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_show);
// 添加当前Acitivity到ancivitylist里面去,为了方便统一退出
// 显示的点
dots = new ArrayList<View>();
// dots.add(findViewById(R.id.dot_1));
// dots.add(findViewById(R.id.dot_2));
// dots.add(findViewById(R.id.dot_3));
// dots.add(findViewById(R.id.dot_4));
// 得到viewPager的布局
LayoutInflater lf = LayoutInflater.from(ShowActivity.this);
view1 = lf.inflate(R.layout.viewpager_item1, null);
view2 = lf.inflate(R.layout.viewpager_item2, null);
view3 = lf.inflate(R.layout.viewpager_item3, null);
view4 = lf.inflate(R.layout.viewpager_item2, null);
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);
viewList.add(view4);
dots.clear();
LinearLayout ll = (LinearLayout)findViewById(R.id.container);
for (int i = 0; i < viewList.size(); i++)
{
View view = new View(this);
view.setBackgroundResource(R.drawable.dot_normal);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
20, 20);
params.leftMargin = 10;
params.rightMargin = 10;
dots.add(view);
ll.addView(view, params);
}
mViewPager = (ViewPager) findViewById(R.id.vp);
adapter = new ViewPagerAdapter();
mViewPager.setAdapter(adapter);
dots.get(0).setBackgroundResource(R.drawable.dot_focused);
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
dots.get(oldPosition).setBackgroundResource(
R.drawable.dot_normal);
dots.get(position).setBackgroundResource(R.drawable.dot_focused);
oldPosition = position;
currentItem = position;
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
private class ViewPagerAdapter extends PagerAdapter {
public ViewPagerAdapter() {
super();
// TODO Auto-generated constructor stub
// 得到viewpager切换的三个布局,并把它们加入到viewList里面,记得view用打气筒生成,否则容易出现空指针异常
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return viewList.size();
}
// 是否是同一张图片
@Override
public boolean isViewFromObject(View view, Object object) {
// TODO Auto-generated method stub
return view == object;
}
@Override
public void destroyItem(ViewGroup view, int position, Object object) {
((ViewPager) view).removeView(viewList.get(position));
}
@Override
public Object instantiateItem(ViewGroup view, int position) {
((ViewPager) view).addView(viewList.get(position));
return viewList.get(position);
}
}
private int dp2px(Context context, int dpValue) {
return (int) context.getResources().getDisplayMetrics().density * dpValue;
}
@Override
protected void onStart() {
// TODO Auto-generated method stub
super.onStart();
}
@Override
protected void onStop() {
// TODO Auto-generated method stub
super.onStop();
finish();
}
}
这样一个简单的indicator就实现了,我们还可以在此基础上做一些修改,实现去网络异步获取图片作展示。
布局文件:
<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" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dip"
android:layout_gravity="bottom"
android:gravity="center"
android:layout_marginBottom="20dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dip"
android:orientation="horizontal"
android:id="@+id/container">
</LinearLayout>
</LinearLayout>
</FrameLayout>
</RelativeLayout>
第二种情况
主要代码:
public class OrderActivity extends Activity {
private ImageView cursor;// 动画图片
private TextView t1, t2, t3;// 页卡头标
private int offset = 0;// 动画图片偏移量
private int currentIndex = 0;// 当前页卡编号
private int bmpW;// 动画图片宽度
private List<View> listViews; // Tab页面列表
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.order);
viewPager = (ViewPager)findViewById(R.id.vPager);
cursor = (ImageView) findViewById(R.id.cursor);
bmpW = BitmapFactory.decodeResource(getResources(),
R.drawable.tab_icon).getWidth();// 获取图片宽度
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels;// 获取分辨率宽度
offset = (screenW/ 2 - bmpW) / 2;// 计算偏移量
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
cursor.setImageMatrix(matrix);// 设置动画初始位置
t1 = (TextView)findViewById(R.id.text1);
t2 = (TextView)findViewById(R.id.text2);
t1.setOnClickListener(new MyOnClickListener(0));
t2.setOnClickListener(new MyOnClickListener(1));
listViews = new ArrayList<View>();
LayoutInflater mInflater = getLayoutInflater();
View payedView = mInflater.inflate(R.layout.order_payed, null);
View payingView = mInflater.inflate(R.layout.order_paying, null);
listViews.add(payedView);
listViews.add(payingView);
viewPager.setAdapter(new OrderPagerAdapter(listViews));
viewPager.setCurrentItem(0);
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量
@Override
public void onPageScrolled(int i, float v, int i1) {
}
@Override
public void onPageSelected(int arg0) {
Animation animation = new TranslateAnimation(one * currentIndex,
one * arg0, 0, 0);
currentIndex = arg0;
animation.setFillAfter(true);// true:图片停留在动画结束的位置
animation.setDuration(300);
cursor.startAnimation(animation);
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
}
public class MyOnClickListener implements View.OnClickListener {
private int index = 0;
public MyOnClickListener(int i) {
index = i;
}
@Override
public void onClick(View v) {
viewPager.setCurrentItem(index);
}
}
}
布局文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff">
<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="已支付"
android:textColor="#717474"
android:textSize="20.0dip" />
<TextView android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#717474"/>
<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="未支付"
android:textColor="#717474"
android:textSize="20.0dip" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#ffcacaca"/>
<ImageView
android:id="@+id/cursor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:src="@drawable/tab_icon" />
<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="#fff"
android:flipInterval="30"
android:persistentDrawingCache="animation" />
</LinearLayout>