소개

DreamHanks의 MOON입니다.

지난번에는 간단한 로그인 화면을 만들고 유효성 검사를 했습니다.
7. 【Android/Kotlin】 밸리데이션 체크

이번에는 WebView 라는 View에 대해 설명하겠습니다.

WebView란?

웹 응용 프로그램(또는 웹 페이지)을 클라이언트 응용 프로그램의 일부로 제공하는 경우 WebView를 사용할 수 있습니다.
이 의미는 쉽게 앱의 화면에 웹 페이지를 표시할 수 있습니다.

WebView 추가

1. 권한 설정

웹뷰에서 웹페이지를 보려면 먼저 해당 앱의 인터넷 액세스 권한을 설정해야 합니다.
・AndroidManifest 파일 수정

AndroidManifest.xml

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".SpinnerActivity"></activity>
        <activity android:name=".ListViewActivity">
        </activity>
        <activity android:name=".WebViewActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

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

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

AndroidManifest 파일에 위의 코드 추가
이 코드는 인터넷에 액세스하기 위한 권한 설정

2. 활동 만들기

WebViewActivity.kt

package com.example.practiceapplication

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Button
import android.widget.EditText
import android.widget.TextView

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

        val url_et = findViewById<EditText>(R.id.url_et)              //URLのEditText（入力エリア）
        val search_btn = findViewById<Button>(R.id.search_btn)        //検索ボタン
        val webView = findViewById<WebView>(R.id.test_wv)             //ウェブビュー

        //検索ボタンのクリックイベントを設定
        search_btn.setOnClickListener {
            //ウェブページがクロム（または、その他の検索アプリ）に開かなくてアプリのwebviewに開かるような設定
            webView.webViewClient = object : WebViewClient(){}
            //webviewに入力された値に対するウェブページを表示
            webView.loadUrl(url_et.text.toString())
        }
    }
}

3. xml 작성

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".WebViewActivity"
    android:gravity="center">

    <WebView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:id="@+id/test_wv"
        android:layout_weight="1" />

    <EditText
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:id="@+id/url_et"
        android:inputType="text"
        android:hint="URLを入力してください"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/search_btn"
        android:text="検索"/>

</LinearLayout>

앱 시작

· URL을 입력하기 전에


· URL을 입력하고 검색 버튼을 클릭하면

끝에

이번에는 WebView 라는 View에 대해 설명했습니다.

다음은 동적으로 View를 추가하는 방법을 설명합니다.
9. 【Android/Kotlin】동적으로 View 추가

최신 내용은 아래 링크(DreamHanks의 블로그)에서 확인할 수 있습니다.
DreamHanks 블로그(Android/Kotlin 앱 개발)