分享:用“視頻”來打造你的Splash閃屏頁

作者: 杜冷丁
github: https://github.com/watire/

實(shí)現(xiàn)動(dòng)畫閃屏頁一般有4種方式:

方式 優(yōu)點(diǎn) 缺點(diǎn)
Gif 簡單 幀率高時(shí)容易OOM
VectorDrawable/SVG/PATH動(dòng)畫 速度快,內(nèi)存小 速度快,內(nèi)存小
系統(tǒng)動(dòng)畫 系統(tǒng)動(dòng)畫 系統(tǒng)動(dòng)畫
視頻 表現(xiàn)內(nèi)容豐富 MP4尺寸略大
先來效果圖,養(yǎng)養(yǎng)眼~:
素材來自滴滴出行

素材來自蝦米音樂

素材來自 滴滴出行 && 蝦米音樂

原來打算學(xué)習(xí)一下利用Path繪制的LOGO動(dòng)畫啟動(dòng)頁,結(jié)果心血來潮想起來了這個(gè)素材,真是感慨我的思維轉(zhuǎn)變之快啊,于是乎就有了此篇文章,廢話不多說,直接上干貨。
  • 由VideoView(全屏)+ImageView組成ViewPager的Item,綁定至Fragment
  • 將Fragment裝入FragmentStatePagerAdapter
  • 將adapter裝載至viewPager;
  • 放入適量視頻文件、圖片素材等佐料后起鍋...(好像又跑偏了啊喂),對于viewpager fragment這些基本組件,大家應(yīng)該信手拈來了,我就說說視頻文件如何播放的,翻開fragment,來看看每個(gè)item都有什么(敲黑板,這個(gè)是重點(diǎn)):

布局:

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent">  
    
    <com.watire.xiamivd.FullScreenVideoView
        android:id="@+id/vvSplash"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
        
    <ImageView
        android:id="@+id/ivSlogan"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:src="@drawable/slogan_1"
        android:scaleType="fitEnd"
        android:layout_alignParentEnd="true" />  
        
</RelativeLayout>

fragment:

    mVideoView = findViewById(R.id.vvSplash);
    mvSlogan = findViewById(R.id.ivSlogan);
    mVideoView.setOnErrorListener(this);
    mVideoView.setOnPreparedListener(this);
    mVideoView.setVideoPath("android.resource://" + getActivity().getPackageName() + "/" + R.raw.xxx);
    mvSlogan.setImageResource(imgRes);

給videoView setVideoPath即可設(shè)置視頻路徑,此處加載raw文件夾中資源,實(shí)現(xiàn)MediaPlayer.OnPreparedListener進(jìn)行播放。

@Override
public void onPrepared(MediaPlayer mediaPlayer) {
    if (mVideoView != null) {
        mVideoView.requestFocus();
        mVideoView.setOnCompletionListener(this);
        mVideoView.seekTo(0);
        mVideoView.start();
    }
    return;
}

然后實(shí)現(xiàn)MediaPlayer.OnCompletionListener, MediaPlayer.OnErrorListener來處理播放完成(控制viewpager跳轉(zhuǎn)至下一頁或已是最后一頁,則關(guān)閉頁面)和播放失敗時(shí)的情況。

@Override
public void onCompletion(MediaPlayer mediaPlayer) {
    FragmentActivity localFragmentActivity = getActivity();
    if ((localFragmentActivity != null) && ((localFragmentActivity instanceof FullscreenActivity))) {
        ((FullscreenActivity) localFragmentActivity).next(position);
    }
}

@Override
public boolean onError(MediaPlayer mediaPlayer, int i, int i1) {
    FragmentActivity localFragmentActivity = getActivity();
    if ((localFragmentActivity != null) && ((localFragmentActivity instanceof FullscreenActivity))) {
        ((FullscreenActivity) localFragmentActivity).next(position);
    }
    return true;
}

另外,需要實(shí)現(xiàn)onPause() 和onResume(),在頁面中斷時(shí)停止播放、恢復(fù)時(shí)繼續(xù)播放:

public void onResume() {
    super.onResume();
    if (mHasPaused) {
        if (mVideoView != null) {
            mVideoView.seekTo(mVideoPosition);
            mVideoView.resume();
        }
    }
    return;
}

public void onPause() {
    super.onPause();
    if (mVideoView != null) {
        mVideoPosition = mVideoView.getCurrentPosition();
    }
    mHasPaused = true;
}

在onDestroy()時(shí)停止播放(敲黑板,這個(gè)必考?。?

public void onDestroy() {
    super.onDestroy();
    if (mVideoView != null) {
        mVideoView.stopPlayback();
    }
    return;
}

ps. 推薦個(gè)github demo 運(yùn)行神器:dryrun ,使用方法:
連接手機(jī);
執(zhí)行命令:dryrun https://github.com/watire/xiamivd.git;
等待下載、安裝。

是不是很簡單呢,當(dāng)然要先安裝dryrun~~~~~!


項(xiàng)目地址:https://github.com/rivenlee0/rivennews-master

如果您感覺滿意, 請記得點(diǎn)贊,多謝支持!
也可以加我的QQ或微信:741547004 || rivenlee
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,326評論 25 708
  • afinalAfinal是一個(gè)android的ioc,orm框架 https://github.com/yangf...
    passiontim閱讀 15,898評論 2 45
  • 作者: 杜冷丁github: https://github.com/watire/ 一個(gè)酷炫的閃屏頁, 瞬間可以抓...
    菜刀文閱讀 6,679評論 9 31
  • 人與動(dòng)物的差別,便是人有可控制的欲求,我們稱之為人性。而獸之欲求,一旦激起,常常不能控制。我們?nèi)舭堰@人與獸的差別界...
    _北極貝閱讀 570評論 0 0
  • 親愛的小七: 今天是周四了,9月21日,是媽媽所在的營業(yè)區(qū)的晉升大會(huì),現(xiàn)在我感觸良多。 我很久未和營業(yè)區(qū)的人碰面了...
    吉吉kiki閱讀 181評論 0 0

友情鏈接更多精彩內(nèi)容