引导界面微场景交互设计与技术实现V1.0

Android的引导界面交互从原来的静态界面逐渐发展到动态的动画界面，到目前也有很多使用微视频来构建微场景的方式进行交互，给人一种更加立体与多维的感知和认知。虽然这种方式还没有成为主流，但我想未来人们对多维感知与交互体验的需求会不断增大，而微场景这样的交互体验也应该被更多的融合到项目中去。

      下面是一个全屏，竖屏的微场景引导界面的交互设计与技术实现，仅供参考，由于微视频录制使用的是美拍，录制出来的视频默认是正方形的，所以全屏展示的时候有些拉伸，要把这套方案应用到真实的项目中去，只要竖屏录制视频即可，我为了省事，没有在微视频编辑这块下功夫，还请朋友们见谅。

微场景交互效果图：

（由于微场景转成gif大于限定2M，这里只取了19帧gif做为演示）

（1）全屏效果技术实现

         方式一：可以在<application>或<activity>标签中通过属性

         android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

        配置所有Activity界面或指定Activity界面为全屏      显示。

        例如：

        <activity

            android:name=".MainActivity"

            android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

            android:label="@string/app_name">

            <intent-filter>

                <actionandroid:name="android.intent.action.MAIN"/>

 

                <categoryandroid:name="android.intent.category.LAUNCHER"/>

            </intent-filter>

         </activity>

        特点：标题栏，状态栏一次性全都去掉。

       方式二：在某Activity的onCreate()方法中，在setContentView()方法之前，通过使用下面两行代码实现全屏显                             示。

            requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏

            getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,

            WindowManager.LayoutParams.FLAG_FULLSCREEN);//去掉状态栏

       特点：只有这两行代码联合使用时，才能做到全屏显示界面。相比方式一，在显示界面的时候标题栏的消失有少        许延迟，在模拟器上可以看到标题栏消失的过程。好处是可以灵活的根据需求只去掉标题栏或只去掉状态栏，而        不是一次性全去掉。

（2）竖屏效果技术实现

       方式一：在<activity>标签中通过属性 android:screenOrientation="portrait"指定屏幕朝向为竖直的。

       例如：

      <activity

            android:name=".MainActivity"

            android:label="@string/app_name"

            android:screenOrientation="portrait"

             >

            <intent-filter>

                <actionandroid:name="android.intent.action.MAIN"/>

 

                <categoryandroid:name="android.intent.category.LAUNCHER"/>

            </intent-filter>

      </activity>

      注意：当值为portrait表示竖直朝向，当值为landscape表示水平朝向。而且在<application>中是没有这个属性           的，如果非要拷贝上面的属性到<application>标签中，则虽不报错，但运行是没有效果的。

      特点：一旦指定了screenOrientation属性，即使用户打开了手机的屏幕旋转功能，则该Activity界面也不会跟着旋                    转。

      方式二：在某Activity类的onCreate（）方法中通过调用方法                                  setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

可在代码中动态设置Activity界面的显示朝向，其中参数ActivityInfo.SCREEN_ORIENTATION_PORTRAIT是竖屏值，  ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE是横屏值。

 

（2）屏幕竖直且全屏播放微场景视频技术实现

         播放视频常用方式：

        1）   直接调用系统的视频播放器播放。

        2）   使用SurfaceView控件与MediaPlayer类显示视频界面和控制视频播放。

        3）   使用VideoView控件与MediaController类显示视频界面和控制视频播放（重点）。

       这里我们选择最后一种方式来实现。

 

        a)认识VideoView控件：

        VideoView控件在android.widget包中，它继承与SurfaceView，并实现了接口MediaPlayerControl和       SubtitleController.Anchor。

而MediaPlayerControl接口中定义了如下方法：可播放视频，暂停视频，获取视频总时长，获取视频当前播放时间，控制视频快进或快退，判断视频是否正在播放，判断视频是否可暂停，可快退，可快进等。

       void     start();  //播放视频

       void     pause();  //暂停播放视频

       int      getDuration();//获取视频总时长

       int     getCurrentPosition();//获取当前播放时间

       void    seekTo(intpos);//快进或快退

       booleanisPlaying();//判断视频是否正在播放

       int     getBufferPercentage();//获取缓冲百分比

       boolean canPause();//判断视频是否可暂停

       booleancanSeekBackward();//判断视频是否可快退

       booleancanSeekForward();//判断视频是否可快进

       int      getAudioSessionId();//获取视频中音频会话Id

 

      VideoView类自身的方法：可对视频准备状态做监听，对视频播放完成进行监听，对视频播放错误进行监听，设                                                     置要播放视频的路径等。

     public voidsetOnPreparedListener(MediaPlayer.OnPreparedListener l) //注册视频准备状态监听器

    public void setOnCompletionListener(OnCompletionListener l)//注册视频播放完成监听器

    public voidsetOnErrorListener(OnErrorListener l)//注册视频播放错误监听器

    public voidsetVideoPath(String path)//为VideoView提供视频路径，比如sdcard中的视频路径

    public void setVideoURI(Uri uri) //为VideoView提供视频路径对应的统一资源定位符（与视频路径对应）

    public   void stopPlayback()//停止播放视频

 

  b） 认识MediaController类

 

         这是一个布局类，继承与FrameLayout帧布局类，提供了播放/暂停按钮，上一页，下一页按钮，以工具条的方       式来控制视频。实现的时候需要与对应的VideoView进行关联，

 

    例如：  

        VideoView mVideoView= findViewById(R.id.vplayer)；

        MediaController  mMc = new MediaController(this);

        mVideoView.setMediaController();

        mMc .setMediaPlayer(mVideoView);

 

       注意：如果在使用VideoView播放视频的时候需要用到MediaController控制条，则VideoView的父布局高度要设置 成wrap_content，因为MediaController默认会在最底部显示，这样可能会在VideoView与MediaController之间产生空白。如果只是为了播放视频而不控制它，则可以不使用MediaController，比如本案例，只是播放一个微场景的视频，并不需要用户控制视频的播放/暂停等，所以使用MediaController。而之所以这里提到这个类，是因为很多场景下是需要通过为用户提供控制条来提高视频的交互性。

 

 c）实现步骤：

 

      1）    创建项目，并在res目录下创建存放视频的目录raw,将Android支持的视频放入raw中。

               res/raw/meipai.mp4

      2）  在XML布局界面使用<VideoView>标签对视频界面进行布局。

  <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background= "#ffffff">

    <VideoView

        android:id="@+id/vv_player"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"/>

  </RelativeLayout>

3）  在Activity类的onCreate()方法中设置Activity界面全屏与竖屏。

 

      requestWindowFeature(Window.FEATURE_NO_TITLE);

 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

     setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

 

4）  在Activity类的onCreate()方法中通过findViewById()找到VideoView控件.

mVvPlayer =(VideoView) this.findViewById(R.id.vv_player);

 

5）  调用VideoView类的方法setVideoURI(Uri.parse("android.resource://"+ getPackageName() + "/" + R.raw.meipai));设置视频路径，其中R.raw.meipai里meipai是视频资源Id.

mVvPlayer.setVideoURI(Uri.parse("android.resource://"+ getPackageName() + "/" + R.raw.meipai));

 

6）  调用VideoView类的方法start()开始播放视频。

mVvPlayer.start();

 

7）  在onPause()方法中调用VideoView类的方法stopPlayback()，以方便在Activity界面消失的时候停止正在播放的视频。

mVvPlayer.stopPlayback();

 

8）  运行项目，查看效果。

9）  问题解决：

按照上面七步已经可以看到视频的播放，但是视频本身依然没有全屏播放。

解决办法是为VideoView设置LayoutParams，代码如下：

 

RelativeLayout.LayoutParams layoutParams = new

     RelativeLayout.LayoutParams(

     RelativeLayout.LayoutParams.MATCH_PARENT,

     RelativeLayout.LayoutParams.MATCH_PARENT);

     layoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);

     layoutParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);

     layoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);

     layoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);

mVvPlayer.setLayoutParams(layoutParams);