您的位置:首页 > 其它

模仿手机QQ以视频流背景的登录界面

2017-08-01 21:57 676 查看


1. 思路:很简单,VideoView播放视频。

布局方式如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/activity_video_view_background"
xmlns: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"
tools:context="com.example.aaron.videoviewbackground.VideoViewBackground">

<com.example.aaron.videoviewbackground.CommonVideoView
android:id="@+id/videoView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:layout_marginTop="50dp"
android:text="手机QQ"
android:textSize="50dp"
android:textColor="@color/color1"
android:gravity="center"/>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="40dp">

<TextView
android:layout_width="130dp"
android:layout_height="30dp"
android:layout_alignParentLeft="true"
android:gravity="center"
android:textSize="20dp"
android:textColor="@color/color1"
android:text="@string/login"
android:layout_marginLeft="30dp"
android:background="@color/color2"/>

<TextView
android:layout_width="130dp"
android:layout_height="30dp"
android:gravity="center"
android:layout_alignParentRight="true"
android:layout_marginRight="30dp"
android:textSize="20dp"
android:text="@string/register"
android:textColor="@color/color1"
android:background="@color/color2"/>

</RelativeLayout>
</RelativeLayout>


2. 这里自定义了一个CommonVideoView,适合一些小屏幕手机,需要测量下它的宽高。

/**
* Created by Aaron on 2017/7/23.
*/
public class CommonVideoView extends VideoView
{
// region constructor

/**
* the constructor
*/
public CommonVideoView(Context context)
{
super(context);
}

public CommonVideoView(Context context, AttributeSet attrs)
{
super(context, attrs);
}

public CommonVideoView(Context context, AttributeSet attrs, int defStyleAttr)
{
super(context, attrs, defStyleAttr);
}

// endregion

// region public

@Override
public void setOnPreparedListener(MediaPlayer.OnPreparedListener l)
{
super.setOnPreparedListener(l);
}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event)
{
return super.onKeyDown(keyCode, event);
}

// endregion

// region protected

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
int width = getDefaultSize(0, widthMeasureSpec);
int height = getDefaultSize(0, heightMeasureSpec);
setMeasuredDimension(width, height);
}
// endregion
}


3.核心代码也很简单,这里注意下设置全屏模式,还有加入视频播放权限。

public class VideoViewBackground extends AppCompatActivity
{
private CommonVideoView mVideoView;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_video_view_background);
mVideoView = (CommonVideoView) this.findViewById(R.id.videoView);

playVideoView();
}

private void playVideoView()
{
mVideoView.setVideoURI(Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.video));
//播放
mVideoView.start();
//循环播放
mVideoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
@Override
public void onCompletion(MediaPlayer mediaPlayer) {
mVideoView.start();
}
});
}

//返回重启加载
@Override
protected void onRestart() {
playVideoView();
super.onRestart();
}

//防止锁屏或者切出的时候,音乐在播放
@Override
protected void onStop() {
mVideoView.stopPlayback();
super.onStop();
}
}


在资源文件下放入要播放的视频文件Video,这里的Video我是选用手机QQ里面的(反编译得到的,直接可以拿到),OK,大致实现代码就这样,很简单。

可以看下如上效果图:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息