코틀린(kotlin) - 웹 페이지를 보여주는 웹뷰(WebView) 다루기

본 글은 스파르타 코딩 클럽의 "안드로이드 앱개발 기초반" 강의를 듣고 작성한 개발일지입니다.

이번 시간엔 앱 내에서 웹 페이지를 조회할 수 있게 해주는 뷰인 "웹뷰"를 사용해보도록 하겠습니다.

먼저 상세 액티비티(DetailActivity)의 레이아웃에 웹뷰를 넣기 위한 공간을 만들겠습니다.

// activity_detail.xml
<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="진정한 데이터 사이언티스트"
    // app:layout_constraintBottom_toBottomOf="parent" <- 삭제
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
    
// 웹뷰 공간 추가
<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/textView" />

이제 DetailActivity.kt 에서 웹 페이지를 띄우기 위한 작업을 시작합니다.

// DetailActivity.kt
class DetailActivity : AppCompatActivity() {
    private lateinit var textView: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_detail)

        var personalKey = intent.getStringExtra("PersonalKey")
        textView = findViewById(R.id.textView)
        textView.text = personalKey

        // 추가
        var myWebView: WebView = findViewById(R.id.webview)
        myWebView.webViewClient = WebViewClient()
        myWebView.loadUrl("https://www.google.com/")
    }
}

웹뷰를 제대로 표시하기 위해선 앱이 인터넷 사용 권한이 있어야 합니다. 인터넷 사용 권한을 추가하는 작업은 아래와 같습니다.

manifests 폴더를 찾으면 안에 AndroidManifest.xml 파일이 보일 겁니다.

// AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.personalitytype">

    <uses-permission android:name="android.permission.INTERNET" /> // 추가
    
    <application
        ...
        android:usesCleartextTraffic="true"> // 추가
        ...
    >

웹뷰 뿐만 아니라 앱에서 인터넷을 사용하기 위해선 AndroidManifest 파일에 반드시 권한을 추가해줘야 합니다.

---

단순히 구글 웹 페이지가 아니라 특정 성격 유형값을 데이터로 전달하면 구글에서 해당 값을 검색한 결과를 보여주는 작업을 진행해보겠습니다.

// DetailActivity.kt
var myWebView: WebView = findViewById(R.id.webview)
myWebView.webViewClient = WebViewClient()
// 추가
if(personalKey == "ISTJ") {
    myWebView.loadUrl("https://www.google.com/search?q=istj")
} else {
    myWebView.loadUrl("https://www.google.com/")
}

ISTJ 이외의 다른 성격 유형도 위와 같은 작업을 거치려면 else if 문을 계속 사용할 수밖에 없습니다.

// DetailActivity.kt
var myWebView: WebView = findViewById(R.id.webview)
myWebView.webViewClient = WebViewClient()
// 추가
if(personalKey == "ISTJ") {
    myWebView.loadUrl("https://www.google.com/search?q=istj")
} else if(personalKey == "ISFJ") {
    myWebView.loadUrl("https://www.google.com/search?q=isfj")
} else {
    myWebView.loadUrl("https://www.google.com/")
}

다음 시간엔 지금까지의 내용을 복습하고 곧 배포할 성격 유형 검사 앱을 만들어보겠습니다.