2023-01-22

【Kotlin】以 Mozilla GeckoView 取代 webview

參考資料 ----


Android 內建的 webview 元件在顯示的體驗上不是很好,某些網頁版面的顯示結果就是不像真正的瀏覽器,而 Mozilla Gecko View 是真正的瀏覽器引擎。

GeckoView Maven Repository 尋找您要的版本號;在本筆記,選擇穩定版 100.0.20220425210429


開發工具:Android Studio Chipmunk 2021.2.1 Patch 2


Project 層級 build.gradle
  1.  
  2. buildscript {
  3. ext.kotlin_version = "1.7.10"
  4. repositories {
  5. google()
  6. mavenCentral()
  7. }
  8.  
  9. dependencies {
  10. classpath 'com.android.tools.build:gradle:7.2.2'
  11. classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
  12. }
  13. }
  14.  
  15.  
  16. allprojects {
  17. repositories {
  18. google()
  19. mavenCentral()
  20. }
  21. }
  22.  
  23. task clean(type: Delete) {
  24. delete rootProject.buildDir
  25. }
  26.  


app 層級 build.gradle
  1.  
  2. plugins {
  3. id 'com.android.application'
  4. id 'kotlin-android'
  5. }
  6.  
  7. ext {
  8. geckoviewChannel="arm64-v8a"
  9. geckoviewVersion="100.0.20220425210429"
  10. }
  11.  
  12. ...
  13. ...
  14.  
  15. android {
  16. compileSdkVersion 33
  17. ...
  18. ...
  19. // Note: compileOptions is only required for minSdkVersion < 24
  20. compileOptions {
  21. // sourceCompatibility JavaVersion.VERSION_1_8
  22. // targetCompatibility JavaVersion.VERSION_1_8
  23. sourceCompatibility JavaVersion.VERSION_11 // 若採用這個, compileSdkVersion 要指定 33(含) 以上
  24. targetCompatibility JavaVersion.VERSION_11
  25. }
  26. }
  27.  
  28. ...
  29. ...
  30.  
  31. repositories {
  32. maven {
  33. url "https://maven.mozilla.org/maven2/"
  34. }
  35. }
  36.  
  37. ...
  38. ...
  39.  
  40. dependencies {
  41.  
  42. ...
  43. ...
  44. // mozilla geckoview
  45. implementation "org.mozilla.geckoview:geckoview-${geckoviewChannel}:${geckoviewVersion}"
  46. }
  47.  
  48.  

如果有出現類似

Build was configured to prefer settings repositories over project repositories but repository '???' was added by build file 'build.gradle' 

的錯誤訊息,可能是您的專案套用了 Gradle6.8 的新規定,那就修改 settings.gradle ,將 dependencyResolutionManagement 這個區塊 註解 或 刪除,我是去參照其他舊專案,只留下 2 列,如下:

settings.gradle
  1.  
  2. rootProject.name = "專案名"
  3. include ':app'
  4.  



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


activity_main.xml
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <RelativeLayout
  4. xmlns:android="http://schemas.android.com/apk/res/android"
  5. xmlns:app="http://schemas.android.com/apk/res-auto"
  6. xmlns:tools="http://schemas.android.com/tools"
  7. android:layout_width="match_parent"
  8. android:layout_height="match_parent"
  9. tools:context=".MainActivity" >
  10.  
  11. <org.mozilla.geckoview.GeckoView
  12. xmlns:android="http://schemas.android.com/apk/res/android"
  13. android:id="@+id/geckoview"
  14. android:layout_width="fill_parent"
  15. android:layout_height="fill_parent"
  16. tools:context=".MainActivity" />
  17.  
  18. </RelativeLayout>
  19.  


MainActivity.kt
  1.  
  2. ...
  3. ...
  4.  
  5. import org.mozilla.geckoview.GeckoRuntime;
  6. import org.mozilla.geckoview.GeckoSession;
  7. import org.mozilla.geckoview.GeckoView;
  8.  
  9. class MainActivity : AppCompatActivity() {
  10.  
  11. override fun onCreate(savedInstanceState: Bundle?) {
  12. super.onCreate(savedInstanceState)
  13. setContentView(R.layout.activity_main)
  14.  
  15. var view:GeckoView = findViewById(R.id.geckoview)
  16. val session = GeckoSession()
  17. val runtime = GeckoRuntime.create(this)
  18. session.contentDelegate = object : ContentDelegate {}
  19. if(runtime==null) {
  20. runtime = GeckoRuntime.create(this)
  21. }
  22. session.open(runtime)
  23. view.setSession(session)
  24. session.loadUri("https://tw.yahoo.com")
  25. }
  26. }
  27.  


ZenFon5 跑的反應速度有點慢,且編譯出來的 apk 頗大 -- 139MB !! 不過呈現的畫面的確較 webview 細緻。

沒有留言:

張貼留言