Webview를 사용해 웹페이지 로드하는 방법

 

방법 1

Webview를 사용해서 웹페이지를 로드하는 방법

url을 띄울 수 있는 여러가지 옵션 중 내가 만든 앱은 보이지 않는다

즉, Crome과 같은 다른 어플리케이션을 사용해야 하며 내가 만든 어플 위에 해당 어플이 켜지며 웹페이지가 오픈된다

 

 

방법2

Intent를 사용해서 webview에 웹페이지를 로드하는 방법

url을 띄울 수 있는 여러가지 옵션 중 내가 만든 앱도 보인다

즉, 내가 만든 앱 안에서 웹페이지가 오픈된다

 

 

방법 1 & 2 공통으로 세팅되어야 하는 것

 

Android 어플리케이션에서 인터넷 접속을 할 수 있도록 설정해주려면 Manifest.xml에 아래 코드가 기재되어 있어야 한다.

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

 

또한 두개 모두 공통적으로 아래의 xml을 사용해보자

 

activity_review.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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=".Review">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    <androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/address"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:hint="https://"/>

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/open"
        android:layout_width="70dp"
        android:layout_height="50dp"
        android:text="open"
        />


    </androidx.appcompat.widget.LinearLayoutCompat>

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

</androidx.appcompat.widget.LinearLayoutCompat>

 

 

 

---

 

방법 1

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

		// activity_review.xml의 EditText중 id가 address인 EditText 가져오기
        val address = findViewById<EditText>(R.id.address)
        
        // activity_review.xml의 Button중 id가 open인 Button 가져오기
        val open = findViewById<Button>(R.id.open)
        
      	// activity_review.xml의 WebView 중 id가 webView인 WebView 가져오기
        val webView = findViewById<WebView>(R.id.webView)

        var url = ""
        
        // naver.com만 EditText에 입력해도 검색이 가능하도록 설정하기 위함
        var prefixedUrl = "https://"

		// EditText인 address에 적힌 글자를 가져오기 위함
        // doAfterTextChanged는 글자가 모두 적혔을 때를 말함
        address.doAfterTextChanged { url = prefixedUrl + address.text.toString() }

        open.setOnClickListener {
            webView.loadUrl(url)
            // Log.d("loggg",url )
        }

    }
}

 

 

방법 1의 결과물

 

나의 앱 'KotlinFunction'은 웹페이지를 열 수 있는 앱 목록에 보이지 않는 상태. 이렇게되면 크롬앱으로 열 수 밖에 없다

 

방법 2

sholudOverrideUrlLoading 매서드를 사용해서 false로 설정해줌에 따라 웹페이지를 앱 내에서 오픈할 수 있도록 설정

 

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

        val address = findViewById<EditText>(R.id.address)
        val open = findViewById<Button>(R.id.open)
        val webView = findViewById<WebView>(R.id.webView)
        
        var url = ""
        var prefixedUrl = "https://"

        address.doAfterTextChanged { url = prefixedUrl + address.text.toString() }

        open.setOnClickListener {
        	// intent를 사용하여 액티비티 스타트
            val intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
            startActivity(intent)
        }

        // 내 앱에서 웹페이지를 켜줄 수 있게 false로 설정
        webView.webViewClient = object : WebViewClient(){
            override fun shouldOverrideUrlLoading(
                view: WebView?,
                request: WebResourceRequest?
            ): Boolean {
                return false
            }
        }

        try{
            webView.loadUrl(intent.data!!.toString())
        }catch (exception: Exception){

        }

    }
}

 

또한 Manifest.xml에 아래와 같은 intent-filter태그와 data 태그가 필요하다

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

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

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Kotlin"
        tools:targetApi="31">
      
        <activity
            android:name=".Review"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.BROWSABLE" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.LAUNCHER" />

                <data
                    android:host="*"
                    android:scheme="http" />

            </intent-filter>
        </activity>
    </application>

</manifest>

 

 

방법 2의 결과물

 

이제 나의 앱  'KotlinFunction'어플리케이션을 설정할 수 있도록 목록에 보인다.

KotlinFunction을 클릭하였을 때의 화면. 방법1과는 다르게 내 어플리케이션 안에서 naver페이지가 보임