android UI必备之ViewPage实现欢迎引导页

现在主流APP 都会有欢迎引导页，引导页会对APP做一个大概介绍，引导用户，体验好。今天我们就来学学怎么做引导页，首先上图：

，

OK，就是上面三个引导页，最后一个引导页，我们在下面中间的位置放一个按钮来进入主界面，我们通过ViewPage来实现，首先在主布局中放入ViewPage：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="com.example.myapplication.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_page"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>


</RelativeLayout>

这里ViewPage需要填满父控件，另外我们需要创建一个布局文件tab01：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  android:background="@mipmap/guide_image1"
    tools:context="com.example.myapplication.MainActivity">


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="点击进入"
        android:visibility="gone"
        android:layout_marginBottom="20dp"/>

</RelativeLayout>

这里有个Button ，默认是不显示的，只有在滑到最后一个才显示。这个View，三个滑动页共用，只是设置不同的背景图片罢了。代码如下：

package com.example.myapplication;

import android.app.Activity;
import android.net.Uri;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

import com.google.android.gms.appindexing.Action;
import com.google.android.gms.appindexing.AppIndex;
import com.google.android.gms.common.api.GoogleApiClient;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {


    private ViewPager view_page;

    //滑动页面的数量
    private List<View> tabViews;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabViews = new ArrayList<>();
        //初始化数据
        initData();

        view_page = (ViewPager) findViewById(R.id.view_page);
        //设置适配器
        view_page.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return tabViews.size();//
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(tabViews.get(position));
                //滑到最后一个页面，显示button
                if(position == tabViews.size()-1)
                {
                   Button button= (Button) tabViews.get(position).findViewById(R.id.button);
                    button.setVisibility(View.VISIBLE);
                    button.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            Toast.makeText(MainActivity.this,"你要的操作",Toast.LENGTH_LONG).show();
                        }
                    });
                }
                return tabViews.get(position);
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(tabViews.get(position));
            }
        });




    }

    private void initData() {
        //引入一个布局，三个共用，设置不同的背景图片
        LayoutInflater tabs = LayoutInflater.from(MainActivity.this);
        View tab1 = tabs.inflate(R.layout.tab_01, null);
        tab1.setBackgroundResource(R.mipmap.guide1);

        View tab2 = tabs.inflate(R.layout.tab_01, null);
        tab2.setBackgroundResource(R.mipmap.guide2);
        View tab3 = tabs.inflate(R.layout.tab_01, null);

        tab3.setBackgroundResource(R.mipmap.guide3);

        //添加到列表里
        tabViews.add(tab1);
        tabViews.add(tab2);
        tabViews.add(tab3);

    }




}

OK了。