033 Android App启动的闪屏效果+新手向导(多个图片滑动效果)+ViewPager使用

1.目标效果

App启动时，出现闪屏效果(利用动画实现)。

App新手使用时，会出现新手向导效果。

2.XML页面布局

(1)闪屏页面

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/rl_main"
    android:background="@mipmap/splash_bg_newyear"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/splash_horse_newyear"/>

</RelativeLayout>

(2)UserGuideActivity页面布局

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

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

    </android.support.v4.view.ViewPager>

    <Button
        android:id="@+id/bt_userguide_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@drawable/selector_btn_text_user_guide"
        android:padding="10dp"
        android:background="@drawable/selector_btn_user_guide"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="100dp"
        android:text="开始体验"/>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="75dp">

        <LinearLayout
            android:id="@+id/ll_guide_spot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        </LinearLayout>

        <ImageView
            android:id="@+id/iv_red_spot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/user_spot_red"/>
    </RelativeLayout>

</RelativeLayout>

(3)图片选择器

<1>按钮的背景图

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/button_red_pressed"></item>
    <item android:drawable="@drawable/button_red_normal"></item>
</selector>

<2>按钮上的文字的选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#000" android:state_pressed="true"></item>
    <item android:color="#fff"></item>
</selector>

3.java后台代码

(1)MainActivity.class

package com.example.administrator.test66smartbeijing;

import android.content.Intent;
import android.content.SharedPreferences;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.widget.RelativeLayout;

import com.example.administrator.test66smartbeijing.utils.ConstantValue;
import com.example.administrator.test66smartbeijing.utils.SharePreferenceUtil;

/**
 * 闪屏页面(通过动画实现)
 */
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RelativeLayout rl_main=findViewById(R.id.rl_main);
        //设置旋转动画
        RotateAnimation rotateAnimation=new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        rotateAnimation.setDuration(1000); //设置动画时间
        rotateAnimation.setFillAfter(true); //保持动画结束状态

        //设置缩放动画
        ScaleAnimation scaleAnimation=new ScaleAnimation(0,1,0,1,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        scaleAnimation.setDuration(1000);
        scaleAnimation.setFillAfter(true);

        //渐变动画
        AlphaAnimation alphaAnimation=new AlphaAnimation(0,1);
        alphaAnimation.setDuration(2000); //设置动画时间
        alphaAnimation.setFillAfter(true); //保持动画结束状态

        //动画集合
        AnimationSet animationSet=new AnimationSet(true);
        animationSet.addAnimation(rotateAnimation);
        animationSet.addAnimation(scaleAnimation);
        animationSet.addAnimation(alphaAnimation);

        //启动动画
        rl_main.startAnimation(animationSet);

        //给动画添加监听事件
        animationSet.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //动画结束后执行
                //用SharedPreferences存储用户是否是第一次进入的状态
                boolean is_first_enter=SharePreferenceUtil.getBoolean(getApplicationContext(),ConstantValue.IS_FIRST_ENTER,true);
                Intent intent;
                if(is_first_enter){
                    //进入新手引导界面
                    intent=new Intent(getApplicationContext(),UserGuideActivity.class);
                }else {
                    //进入主界面
                    intent=new Intent(getApplicationContext(),MainFunctionActivity.class);
                }
                startActivity(intent); //开启页面跳转
                finish();//结束当前页面
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
    }
}

(2)

package com.example.administrator.test66smartbeijing;

import android.support.annotation.NonNull;
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;

public class UserGuideActivity extends AppCompatActivity {

    ViewPager viewPager;
    LinearLayout ll_guide_spot;
    ImageView iv_red_spot;
    Button bt_userguide_start;
    //创建一个数组用来存放新手向导的图片
    int[] imageIdArray=new int[]{R.mipmap.guide_1,R.mipmap.guide_2,R.mipmap.guide_3};
    List<ImageView> imageViewList; //用来存放ImageView控件的集合
    int moveDistance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_user_guide);

        viewPager = findViewById(R.id.vp_user_guide);
        ll_guide_spot=findViewById(R.id.ll_guide_spot);
        iv_red_spot=findViewById(R.id.iv_red_spot);
        bt_userguide_start=findViewById(R.id.bt_userguide_start);
        bt_userguide_start.setVisibility(View.INVISIBLE);

        initData();
        viewPager.setAdapter(new MyViewPager()); //给viewpager设置适配器
        //给viewpager设置滑动监听事件
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //当页面滑动过程中回调
                //更新页面中小红点的位置
                //1.计算小红点当前的左边距
                int leftMargin= (int) (moveDistance*positionOffset)+position*moveDistance;
                //2.获取当前小红点的布局参数
                RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) iv_red_spot.getLayoutParams();
                //3.修改左边距
                layoutParams.leftMargin=leftMargin;
                //4.重新设置布局参数
                iv_red_spot.setLayoutParams(layoutParams);
            }

            @Override
            public void onPageSelected(int position) {
                //某个页面被选中
                if(position==imageIdArray.length-1){
                    bt_userguide_start.setVisibility(View.VISIBLE);
                }else {
                    bt_userguide_start.setVisibility(View.INVISIBLE);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        iv_red_spot.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                iv_red_spot.getViewTreeObserver().removeOnGlobalLayoutListener(this); //移除监听，避免重复回调
                //计算两个小圆点之间的距离
                //小红点的移动距离=第二个小圆点的left值-第一个小圆点的left值
                moveDistance=ll_guide_spot.getChildAt(1).getLeft()-ll_guide_spot.getChildAt(0).getLeft();
            }
        });
    }

    //初始化数据
    private void initData() {
        imageViewList=new ArrayList<>();
        for (int i = 0; i <imageIdArray.length ; i++) {
            ImageView imageView=new ImageView(getApplicationContext());
            imageView.setBackgroundResource(imageIdArray[i]);
            imageViewList.add(imageView);

            //初始化小圆点
            ImageView spot=new ImageView(getApplicationContext());
            spot.setImageResource(R.drawable.user_spot_gray);
            //初始化布局参数
            LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            if(i>0){
                params.leftMargin=15;
            }
            spot.setLayoutParams(params); //设置小圆点的间距
            ll_guide_spot.addView(spot);
        }
    }

    private class MyViewPager extends PagerAdapter {
        //返回item的个数
        @Override
        public int getCount() {
            return imageViewList.size();
        }

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

        //初始化item布局
        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            ImageView imageView=imageViewList.get(position);
            container.addView(imageView);
            return imageView;
        }

        //销毁item
        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView((View) object);
        }
    }
}

4.效果图