目前的引导页面大多数就是ViewPager,不过已经有很多app的引导页面变为动画+viewpager,第一次见到,感觉很新颖,用户体验会瞬间提升一阶。那么问题来了,这样的引导页面怎么做的呢?
曾经一度用易信,有一次更新版本后发现易信的引导页面就是这种情况,感觉很新颖。昨天下载了虾米音乐,用的也是这样的,但跟这个有区别。
首先看效果图:
刚开始见到以为后面是动态图片做背景。后来解压了app,发现里面是一段mp4。那么这样就好写了
布局文件:
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的自动轮播》(谢谢支持)。
那么问题来了,视频是不是一直在播放呢,这样毫无疑问肯定会很耗内存的。所以这里还有控制视频的停止播放。即在处理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
##点击下载
希望当帮助到各位同学,欢迎互相学习互相交流!