Xamarin WebView

Xamarin WebView 예제이다. 

 https://github.com/xamarin/xamarin-forms-samples/tree/main/WorkingWithWebview

 해당 소스만 다운로드 받아서 실행하고 싶은데

안된다.

전체 소스를 다 받아서 해당 프로젝트만 열어서 실행해 보았다.

안된다. 

그럼 할수 있는건 그냥 새로 만들어서 따라 하기 이다.


신규 프로젝트를 만든다.

Mobile App 를 선택하고 

프로젝트 이름을 XamarinWebview 으로 한다.



기존 소스를 보니 그냥 Tabbed 로 만든것 같다.
그래서 프로젝트 만들때도 그냥 Tabbed 로 만든다.



github 에서 다운로드 받아서 실행한 프로젝트와 신규로 만든 프로젝트가 

뭔가 많이 다르다.

이거 github 에 올린 놈은 개별로 sln 파일 열어서 돌아가는지 확인은 해 봤는지 궁금하다.

일단 그렇다 치고 



신규로 만든 놈을 그냥 빌드해서 실행해 본다.



아무것도 클릭한것 없고 그냥 프로젝트가 만들어지면 위와 같이 나와야 한다.

Window PC 에서 하기 때문에 IOS 는 에뮬이 안되고 Android 는 동작하기 때문에 

에뮬을 Android 로 지정해 놓았기 때문에 위와 같이 나와야 한다. 


일단 run 한다.


에뮬이 위와 같이 나온다. 

Tab 형태로 2개를 할수 있도록 되어 있다.

일단 자동 생성되는 예제이기 때문에 필요없는 부분을 삭제한다. 

폴더 4개를 삭제한다.

Model

Services

ViewModels

Views

Content Page 를 추가한다.


여기에 있는 것 처럼

LocalHtml

LocalHtmlBaseUrl

WebPage

WebAppPage 

이렇게 4개를 만든다.




Add 파일을 해서 Content Page (C#) 을 선택해서 만든다.




추가하는 방법은 

프로젝트를 선택하고 Add를 선택해서 New Item 을 선택한다.



4개의 Content Page 를 추가한 후에 


App.xaml.cs 파일을 수정한다.



4개 폴더를 삭제하면서 MockDataStore 가 없어져 버렸다. 삭제한다.


AppShell.xaml 을 수정하여 tab 을 구성하는데 이건 어떻게 하는건지 아직 몰라서 

여기서 문제가 발생했다.

그래서 AppShell.xaml 파일을 삭제하고 


App.xaml.cs 에 직접 추가하는 방식으로 했다.

결과는



tab 이 아래에 붙지 않고 위에 있는 결과가 나왔다.

이유는 모른다. 어딘가 설정이 맞지 않아서 위에 붙는 것 같다.

tab 으로 시작하는 프로젝트 만들기 부터 해야할 판이다.

아직 Xamarin을 그냥 하기에는 문제가 있어 보인다.

안 쉽다. 그냥 안된다. 

공식 예제 라도 좀 확인하고 올려서 따라하는 사람들이 그냥 돌아가는 것 부터 확인 할수 있으면 좋겠는데 그렇지는 못하다.


일단 이건 그렇다 치고 


원래 확인하기로 한 소스인 

LocalHtml 

LocalHtmlBaseUrl

WebPage

WebAppPage 를 확인해 본다.


LocalHtml 은 


위와 같은 코드이다.

WebView 를 만들고 

Html 을 직접 입력하는 형태로 되어 있다.


LocalHtmlBaseUrl 은 




IBaseUrl 이라는 Interface 를 이용한다.

IBaseUrl 은 Android 와 IOS 에서 Interface 를 구현하는 파일을 추가하여 처리한다.



안드로이드에서는 

BaseUrl_Android.cs 라는 파일을 만들어서 처리한다.




안드로이드의 Asset에 데이터를 넣고 가져와서 사용하기 위해서 만든 인터페이스인것을 확인 할 수 있다.



Assets 에서 

default.css

local.html

XamarinLogo.png 

3개 파일이 있는 것을 확인 할 수 있다.


3개 파일 호출을 위에 있는 LocalHtmlBaseUrl.cs 의 내용에서 호출하는 것을 확인 할 수 있다.


그리고, 신규로 프로젝트를 만들어서 Asset 에 파일을 넣는 방법은 

Control + c , Contorl + v 로는 동작하지 않는다.


==> 가져오고 싶은 파일의 위치에 가서 직접 copy & paste 해야 한다. 

그리고, 프로젝트에서  Add 한다음 Exist File 해서 직접 추가해야 Solution Explorer 에서 확인 할수 있다.


LocalHtml 와 LocalHtmlBaseUrl 의 결과 화면은






이다. 

잘 동작 한다.


WebPage.cs


webview 를 만들고 해당 소스의 http 형태의 링크를 호출하면 끝이다.



webapppage 는 더 내용이 없다.

Label 만들고 Button 만들고 해서 그냥 호출한다는 내용이다.


결과 물은 





이다.

소스는 아래링크에서 참조하기 바란다.

wkyoon/XamarinWebview (github.com)





댓글

이 블로그의 인기 게시물

mount 명령 ( 읽기 권한만 있는놈 쓰기 권한 주기 )

c# mqtt client example

비글본 블랙 고정 아이피 설정