記得前陣子高考的那段時間，發現QQ的登入背景是會動的，看起來逼格很高。而今天也來帶領大家去實現這樣一個逼格很高的 動態登入背景。
之前網上看到有一些也實現了這樣的功能，但基本只是給了個按鈕表示一下，然後自己寫的時候發現視訊素材很難找，為了達到效果，光找一個合適的素材就花了很長時間。(沒辦法，技術不行UI做好點，哈哈)這裡自己重新實現了並完成了登入頁面的繪製。後面會上傳原始碼。

老規矩效果圖先:

是不是感覺逼格很高，下來來看看實現：

CustomVideoView.java

public class CustomVideoView extends VideoView
 
 {


    public CustomVideoView(Context context) {
        super(context);
    }

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

    public CustomVideoView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
 

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //我們重新計算高度
        int width = getDefaultSize(0, widthMeasureSpec);
        int height = getDefaultSize(0, heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

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

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


}

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private CustomVideoView videoview;
    private Button          btn_enter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       // requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
    }



    /**
     * 初始化
     */
    private void initView() {
        btn_enter = (Button) findViewById(R.id.btn_enter);
        btn_enter.setOnClickListener(this);

        videoview = (CustomVideoView) findViewById(R.id.videoview);
        videoview.setVideoURI(Uri.parse("android.resource://"+getPackageName()+"/"+R.raw.sport));

        //播放
        videoview.start();
        //迴圈播放
        videoview.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
            @Override
            public void onCompletion(MediaPlayer mediaPlayer) {
                videoview.start();
            }
        });

    }



    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.btn_enter:
                Toast.makeText(this,"登入成功了",Toast.LENGTH_SHORT).show();
                break;
        }
    }

//
//    //返回重啟載入
//    @Override
//    protected void onRestart() {
//        super.onRestart();
//        initView();
//    }
//
//    //防止鎖屏或者切出的時候，音樂在播放
//    @Override
//    protected void onStop() {
//        super.onStop();
//        videoview.stopPlayback();
//    }



}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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.video.view.MainActivity">


    <com.video.view.CustomVideoView
        android:id="@+id/videoview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="top"
        android:orientation="vertical">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="38dp"
            android:layout_marginRight="38dp"
            android:layout_marginTop="70dp"
            android:orientation="vertical">


            <EditText
                android:id="@+id/et_phone"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_gravity="center_vertical"
                android:background="@null"
                android:digits="0123456789"
                android:gravity="center_vertical"
                android:hint="請輸入手機號"
                android:inputType="number"
                android:maxLength="11"
                android:maxLines="1"
                android:paddingLeft="5dp"
                android:textColor="@android:color/white"
                android:textColorHint="@android:color/white"
                android:textSize="18sp"/>


            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_alignParentBottom="true"
                android:background="@color/horizontal_line"/>

            <EditText
                android:id="@+id/et_pwd"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_marginTop="20dp"
                android:background="@null"
                android:gravity="center_vertical"
                android:hint="請輸入密碼"
                android:inputType="textPassword"
                android:maxLength="11"
                android:maxLines="1"
                android:paddingLeft="5dp"
                android:textColor="@android:color/white"
                android:textColorHint="@android:color/white"
                android:textSize="18sp"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_alignParentBottom="true"
                android:background="@color/horizontal_line"/>

        </LinearLayout>


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="23dp"
            android:layout_marginRight="23dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_register"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="15dp"
                android:text="快速註冊"
                android:textColor="@color/greens"/>

            <TextView
                android:id="@+id/tv_find_pwd"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:gravity="right"
                android:padding="15dp"
                android:text="忘記密碼?"
                android:textColor="@color/greens"/>

        </RelativeLayout>


        <Button
            android:id="@+id/btn_enter"
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:layout_marginTop="20dp"
            android:background="@drawable/shape_green_content_normal"
            android:text="登入"
            android:textColor="@color/white"
            android:textSize="18dp"/>

    </LinearLayout>



    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:paddingBottom="30dp"
        android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="90dp"
            android:gravity="center"
            android:text="使用第三方登入"
            android:textColor="@color/white"
            android:textSize="16dp"
            android:visibility="visible"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal">


            <ImageView
                android:id="@+id/iv_wechat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:padding="10dp"
                android:src="@drawable/qq_sel"/>

            <ImageView
                android:id="@+id/iv_qq"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="10dp"
                android:padding="10dp"
                android:src="@drawable/wechat_sel"/>


        </LinearLayout>

    </LinearLayout>


</FrameLayout>

以上就是基本程式碼，不是很難，所以就不做過多解釋，直接看程式碼就好。

最後奉上

原始碼