Scaling LinearLayout в Android

Question

Я хочу разместить WebView вместо экрана «телевидение» (как показано на рисунке ниже). Я хочу, чтобы «телевизор» всегда был полностью виден на планшете (он должен масштабировать телевизор в целом).

У меня есть 4 кадра телевизора.

Верхняя и нижняя рама:

• не имеют одинаковую высоту
• имеют одинаковую ширину

левый и правый кадр:

• дону 't имеют одинаковую ширину
• имеет одинаковую высоту

Телевидение должно иметь соотношение ширины/высоту.

Я попытался следующий макет, но он работает только на большом экране и не масштабируется все на меньших размерах экрана планшета.

<?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 и делает магию для вас.

У меня есть hardcoded высота/ширина изображений со случайными DP, но вы можете обернуть контент, если у вас есть изображения (я просто использовал цвет фона, поэтому вам нужно указать размер или изображение будет свернуть до 0/0 .

это выглядит следующим образом: