仿易信引導頁面

目前的引導頁面大多數就是ViewPager,不過已經有不少app的引導頁面變爲動畫+viewpager，第一次見到，感受很新穎，用戶體驗會瞬間提高一階。那麼問題來了，這樣的引導頁面怎麼作的呢？

曾經一度用易信，有一次更新版本後發現易信的引導頁面就是這種狀況，感受很新穎。昨天下載了蝦米音樂，用的也是這樣的，但跟這個有區別。

首先看效果圖：

剛開始見到覺得後面是動態圖片作背景。後來解壓了app，發現裏面是一段mp4。那麼這樣就好寫了

思路：佈局爲視頻+viewpager

佈局文件：

<?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的了，比較簡單。

佈局寫好了，問題就簡單了，直接加載視頻就行了。

視頻的加載

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事件的時候添加視頻中止播放並釋放內存便可

mVideoView.stopPlayback();//視頻中止播放並釋放內存

我再Demo裏寫的視頻的暫停和繼續播放，由於易信的沒有這個，本身只是練習。在真正寫代碼的時候我認爲是不添加暫停和繼續播放更符合要求的。

• 視頻暫停：

mVideoView.pause();
currentPosition = mVideoView.getCurrentPosition();//暫停後獲取當前播放的位置
Toast.makeText(MainActivity.this, "暫停播放",    Toast.LENGTH_SHORT).show();

• 視頻繼續：

mVideoView.setVideoURI(Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.media));//獲取視頻資源
 mVideoView.seekTo(currentPosition);//將視頻移動到暫停時的播放位置
 mVideoView.start();//開始播放
 Toast.makeText(MainActivity.this, "繼續播放", Toast.LENGTH_SHORT).show();

這裏附上我寫的Demo

點擊下載一

點擊下載二

但願當幫助到各位同窗，歡迎互相學習互相交流！