使用ViewPager实现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里面设置选中图标的背景。
下一篇: Maya长方体怎么分离边?