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

Question

我在 https://bugs.chromium.org/p/chromium/issues/detail?id=1144713

打开了一个错误报告

当我旋转 webview 时它没有填满屏幕。

我想旋转网络视图，因为 Android电视需要横向模式...但我们要让电视处于纵向设置。

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

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

还要注意，当我这样测试它时，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>

更新： 根据答案，我使用了自定义 WebView class，但 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： 我不得不使用答案建议的代码和布局然后它起作用了...干杯

Answer 1

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

解决此问题的一种方法是创建一个自定义视图，该视图交换宽度和高度并在原点 -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 之间拆分它。我假设您会实际旋转电视，以便网页按您的需要显示。

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

How to fill screen with rotated webview?

android

webview

android-xml