Блог

У меня есть веб-приложение для телевидения (на основе Vue).

Мое приложение оптимизировано для FullHD 1920х1080. Теперь я хочу перенести его на Android TV.

В браузере и на TizenTV это работает и выглядит нормально:

index.html окно просмотра:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 

Теперь я перенес его на AndroidTV с помощью конденсатора JS.
Там, в телевизионном симуляторе, он слишком велик

Я знаю, что setUseWideViewPort для WebView есть метод, который может помочь. Но я не знаю, как я могу добавить этот код в приложение для Android с конденсатором.

Для тестирования я попытался отредактировать activity_main.xml (src/main/res/layout/activity_main.xml) но даже удаление веб-представления внутри этого файла и замена его фиктивной кнопкой ничего не меняет в выводе.

Итак, где я могу изменить код, чтобы мое приложение правильно масштабировалось?

Поэтому, прежде всего, конденсатор игнорирует все, что вы меняете внутри activity_main.xml.

В итоге я написал свое собственное веб-представление.

android/app/src/main/java/tvvuetestapp/com/WebViewClient.java

 package tvvuetestapp.com;

import android.graphics.Bitmap;
import android.net.Uri;
import android.view.View;
import android.webkit.WebResourceRequest;
import android.webkit.WebResourceResponse;
import android.webkit.WebView;

import com.getcapacitor.Bridge;

public class WebViewClient extends android.webkit.WebViewClient {

    private Bridge bridge;

    public WebViewClient(Bridge bridge) {
        this.bridge = bridge;
    }

    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        return bridge.getLocalServer().shouldInterceptRequest(request);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        Uri url = request.getUrl();
        return bridge.launchIntent(url);
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return bridge.launchIntent(Uri.parse(url));
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // This setting is changing the zoom level
        view.loadUrl("javascript:document.body.style.zoom = "  String.valueOf(getScale(view)) ";");

    }

    private double getScale(View view) {
        return (view.getHeight() / (double) view.getWidth());
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        bridge.reset();
    }
}
 

и теперь я могу использовать его внутри MainActivity.java

android/app/src/main/java/tvvuetestapp/com/MainActivity.java

 package tvvuetestapp.com;

import android.webkit.WebSettings;
import android.webkit.WebView;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {

    @Override
    public void onResume() {
        super.onResume();
        WebView webView = getBridge().getWebView();
        webView.setWebViewClient(new WebViewClient(getBridge()));
    }

}