Android基于ViewPager实现滑动欢迎界面（向导界面 引导页）

1.项目需求：APP都有自己的向导页面，一般都是第一次安装的时或者第一次进入应用时才有向导页面，项目中有多张广告图需要在欢迎页面显示出来

效果图：



2.具体功能实现：我使用viewPager配合Adapter来滑动处理，滑动事件监听滑动距离，点跟随滑动。

代码展示：

SplashActivity
package com.mingyansu.splash; import android.content.Context; import
android.content.Intent; import android.graphics.Point; import
android.os.Bundle; import android.support.annotation.Nullable; import
android.support.v4.view.ViewPager; import
android.support.v7.app.AppCompatActivity; import android.view.KeyEvent; import
android.view.MotionEvent; import android.view.View; import
android.view.ViewTreeObserver; import android.view.WindowManager; import
android.widget.ImageView; import android.widget.LinearLayout; import
android.widget.RelativeLayout; import java.util.ArrayList; import
java.util.List; /** * @创建者 mingyan.su * @创建时间 2018/9/4 15:00 * @类描述 ${TODO}向导界面
*/ public class SplashActivity extends AppCompatActivity { private ViewPager
mVp_Guide; private View mGuideRedPoint; private LinearLayout mLlGuidePoints;
private int disPoints; private int currentItem; private MyAdapter adapter;
private List<ImageView> guids; //向导界面的图片 private int[] mPics = new
int[]{R.mipmap.icon_1, R.mipmap.icon_2, R.mipmap.icon_3, R.mipmap.icon_4,
R.mipmap.icon_5}; @Override protected void onCreate(@Nullable Bundle
savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash);
UIUtils.init(getApplicationContext()); initView(); initData(); initEvent(); }
private void initView() { mVp_Guide = (ViewPager) findViewById(R.id.vp_guide);
mGuideRedPoint = findViewById(R.id.v_guide_redpoint); mLlGuidePoints =
(LinearLayout) findViewById(R.id.ll_guide_points); } private void initData() {
// viewpaper adapter适配器 guids = new ArrayList<ImageView>(); //创建viewpager的适配器
for (int i = 0; i < mPics.length; i++) { ImageView iv_temp = new
ImageView(getApplicationContext()); iv_temp.setBackgroundResource(mPics[i]);
//添加界面的数据 guids.add(iv_temp); //灰色的点在LinearLayout中绘制： //获取点 View v_point = new
View(getApplicationContext());
v_point.setBackgroundResource(R.drawable.point_smiple);//灰点背景色 //设置灰色点的显示大小 int
dip = 10; LinearLayout.LayoutParams params = new
LinearLayout.LayoutParams(UIUtils.dp2Px(dip), UIUtils.dp2Px(dip));
//设置点与点的距离,第一个点除外 if (i != 0) params.leftMargin = 47;
v_point.setLayoutParams(params); mLlGuidePoints.addView(v_point); } //
创建viewpager的适配器 adapter = new MyAdapter(getApplicationContext(), guids); //
设置适配器 mVp_Guide.setAdapter(adapter); } private void initEvent() { //监听界面绘制完成
mGuideRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new
ViewTreeObserver.OnGlobalLayoutListener() { @Override public void
onGlobalLayout() { //取消注册界面而产生的回调接口
mGuideRedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);
//计算点于点之间的距离 disPoints = (mLlGuidePoints.getChildAt(1).getLeft() -
mLlGuidePoints.getChildAt(0).getLeft()); } }); //滑动事件监听滑动距离，点更随滑动。
mVp_Guide.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override public void onPageSelected(int position) { /* //当前viewpager显示的页码
//如果viewpager滑动到第三页码（最后一页），显示进入的button if (position == guids.size() - 1) {
bt_startExp.setVisibility(View.VISIBLE);//设置按钮的显示 } else { //隐藏该按钮
bt_startExp.setVisibility(View.GONE); }*/ currentItem = position; } /**
*页面滑动调用，拿到滑动距离设置视图的滑动状态 * @param position 当前页面位置 * @param positionOffset 移动的比例值
* @param positionOffsetPixels 便宜的像素 */ @Override public void onPageScrolled(int
position, float positionOffset, int positionOffsetPixels) { //计算红点的左边距 float
leftMargin = disPoints * (position + positionOffset); //设置红点的左边距
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams)
mGuideRedPoint.getLayoutParams(); //对folat类型进行四舍五入， layoutParams.leftMargin =
Math.round(leftMargin); //设置位置 mGuideRedPoint.setLayoutParams(layoutParams); }
@Override public void onPageScrollStateChanged(int state) { } }); //给页面设置触摸事件
mVp_Guide.setOnTouchListener(new View.OnTouchListener() { float startX; float
endX; @Override public boolean onTouch(View v, MotionEvent event) { switch
(event.getAction()) { case MotionEvent.ACTION_DOWN: startX = event.getX();
break; case MotionEvent.ACTION_UP: endX = event.getX(); WindowManager
windowManager = (WindowManager)
getApplicationContext().getSystemService(Context.WINDOW_SERVICE); //获取屏幕的宽度
Point size = new Point(); windowManager.getDefaultDisplay().getSize(size); int
width = size.x;
//首先要确定的是，是否到了最后一页，然后判断是否向左滑动，并且滑动距离是否符合，我这里的判断距离是屏幕宽度的4分之一（这里可以适当控制） if
(currentItem == (guids.size() - 1) && startX - endX >= (width / 4)) { //进入主页
Intent intent = new Intent(SplashActivity.this, MainActivity.class);
startActivity(intent); //这部分代码是切换Activity时的动画，看起来就不会很生硬
overridePendingTransition(android.R.anim.slide_in_left,
android.R.anim.slide_out_right); finish(); } break; } return false; } }); }
@Override public boolean onKeyDown(int keyCode, KeyEvent event) { return true;
} }
MyAdapter
package com.mingyansu.splash; import android.content.Context; import
android.support.v4.view.PagerAdapter; import android.view.View; import
android.view.ViewGroup; import android.widget.ImageView; import java.util.List;
/** * @创建者 mingyan.su * @创建时间 2018/9/4 15:00 * @类描述 ${TODO}viewpager的适配器 */
public class MyAdapter extends PagerAdapter { private List<ImageView> mGuids;
public MyAdapter(Context ctx, List<ImageView> guids) { this.mGuids = guids; }
@Override public int getCount() { return mGuids.size();// 返回数据的个数 } @Override
public boolean isViewFromObject(View arg0, Object arg1) { return arg0 ==
arg1;// 过滤和缓存的作用 } @Override public void destroyItem(ViewGroup container, int
position, Object object) { container.removeView((View) object);//从viewpager中移除掉
} @Override public Object instantiateItem(ViewGroup container, int position) {
// container viewpaper //获取View View child = mGuids.get(position); // 添加View
container.addView(child); return child; } }
布局文件：activity_splash
<?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">
<android.support.v4.view.ViewPager android:id="@+id/vp_guide"
android:layout_width="match_parent" android:layout_height="match_parent">
</android.support.v4.view.ViewPager> <TextView android:id="@+id/tv_skip"
style="@style/tv_default_16_white_default" android:layout_width="@dimen/x40"
android:layout_height="@dimen/x40" android:layout_alignParentEnd="true"
android:layout_alignParentTop="true" android:layout_marginEnd="@dimen/x20"
android:layout_marginRight="@dimen/x20" android:layout_marginTop="@dimen/x20"
android:background="@drawable/bg_circle_app_mirror_color"
android:gravity="center"/> <RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" android:layout_marginBottom="30dip">
<LinearLayout android:id="@+id/ll_guide_points"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="horizontal"> </LinearLayout> <View
android:id="@+id/v_guide_redpoint" android:layout_width="@dimen/x10"
android:layout_height="@dimen/x10" android:layout_marginBottom="@dimen/x1"
android:background="@drawable/point_deep"/> </RelativeLayout> </RelativeLayout>
圆点

point_deep.xml
<?xml version="1.0" encoding="utf-8"?> <shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"> <corners android:radius="5dp"/> <solid
android:color="#FF4081"/> </shape>
point_smiple.xml
<?xml version="1.0" encoding="utf-8"?> <shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"> <corners android:radius="5dp"/> <solid
android:color="#e7e7e7"/> </shape>
注意：viewpager需要添加 android-support-v4.jar 包的支持

欢迎评论留言！

附上源码地址：https://github.com/FollowExcellence/Splash
<https://github.com/FollowExcellence/Splash>

• « 上一篇：图像书籍读者群特别说明
• » 下一篇：认识物联网系列——物联网架构