Android ViewPager实现引导页
概述
利用ViewPager简单地实现引导页功能,到达最后一页后再次滑动跳转到其他Activity
xml布局
放入ViewPager控件,同时放入几个小圆点图片用来指示当前滑到第几页
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="21dp">
<ImageView
android:id="@+id/img_dot1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/select"
android:background="#00000000"/>
<ImageView
android:id="@+id/img_dot2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@id/img_dot1"
android:src="@drawable/no_select"
android:background="#00000000"/>
<ImageView
android:id="@+id/img_dot3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@id/img_dot2"
android:src="@drawable/no_select"
android:background="#00000000"/>
</RelativeLayout>
</RelativeLayout>
新建ViewPager的adapter
主要就是传入view的list
public class IntroductionsAdapter extends PagerAdapter {
//界面列表
private List<View> views;
public IntroductionsAdapter (List<View> views){
this.views = views;
}
//销毁arg1位置的界面
@Override
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager) arg0).removeView(views.get(arg1));
}
@Override
public int getCount() {
if (views != null)
{
return views.size();
}
return 0;
}
//初始化arg1位置的界面
@Override
public Object instantiateItem(View arg0, int arg1) {
((ViewPager) arg0).addView(views.get(arg1), 0);
return views.get(arg1);
}
//判断是否由对象生成界面
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return (arg0 == arg1);
}
@Override
public Parcelable saveState() {
// TODO Auto-generated method stub
return null;
}
}
使用viewpager
首先,初始化引导页图片,将其列表传入adapter,绑定到viewpager中。滑动的同时更新指示圆点的状态,同时加入滑到最后一页的判断。
@NoTitle
@EActivity(R.layout.activity_introduction)
public class IntroductionsActivity extends Activity implements ViewPager.OnPageChangeListener {
private IntroductionsAdapter vpAdapter;
private List<View> views;
//引导图片资源
private static final int[] pics = { R.drawable.introduction01, R.drawable.introduction02, R.drawable.introduction03 };
EdgeEffectCompat leftEdge;
EdgeEffectCompat rightEdge;
@ViewById
ViewPager viewPager;
@ViewById
ImageView img_dot1;
@ViewById
ImageView img_dot2;
@ViewById
ImageView img_dot3;
@AfterViews
void init() {
views = new ArrayList<View>();
LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT,
LinearLayout.LayoutParams.FILL_PARENT);
//初始化引导图片列表
for (int pic : pics) {
ImageView iv = new ImageView(this);
iv.setLayoutParams(mParams);
iv.setImageResource(pic);
views.add(iv);
}
//初始化Adapter
vpAdapter = new IntroductionsAdapter(views);
viewPager.setAdapter(vpAdapter);
//绑定回调
viewPager.setOnPageChangeListener(this);
try {
Field leftEdgeField = viewPager.getClass().getDeclaredField("mLeftEdge");
Field rightEdgeField = viewPager.getClass().getDeclaredField("mRightEdge");
if (leftEdgeField != null && rightEdgeField != null) {
leftEdgeField.setAccessible(true);
rightEdgeField.setAccessible(true);
leftEdge = (EdgeEffectCompat) leftEdgeField.get(viewPager);
rightEdge = (EdgeEffectCompat) rightEdgeField.get(viewPager);
}
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
setCurDot(position);
}
@Override
public void onPageScrollStateChanged(int state) {
if(rightEdge!=null&&!rightEdge.isFinished()){//到了最后一张并且还继续拖动则跳转到其他activity
final Intent intent = new Intent(this, OtherActivity.class);
startActivity(intent);
finish();
}
}
private void setCurDot(int position) {
resetDot();
switch (position) {
case 0:
img_dot1.setImageResource(R.drawable.select);
break;
case 1:
img_dot2.setImageResource(R.drawable.select);
break;
case 2:
img_dot3.setImageResource(R.drawable.select);
break;
}
}
private void resetDot() {
img_dot1.setImageResource(R.drawable.no_select);
img_dot2.setImageResource(R.drawable.no_select);
img_dot3.setImageResource(R.drawable.no_select);
}
}