在Android

Question

我想用WebView代替电视＆＃34;电视＆＃34;显示（如下图所示）。我想要＆＃34;电视＆＃34;在平板电脑上始终完全可见（它应该整体上缩放电视）。

我有4帧电视。

顶部和底部框架：

• 不具有相同的高度
• 具有相同的宽度

左右框架：

• 不具有相同的宽度
• 具有相同的高度

电视必须保持宽高比。

我尝试过以下布局，但它只适用于大屏幕，并且不会缩小平板电脑屏幕尺寸。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
    <LinearLayout 
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:minWidth="25px"
        android:minHeight="25px">
        <ImageView
            android:src="@drawable/top"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView1" />
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"            
            android:id="@+id/linearLayout1">
            <ImageView
                android:src="@drawable/left"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imageView3" />
            <android.webkit.WebView
                        android:layout_weight="1"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/webView1" />
            <ImageView
                android:src="@drawable/right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imageView4" />
        </LinearLayout>
        <ImageView
            android:src="@drawable/bottom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView2" />
    </LinearLayout>
</LinearLayout>

Answer 1

好的，所以我用平面层次结构重新创建了你的布局。以此为出发点。唯一没有建模的部分是AspectRatio，你必须处理它。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
    >
    <ImageView
        android:id="@+id/imageview_top"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentTop="true"
        android:background="@android:color/holo_blue_bright"
        />
    <ImageView
        android:id="@+id/imageview_start"
        android:layout_width="50dp"
        android:layout_height="200dp"
        android:layout_alignParentStart="true"
        android:layout_below="@id/imageview_top"
        android:background="@android:color/holo_blue_light"
        />
    <ImageView
        android:id="@+id/imageview_end"
        android:layout_width="50dp"
        android:layout_height="200dp"
        android:layout_alignParentEnd="true"
        android:layout_below="@id/imageview_top"
        android:background="@android:color/holo_blue_light"
        />
    <ImageView
        android:id="@+id/imageview_bottom"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/imageview_start"
        android:background="@android:color/holo_blue_bright"
        />
    <android.webkit.WebView
        android:id="@+id/webview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/imageview_bottom"
        android:layout_below="@id/imageview_top"
        android:layout_toEndOf="@id/imageview_start"
        android:layout_toStartOf="@id/imageview_end"
        android:background="@android:color/darker_gray"
        />
</RelativeLayout>

和AspectRatio？

ConstraintLayout可能对你有所帮助（超过RelativeLayout）。或者你必须将WebView包装在一个自定义的ViewGroup中，它覆盖onLayout / onMeasure并为你带来魔力。

我使用随机DP 硬编码图像高度/宽度但是如果你有图像你可以包装内容（我只是使用背景颜色，所以你需要指定一个尺寸或图像视图将崩溃到0/0。

看起来像这样：