[Kotlin/Android] HTML 올리기

webview를 이용해서 HTML 파일을 올리려고 한다.
애플리케이션 내에서 마치 웹처럼 HTML 화면을 볼 수 있도록 하는 기능이다. 

1. xml에 webview 배치

<LinearLayout 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"
    android:orientation="horizontal"
    tools:context=".ui.menu06.GuidelineFragment">


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

이런식으로 xml에 webview하나만 배치하였다.
화면안에 여백없이 html 꽉차서 나오게 하도록 할 예정이라. 

 

2. assets 폴더 생성 후 html 파일 업로드

(1) 우선 android -> project로 변경

(2) main에서 new - Folder - assets 선택 하여 assets 폴더 생성

(3) assets 폴더에 html 파일 복붙하기
나 같은 경우엔 html 파일이 2개가 필요해서 assets 안에 하위폴더를 2개로 나누어서 복붙하였다.
이때 원래 assets의 폴더랑 구조, 폴더명, 파일명 등등 다 동일하여야함.
이런식으로 넣어준다

 

3. 메인코드 작성

loadhtml() 메서드를 생성하여 webview 컴포넌트를 바인딩하고 아래와 같이 코드 적용하였다.
알맞은 assets 파일 경로를 loadUrl에 넣어주어야한다. 

package com.psg.androidspcs.ui.menu06

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.webkit.WebChromeClient
import android.webkit.WebView
import android.webkit.WebViewClient
import com.psg.androidspcs.R
import com.psg.androidspcs.databinding.FragmentGuidelineBinding

class GuidelineFragment : Fragment() {

    private var _binding : FragmentGuidelineBinding? = null

    private val binding get() = _binding!!

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment

        _binding = FragmentGuidelineBinding.inflate(inflater, container, false)
        val root : View = binding.root

        return root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        loadHtml()
    }

    private fun loadHtml() {
        val webView = binding.webView

        // html 문서 호출
        webView.webViewClient = WebViewClient()
        webView.settings.javaScriptEnabled = true
        webView.webChromeClient = WebChromeClient()
        webView.loadUrl("file:///android_asset/guide_line/guideline_v1.3.html")
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}​

 

4. 결과 확인

이런식으로 잘 뜨는 것을 확인할 수 있다.

 

쉽죠? 
그럼 이만 수요팅 -!