[Android, Kotlin] WebView

1. 기능 구현

앱에 Webpage를 View 형태로 배치를 해서 보여주도록 해보자.

 
 

2. Android Studio에서 기본 프로젝트(with empty activity) 생성하자!

생성시 'Empty Activity'로 기본 생성

 
 

3. ViewBinding 사용을 위한 build.gradle 설정

  android {
          // 뷰 바인딩 옵션 활성화
          viewBinding {
              enabled = true
          }
      }

 
 

4. AndroidManifest.xml

1. 인터넷 사용 Permission 허용 구문

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

2. 안드로이드9(APL Lv 28) 부터 강화된 네트워크 보안정책 해결을 위해

   android:usesCleartextTraffic="true"
   이와 관련된 보다 자세한 내용은 <안드로이드 http 프로토콜 접속 시 예외발생 조치> 참고

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.webview">

    <!-- 인터넷 사용을 위한 Permission 허용-->
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:usesCleartextTraffic="true"
        android:theme="@style/Theme.WebView">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 
 

5. activity_main.xml

앱 내에서 Webpage를 보여줄 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"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="409dp"
        android:layout_height="729dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

 
 

6. MainActivity.kt

1. javaScrip 허용 : webpage 에 쓰인 javaScrip에 대해서 문제없도록 허용하도록 하자.
2. webViewClient, webChromeClient 구문

   이 구문을 설정하지 않으면 URL을 load 했을때 default browser 로 새창이 뜨게 된다.
   앱 내의 WebView 영역에 webpage가 load 되기 위해서 필요하다.

3. loadUrl : 해당 webpage를 가져온다.

• onBackPressed 구현

  default 로 back 을 누르면 앱이 종료되므로, webpage 이동 중, 이전 page가 있다면 goBack 없으면 종료

class MainActivity : AppCompatActivity() {

    private var mBinding: ActivityMainBinding? = null
    private val binding get() = mBinding!!

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

        mBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // 자바 스크립트 허용
        binding.webView.settings.javaScriptEnabled = true

        /* 웹뷰에서 새 창이 뜨지 않도록 방지하는 구문 */
        binding.webView.webViewClient = WebViewClient()
        binding.webView.webChromeClient = WebChromeClient()

        /* 링크 주소를 로드 */
        binding.webView.loadUrl("https://www.naver.com")

    }

    override fun onBackPressed() {
        if(binding.webView.canGoBack()){
            // 웹싸이트에서 뒤로 갈 페이지가 존재 할 경우
            binding.webView.goBack()
        }
        else {
            super.onBackPressed()
        }
    }
}

 
 

7. 실행결과

앱 내부 View에서 정상적으로 Webpage가 보여짐. 끝!

 
 

8. Reference

유튜버 홍드로이드님의 안드로이드 코틀린 앱 만들기 #8