android 引导页

效果----》 要求底部有3个小圆点，当滑动引导页的时候，会从底部向上弹出一个图片，滑动到最后一页会出现按钮，点击按钮或者继续滑动，跳转到主界面　　　

实现方式-----》viewPager+fragment+Animation

实现步骤

第一步----》activity_splash.xml的编写

布局说明：该布局文件 包含ViewPager， 然后底部有3个小圆点，最底部是一张图片，这张图片会向上弹出的。还有一个按钮，即点击进入主界面

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/welcome_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipToPadding="true"
    android:background="@color/flashBg"
    android:fitsSystemWindows="true"
    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"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="5dp"
        android:orientation="horizontal">
        <View
            android:id="@+id/dot_1"
            android:layout_width="6.5dip"
            android:layout_height="6.5dip"
            android:layout_marginLeft="3dip"
            android:layout_marginRight="3dip"
            android:background="@drawable/dot_foucs"/>
        <View
            android:id="@+id/dot_2"
            android:layout_width="6.5dp"
            android:layout_height="6.5dp"
            android:layout_marginLeft="3dip"
            android:layout_marginRight="3dip"
            android:background="@drawable/dot_nomal"/>
        <View
            android:id="@+id/dot_3"
            android:layout_width="6.5dp"
            android:layout_height="6.5dp"
            android:layout_marginLeft="3dip"
            android:layout_marginRight="3dip"
            android:background="@drawable/dot_nomal"/>
    </LinearLayout>
    <ImageView
        android:visibility="invisible"
        android:id="@+id/button"
        android:layout_marginBottom="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/click_to_come"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/bottom_first"/>
</RelativeLayout> 

其中 3个小圆点需要引入drawable文件下的dot_foucs.xml,dot_normal.xml文件，编写如下：
dot_foucs.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#000000"/>
    <corners android:radius="3dip"/>
</shape>

dot_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#a6a6a6"/>
    <corners android:radius="3dip"/>
</shape>

到处为止引导页的布局文件写好了，ViewPager 滑动的是Fragment， 所以Fragment的布局：
fragment_splash.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">

    <ImageView
        android:src="@mipmap/welcome_first"
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

FlashFragment

public class FlashFragment extends Fragment {
    private ImageView imageView;
    private  int ResId;
    private  View view;

    public FlashFragment(int resId) {
        ResId = resId;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        view=inflater.inflate(R.layout.fragment_splash,null);
        imageView= (ImageView) view.findViewById(R.id.image);
        imageView.setImageResource(ResId);
        return view;
    }
}

接下来编写SplashActivity

SplashActivity 

public class SplashActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private Context mContext = this;
    private EdgeEffectCompat leftEdge, rightEdge;
    private ViewPager viewPager;
    private List<FlashFragment> list = new ArrayList<>();
    private MyAdapter adapter;
    //设置pop 向上弹出动画效果
    private Animation animation, animation2;
    private ImageView mImageView;
    //底部的3个小点
    private View dot1, dot2, dot3;
    //图片按钮
    private ImageView button;

    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (msg.what == 1) {
                button.setVisibility(View.VISIBLE);
            }
        }
    };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        /**********设置状态栏的颜色*************/
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);

        /**************检测是否第一次打开应用**************************/
        checkIsFirstOpen();

        /****设置动画*****/
        initPop();
        initView();
        viewPager.setOffscreenPageLimit(2);
        viewPager.addOnPageChangeListener(this);


        /***********设置viewPager滑到最后一页跳转到WebActivity****************/
        checkIsLastPage();
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(SplashActivity.this, WebActivity.class));
                SplashActivity.this.finish();
            }
        });

    }
    private void checkIsLastPage() {
        try {
            Field leftEdgeField = viewPager.getClass().getDeclaredField("mLeftEdge");
            Field rightEdgeField = viewPager.getClass().getDeclaredField("mRightEdge");
            if (leftEdgeField != null && rightEdgeField != null) {
                leftEdgeField.setAccessible(true);
                rightEdgeField.setAccessible(true);
                leftEdge = (EdgeEffectCompat) leftEdgeField.get(viewPager);
                rightEdge = (EdgeEffectCompat) rightEdgeField.get(viewPager);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        list.add(new FlashFragment(R.mipmap.welcome_first));
        list.add(new FlashFragment(R.mipmap.welcome_second));
        list.add(new FlashFragment(R.mipmap.welcome_third));
        adapter = new MyAdapter(getSupportFragmentManager(), list);
        viewPager.setAdapter(adapter);
    }
    private void checkIsFirstOpen() {
        if ((int) SharedPreferencesUtils.getParam(mContext, "app", 0) == 1) {
            Intent intent = new Intent(this, WebActivity.class);
            startActivity(intent);
            finish();

        } else {
            SharedPreferencesUtils.setParam(mContext, "app", 1);
        }
    }
    private void initPop() {
        mImageView = (ImageView) findViewById(R.id.img);
        animation = AnimationUtils.loadAnimation(this, R.anim.menushow);
        animation.setFillAfter(true);
        animation2=AnimationUtils.loadAnimation(this, R.anim.menushow);
        animation2.setFillAfter(true);
        mImageView.startAnimation(animation2);
        dot1 = findViewById(R.id.dot_1);
        dot2 = findViewById(R.id.dot_2);
        dot3 = findViewById(R.id.dot_3);
        button = (ImageView) findViewById(R.id.button);
    }
    //当滑动状态改变时调用
    @Override
    public void onPageScrollStateChanged(int arg0) {
        // TODO Auto-generated method stub
        if (rightEdge != null && !rightEdge.isFinished()) {//到了最后一张并且还继续拖动，出现蓝色限制边条了
            startActivity(new Intent(SplashActivity.this, WebActivity.class));
            SplashActivity.this.finish();
        }
    }
    //当 当前页面被滑动时调用
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO Auto-generated method stub
    }

    //当新的页面被选中时调用
    @Override
    public void onPageSelected(int arg0) {
        setAlldotNomal();
        switch (arg0) {
            case 0:
                button.setVisibility(View.INVISIBLE);
                //此处要设置底部的图片
                mImageView.setImageResource(R.mipmap.bottom_first);
                dot1.setBackgroundResource(R.drawable.dot_foucs);
                animation.setFillAfter(true);
                mImageView.startAnimation(animation);
                break;
            case 1:
                //此处要设置底部的图片
                mImageView.setImageResource(R.mipmap.bottom_second);
                dot2.setBackgroundResource(R.drawable.dot_foucs);
                animation.setFillAfter(true);
                mImageView.startAnimation(animation);
                button.setVisibility(View.INVISIBLE);
                break;
            case 2:
                //此处要设置底部的图片
                mImageView.setImageResource(R.mipmap.bottom_third);
                dot3.setBackgroundResource(R.drawable.dot_foucs);
                animation.setFillAfter(true);
                mImageView.startAnimation(animation);
                //500毫秒之后显示button
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        try {
                            Thread.sleep(500);
                            handler.sendEmptyMessage(1);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                    }
                }).start();
                break;
        }
    }
    private void setAlldotNomal() {
        dot1.setBackgroundResource(R.drawable.dot_nomal);
        dot2.setBackgroundResource(R.drawable.dot_nomal);
        dot3.setBackgroundResource(R.drawable.dot_nomal);
    }
}

其中用到了 ViewPager的适配器，以及平移动画的xml文件：
MyAdapter

public class MyAdapter extends FragmentPagerAdapter {
    private List<FlashFragment> mList;

    public MyAdapter(FragmentManager fm, List<FlashFragment> mList) {
        super(fm);
        this.mList = mList;
    }

    @Override
    public Fragment getItem(int position) {
        return mList.get(position);
    }

    @Override
    public int getCount() {
        return mList.size();
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
//        super.destroyItem(container, position, object);
    }
}

menushow_first.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="0"
        android:fromYDelta="0"
        android:toYDelta="-25%p"
        android:duration="550" />
</set> 

menushow.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0"
        android:toXDelta="0"
        android:fromYDelta="0"
        android:toYDelta="-25%p"
        android:duration="450" />
</set>