[Kotlin][Android] WebView를 사용해서 웹 페이지 띄우기

이번 포스팅에선 코틀린으로 웹뷰를 사용해 웹 페이지를 띄우는 예제를 다뤄 보겠습니다.

띄울 웹 페이지는 네이버 메인 페이지입니다.

 

예제에 사용된 코드는 스틱코드에서 즐겨찾기하면 곧바로 사용할 수 있으니 참고해 주세요

stickode.com/detail.html?no=1967

스틱코드

 

 

먼저 xml 코드입니다. 앱 화면 전체에 네이버 메인 페이지를 띄울 것이기 때문에 가로, 세로 모두 match_parent를 줬고 그 외에는 웹뷰만 있는 간단한 화면입니다.

<androidx.constraintlayout.widget.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"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

id는 꼭 입력해야 합니다. id가 없으면 코틀린 파일에서 어떤 웹뷰를 참조해야 할지 알 수 없기 때문에 id는 꼭 입력해야 합니다.

 

다음은 res/values/styles.xml에 아래 한 줄을 추가해줍니다. 위치는 어디든 상관없습니다.

<item name="windowNoTitle">true</item>

보통 앱을 빌드하게 되면 프로젝트 이름이 액션바 왼쪽에 보이게 됩니다.

이 때 위의 문장을 styles.xml에 추가하면 이 액션바를 없애줘서 웹뷰를 통해 웹 페이지를 볼 때 조금이라도 더 넓게 볼 수 있다는 장점이 있습니다.

이 포스팅에선 저 값을 true로 설정한 다음 진행하지만 상황이나 취향에 따라 저 문구를 넣지 않아도 될 듯합니다.

 

그리고 매니페스트에 인터넷 권한을 추가해줍니다. 인터넷 권한이 없으면 웹뷰를 통해 웹 페이지를 볼 수 없으니 꼭 추가해줘야 합니다.

<uses-permission android:name="android.permission.INTERNET" />

 

또한 <application> 태그 내부에 이 속성을 추가해줍니다.

android:usesCleartextTraffic="true"

 

이 문장이 없다면 웹 페이지를 띄울 수가 없습니다.

안드로이드 9.0 이상부터 https가 기본값으로 지정됐기 때문에 위 문구를 추가하지 않으면 웹 페이지가 열리지 않습니다.

 

마지막으로 코틀린 파일을 코딩해줍니다.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebViewClient
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity()
{
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    override fun onBackPressed() {
        if (webview.canGoBack())
        {
            webview.goBack()
        }
        else
        {
            finish()
        }
    }

}

 

뒤로가기 버튼을 눌렀을 때 이전에 본 웹 페이지를 띄우기 위해서 onBackPressed()를 바꿨습니다.

이제 여기서 스틱코드에 있는 코드를 불러와 써보겠습니다.

 

 

상단의 주소를 즐겨찾기 설정했다면 곧바로 사용할 수 있습니다.

단 웹 페이지 주소는 직접 입력해야 합니다. 완성된 형태는 아래와 같습니다.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebViewClient
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity()
{
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        webview.apply {
            webViewClient = WebViewClient()
            settings.javaScriptEnabled = true
        }

        webview.loadUrl("https://www.naver.co.kr/")
    }

    override fun onBackPressed() {
        if (webview.canGoBack())
        {
            webview.goBack()
        }
        else
        {
            finish()
        }
    }

}

이제 앱을 빌드해 보겠습니다. 앱을 빌드하면 곧바로 모바일 버전의 네이버 메인 페이지가 나오는 걸 볼 수 있습니다.

 

 

액션바도 나오지 않아서 조금이라도 더 쾌적하게 웹뷰를 볼 수 있습니다.