WebView 기반 안드로이드 네이티브 앱 개발4(스플래쉬 화면)

---

WebView기반의 네이티브 앱 개발 할 때 WebView를 처음 띄울때 이미지가 많거나 리소스 용량이 크면 WebView에 로딩이 늦게 되는 경우가 있습니다. 이럴때 WebView가 모두 로딩 되기 전에 로딩 화면을 보여 줄 수 있습니다. 이런 로딩 화면을 스플래쉬(Splash) 화면 이라고 합니다. 스플래쉬 화면을 만드는 방법은 다양 합니다. 하지만 우리는 WebView에 로딩이 끝나는 시점을 알아야 WebView를 띄울수 있습니다.

 

1. 스플래쉬 화면을 출력 시킵니다.

2. WebView의 로딩이 완료 됩니다.

3. 스플래쉬 화면이 사라집니다.

4. 로딩이 완료된 WebView가 화면에 보입니다.

위와 같은 순서로 진행 됩니다.

 

 

1. 스플래쉬 화면을 출력 시킵니다.

스플래쉬 화면을 출력 시키기 위해서는 스플래쉬 화면을 디자인 해주어야 겠죠?

스플래쉬 액티비티를 새로 만들어 줄 수도 있지만, WebView의 로딩시점을 알기 위해서는 WebView가 떠있는 액티비티에 같이 만들어 주는것이 편합니다. 따라서 WebView를 출력 시켜주는 액티비티를 MainActivity 라고 했을때 activity_main xml 파일에 RelativeLayout 을 추가시켜주고 저는 ImageView 하나를 넣어 주겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </WebView>

    <RelativeLayout
        android:id="@+id/splashView"
        android:animateLayoutChanges="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            app:srcCompat="@mipmap/ic_launcher_round" />

    </RelativeLayout>

</android.support.constraint.ConstraintLayout>

RelativeLayout은 WebView와 같은 레벨의 넣어 주세요.

android:layout_width="match_parent"

android:layout_height="match_parent"

=> RelativeLayout을 전체 화면으로 만들어 WebView를 가려주는 역할을 합니다.

 

android:animateLayoutChanges="true"

=> RelativeLayout이 사라질때 자연스럽게 사라지게 하기 위한 애니메이션이 적용되도록 하는 역할 입니다.

 

android:layout_centerInParent="true"

=> 그리고 ImageView를 가운데로 오게 하기 위해서 ImageView의 위 속성을 추가해 줍니다.  

 

 

2. WebView의 로딩이 완료 됩니다.

private RelativeLayout splashView;
....
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ...
        splashView = (RelativeLayout) findViewById(R.id.splashView);
    	...
    }

MainActivity의 위와 같이 splashView 객체를 생성해 줍니다.

 

 

3. 스플래쉬 화면이 사라집니다.

private class MyWebViewClient extends WebViewClient {

        @Override
        public void onPageFinished(WebView view, String url) {
            splashView.animate()
                    //.translationY(view.getHeight())
                    .alpha(0.0f)
                    .setDuration(600)
                    .setListener(new AnimatorListenerAdapter() {
                        @Override
                        public void onAnimationEnd(Animator animation) {
                            super.onAnimationEnd(animation);
                            splashView.setVisibility(View.GONE);
                        }
                    });
            super.onPageFinished(view, url);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
           ....
        }
    }

우리는 이전에 WebViewClient를 상속해서 MyWebViewClient 객체를 생성 한 적이 있습니다. WebViewClient는 WebView의 로딩이 끝나면 onPageFinished() 메소드를 호출 합니다. 따라서 우리는 이 메소드 안에서 splashView를 자연스럽게 사라지도록 만들어 주어야 합니다. 

- alpah() : view의 투명도를 줄수 있습니다. 0.0f를 주어 splashView가 점점 투명해지다가 사라지도록 만듭니다.

- setDuration() : view의 애니메이션이 적용되는 속도를 정의 합니다. 1000이 1초 입니다. 600이면 0.6초에 해당합니다.

- setListener()::onAnimationEnd() : 는 view의 애니메이션이 모드 끝이나고 수행할 행동을 정의 합니다. splashView.setVisibility(View.GONE)을 주어 스플래쉬 화면을 없애 줍니다.

 

 

4. 로딩이 완료된 WebView가 화면에 보입니다.

위와 같이 했다면 splashView가 사라지면서 숨겨져 있던 WebView가 자연스럽게 보이게 될것 입니다.

 

 

5. WebView 기반의 파일 업로드 하기

https://coding-food-court.tistory.com/37

WebView 기반 안드로이드 네이티브 앱 개발5 (file upload)