Android开发引导页进入应用，第二次欢迎页进入应用

先看一下引导页的效果图

具体步骤

1.先从一个主页进入，判断是不是第一次进入，如果是第一次就跳转到引导页不是就跳转到登录页（BaseActivity为个人项目的其他页面所用，一般继承默认的Activity就行）

package com.fb.hckjfb.activity;import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;import com.fb.hckjfb.R;/*** 主程序入口，也就是主页*/
public class SplashActivity extends BaseActivity {//是否是第一次使用private boolean isFirstUse;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_splash);initView();SharedPreferences preferences = getSharedPreferences("isFirstUse", MODE_PRIVATE);isFirstUse = preferences.getBoolean("isFirstUse", true);/***如果用户不是第一次使用则直接调转到显示界面,否则调转到引导界面*/if (isFirstUse) {startActivity(new Intent(act, GuideActivity.class));} else {startActivity(new Intent(act, HandlerActivity.class));}finish();//实例化Editor对象SharedPreferences.Editor editor = preferences.edit();//存入数据editor.putBoolean("isFirstUse", false);//提交修改editor.commit();}@Overrideprotected int getLayoutID() {return R.layout.activity_splash;}@Overrideprotected void initListener() {}@Overrideprotected void initView() {}@Overrideprotected void initData() {}
}

activity_splash.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"></LinearLayout>

2.第一次进入则到引导页

activity_guide.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_guide"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v4.view.ViewPagerandroid:id="@+id/vp_guide"android:layout_width="match_parent"android:layout_height="match_parent" /><Buttonandroid:id="@+id/start_btn"android:layout_width="wrap_content"android:layout_height="40dp"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_marginBottom="100dp"android:background="@drawable/shape_boder"android:gravity="center"android:padding="10dp"android:text="点击进入"android:textColor="@color/Qblue"android:visibility="invisible" /><RelativeLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_centerHorizontal="true"android:layout_marginBottom="60dp"><LinearLayoutandroid:id="@+id/ll_container"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"></LinearLayout><ImageViewandroid:id="@+id/iv_red"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="20dp"android:src="@drawable/shape_point2" /></RelativeLayout></RelativeLayout>

drawable下的shape_point1.xml自定义小圆点

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

drawable下的shape_point2.xml自定义椭圆长点

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="@color/Qblue" /><sizeandroid:width="30dp"android:height="10dp" /><!-- 边角圆弧的半径 --><corners android:radius="10dp" />
</shape>

java代码

package com.fb.hckjfb.activity;import android.content.Intent;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;import com.fb.hckjfb.DepthPageTransformer;
import com.fb.hckjfb.R;import java.util.ArrayList;/*** 引导页*/
public class GuideActivity extends BaseActivity {private ViewPager mViewPager;private int[] mImageIds = new int[]{R.drawable.iv_ydy1, R.drawable.iv_ydy2, R.drawable.iv_ydy3};private ArrayList<ImageView> mImageViewList;private LinearLayout llContainer;private ImageView ivRedPoint;private int mPaintDis;private Button start_btn;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//隐藏状态栏getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);setContentView(R.layout.activity_guide);initView();}@Overrideprotected int getLayoutID() {return R.layout.activity_guide;}@Overrideprotected void initListener() {}@Overrideprotected void initView() {mViewPager = (ViewPager) findViewById(R.id.vp_guide);llContainer = (LinearLayout) findViewById(R.id.ll_container);ivRedPoint = (ImageView) findViewById(R.id.iv_red);start_btn = (Button) findViewById(R.id.start_btn);start_btn.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {//点击进入的时候直接跳转到登录界面Intent intent = new Intent(act, LoginActivity.class);startActivity(intent);finish();}});initData();GuideAdapter adapter = new GuideAdapter();//添加动画效果mViewPager.setPageTransformer(true, new DepthPageTransformer());mViewPager.setAdapter(adapter);//监听布局是否已经完成  布局的位置是否已经确定ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {@Overridepublic void onGlobalLayout() {//避免重复回调        出于兼容性考虑，使用了过时的方法ivRedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);//布局完成了就获取第一个小灰点和第二个之间left的距离mPaintDis = llContainer.getChildAt(1).getLeft() - llContainer.getChildAt(0).getLeft();System.out.println("距离：" + mPaintDis);}});//ViewPager滑动Pager监听mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {//滑动过程中的回调@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {//当滑到第二个Pager的时候，positionOffset百分比会变成0，position会变成1，所以后面要加上position*mPaintDisint letfMargin = (int) (mPaintDis * positionOffset) + position * mPaintDis;//在父布局控件中设置他的leftMargin边距RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) ivRedPoint.getLayoutParams();params.leftMargin = letfMargin;ivRedPoint.setLayoutParams(params);}/*** 设置按钮最后一页显示，其他页面隐藏* @param position*/@Overridepublic void onPageSelected(int position) {System.out.println("position:" + position);if (position == mImageViewList.size() - 1) {start_btn.setVisibility(View.VISIBLE);} else {start_btn.setVisibility(View.GONE);}}@Overridepublic void onPageScrollStateChanged(int state) {System.out.println("state:" + state);}});}class GuideAdapter extends PagerAdapter {//item的个数@Overridepublic int getCount() {return mImageViewList.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}//初始化item布局@Overridepublic Object instantiateItem(ViewGroup container, int position) {ImageView view = mImageViewList.get(position);container.addView(view);return view;}//销毁item@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View) object);}}@Overrideprotected void initData() {mImageViewList = new ArrayList<>();for (int i = 0; i < mImageIds.length; i++) {//创建ImageView把mImgaeViewIds放进去ImageView view = new ImageView(this);view.setBackgroundResource(mImageIds[i]);//添加到ImageView的集合中mImageViewList.add(view);//小圆点ImageView pointView = new ImageView(this);pointView.setImageResource(R.drawable.shape_point1);//初始化布局参数，父控件是谁，就初始化谁的布局参数LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);if (i > 0) {//当添加的小圆点的个数超过一个的时候就设置当前小圆点的左边距为20dp;params.leftMargin = 20;}//设置小灰点的宽高包裹内容pointView.setLayoutParams(params);//将小灰点添加到LinearLayout中llContainer.addView(pointView);}}}

到第三张引导页时点击进入后达到登录页面

3.当第二次再进入的时候直接就进入了欢迎界面，3秒后自动跳转到登录界面

欢迎界面activity_handler.xml（这里只放了一张图片，如果有兴趣可以自定义布局）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="@drawable/iv_handler"></LinearLayout>

java代码

package com.fb.hckjfb.activity;import android.content.Intent;
import android.os.Handler;
import android.os.Message;
import android.os.Bundle;
import android.view.WindowManager;import com.fb.hckjfb.R;public class HandlerActivity extends BaseActivity {private Intent intent;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//隐藏状态栏getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);setContentView(R.layout.activity_handler);initView();handler.sendEmptyMessageDelayed(0, 3000);}Handler handler = new Handler() {@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);intent = new Intent(act, LoginActivity.class);startActivity(intent);//执行一次后销毁本页面finish();}};@Overrideprotected int getLayoutID() {return R.layout.activity_handler;}@Overrideprotected void initListener() {}@Overrideprotected void initView() {}@Overrideprotected void initData() {}
}

就这样一个引导和欢迎进入就完成了，收藏一下不用每次就费好大劲去找资料了。

优化

效果

SharedPreferences优化为MMKV，加入沉浸状态栏immersionbar，使用viewBinding

MMKV依赖库地址：https://github.com/Tencent/MMKV

immersionbar依赖库：https://github.com/gyf-dev/ImmersionBar

viewPage切换动画

public class DepthPageTransformer implements ViewPager.PageTransformer {private static float MIN_SCALE = 0.75f;@Overridepublic void transformPage(@NonNull View view, float position) {int pageWidth = view.getWidth();if (position < -1) { // [-Infinity,-1)// This page is way off-screen to the left.view.setAlpha(0);} else if (position <= 0) { // [-1,0]// Use the default slide transition when moving to the left pageview.setAlpha(1);view.setTranslationX(0);view.setScaleX(1);view.setScaleY(1);} else if (position <= 1) { // (0,1]// Fade the page out.view.setAlpha(1 - position);// Counteract the default slide transitionview.setTranslationX(pageWidth * -position);// Scale the page down (between MIN_SCALE and 1)float scaleFactor = MIN_SCALE+ (1 - MIN_SCALE) * (1 - Math.abs(position));view.setScaleX(scaleFactor);view.setScaleY(scaleFactor);} else { // (1,+Infinity]// This page is way off-screen to the right.view.setAlpha(0);}}
}

Demo详情请查看：https://github.com/cuiwenju2017/GuidePage