新手引导的实现

转自 http://blog.csdn.net/adolph_jun/article/details/53769883

先看下效果图

图片是可以实现切换的

主要用到的技术：

ViewPager

PagerAdapter

类似于ArrayAdapter与ListView

具体怎么做开代码，注释应该算详细的了

MainActivity.java

import android.support.v4.view.PagerAdapter;  
import android.support.v4.view.ViewPager;  
import android.support.v7.app.AppCompatActivity;  
import android.os.Bundle;  
import android.view.View;  
import android.view.ViewGroup;  
import android.view.ViewTreeObserver;  
import android.widget.Button;  
import android.widget.ImageView;  
import android.widget.LinearLayout;  
import android.widget.RelativeLayout;  
  
import java.util.ArrayList;  
import java.util.List;  
  
/* 
*  Created by WXJ-try on 2016/12/20. 
* 1、写一个合适的布局文件，在布局文件中添加ViewPager空间，最好导v4包的 
* 2、在MainActivity中准备好图片数据，定义一个int数据存放图片 
* 3、定义一个List存放ImageView 
* 4、写一个类继承PaperAdapter，并重写里面的方法 
* 4.1、getCount()中设置好图片资源的个数 
* 4.2、在isViewFromObject(),中设置return view == object;目前不知道为什么 
* 4.3、重点重写instantiateItem()方法，在里面完成为ViewPager添加图片 
* 4.4、重写destroyItem()方法，container.removeView((View) object);，目前还不知道为什么 
* 5、为ViewPager绑定适配器 
* 
* 存在的问题： 
* 1、在instantiateItem()方法中每次都需要重新生成ImageView,耗资源 
* 解决办法： 
* 1、利用一个数组将第一次新建的ImageView存储起来，下次不再重新生成而是到数组里直接取 
* 
* 为底部添加对应于图片的小园点 
* 1、在drawable中定义shape的布局文件 
* */  
public class MainActivity extends AppCompatActivity {  
    //得到图片  
    private int images[] = {R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e};  
    private LinearLayout linearLayout;  
    private ViewPager viewPager;  
    private ImageView lan_imageView;  
    private List<ImageView> list;  
    private int pointWidth;  
    private Button button;  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        linearLayout = (LinearLayout) findViewById(R.id.ll);  
        viewPager = (ViewPager) findViewById(R.id.vp);  
        lan_imageView = (ImageView) findViewById(R.id.lan_iv);  
        button = (Button) findViewById(R.id.bt);  
        //优化添加代码---  
        list = new ArrayList<ImageView>();  
        for (int i = 0; i < images.length; i++) {  
            ImageView imageView = new ImageView(MainActivity.this);  
            list.add(imageView);  
  
            //处理小灰点，将小灰点加到界面上,可以出现对应个数的灰点  
            ImageView huiImageView = new ImageView(this);  
            huiImageView.setImageResource(R.drawable.bg_hui);  
            //调整灰点之间的间距，  
            /* 
            * LayoutParams作用：用于子控件向父控件提出请求 
            * */  
            LinearLayout.LayoutParams layoutParams =  
                    new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,  
                            LinearLayout.LayoutParams.WRAP_CONTENT);  
            huiImageView.setLayoutParams(layoutParams);  
            //为小圆点设置边距  
            if (i > 0) {  
                layoutParams.leftMargin = 20;  
            }  
            //将小灰点添加到界面上  
            linearLayout.addView(huiImageView);  
        }  
        //---优化添加代码  
        /* 
        * 获得两个灰点之间的距离，作为小蓝点滑动的参考依据 
        * 直接用getWidth()不能得到，因为View组件要在onResume回调后完成 
        * 在视图树全部绘制完成时调用 
        * */  
        lan_imageView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {  
            @Override  
            public void onGlobalLayout() {  
                /*函数解释 
                * getChildAt(1)得到linearLayout的对应子控件 
                * getLeft() 的到该控件相对于父控件的左距离 
                * */  
                pointWidth = linearLayout.getChildAt(1).getLeft() - linearLayout.getChildAt(0).getLeft();  
            }  
        });  
  
        PagerAdapter pagerAdapter = new Myadapter();  
        viewPager.setAdapter(pagerAdapter);  
  
        //为ViewPager设置监听器，实现相关的方法  
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {  
  
            /* 
            * 当页面在滑动的时候会调用此方法，在滑动被停止之前，此方法回一直得到调用。 
            * 其中三个参数的含义分别为： 
            * position :当前页面，及你点击滑动的页面 
            * positionOffset:当前页面偏移的百分比 
            * positionOffsetPixels:当前页面偏移的像素位置 
            * */  
            @Override  
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
                //完成小蓝点可以根据页面划过的百分百移动相应的百分百  
                //要设置小蓝点的位置同样涉及到边距，也要得到layoutParams  
                RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) lan_imageView.getLayoutParams();  
                //这里不好解释  
                layoutParams.leftMargin = (int)(pointWidth * positionOffset+ position * pointWidth);  
                lan_imageView.setLayoutParams(layoutParams);  
            }  
  
            /*此方法是页面跳转完后得到调用， 
            * position是你当前选中的页面的Position（位置编号） 
            */  
            @Override  
            public void onPageSelected(int position) {  
                if(position == images.length-1){  
                    button.setVisibility(View.VISIBLE);  
                }else {  
                    button.setVisibility(View.GONE);  
  
                }  
            }  
  
            /*此方法是在状态改变的时候调用，其中state这个参数有三种状态（0，1，2）。 
            * state ==1的时辰默示正在滑动， 
            * state==2的时辰默示滑动完毕了， 
            * state==0的时辰默示什么都没做。 
            * */  
            @Override  
            public void onPageScrollStateChanged(int state) {  
  
            }  
        });  
    }  
  
    class Myadapter extends PagerAdapter {  
        @Override  
        public int getCount() {  
            return images.length;  
        }  
  
        @Override  
        public boolean isViewFromObject(View view, Object object) {  
            return view == object;  
        }  
  
        //滑动一次调用一次  
        @Override  
        public Object instantiateItem(ViewGroup container, int position) {  
           /*优化前代码 
            ImageView imageView = new  ImageView(MainActivity.this); 
            imageView.setImageResource(images[position]); 
            container.addView(imageView);*/  
  
            //优化添加代码  
            ImageView imageView = list.get(position);  
            imageView.setImageResource(images[position]);  
            container.addView(imageView);  
            //优化添加代码  
            return imageView;  
        }  
  
        @Override  
        public void destroyItem(ViewGroup container, int position, Object object) {  
            container.removeView((View) object);  
        }  
    }  
}  

activity_main.xml

<?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:id="@+id/activity_main"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:background="#fdfdfd"  
    tools:context="com.example.mynewviewpager.MainActivity">  
  
    <android.support.v4.view.ViewPager  
        android:id="@+id/vp"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        ></android.support.v4.view.ViewPager>  
  
    <RelativeLayout  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_alignParentBottom="true"  
        android:layout_centerHorizontal="true"  
        android:layout_centerVertical="true"  
        android:layout_marginBottom="50dp">  
        <!--为四个小灰点占位-->  
        <LinearLayout  
            android:id="@+id/ll"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:orientation="horizontal">  
  
        </LinearLayout>  
        <!--小蓝点，直接可以覆盖小灰点-->  
        <ImageView  
            android:id="@+id/lan_iv"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:src="@drawable/bg_lan"/>  
        <Button  
            android:id="@+id/bt"  
            android:visibility="gone"  
            android:background="#5cc2fc"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_centerVertical="true"  
            android:layout_centerHorizontal="true"  
            android:text="欢迎使用"/>  
    </RelativeLayout>  
  
</RelativeLayout>  

两种点的设计代码

小灰点 bg_hui.xml

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="oval">  
    <size android:height="10dp" android:width="10dp"/>  
    <solid android:color="#d9d9d9"/>  
</shape> 

小蓝点bg_lan.xml

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="oval">  
    <size android:width="10dp" android:height="10dp"/>  
    <solid android:color="#5cc2fc"/>  
</shape>  

附上原文地址