首先是启动页面与引导页面的区别:启动页面和引导页面是不同的。
发现有很多人会把引导页面叫做启动页面,这可能是因为启动页面的“昙花一现”,用户更多的注意到引导页面。其实区分他们并不难:
1,启动页面可以是无意义的,哪怕是一张白色图片。而引导页面势必要起到引导的作用,可能是产品特色的展示,或者关键功能的引导,也或者是新功能迭代的展示等。
2,启动界面是自动消失的,而且一般是越快越好。(在启动界面添加广告的链接会有倒计时,还要我们点跳过,有木有!好吧,待会再聊这个...)。而引导页面一般要“逼”用户一一拜读完毕,才不情愿的离开。
3,这个是最明显的:启动页面会伴随每一次APP启动时都会出现。而启动页面一般只在新版本打开的第一次才会出现。
4,启动页面一般只有一张。(虽然也有时候不是一张),而引导页面往往是一组,一组,一组。
发现有很多人会把引导页面叫做启动页面,这可能是因为启动页面的“昙花一现”,用户更多的注意到引导页面。其实区分他们并不难:
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; } }
本次的代码就到此结束了