仿製慕課網app實現鬥魚,全民k歌視訊引導頁(ViewVideoViewPaper)炫酷效果
阿新 • • 發佈:2018-12-23
在幾個月前,我第一次玩全民k歌,下載完app,它彈出來的引導頁吸引了我,不像以前的引導頁一樣千篇一律,而是用了視訊的方式,用一種動態的方式來實現。在今天,我突然又想起了這個效果,就抽出了一點時間在網上也借鑑了一些人的想法自己寫了一下這個炫酷的視訊引導頁。
現在我們先來看一下 專案的結構,這樣 看程式碼 來也比較清晰明朗。(我會在結尾把程式碼下載連結發出來)
。
頁面超級簡單,我就不貼程式碼出來 ,我們等會直接拿demo瞧一眼就好了。
我們理一下邏輯,在我們一般下載一個app的時候,只有第一次安裝才會彈出引導頁,第二次登入的話 直接就是從 app的首頁封面到app的主頁面去了。所以我們肯定要有個東西要來記住我們是不是第一次開啟這個app。所以這個類 我們思路就好了。
start_activity.class
package com.android.mooc.activity; import com.android.mooc.R; import android.app.Activity; import android.content.Intent; import android.content.SharedPreferences; import android.content.SharedPreferences.Editor; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.support.annotation.Nullable; public class start_activity extends Activity { private boolean isFirstIn = false;// 判斷是否是第一次啟動 private static final int Time = 2000; private static final int Go_Home = 1000; private static final int Go_Guide = 1001; //在主執行緒中做 延時操作是不合理的,可以使用handler Handler mHandler = new Handler(){ public void handleMessage(Message msg) { switch (msg.what) { case Go_Home: gotoMainActivity(); finish(); break; case Go_Guide: gotoGuideActivity(); finish(); break; } }; }; protected void onCreate(@Nullable Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.start_activity); initData(); } private void initData() { SharedPreferences preferences = getSharedPreferences("nzx", MODE_PRIVATE); //先去取isFirstI的值,如果沒有,表明是第一次取,第一次取肯定是true isFirstIn = preferences.getBoolean("isFirstIn", true); //通過isFirstIn選擇啟動哪個頁面,再將新boolean值存入SharedPreferences if(isFirstIn){ mHandler.sendEmptyMessageDelayed(Go_Guide, Time); //制定多少毫秒後傳送空訊息,第一個引數是一個int what值 Editor editor = preferences.edit(); editor.putBoolean("isFirstIn", false); editor.commit(); }else{ mHandler.sendEmptyMessageDelayed(Go_Home, Time); } } private void gotoMainActivity() { Intent intent = new Intent(start_activity.this, appActivity.class); startActivity(intent); finish(); } private void gotoGuideActivity() { start_activity.this.startActivity(new Intent(start_activity.this, MainActivity.class)); finish(); } }
發現字 有點小。
這個時候,我們就需要跳到我們的視訊引導頁去了。我們首先把每個引導頁寫到一個介面卡才好一起管理。我們先貼出一個視訊引導頁的程式碼了,因為其他兩個也是一樣,為了不繁冗,一個就好了。
GuideOneFragmen.class
package com.android.mooc.fragment; import com.android.mooc.R; import com.android.mooc.view.MCVideoView; import android.net.Uri; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class GuideOneFragment extends Fragment{ private MCVideoView videoView; @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_guideone, null, false); initView(view); return view; } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState) if(videoView!=null){ videoView.playVideo(getActivity(), Uri.parse("android.resource://"+getActivity().getPackageName()+"/"+R.raw.guide_1)); } } private void initView(View view) { videoView=(MCVideoView) view.findViewById(R.id.videoView); } @Override//重複播放 public void onDestroy() { super.onDestroy(); if(videoView!=null){ videoView.stopPlayback(); } } }
videoView.playVideo(getActivity(), Uri.parse("android.resource://"+getActivity().getPackageName()+"/"+R.raw.guide_1));
這段程式碼 就是 我們從我們的res 目錄下解析我們的 視訊檔案下來
介面卡方面 就跟我們平常 寫listview介面卡一樣 繼承 重寫方法。
GuideFragmentPagerAdapter (介面卡類)
package com.android.adapter.Adapter;
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class GuideFragmentPagerAdapter extends FragmentPagerAdapter{
public List<Fragment> list;
public GuideFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
this.list=list;
}
@Override
public Fragment getItem(int arg0) {
return list.get(arg0);
}
@Override
public int getCount() {
return list.size();
}
}
很多人在想,那視訊類呢在哪裡呢,它是怎麼實現的呢 ,很簡單。
MCVideoView.Class
package com.android.mooc.view;
import android.content.Context;
import android.media.MediaPlayer;
import android.media.MediaPlayer.OnErrorListener;
import android.media.MediaPlayer.OnPreparedListener;
import android.net.Uri;
import android.util.AttributeSet;
import android.view.View;
import android.widget.VideoView;
public class MCVideoView extends VideoView{
public MCVideoView(Context context) {
this(context,null);
}
public MCVideoView(Context context, AttributeSet attrs) {
super(context, attrs,0);
}
public MCVideoView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(View.MeasureSpec.getSize(widthMeasureSpec), View.MeasureSpec.getSize(heightMeasureSpec));
}
public void playVideo(Context context,Uri uri){
if(uri==null){
throw new IllegalArgumentException("Uri can not be null");
}
//設定播放路徑
setVideoURI(uri);
//開始播放
start();
setOnPreparedListener(new OnPreparedListener() {
@Override
public void onPrepared(MediaPlayer mp) {
//設定迴圈播放
mp.setLooping(true);
}
});
setOnErrorListener(new OnErrorListener() {
@Override
public boolean onError(MediaPlayer mp, int what, int extra) {
return true;
}
});
}
}
衝的來說 就是 繼承VideoView 實現他的構造方法,設定播放路徑設定一些基本屬性就ok了
現在 就是有一點邏輯的時候了,怎麼讓每個視訊頁下面有一個紅點,不是當前播放的頁就沒有紅點呢。
MainActivity.class
package com.android.mooc.activity;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.os.Handler;
import com.android.adapter.Adapter.GuideFragmentPagerAdapter;
import com.android.mooc.R;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;
import com.android.mooc.fragment.GuideOneFragment;
import com.android.mooc.fragment.GuideThreeFragment;
import com.android.mooc.fragment.GuideTwoFragment;
/**
* 高仿慕課網動畫
*
* @author nzx
*
*/
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private ViewPager viewPager;
private List<Fragment> list = new ArrayList<>();
private GuideOneFragment guideOneFragment;
private GuideTwoFragment guideTwoFragment;
private GuideThreeFragment guideThreeFragment;
private GuideFragmentPagerAdapter adapter;
private Button btn_login;
private ImageView[] indicationPoint;//指示點控制元件
private boolean isFirst;//判斷是否是第一次啟動
private Handler handler;
private int[] points = {R.id.point1,R.id.point2,R.id.point3};
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
/**
* 設定窗體全屏getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN
* , WindowManager.LayoutParams.FLAG_FULLSCREEN);
*/
/***
* //設定窗體始終點亮
* getWindow().setFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON,
* WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); //設定窗體背景模糊
* getWindow().setFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND,
* WindowManager.LayoutParams.FLAG_BLUR_BEHIND);
*/
setContentView(R.layout.activity_main);
init();
initView();
initDots();
}
public void init() {
btn_login = (Button) findViewById(R.id.btn_login);
viewPager = (ViewPager) findViewById(R.id.viewPager);
btn_login.setOnClickListener(this);
indicationPoint = new ImageView[list.size()];
//例項化每個指示點控制元件
for (int i=0; i<list.size(); i++) {
indicationPoint[i] = (ImageView) findViewById(points[i]);
}
}
public void initView() {
// 設定viewpaper的頁數
viewPager.setOffscreenPageLimit(3);
//載入我們的視訊頁
if (guideOneFragment == null) {
guideOneFragment = new GuideOneFragment();
list.add(guideOneFragment);
}
if (guideTwoFragment == null) {
guideTwoFragment = new GuideTwoFragment();
list.add(guideTwoFragment);
}
if (guideThreeFragment == null) {
guideThreeFragment = new GuideThreeFragment();
list.add(guideThreeFragment);
}
adapter = new GuideFragmentPagerAdapter(getSupportFragmentManager(),
list);
viewPager.setAdapter(adapter);
}
//初始化dots方法中,找到了每一個dots的物件,相當於一個個find出來,但對於大型資料用兩個陣列的方式更好
private void initDots(){
indicationPoint = new ImageView[list.size()];
for(int i =0; i<list.size(); i++){
indicationPoint[i]= (ImageView) findViewById(points[i]);
}
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
if (position == 2) {
btn_login.setVisibility(View.VISIBLE);
} else {
btn_login.setVisibility(View.GONE);
}
for (int i = 0; i < indicationPoint.length; i++) {
if (position==i) {
/**被選中是紅點*/
indicationPoint[i].setImageResource(R.drawable.msg_update);
}else {
indicationPoint[i].setImageResource(R.drawable.person_item_point);
}
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.btn_login:
MainActivity.this.startActivity(new Intent(MainActivity.this, appActivity.class));
finish();
break;
default:
break;
}
}
}
這些就是 我們大概的程式碼了 ,大家先看一下 大概的邏輯在來看程式碼。在去拿demo去看,然後跟著自己的邏輯走一遍程式碼,有時間的可以自己敲一下,也可以直接套過去使用。
不懂的地方可以加我674939877也可以加群 166120952 有什麼不懂 有大神可以教你 。demo就在下面。http://download.csdn.net/detail/ningzhouxu/9618216