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.效果图

巴特西

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

最新文章

热门文章