欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

使用ViewPager实现android软件使用向导功能实现步骤

程序员文章站 2023-11-18 12:57:52
首先需要一个布局文件,是flamelayout组成的,里面包含了一个viewpager和一个relativelayout,relativelayout里面是一个linear...

使用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里面设置选中图标的背景。