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