如何在橫向模式下使UI看起來一樣？

Question

我的LinearLayout隨屏幕方向而變化。 在縱向模式下，它看起來很完美：

但在橫向模式下，它看起來像這樣：

如何在兩種模式下修復我的UI看起來相同？

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/border"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imgfourth1"
            android:layout_width="70dp"
            android:layout_height="50dp"
            android:layout_marginRight="25dp"
            android:layout_marginLeft="25dp"
            android:paddingTop="2dp"    
            android:src="@drawable/amlet1" />

        <ImageView
            android:id="@+id/imgfourth2"
            android:layout_width="70dp"
            android:paddingTop="2dp"
            android:layout_height="50dp"  
            android:layout_marginRight="25dp"    
            android:contentDescription="@null"
            android:src="@drawable/lnch1" />

        <ImageView
            android:id="@+id/imgfourth3"
            android:layout_marginRight="25dp"
            android:paddingLeft="20dp"
            android:layout_width="70dp"
            android:layout_height="50dp"
            android:paddingTop="2dp"
            android:contentDescription="@null"   
            android:src="@drawable/supper" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:background="@drawable/border4"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/txtfth1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="2dp"
            android:layout_marginLeft="25dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:gravity="center"
            android:contentDescription="@null"
            android:text="Breakfast" />

        <TextView
            android:id="@+id/txtfth2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="25dp"
            android:paddingLeft="10dp"
            android:gravity="center"
            android:paddingRight="35dp"      
            android:layout_marginTop="2dp"   
            android:contentDescription="@null"
            android:text="Lunch" />

        <TextView
            android:id="@+id/txtfth3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="2dp"
            android:gravity="center"
            android:paddingRight="30dp"
            android:contentDescription="@null"
            android:text="Supper" />
    </LinearLayout>
</LinearLayout>

Answer 1

你有3個LinearLayouts，1個外部和2個內部。 在內部布局上放這個android:layout_gravity="center_horizontal" 。 這應該是兩者的中心。

您認為您的肖像有效的事實也是錯誤的 。 注意右側的空白區域。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/border"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imgfourth1"
            android:layout_width="70dp"
            android:layout_height="50dp"
            android:layout_marginLeft="25dp"
            android:layout_marginRight="25dp"
            android:paddingTop="2dp"
            android:src="@drawable/amlet1" />

        <ImageView
            android:id="@+id/imgfourth2"
            android:layout_width="70dp"
            android:layout_height="50dp"
            android:layout_marginRight="25dp"
            android:contentDescription="@null"
            android:paddingTop="2dp"
            android:src="@drawable/lnch1" />

        <ImageView
            android:id="@+id/imgfourth3"
            android:layout_width="70dp"
            android:layout_height="50dp"
            android:layout_marginRight="25dp"
            android:contentDescription="@null"
            android:paddingLeft="20dp"
            android:paddingTop="2dp"
            android:src="@drawable/supper" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/border4"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/txtfth1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="2dp"
            android:contentDescription="@null"
            android:gravity="center"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:text="Breakfast" />

        <TextView
            android:id="@+id/txtfth2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="2dp"
            android:contentDescription="@null"
            android:gravity="center"
            android:paddingLeft="10dp"
            android:paddingRight="35dp"
            android:text="Lunch" />

        <TextView
            android:id="@+id/txtfth3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="2dp"
            android:contentDescription="@null"
            android:gravity="center"
            android:paddingRight="30dp"
            android:text="Supper" />
    </LinearLayout>

</LinearLayout>

Answer 2

補充taxeeta的答案，只需為你的內部LinearLayout標簽添加android:layout_gravity="center_horizontal" 。

Answer 3

您可以創建兩種不同的布局，一種用於縱向模式，另一種用於橫向模式。 這將解決您的問題。

Keep your
1. portrait mode layout in res/layout folder and
2. landscape mode layout in res/layout-land folder.

Android將根據您的方向采取適當的布局。

*編輯：單一布局* **

如果您想使用單一布局進行縱向和橫向定位，那么以下內容可以為您提供幫助

我使用了android:weightsum和android:layout_weight讓它看起來很合適。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="100">

    <ImageView
        android:id="@+id/imgfourth1"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="33"            
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imgfourth2"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="33" 
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imgfourth3"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="33"  
        android:src="@drawable/ic_launcher" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="20dp"        
    android:orientation="horizontal"
    android:weightSum="100" >

    <TextView
        android:id="@+id/txtfth1"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="33"  
        android:gravity="center_horizontal" 
        android:text="Breakfast" />

    <TextView
        android:id="@+id/txtfth2"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="33"   
        android:gravity="center_horizontal" 
        android:text="Lunch" />

    <TextView
        android:id="@+id/txtfth3"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="33"  
        android:gravity="center_horizontal"  
        android:text="Supper" />
</LinearLayout>

Answer 4

嘗試使用以下行：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:weightSum="3"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imgfourth1"
        android:layout_width="0dip"
        android:layout_height="50dp"
        android:layout_weight="1" 
        android:src="@drawable/amlet1" />

    <ImageView
        android:id="@+id/imgfourth2"
        android:layout_width="0dip"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:src="@drawable/lnch1" />

    <ImageView
        android:id="@+id/imgfourth3"
        android:layout_width="0dip"
        android:layout_height="50dp"
        android:layout_weight="1" 
        android:src="@drawable/supper" />
</LinearLayout>

大多數情況下，你應該認為你填滿了屏幕，然后根據你的需要進行划分，所以它適合在風景，肖像，甚至不同的密度。 而且我還建議你把圖像的高度放到不同密度尺寸的文件夾中，這樣它也可以變化多樣。

Answer 5

簡單地說android：layout-weight =“33”這將為所有三個元素提供33％的空間，並且適合任何方向的任何分辨率