APP应用之启动界面SplashActivity

首先是启动页面与引导页面的区别：启动页面和引导页面是不同的。

发现有很多人会把引导页面叫做启动页面，这可能是因为启动页面的“昙花一现”，用户更多的注意到引导页面。其实区分他们并不难：

1，启动页面可以是无意义的，哪怕是一张白色图片。而引导页面势必要起到引导的作用，可能是产品特色的展示，或者关键功能的引导，也或者是新功能迭代的展示等。
2，启动界面是自动消失的，而且一般是越快越好。（在启动界面添加广告的链接会有倒计时，还要我们点跳过，有木有！好吧，待会再聊这个...）。而引导页面一般要“逼”用户一一拜读完毕，才不情愿的离开。
3，这个是最明显的：启动页面会伴随每一次APP启动时都会出现。而启动页面一般只在新版本打开的第一次才会出现。
4，启动页面一般只有一张。（虽然也有时候不是一张）,而引导页面往往是一组，一组，一组。

需要添加的依赖有：

compile 'com.android.support:appcompat-v7:26.+'
compile 'com.android.support.constraint:constraint-layout:1.0.2'

建立布局文件.xml:

activity_main

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.splashactivitydemo.activity.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

activity_guide

<?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="com.example.splashactivitydemo.activity.GuideActivity">

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

    <LinearLayout
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="16dp"
        android:id="@+id/point_container"
        android:background="#f00"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:orientation="horizontal"/>

</RelativeLayout>

activity_splash

<?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="com.example.splashactivitydemo.activity.SplashActivity">

    <TextView
        android:id="@+id/count_down_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="5s"/>

</RelativeLayout>

fragment_guide

<?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:id="@+id/guide_image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <Button
        android:id="@+id/start_main_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="#0000"
        android:visibility="gone"
        android:text="立即体验"/>

</RelativeLayout>

不要忘记将图片放入drawable目录下

接着是Java文件：分别创建activity、adapter、fragment三个文件目录

activity文件目录下：

GuideActivity

import android.widget.ImageView;
import android.widget.LinearLayout;

import com.example.splashactivitydemo.R;
import com.example.splashactivitydemo.adapter.GuidePagerAdapter;
import com.example.splashactivitydemo.fragment.GuideFragment;

import java.util.ArrayList;
import java.util.List;

/**
 * 1、实现ViewPager
 * 2、实现小圆点
 * 3、小圆点展示对应页
 */
public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    protected ViewPager mGuideViewPager;

    // Fragment集合
    private List<GuideFragment> mFragmentList;
    // 小圆点集合
    private List<ImageView> mPointList;

    // 3个图片id
    private int[] imgIds = new int[]
            {R.drawable.guide_first, R.drawable.guide_second, R.drawable.guide_third};

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

    private void initView() {
        mGuideViewPager = (ViewPager) findViewById(R.id.guide_view_pager);
        LinearLayout pointContainer = (LinearLayout) findViewById(R.id.point_container);

        mFragmentList = new ArrayList<>();
        mPointList = new ArrayList<>();

        // 布局参数，可以指定宽高、权重等信息
        // 视图所在容器是什么，就选择对应的LayoutParams
        LinearLayout.LayoutParams params =
                new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1);
        for (int imgId : imgIds) {// 3
            // 实例化Fragment
            GuideFragment guideFragment = GuideFragment.newInstance(imgId);
            mFragmentList.add(guideFragment);

            // 实例化小圆点
            ImageView pointImageView = new ImageView(this);
            pointImageView.setImageResource(R.drawable.selector_point);
            // 给子控件设置布局参数
            pointImageView.setLayoutParams(params);
            // 向容器中添加子视图：小圆点
            pointContainer.addView(pointImageView);
            mPointList.add(pointImageView);
        }
        // 初始化第一个小圆点为选中状态，即白色
        mPointList.get(0).setSelected(true);
        // 最后一个碎片设置按钮可见
        mFragmentList.get(mFragmentList.size() - 1).setShowBtn(true);

        GuidePagerAdapter adapter =
                new GuidePagerAdapter(getSupportFragmentManager(), mFragmentList);

        mGuideViewPager.setAdapter(adapter);
        mGuideViewPager.addOnPageChangeListener(this);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        // 遍历全部小圆点，当前展示页对应的点设置为白色，其他圆点一律设置为灰色
        for (int i = 0; i < mPointList.size(); i++) {
            mPointList.get(i).setSelected(i == position);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

MainActivity

package com.example.splashactivitydemo.activity;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.example.splashactivitydemo.R;
/**
 * 欢迎页：每次启动app都进入的页，SplashActivity，实现5s倒计时，自动跳转
 * 引导页：首次启动app展示的页，GuideActivity，有ViewPager和小圆点，可以展示对应页
 * 主界面：MainActivity*/
public class MainActivity extends AppCompatActivity {

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

SplashActivity

package com.example.splashactivitydemo.activity;

import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

import com.example.splashactivitydemo.R;


/**
 * 欢迎页
 * 1、倒计时变成0时，自动跳转：Handler、Timer、CountDownTimer
 * 2、SharedPreferences记录是否首次启动app：首次跳转引导页，否则跳转主页
 */
public class SplashActivity extends AppCompatActivity {

    public static final int MSG_UPDATE_TIME = 1;

    // 时间间隔1s
    public static final int INTERNAL_TIME = 1000;

    // 配置文件名
    public static final String CONGIF_NAME = "app_config";

    // 配置文件中的一个配置项：是否首次启动
    public static final String IS_FIRST_LOGIN = "is_first_login";

    // 倒计时，初始5s
    private int mCountDownTime = 5;

    protected TextView mCountDownTv;

    private Handler mHandler = new Handler(new Handler.Callback() {

        // 接收发送的消息
        @Override
        public boolean handleMessage(Message msg) {
            switch (msg.what) {
                case MSG_UPDATE_TIME:// 更新时间

                    if (mCountDownTime > 0) {
                        mCountDownTv.setText(--mCountDownTime + "s");
                        // 每次更新完UI界面，都会在1s后发送消息，通知继续下一次的更新
                        mHandler.sendEmptyMessageDelayed(MSG_UPDATE_TIME, INTERNAL_TIME);
                    } else {
//                        Toast.makeText(SplashActivity.this, "OK", Toast.LENGTH_SHORT).show();
                        startOtherActivity();
                    }
                    break;
            }
            return true;
        }
    });

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

        // 使用handler每隔1s发送一次消息，通知textView刷新UI界面
        mHandler.sendEmptyMessageDelayed(MSG_UPDATE_TIME, INTERNAL_TIME);
    }

    private void initView() {
        mCountDownTv = (TextView) findViewById(R.id.count_down_tv);
    }

    // 跳转界面
    private void startOtherActivity() {
        SharedPreferences sharedPreferences =
                this.getSharedPreferences(CONGIF_NAME, Context.MODE_PRIVATE);

        // 每次启动app都要检查是否首次启动
        boolean isFirstLogin = sharedPreferences.getBoolean(IS_FIRST_LOGIN, true);
        // 跳转
        Intent intent = new Intent();
        if (isFirstLogin) {// 跳转引导页
            intent.setClass(this, GuideActivity.class);
            // 从此不再是首次启动
            SharedPreferences.Editor editor = sharedPreferences.edit();
            editor.putBoolean(IS_FIRST_LOGIN, false);
            editor.commit();
        } else {// 跳转主界面
            intent.setClass(this, MainActivity.class);
        }
        startActivity(intent);
        // 关闭当前页面
        finish();
    }

}

adapter文件目录下：

GuidePagerAdapter

package com.example.splashactivitydemo.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import com.example.splashactivitydemo.fragment.GuideFragment;

import java.util.List;

/**
 * 引导页对应的适配器
 */
public class GuidePagerAdapter extends FragmentPagerAdapter {

    private List<GuideFragment> mFragmentList;

    public GuidePagerAdapter(FragmentManager fm, List<GuideFragment> fragmentList) {
        super(fm);
        this.mFragmentList = fragmentList;
    }

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

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

fragment文件目录下：

GuideFragment

package com.example.splashactivitydemo.fragment;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;

import com.example.splashactivitydemo.R;

import com.example.splashactivitydemo.activity.MainActivity;

public class GuideFragment extends Fragment implements View.OnClickListener {

    private int mResId;
    // 是否展示立即体验按钮
    private boolean mIsShowBtn;

    // 用于在外部创建Fragment的实例，而且可以传递参数
    public static GuideFragment newInstance(int resId) {
        Bundle args = new Bundle();
        args.putInt("resId", resId);
        GuideFragment fragment = new GuideFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mResId = getArguments()
                .getInt("resId");
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_guide, container, false);
        ImageView guideImageView = (ImageView) rootView.findViewById(R.id.guide_image_view);
        guideImageView.setImageResource(mResId);
        if (mIsShowBtn) {
            Button startMainBtn = (Button) rootView.findViewById(R.id.start_main_btn);
            startMainBtn.setOnClickListener(this);
            // 设置可见
            startMainBtn.setVisibility(View.VISIBLE);
        }
        return rootView;
    }

    @Override
    public void onClick(View v) {
        Intent intent = new Intent(getContext(), MainActivity.class);
        startActivity(intent);
        getActivity().finish();
    }

    public void setShowBtn(boolean showBtn) {
        mIsShowBtn = showBtn;
    }
}

本次的代码就到此结束了

APP应用之启动界面SplashActivity

猜你喜欢