縮放的LinearLayout在Android的

Question

我想將代替「電視臺的」顯示的web視圖（如下面圖片中看到）。我想「電視」是始終在平板電腦上完全可見（它應該縮放電視作爲一個整體）。

我有電視的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和做魔術給你。

我硬編碼圖像高度/隨機移民的寬度，但這樣你就需要指定一個大小或圖像視圖會崩潰到0/0，你可以換，如果你有圖片（我只用背景色內容。

它看起來像這樣：