仿易信引导页面

目前的引导页面大多数就是ViewPager,不过已经有很多app的引导页面变为动画+viewpager,第一次见到,感觉很新颖,用户体验会瞬间提升一阶。那么问题来了,这样的引导页面怎么做的呢?

曾经一度用易信,有一次更新版本后发现易信的引导页面就是这种情况,感觉很新颖。昨天下载了虾米音乐,用的也是这样的,但跟这个有区别。

首先看效果图:

刚开始见到以为后面是动态图片做背景。后来解压了app,发现里面是一段mp4。那么这样就好写了

思路:布局为视频+viewpager

布局文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

<?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_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.kevin.tech.vedioguidedemo.MainActivity">

<com.kevin.tech.vedioguidedemo.CustomizeVideoView
android:id="@+id/video_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="100dp">

<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />

<LinearLayout
android:id="@+id/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:orientation="horizontal" />
</RelativeLayout>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="15dp"
android:paddingRight="15dp">

<Button
android:id="@+id/btn_register"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@color/green_1"
android:text="注册"
android:textColor="@color/white"
android:textSize="16sp" />

<Button
android:id="@+id/btn_login"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_weight="1"
android:background="@drawable/shape_bg_button_transparent"
android:text="登录"
android:textColor="@color/white"
android:textSize="16sp" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
这里的视频布局用的是VedioView(重写过的)。其他布局就是viewpager,button的了,比较简单。

布局写好了,问题就简单了,直接加载视频就好了。

视频的加载

1
2
3
4
5
6
7
8
9
10
11

mVideoView = (CustomizeVideoView) findViewById(R.id.video_view);
mVideoView.setVideoURI(Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.media));//获取视频
mVideoView.start();//开始播放
mVideoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
@Override
public void onCompletion(MediaPlayer mediaPlayer) {
mVideoView.start();
}
});
}

ViewPager的添加

无限轮播viewpager正好之前我已经写过了。相信很多人也都会写。有问题的可以参考我之前写的《viewpager自添加指示器,无限轮播》《ViewPager的自动轮播》(谢谢支持)。

Button处理

那么问题来了,视频是不是一直在播放呢,这样毫无疑问肯定会很耗内存的。所以这里还有控制视频的停止播放。即在处理Button事件的时候添加视频停止播放并释放内存即可

1
2

mVideoView.stopPlayback();//视频停止播放并释放内存

我再Demo里写的视频的暂停和继续播放,因为易信的没有这个,自己只是练习。在真正写代码的时候我认为是不添加暂停和继续播放更符合要求的。

  • 视频暂停:

    1
    2
    3
    4

    mVideoView.pause();
    currentPosition = mVideoView.getCurrentPosition();//暂停后获取当前播放的位置
    Toast.makeText(MainActivity.this, "暂停播放", Toast.LENGTH_SHORT).show();
  • 视频继续:

    1
    2
    3
    4
    5

    mVideoView.setVideoURI(Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.media));//获取视频资源
    mVideoView.seekTo(currentPosition);//将视频移动到暂停时的播放位置
    mVideoView.start();//开始播放
    Toast.makeText(MainActivity.this, "继续播放", Toast.LENGTH_SHORT).show();

这里附上我写的Demo

##点击下载
希望当帮助到各位同学,欢迎互相学习互相交流!