App引导页面源代码的实现

一、页面效果图

    通过引导页面，用户能够快速了解应用的主要功能，当滑动到最后一个界面时。

   二、实现过程

   1.设计引导页面整体布局，在新建的项目activity_main文件，在布局文件里首先加入ViewPager这个组件，然后加入四个ImageView组件。

    下面接受一下ViewPager这个组件

      ViewPager是android扩展包v4包中的类，这个类可以让用户左右切换当前的view。我们首先来看看API对于这个类的表述：

     

 right through pages of data. You supply an implementation of a PagerAdapter to generate the pages that the view shows.
Note this class is currently under early design and development. The API will likely change in later updates of the compatibility library, requiring changes to the source code of apps when they are compiled against the newer version.
ViewPager is most often used in conjunction with Fragment, which is a convenient way to supply and manage the lifecycle of each page. There are standard adapters implemented for using fragments with the ViewPager, which cover the most common use cases. These are FragmentPagerAdapter andFragmentStatePagerAdapter; each of these classes have simple code showing how to build a full user interface with them.

从这个描述中我们知道几点：

  1）ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。

  2）ViewPager类需要一个PagerAdapter适配器类给它提供数据。

  3）ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

  下面是activity_main.xml文件的代码：

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="@color/transparent" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:paddingBottom="40dp"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/iv0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:background="@drawable/bg_point_selected"
            tools:ignore="ContentDescription" />

        <ImageButton
            android:id="@+id/iv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:background="@drawable/bg_point"
            tools:ignore="ContentDescription" />

        <ImageButton
            android:id="@+id/iv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:background="@drawable/bg_point"
            tools:ignore="ContentDescription" />

        <ImageButton
            android:id="@+id/iv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_point"
            tools:ignore="ContentDescription" />
    </LinearLayout>

</RelativeLayout>

 

：这是出现四个圆点的效果图。

下面是四个子xml文件：

bg_01.xml

<?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"
    android:background="@drawable/guide_1" >
    

</LinearLayout>

bg_02.xml

<?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" 
    android:background="@drawable/guide_2">
    

</LinearLayout>

bg_03.xml

<?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"
    android:background="@drawable/guide_3" >
    

</LinearLayout>

bg_04.xml

<?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:orientation="vertical"
    android:background="@drawable/guide_4">
       <TextView 
        android:id="@+id/go"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:text="@string/start_go"
        android:textSize="20sp"
        android:clickable="true"
        android:gravity="center"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="20dp"
        android:background="@drawable/sport_start_select"
        android:textColor="#FFFFFF"/>
    
    

</RelativeLayout>

MainActivity.java

 

package com.example.guide;

import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;

import android.view.Window;
import android.widget.ImageView;


public class MainActivity extends Activity implements OnPageChangeListener {
    private ViewPager viewPager;
    private List<View> viewList;
    private View view1,view2,view3,view4;
    private ViewPagerAdapter adapter;
    private ImageView[] dots;

    private int [] ids ={R.id.iv0,R.id.iv1,R.id.iv2,R.id.iv3};//四个导航小圆球
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);//程序运行起来的时候没有标题FEATURE_NO_TITLE
        setContentView(R.layout.activity_main);
      initialize();
      initDots();
      adapter = new ViewPagerAdapter(viewList);
      viewPager.setAdapter(adapter);
    
    }
    /*
     * 初始化控件
     */
    public void initialize(){
        viewPager=(ViewPager)findViewById(R.id.viewPager);
        view1=View.inflate(this, R.layout.bg_01, null);
        view2=View.inflate(this, R.layout.bg_02, null);
        view3=View.inflate(this, R.layout.bg_03, null);
        view4=View.inflate(this, R.layout.bg_04, null);
      viewList = new ArrayList<View>();
      viewList.add(view1);
      viewList.add(view2);
      viewList.add(view3);
      viewList.add(view4);
      viewPager.setOnPageChangeListener(this);
       
    }
    /*
     * 初始化导航点
     */
private void initDots(){
    dots = new ImageView[viewList.size()];
    for(int i=0;i<viewList.size();i++){
        dots[i]=(ImageView)findViewById(ids[i]);
    }
}
public void onPageScrollStateChanged(int arg0){//状态改变

    
}
public void onPageScrolled(int arg0,float arg1,int arg2){//arg0 ==1的时辰默示正在滑动，arg0==2的时辰默示滑动完毕了，arg0==0的时辰默示什么都没做。
    
}
/*
 * 当Viewpager 被选择，即正在显示
 * @param position当前显示的是第几个
 */
public void onPageSelected(int position){
      for(int i=0;i<ids.length;i++){
          if(position ==i){
              dots[i].setImageResource(R.drawable.bg_point_selected);
          }
          else{
              dots[i].setImageResource(R.drawable.bg_point);
          }
      }
}
}

ViewPagerAdapter.java

(设计适配器)

package com.example.guide;

import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

public  class ViewPagerAdapter extends PagerAdapter {//PageAdapter是一个抽象类，直接继承于Object
                                                                                  //PagerAdapter就是ViewPager提供的一个适配器，方便我们对各个View进行控制
    private List<View> mViewList;

    public ViewPagerAdapter(List<View> viewList) {
        mViewList = viewList;//得到我们的页面参数
    }
    public int getCount() {
        // TODO Auto-generated method stub
        return mViewList.size();//返回页面的数量
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        // TODO Auto-generated method stub
        return arg0 == arg1;//官方提示这样写 
    }
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mViewList.get(position));//添加页卡
        return mViewList.get(position);
    }
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mViewList.get(position));//销毁页面
    }

    

}

好了到这里整个引导页面的效果都实现啦！