时间戳

首页 > 解决方案 > 如何用旋转的 webview 填充屏幕？

android - 如何用旋转的 webview 填充屏幕？

问题描述

我在https://bugs.chromium.org/p/chromium/issues/detail?id=1144713打开了一个错误报告

当我旋转 webview 时，它不会填满屏幕。

我想旋转 webview，因为 AndroidTV 需要横向模式……但我们要让电视处于纵向设置。

我使用fill_parent && match_parent，但在任何一种情况下都不起作用。

这是 Android Studio 预览的屏幕截图。

还要注意，当我像这样测试它时，似乎 webview 与屏幕尺寸匹配但不适应旋转...它只是旋转 webview 而不会将其调整为新尺寸

旋转的 webview 不填充父级

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:background="@drawable/game_bg"
    android:orientation="vertical"

    tools:context="com.surveyswithgames.app.wheel.KeypadActivity">
    <FrameLayout
        android:id="@+id/frameParent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:layout_marginLeft="2dp"
        android:layout_marginStart="2dp"
        android:layout_marginTop="2dp"
        android:background="@android:color/transparent"
        android:foregroundGravity="center"
        android:keepScreenOn="true">
        <WebView
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/keypadWebView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:rotation="-90"
            />

    </FrameLayout>
</RelativeLayout>

更新： 根据答案https://stackoverflow.com/a/64672893/1815624我使用了自定义 WebView 类，但似乎 setMeasuredDimension 不起作用......


public class CustomWebView extends WebView {

    public CustomWebView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public CustomWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomWebView(Context context) {
        super(context);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int desiredWidth = MeasureSpec.getSize(heightMeasureSpec);//getMeasuredHeight();
        int desiredHeight = MeasureSpec.getSize(widthMeasureSpec);//getMeasuredWidth();
        Log.e("CustomWebView", "desiredWidth: "+ desiredWidth);
        Log.e("CustomWebView", "desiredHeight: "+ desiredHeight);
        setMeasuredDimension(desiredWidth, desiredHeight);
    }
}

更新 2： 我不得不使用答案https://stackoverflow.com/a/64672893/1815624建议的代码和布局，然后它起作用了......干杯

标签： androidwebviewandroid-xml

解决方案

您遇到的问题是旋转发生在布局后。这意味着测量发生在横向模式（宽度>高度）然后视图旋转但新宽度是旧高度，新高度是旧宽度。这就是您所看到的，这不是错误。

解决此问题的一种方法是创建一个自定义视图，该视图交换宽度和高度并在原点 -90 度处旋转，然后将整个视图向下平移所需的高度。

这是自定义视图的代码：

RotatedWebView.kt

class RotatedWebView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : WebView(context, attrs, defStyleAttr) {

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val desiredWidth = MeasureSpec.getSize(heightMeasureSpec)
        val desiredHeight = MeasureSpec.getSize(widthMeasureSpec)
        translationY = desiredWidth.toFloat()
        setMeasuredDimension(desiredWidth, desiredHeight)
    }
}

RotatedWebView.java

public class RotatedWebView extends WebView {
    public RotatedWebView(Context context) {
        super(context);
    }

    public RotatedWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public RotatedWebView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int desiredWidth = MeasureSpec.getSize(heightMeasureSpec);
        int desiredHeight = MeasureSpec.getSize(widthMeasureSpec);
        setTranslationY(desiredWidth);
        setMeasuredDimension(desiredWidth, desiredHeight);
    }
}

布局将如下所示：

activity_main.xml

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/frameParent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center"
        android:layout_marginStart="2dp"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="2dp"
        android:background="@android:color/transparent"
        android:foregroundGravity="center"
        android:keepScreenOn="true">

        <com.example.webviewrotation.RotatedWebView
            android:id="@+id/keypadWebView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:rotation="-90"
            android:transformPivotX="0dp"
            android:transformPivotY="0dp" />

    </FrameLayout>
</RelativeLayout>

这是在模拟器中看到的结果：

在此处输入图像描述

将所有视图操作放入自定义视图中可能会更好，而不是在代码和 XML 之间拆分它。我假设您将物理旋转电视，以便网页按您的意愿显示。

推荐阅读