WebView 사용하기

---

WebView란?

Kotlin으로 앱을 개발할 때 웹 콘텐츠를 앱 내에서 표시하기 위한 컴포넌트다. 주로 외부 웹 페이지를 표시하거나 앱 내에서 HTML, CSS 및 JavaScript로 잓

사용법

1. WebView를 보여줄 새로운 액티비티와 프래그먼트 생성

1.res/layout 하위에 ConstraintLayout을 루트 레이아웃으로 가진 레이아웃 파일 생성

2.생성한 레이아웃 파일에서 편집기 창 오른쪽 위의 디자인 버튼을 클릭해 디자인 뷰로 전환한 후 레이아웃 편집기에서 팔레트의 Widgets에 있는 WebView를 끌어서 ConstraintLayout에 넣는다.

3.속성 창에서 WebView의 네 방향 제약을 추가한다.

	<?xml version="1.0" encoding="utf-8"?>
	<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">
	
	    <WebView
	        android:id="@+id/web_view"
	        android:layout_width="0dp"
	        android:layout_height="0dp"
	        app:layout_constraintBottom_toBottomOf="parent"
	        app:layout_constraintEnd_toEndOf="parent"
	        app:layout_constraintStart_toStartOf="parent"
	        app:layout_constraintTop_toTopOf="parent" />
	</androidx.constraintlayout.widget.ConstraintLayout>

4.패키지 마우스 우클릭 후 Kotlin class/File 생성

	package com.crystal.android.photogallery
	
	import android.net.Uri
	import android.os.Bundle
	import android.view.LayoutInflater
	import android.view.View
	import android.view.ViewGroup
	import android.webkit.WebView
	
	private const val ARG_URI = "photo_page_url"
	
	class PhotoPageFragment: VisibleFragment() {
	
	    private lateinit var uri: Uri
	    private lateinit var webView: WebView
	
	    override fun onCreate(savedInstanceState: Bundle?) {
	        super.onCreate(savedInstanceState)
	
	        uri  = arguments?.getParcelable(ARG_URI) ?: Uri.EMPTY
	    }
	
	    override fun onCreateView(
	        inflater: LayoutInflater,
	        container: ViewGroup?,
	        savedInstanceState: Bundle?
	    ): View? {
	        val view = inflater.inflate(R.layout.fragment_photo_page, container, false)
	
	        webView = view.findViewById(R.id.web_view)
	
	        return view
	    }
	
	    companion object {
	        fun newInstance(uri:Uri): PhotoGalleryFragment {
	            return PhotoGalleryFragment().apply {
	                arguments = Bundle().apply {
	                    putParcelable(ARG_URI, uri)
	                }
	            }
	
	        }
	    }
	}

2. 생성한 프래그먼트를 호스팅하는 액티비티 생성

1.생선한 프래그먼트를 호스팅하는 Activity를 생성한다.

New > Activity > Empty Activity

	package com.crystal.android.photogallery
	
	import android.content.Context
	import android.content.Intent
	import android.net.Uri
	import androidx.appcompat.app.AppCompatActivity
	import android.os.Bundle
	
	class PhotoPageActivity : AppCompatActivity() {
	    override fun onCreate(savedInstanceState: Bundle?) {
	        super.onCreate(savedInstanceState)
	        setContentView(R.layout.activity_photo_page)
	        
	        val fm = supportFragmentManager
	        val currentFragment = fm.findFragmentById(R.id.fragment_container)
	        
	        if (currentFragment == null) {
	            val fragment = PhotoPageFragment.newInstance(intent.data!!)
	            fm.beginTransaction()
	                .add(R.id.fragment_container, fragment)
	                .commit()
	        }
	    }
	    
	    companion object {
	        fun newIntent(context: Context, photoPageUri: Uri): Intent {
	            return Intent(context, PhotoPageActivity::class.java).apply { 
	                data = photoPageUri
	            }
	        }
	    }
	}

	<?xml version="1.0" encoding="utf-8"?>
	<FrameLayout
	    xmlns:android="http://schemas.android.com/apk/res/android"
	    android:id="@+id/fragment_container"
	    xmlns:app="http://schemas.android.com/apk/res-auto"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent" />

2.위에 생성한 Activity 시작시키기

	override fun onClick(view: View?) {
	            val intent = PhotoPageActivity.newIntent(requireContext(), galleryItem.photoPageUri)
	            startActivity(intent)
	        }

3. WebView에 사진 페이지 띄우기

1.사진을 로드하기 위한 URL을 알려주고 자바스크립트를 사용할 수 있게 해준다.

package com.crystal.android.photogallery

import android.net.Uri
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.webkit.WebView
import android.webkit.WebViewClient

private const val ARG_URI = "photo_page_url"

class PhotoPageFragment: VisibleFragment() {

    private lateinit var uri: Uri
    private lateinit var webView: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        uri  = arguments?.getParcelable(ARG_URI) ?: Uri.EMPTY
    }

    **@Suppress("SetJavaScriptEnabled")**
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_photo_page, container, false)

        webView = view.findViewById(R.id.web_view)
        **webView.settings.javaScriptEnabled = true
        webView.webViewClient = WebViewClient()
        webView.loadUrl(uri.toString())**

        return view
    }

    companion object {
        fun newInstance(uri:Uri): PhotoGalleryFragment {
            return PhotoGalleryFragment().apply {
                arguments = Bundle().apply {
                    putParcelable(ARG_URI, uri)
                }
            }

        }
    }
}

이렇게 하면 모든 설정이 완료된다.