使用ViewPager实现android软件使用向导功能实现步骤
时间：2020-10-02 10:20:09 | 栏目：Android代码 | 点击：次
首先需要一个布局文件，是FlameLayout组成的，里面包含了一个ViewPager和一个RelativeLayout，RelativeLayout里面是一个LinearLayout，LinearLayout里面是准备放ImageView，动态添加。
布局文件如下：
复制代码 代码如下:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/guidePages"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<LinearLayout
android:id="@+id/viewGroup"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_marginBottom="30dip">
</LinearLayout>
</RelativeLayout>
</FrameLayout>
另外我们需要4个布局文件，就是向导要显示的图片，每个布局文件是一页，每个布局文件里面都是一个ImageView。如下所示：
布局文件一：
复制代码 代码如下:
<?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:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/feature_guide_0"/>"
</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:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/feature_guide_1"/>
</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:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/feature_guide_2"/>"
</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:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/feature_guide_3"/>"
</LinearLayout>
然后在代码里面加载这4个布局文件和主布局文件：
Activity代码：
复制代码 代码如下:
package com.alex.helloworld;
import java.util.ArrayList;
import android.app.Activity;
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.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class HelloWord2 extends Activity implements OnPageChangeListener {
private ArrayList<View> mPageViews;
private LayoutInflater mInflater;
private LinearLayout mGroups;
private FrameLayout mMain;
private ViewPager mViewPager;
private ImageView[] mImageViews;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
mInflater = LayoutInflater.from(this);
mPageViews = new ArrayList<View>();
mPageViews.add(mInflater.inflate(R.layout.item_0, null));
mPageViews.add(mInflater.inflate(R.layout.item_1, null));
mPageViews.add(mInflater.inflate(R.layout.item_2, null));
mPageViews.add(mInflater.inflate(R.layout.item_3, null));
mMain = (FrameLayout) mInflater.inflate(R.layout.hello2, null);
mGroups = (LinearLayout) mMain.findViewById(R.id.viewGroup);
mViewPager = (ViewPager) mMain.findViewById(R.id.guidePages);
mImageViews = new ImageView[mPageViews.size()];
for(int i=0; i<mPageViews.size(); i++) {
ImageView iv = new ImageView(this);
iv.setLayoutParams(new LayoutParams(20, 20));
mImageViews[i] = iv;
if(i == 0) {
mImageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);
} else {
mImageViews[i].setBackgroundResource(R.drawable.page_indicator);
}
mGroups.addView(mImageViews[i]);
}
mViewPager.setAdapter(mPageAdapter);
mViewPager.setOnPageChangeListener(this);
setContentView(mMain);
}
private PagerAdapter mPageAdapter = new PagerAdapter() {
@Override
public void startUpdate(View arg0) {
}
@Override
public Parcelable saveState() {
return null;
}
@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public Object instantiateItem(View arg0, int arg1) {
((ViewPager)arg0).addView(mPageViews.get(arg1));
return mPageViews.get(arg1);
}
@Override
public int getCount() {
return mPageViews.size();
}
@Override
public void finishUpdate(View arg0) {
}
@Override
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager)arg0).removeView(mPageViews.get(arg1));
}
};
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
for(int i=0; i<mPageViews.size(); i++) {
mImageViews[position].setBackgroundResource(R.drawable.page_indicator_focused);
if(position != i) {
mImageViews[i].setBackgroundResource(R.drawable.page_indicator);
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
首先从LayoutInflater里面加载4个要显示的布局和主布局文件。
然后把布局文件作为View放到一个ArrayList里面。
然后从主布局里面找到ViewPager和LinearLayout，ViewPager用来装载4个布局文件，LinearLayout用来装载4个提示图标。
然后新建4个ImageView，并设置对应的背景，然后作为View添加到LinearLayout里面去。
然后给ViewPager设置Adapter，设置onPageChangeListener。
Adapter里面要设置getCount，就是页面的个数，我们这里是4个，就设置4；
同时在instantiateItem里面讲对应的页面add进去，并返回对应的页面。
在destroyItem的时候讲页面remove掉。
在选择页面的方法里面onPageSelected里面设置选中图标的背景。