[kotlin/안드로이드] 코틀린 웹뷰 완전 기본 세팅 네이버띄우기 연습

처음 코틀린으로 개발을 맡은것도 하이브리드앱이었다 

기본 껍데기는 팀장님이 만들어주신거 주셨고 아직까지도 복붙 개쩔었다.

그냥 원래 있던거 갖다 쓰니까 잘되던데??????????????????

 

이런식으로 시간이 지나고 물경력쌓이고여.... 오류나도 원인을 모르고여..

차근 차근 공부를 해봅시당. 

 

 웹뷰 ? 네이티브? 

알기쉽게 웹뷰는 웹사이트를 모바일앱으로 감싸서 띄워주는거규 네이티브는 내가 직접 만든 화면을 띄워주는고 

웹뷰인경우엔 수정이 빠르고 웹에서 수정하면 따로 콘솔업데이트 안해도 되는 장점이 있지만 속도가 느림 

네이티브는 수정사항이 있으면 그때그때 심사받고 업데이트해야해서 쵸큼 기찬 대신 속도는 빠름! 

 

 

---

 

1. 퍼미션 추가하기

 

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

<application
    android:usesCleartextTraffic="true"
   >

 

 

 

AndroidManifest.xml 파일에 인터넷 허용 권한을 설정해야 함 

왜냐고? 웹사이트를 띄워야하니까! 인터넷 허용!

 

그리고 어플리케이션 해당하는 부분에 usesCleartextTraffic = "true" 로 설정해야함 

대부분 웹개발을 할때 https 가 아닌 http 로 개발서버를 두기 때문에 이러한 비보안 페이지를 설정해야 개발 가능! 

 

 

 

 

2. 액티비티 생성 

WebviewActivity.kt 파일과 activity_webview.xml 을 만들어서 둘이 연결시켜줄 예정임

기본적으로 사용했던 레이아웃 불러오는 버전이랑 뷰 바인딩 두가지 버전으로 연결해보기

 

 

 

 

 

2-1 기본 레이아웃으로 불러오기

 

 

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

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true" />

</RelativeLayout>

 

 

->activity_webview.xml  

레이아웃은 Linearlayout 도 되고 constraintlayout 괜찮고 상관없음

기본 생성된 레이아웃에 웹뷰라는 이름을 붙여주고 아이디를 부여

아이디는 웹뷰가 아니어도 상관없어요! 쪼대로 아이디를 부여해주시와요 

 

 

 

 

 

 

import android.webkit.WebViewClient

    class MainActivity: AppCompatActivity() {
    	override fun onCreate(savedInstanceState: Bundle?) {

            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
             
             web_view.apply {
              webViewClient = WebViewClient()		//웹뷰설정
              settings.javaScriptEnabled = true 	//자바스크립트 허용
      	 		 }
             web_view.loadUrl(str)			// str 은 로딩할 url
        	}
        }

 

 

WebviewActivity.kt 

저 str 에는 띄우고싶은 웹사이트를 띄워주면 끝! 

ex ) web_view.loadUrl("https://m.naver.com")   ----> 이러면 네이버 화면이 쨍 하구 뜨게띠 

str은 유동적으로 인텐트로 값을 넘겨 받을 수도 있고여 따로 로컬 변수에 저장해서 쓸 수도 있고여 !

 

 

---

2-2 뷰바인딩

 

   android {
        viewBinding {
            enabled true
        }
    }

 

-> build.gradle (app) 

 뷰바인딩을 사용하기 위해선 앱단 빌드그래들에 뷰바인딩 하꼬얌 라고 선언해줘야 됨

 

 

 

 

 

 

 

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

->activity_webview.xml  

이런식으로 다지우고 전체를 웹뷰라고 표현해도되고, 위와 동일하게 레이아웃으로 감싼 뒤 아이디를 지정해도 된당. 

편한 대로 쓰 세 욤 

 

 

그리고 엄청 헷갈렸던 부분..

뷰바인딩은 레이아웃을 만들었다면 바인딩을 자동으로 만들어준다

저게 뭐..파스칼...카멜 ..머시기 변환 방식이라는데.. 뭐 아무튼 그렇다고 한다 

자동으로 변환되고 자동으로 생깁니다용 

 

 

자동변환공식 : 레이아웃파일명(첫 글자와 언더바 다음영문을 대문자로 변환) + Binding
예)
activity_main.xml = ActivityMainBinding
activity_webview.xml =ActivityWebviewBinding

webview_page.xml = WebviewPageBinding

 

 

 

 

 

이런식으로 자동으로 만들어진당 어디서 만드는게아님! 레이아웃 파일명에 따라서 생성이 되니 헷갈리지말긔 찡 끗 

 

import android.webkit.WebView
import android.webkit.WebViewClient

//WebviewActivity.kt 
class MainActivity : AppCompatActivity() {

    private lateinit var binding: WebviewPageBinding
    //Webview main page open
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = WebviewPageBinding.inflate(layoutInflater)
        setContentView(binding.root)

	binding.webVeiw.webChromeClient = WebViewClient()	//웹뷰 설정
        binding.webVeiw.settings.javaScriptEnabled = true 	//자바스크립트 허용
        binding.webVeiw.loadUrl(str)	//str = 띄울 웹 주소 
  	}
  }

-> WebviewActivity.kt  

setContentView 에서 루트를 최상위 바인딩으로 해주어찌

그리고 따로 아이디를 찾을 필요없이 bining. 하고 나면 레이아웃에 선언했던 뷰들의 정보가 나온당

분명 레이아웃에는 web_view 라고 선언해놨는데 바인딩하면서 쟤도 자동변환이 된당 

 

 

 

 

 

1)  binding.webVeiw 처럼 공통으로 중복되게 사용하는 부분들은 따로 변수를 만들어서 사용하기 

2) 이거 그대로 복붙했는데 안되는 경우 임포트가 덜됐을 수 있으니 임포트 확인해주시길!  

3) 앱이 안뜨는데여?? 하면 매니페스트 런쳐 설정하셨는지 확인하긔!!!! 

 

 

 

 

아주아주 기본적으로 설정해본 웹뷰 페이지 띄우기 

진짜 너무 기본이지만 웹과 앱의 소통시에 서로 허용해줘야하고 맞춰야하는 부분들이많다

공통적으로 띄워줘야 하는 부분들은 전역으로 세팅해두고 그때그때 가져다 쓰는게 편하긴한데..

복붙만하다가 뭘 만져보려고하니까 개헷갈린다 

개발은 내길이아님 ㅋ

 

 

 

나도 남의 개발블로그보면서 아 구냥.. 통으로 복붙해서 올려주지 왜케 짤라서 올리지? 어따 복붙하지? 했는데 

그렇게 올릴 수 밖에없넹...헤헤헤헤 공부할게연