仿易信引导页面

Android Android, 引导页, 移动开发 评论

目前的引导页面大多数就是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

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

KevinAndroid developer

个人简介。